/**
 * Stile condiviso dell'Area Riservata (tutte le pagine di modulo).
 * Coerente con lo standard grafico approvato in contabilita.md §3 e con
 * i mockup di Configurazione/Contabilità già approvati.
 *
 * Nota di portabilità: i colori del banner (#0f4124/#F2B84A) sono quelli
 * del brand pubblico del sito e restano fissi per questa installazione.
 * L'accent color dei bottoni primari (--ga-accent) invece è configurabile:
 * il valore qui sotto è solo il fallback usato se conta_impostazioni non
 * fosse raggiungibile — il valore reale viene iniettato da
 * gestionale_render_header() con uno <style> inline che sovrascrive
 * questa variabile (vedi includes/header-app.php).
 *
 * @version 1.4.3
 *
 * Changelog:
 * - 1.1.0: aggiunta la sezione mobile (.ga-m-*) per header-mobile.php /
 *   footer-mobile.php.
 * - 1.2.0: .ga-field ora copre anche input[type="password"] — mancava
 *   (coprendo solo text/email/date/select), scoperto costruendo
 *   includes/password-app.php: il campo password vi appariva con lo
 *   stile grezzo del browser invece che coerente col resto dei form.
 * - 1.3.0: aggiunto .ga-m-menu-panel per il menù ☰ dell'header mobile
 *   (includes/header-mobile.php v1.1.0), sostituto della vecchia freccia
 *   "‹" a destinazione fissa.
 * - 1.4.0: aggiunto .ga-m-select-* per il pannello a tendina
 *   personalizzato che sostituisce (via JavaScript, miglioramento
 *   progressivo) il popup nativo dei <select> Tipo e Categoria in
 *   prima-nota-mobile.php — il popup nativo non è personalizzabile via
 *   CSS su mobile, limite della piattaforma.
 * - 1.4.1: .ga-m-menu-panel ridotto da larghezza piena (left:0; right:0)
 *   a una larghezza fissa (200px) allineata a destra, sotto il trigger
 *   ☰ (anch'esso ora a destra, header-mobile.php v1.1.1) — i tre link
 *   del menù hanno testi corti, non serviva tutta la larghezza dello
 *   schermo.
 * - 1.4.2: .ga-m-field ora copre anche input[type="password"] — mancava
 *   (coprendo solo number/text), stesso bug già corretto sul desktop in
 *   1.2.0 ma mai riportato sul mobile: il campo password di
 *   includes/password-mobile.php è sempre stato senza stile (nessuna
 *   larghezza piena, nessun bordo), scoperto aggiungendo il pulsante
 *   "mostra password" a quel form.
 * - 1.4.3: aggiunta .ga-m-select-optgroup-label — il pannello
 *   personalizzato che sostituisce il popup nativo dei <select> (già in
 *   uso su prima-nota-mobile.php) non aveva mai dovuto gestire un
 *   <select> con <optgroup> prima d'ora: usato per la prima volta su
 *   contabilita/preventivo-mobile.php v1.3.4 (Categoria, raggruppata
 *   Entrate/Uscite come sul desktop), la mancanza di questo stile
 *   perdeva quella distinzione, mostrando un elenco piatto.
 */

:root {
	--ga-accent: #0f4124; /* fallback, sovrascritto a runtime dal valore reale in conta_impostazioni.accent_color */
	--ga-bg: #f6f5f2;
	--ga-surface: #ffffff;
	--ga-surface-alt: #f0efe9;
	--ga-border: #ddd8cc;
	--ga-text: #1f1f1f;
	--ga-text-secondary: #5a5a52;
	--ga-text-muted: #8a8a80;
	--ga-radius: 6px;
	--ga-success-bg: #e6f4ea;
	--ga-success-text: #1e7a34;
	--ga-danger-bg: #fbe9e7;
	--ga-danger-text: #b3261e;
	--ga-warning-bg: #fdf1dc;
	--ga-warning-text: #9a6a00;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: Arial, sans-serif;
	color: var(--ga-text);
	background: var(--ga-bg);
	font-size: 14px;
}

/* Header di brand */

.ga-header {
	background: #0f4124;
	border-bottom: 3px solid #F2B84A;
	padding: 0 20px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ga-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
}

.ga-header__logo-img {
	display: block;
	height: 100%;
	width: auto;
	object-fit: contain;
}

.ga-header__title {
	color: #F2B84A;
	font-size: 15px;
	font-weight: 500;
}

.ga-header__back {
	color: #f1ead9;
	font-size: 12px;
	text-decoration: none;
}

.ga-header__back:hover {
	text-decoration: underline;
}

/* Breadcrumb */

.ga-breadcrumb {
	padding: 8px 20px;
	border-bottom: 1px solid var(--ga-border);
	font-size: 12px;
	color: var(--ga-text-muted);
	background: var(--ga-surface);
}

.ga-breadcrumb__item.is-current {
	color: var(--ga-text);
}

.ga-breadcrumb__sep {
	margin: 0 6px;
}

/* Layout a due colonne */

.ga-layout {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	min-height: calc(100vh - 90px);
}

.ga-sidebar {
	background: var(--ga-surface-alt);
	border-right: 1px solid var(--ga-border);
	padding: 16px 0;
	font-size: 13px;
}

.ga-sidebar__group {
	padding: 10px 16px 4px;
	color: var(--ga-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ga-sidebar__item {
	display: block;
	padding: 8px 16px;
	color: var(--ga-text-secondary);
	text-decoration: none;
}

.ga-sidebar__item:hover {
	background: var(--ga-surface);
}

.ga-sidebar__item.is-active {
	background: var(--ga-surface);
	color: var(--ga-text);
	font-weight: 500;
	border-right: 2px solid var(--ga-accent);
}

.ga-content {
	padding: 24px 28px;
	background: var(--ga-surface);
}

/* Intestazione di pagina (titolo + sottotitolo a sinistra, azione a destra) */

.ga-page-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 20px;
}

.ga-page-head h1 {
	margin: 0 0 4px;
	font-size: 20px;
}

.ga-page-head p {
	margin: 0;
	font-size: 13px;
	color: var(--ga-text-secondary);
}

/* Bottoni */

.ga-btn {
	font-family: inherit;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: var(--ga-radius);
	border: 1px solid var(--ga-border);
	background: var(--ga-surface);
	color: var(--ga-text);
	cursor: pointer;
}

.ga-btn--primary {
	border-color: var(--ga-accent);
	color: var(--ga-accent);
	background: var(--ga-surface);
}

.ga-btn:disabled {
	color: var(--ga-text-muted);
	border-color: var(--ga-border);
	cursor: not-allowed;
}

/* Form */

.ga-field {
	margin-bottom: 14px;
}

.ga-field label {
	display: block;
	font-size: 12px;
	color: var(--ga-text-secondary);
	margin-bottom: 4px;
}

.ga-field input[type="text"],
.ga-field input[type="email"],
.ga-field input[type="date"],
.ga-field input[type="password"],
.ga-field select {
	width: 100%;
	font-size: 14px;
	padding: 7px 10px;
	border: 1px solid var(--ga-border);
	border-radius: var(--ga-radius);
	font-family: inherit;
}

.ga-field-note {
	margin: 4px 0 0;
	font-size: 11px;
	color: var(--ga-text-muted);
}

.ga-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
	max-width: 720px;
}

.ga-form-grid .ga-field--full {
	grid-column: 1 / -1;
}

/* Messaggi di stato (esito salvataggio) */

.ga-notice {
	padding: 10px 14px;
	border-radius: var(--ga-radius);
	font-size: 13px;
	margin-bottom: 18px;
}

.ga-notice--success {
	background: var(--ga-success-bg);
	color: var(--ga-success-text);
}

.ga-notice--error {
	background: var(--ga-danger-bg);
	color: var(--ga-danger-text);
}

/* Badge di stato semantici */

.ga-badge {
	display: inline-block;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: var(--ga-radius);
}

.ga-badge--success {
	background: var(--ga-success-bg);
	color: var(--ga-success-text);
}

.ga-badge--warning {
	background: var(--ga-warning-bg);
	color: var(--ga-warning-text);
}

.ga-badge--danger {
	background: var(--ga-danger-bg);
	color: var(--ga-danger-text);
}

.ga-badge--neutral {
	background: var(--ga-surface-alt);
	color: var(--ga-text-secondary);
}

/* Icone di azione nelle righe di tabella (Modifica/Elimina) */

.ga-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--ga-radius);
	color: var(--ga-text-secondary);
	text-decoration: none;
	vertical-align: middle;
}

.ga-icon-btn:hover {
	background: var(--ga-surface-alt);
}

.ga-icon-btn--danger {
	color: var(--ga-danger-text);
}

/* =======================================================================
 * Shell e componenti MOBILE (includes/header-mobile.php,
 * includes/footer-mobile.php) — pagine pensate per l'uso da smartphone,
 * senza sidebar/breadcrumb, con target di tocco larghi e azione
 * principale sempre ancorata in basso per il pollice. Introdotta in
 * v1.1.0 (vedi changelog in cima al file).
 * ======================================================================= */

.ga-m-body {
	margin: 0;
	background: var(--ga-bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.ga-m-header {
	background: #0f4124;
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 10;
}

.ga-m-header__logo-img {
	height: 40px;
	width: auto;
	flex-shrink: 0;
}

.ga-m-header__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	flex: 1;
}

.ga-m-header__title em {
	display: block;
	font-style: italic;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.02em;
	opacity: 0.85;
	margin-bottom: 1px;
}

.ga-m-header__back {
	color: #F2B84A;
	text-decoration: none;
	font-size: 22px;
	padding: 4px 6px;
	line-height: 1;
}

/* Pannello del menù ☰ (includes/header-mobile.php v1.1.0): nascosto di
 * default, mostrato dalla checkbox #ga-m-menu-toggle tramite il
 * selettore :checked ~ qui sotto — stessa tecnica CSS-only già in uso
 * per i filtri di prima-nota-mobile.php e i chip di pagamento.
 * .ga-m-header è già "position: sticky" (vedi sopra), che stabilisce un
 * contenitore di posizionamento valido anche per figli "position:
 * absolute" come questo, senza bisogno di aggiungere altro. */
.ga-m-menu-panel {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	width: 200px;
	background: var(--ga-surface);
	border: 1px solid var(--ga-border);
	border-radius: var(--ga-radius);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
	z-index: 20;
}

.ga-m-menu-panel a {
	display: block;
	padding: 14px 16px;
	color: var(--ga-text);
	text-decoration: none;
	font-size: 14px;
	border-bottom: 1px solid var(--ga-border);
}

.ga-m-menu-panel a:last-child {
	border-bottom: none;
}

#ga-m-menu-toggle:checked ~ .ga-m-menu-panel {
	display: block;
}

/* Select personalizzati (usati oggi in prima-nota-mobile.php per Tipo e
 * Categoria): il popup nativo di un <select> non è personalizzabile via
 * CSS sui browser mobile — limite della piattaforma, non uno stile
 * mancante — quindi qui un pannello a tendina personalizzato lo
 * sostituisce. Miglioramento PROGRESSIVO: il <select> nativo resta nel
 * markup e funziona sempre; solo il JavaScript della pagina (una volta
 * partito) aggiunge la classe ga-m-select-enhanced che lo nasconde e
 * mostra il pannello al suo posto — se lo script non dovesse partire
 * per qualunque motivo, resta visibile e funzionante il select nativo,
 * mai un campo rotto. */
.ga-m-select-wrap {
	position: relative;
}

.ga-m-select-wrap.ga-m-select-enhanced select {
	display: none;
}

.ga-m-select-trigger {
	display: none;
	width: 100%;
	text-align: left;
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid var(--ga-border);
	border-radius: var(--ga-radius);
	background: var(--ga-surface);
	color: var(--ga-text);
	font-family: inherit;
}

.ga-m-select-wrap.ga-m-select-enhanced .ga-m-select-trigger {
	display: block;
}

.ga-m-select-trigger::after {
	content: "▾";
	float: right;
	color: var(--ga-text-muted);
}

.ga-m-select-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	max-height: 260px;
	overflow-y: auto;
	background: var(--ga-surface);
	border: 1px solid var(--ga-border);
	border-radius: var(--ga-radius);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
	z-index: 15;
}

.ga-m-select-panel.is-open {
	display: block;
}

.ga-m-select-option {
	padding: 12px 14px;
	font-size: 14px;
	border-bottom: 1px solid var(--ga-border);
	cursor: pointer;
}

.ga-m-select-option:last-child {
	border-bottom: none;
}

.ga-m-select-option.is-selected {
	background: var(--ga-surface-alt);
	font-weight: 600;
	color: var(--ga-accent);
}

.ga-m-select-optgroup-label {
	padding: 8px 14px 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ga-text-muted);
	text-transform: uppercase;
	background: var(--ga-surface-alt);
}

.ga-m-content {
	flex: 1;
	padding: 20px 16px 100px;
}

.ga-m-content h1 {
	font-size: 19px;
	margin: 0 0 4px;
}

.ga-m-content .ga-m-subtitle {
	font-size: 13px;
	color: var(--ga-text-secondary);
	margin: 0 0 20px;
}

.ga-m-field {
	margin-bottom: 18px;
}

.ga-m-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ga-text-secondary);
	margin-bottom: 6px;
}

.ga-m-field textarea,
.ga-m-field input[type="number"],
.ga-m-field input[type="password"],
.ga-m-field input[type="text"] {
	width: 100%;
	font-size: 16px; /* >=16px: evita lo zoom automatico di iOS Safari sul focus */
	padding: 12px 14px;
	border: 1px solid var(--ga-border);
	border-radius: var(--ga-radius);
	font-family: inherit;
}

.ga-m-field-note {
	font-size: 12px;
	color: var(--ga-text-muted);
	margin: 6px 0 0;
}

.ga-m-camera-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 180px;
	border: 2px dashed var(--ga-border);
	border-radius: var(--ga-radius);
	background: var(--ga-surface);
	color: var(--ga-text-secondary);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 18px;
}

.ga-m-camera-btn .ga-m-camera-btn__icon {
	font-size: 40px;
}

/* Nasconde l'input file mantenendolo a PIENA DIMENSIONE, sovrapposto
 * esattamente al pulsante visibile (non compresso a 1px come nel
 * classico pattern "sr-only" da accessibilità): alcuni browser Android
 * rifiutano di attivare un input file reso troppo piccolo o "clippato",
 * probabilmente come misura contro il clickjacking sui caricamenti file
 * — il tocco sul pulsante visibile non arrivava mai davvero all'input.
 * Con l'input a piena dimensione, ogni tocco sul pulsante è un tocco
 * diretto e genuino sull'input reale. opacity:0 (non display:none)
 * per le stesse ragioni di prima: il messaggio di validazione nativo
 * del browser continua a funzionare. */
.ga-m-file-input-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.ga-m-thumb {
	width: 100%;
	border-radius: var(--ga-radius);
	border: 1px solid var(--ga-border);
	margin-bottom: 18px;
	display: block;
	max-height: 260px;
	object-fit: cover;
	background: var(--ga-surface-alt);
}

.ga-m-chip-group {
	display: flex;
	gap: 10px;
}

.ga-m-chip {
	flex: 1;
	text-align: center;
	padding: 12px;
	border-radius: var(--ga-radius);
	border: 1px solid var(--ga-border);
	background: var(--ga-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--ga-text-secondary);
	cursor: pointer;
}

.ga-m-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Evidenzia il chip il cui radio interno è selezionato, seguendo lo
 * stato reale nel browser — nessuna classe statica scritta dal server:
 * un meccanismo del genere, se non rimosso via JS al cambio selezione,
 * resterebbe "appiccicato" alla vecchia scelta anche dopo che l'utente
 * ne seleziona un'altra (bug reale, corretto rimuovendo la classe
 * .is-selected in favore di questa sola regola). */
.ga-m-chip:has(input:checked) {
	border-color: var(--ga-accent);
	color: var(--ga-accent);
	background: var(--ga-success-bg);
}

.ga-m-notice {
	padding: 12px 14px;
	border-radius: var(--ga-radius);
	font-size: 13px;
	margin-bottom: 18px;
}

.ga-m-notice--info {
	background: var(--ga-surface-alt);
	color: var(--ga-text-secondary);
}

.ga-m-notice--warning {
	background: var(--ga-warning-bg);
	color: var(--ga-warning-text);
}

.ga-m-notice--success {
	background: var(--ga-success-bg);
	color: var(--ga-success-text);
}

.ga-m-notice--error {
	background: var(--ga-danger-bg);
	color: var(--ga-danger-text);
}

.ga-m-action-bar {
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--ga-surface);
	border-top: 1px solid var(--ga-border);
	padding: 14px 16px;
	display: flex;
	gap: 10px;
}

.ga-m-btn {
	flex: 1;
	padding: 15px;
	border-radius: var(--ga-radius);
	border: 1px solid var(--ga-border);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	background: var(--ga-surface);
	color: var(--ga-text);
	font-family: inherit;
}

.ga-m-btn--primary {
	background: var(--ga-accent);
	border-color: var(--ga-accent);
	color: #fff;
}

.ga-m-btn--secondary {
	flex: 0 0 92px;
	background: var(--ga-surface-alt);
	color: var(--ga-text-secondary);
}

.ga-m-btn:disabled {
	background: #ccc;
	border-color: #ccc;
	color: #888;
	cursor: not-allowed;
}