/*
 * smartfood-theme.css
 * ------------------------------------------------------------------
 * Fondamenta del design system SMART FOOD (Interreg VI-A Italia-Malta,
 * Obiettivo Strategico 1). Caricato per ultimo in Config/CSSJS.php cosi'
 * puo' sovrascrivere via ordine di sorgente le regole del tema admin
 * legacy, senza bisogno di !important sparsi.
 *
 * Contenuto di questa prima passata:
 *   - variabili di palette OS1 (fisse, invariabili da manuale)
 *   - @font-face self-hosted Montserrat / Open Sans (SIL OFL, file in assets/fonts)
 *   - wordmark testuale "SMART FOOD" (sostituisce il logo raster in header/login)
 *   - componente "blocco istituzionale" (barra loghi ufficiali, altezza uniforme)
 *
 * Non sono ancora incluse in questa passata: la ricolorazione di sidebar,
 * bottoni e tabelle del gestionale (fase successiva "component library").
 */

/* ---------- Palette OS1 (Manuale d'immagine coordinata) ---------- */
:root{
	--sf-primary:      #18BAA8; /* colore principale OS1 */
	--sf-primary-hover:#087F76; /* hover / elementi scuri */
	--sf-primary-dark: #075D58; /* fondi istituzionali */
	--sf-tint:         #DDF5F2; /* fondi evidenziati */
	--sf-bg:           #F3FAF9; /* sfondo generale */
	--sf-eu:           #003399; /* riferimenti istituzionali europei */
	--sf-text:         #172524; /* testi */
	--sf-border:       #D9E4E2; /* bordi e separatori */
	--sf-card:         #FFFFFF; /* card e aree di lettura */

	--sf-font-title: 'Montserrat', sans-serif;
	--sf-font-body:  'Open Sans', sans-serif;
}

/* ---------- Font self-hosted (SIL OFL, vedi assets/fonts/LICENSE-*) ---------- */
@font-face{
	font-family:'Montserrat';
	font-style:normal;
	font-weight:600;
	font-display:swap;
	src:url('../fonts/montserrat-600.woff2') format('woff2');
}
@font-face{
	font-family:'Montserrat';
	font-style:normal;
	font-weight:700;
	font-display:swap;
	src:url('../fonts/montserrat-700.woff2') format('woff2');
}
@font-face{
	font-family:'Montserrat';
	font-style:normal;
	font-weight:800;
	font-display:swap;
	src:url('../fonts/montserrat-800.woff2') format('woff2');
}
@font-face{
	font-family:'Open Sans';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url('../fonts/opensans-400.woff2') format('woff2');
}
@font-face{
	font-family:'Open Sans';
	font-style:normal;
	font-weight:600;
	font-display:swap;
	src:url('../fonts/opensans-600.woff2') format('woff2');
}
@font-face{
	font-family:'Open Sans';
	font-style:normal;
	font-weight:700;
	font-display:swap;
	src:url('../fonts/opensans-700.woff2') format('woff2');
}

/* ---------- Wordmark testuale "SMART FOOD" ---------- */
/* Sostituisce il logo raster: usato in header.php e login.php.
   Colore verificato sul file ufficiale fornito (#18BAA8, match esatto OS1). */
.sf-wordmark{
	font-family:var(--sf-font-title);
	font-weight:800;
	color:var(--sf-primary);
	letter-spacing:.01em;
	text-transform:uppercase;
	line-height:1;
	white-space:nowrap;
}
a.sf-header-brand{
	display:flex;
	align-items:center;
	height:100%;
	text-decoration:none;
}
.sf-inst-wordmark{ font-size:16px; }

/* ---------- Blocco istituzionale ----------
   I loghi sono i file ufficiali forniti dal Programma: nessun elemento
   viene ricostruito, modificato o separato. Vengono solo disposti in riga
   (o in colonna su mobile) e resi tutti alla STESSA ALTEZZA, cosi' l'emblema
   UE non risulta mai piu' piccolo degli altri, come richiesto dal Manuale. */
.sf-inst-bar{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:28px;
	background:#ffffff;
	border-top:1px solid var(--sf-border);
	padding:16px 24px;
}
.sf-inst-bar .sf-inst-logo{
	height:70px;
	width:auto;
	display:block;
}
.sf-inst-bar.sf-inst-bar--compact{
	border-top:none;
	border-bottom:1px solid var(--sf-border);
	padding:10px 24px;
	gap:20px;
	justify-content:center;
}
.sf-inst-bar.sf-inst-bar--compact .sf-inst-logo{ height:26px; }
.sf-inst-bar .sf-inst-wordmark{ margin-left:auto; }

/* Variante "login": loghi centrati, nessun elemento a destra */
.sf-inst-bar--login{
	justify-content:center;
}

/* Riga di testo sotto i loghi (solo variante "login"), riferimento al
   programma in forma testuale visto che qui il logo Interreg non c'e' */
.sf-inst-caption{
	text-align:center;
	font-family:var(--sf-font-body);
	font-size:12.5px;
	color:var(--sf-primary-dark);
	background:#ffffff;
	padding:2px 24px 18px;
}

@media (max-width:720px){
	.sf-inst-bar{
		flex-direction:column;
		align-items:flex-start;
		gap:16px;
		padding:16px 20px;
	}
	.sf-inst-bar .sf-inst-wordmark{ margin-left:0; margin-top:4px; }
	.sf-inst-bar.sf-inst-bar--compact{
		align-items:center;
		flex-direction:row;
		justify-content:center;
	}
}

/* ---------- Barra "page-footer" (copyright, subito sotto il blocco istituzionale) ----------
   Era un blu navy generico (#041424) con testo grigio-azzurro (#98a6ba), scollegato
   dalla palette. Qui diventa il fondo istituzionale del manuale (--sf-primary-dark,
   contrasto testo bianco verificato ~7.7:1) e contiene il riferimento al programma. */
.page-footer{
	background-color:var(--sf-primary-dark) !important;
}
.page-footer .page-footer-inner{
	color:#ffffff;
}

/* ---------- Base tipografica (leggero, non toccare colori dashboard) ---------- */
body{
	font-family:var(--sf-font-body);
}
h1, h2, h3, h4, h5, h6{
	font-family:var(--sf-font-title);
}

/* ==================================================================
   Conversione tema scuro -> chiaro
   ------------------------------------------------------------------
   Ogni sfondo #0d2844 del tema legacy (box logo header, sidebar
   "dark-sidebar-color", card di login) diventa bianco/chiaro. I testi,
   le icone e i bordi che erano pensati per stare su quello sfondo scuro
   (bianchi o grigio chiaro) vengono girati a "quasi nero" (var(--sf-text))
   o a un tocco di brand dove ha senso (focus, stato attivo), altrimenti
   sarebbero invisibili su sfondo chiaro. Regole qui sotto, non nei file
   legacy, cosi' restano un blocco unico da rivedere/rimuovere insieme.
   ================================================================== */

/* --- Box logo header (era il riquadro scuro in alto a sinistra) --- */
.logo-dark .page-header.navbar .page-logo{
	background:#ffffff !important;
	border-right:1px solid var(--sf-border);
}

/* --- Sidebar --- */
.dark-sidebar-color .sidemenu-container{
	background:#ffffff !important;
	border-right:1px solid var(--sf-border);
}
.dark-sidebar-color .page-container{
	background-color:var(--sf-bg);
}
/* --- .page-content aveva un grigio-azzurro (#eaeef3) scollegato dalla
   palette: coerente con .page-container, stesso sfondo generale --- */
.page-content{
	background-color:var(--sf-bg);
}
/* --- Stessa cosa per .page-bar (barra breadcrumb/toolbar sopra il contenuto):
   stesso grigio-azzurro #eaeef3, qui tolto del tutto per fondersi con lo sfondo --- */
.page-container-bg-solid .page-bar,
.page-content-white .page-bar{
	background-color:transparent;
}
.dark-sidebar-color .sidemenu-container .sidemenu>li>a,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li>a{
	color:var(--sf-text);
}
.dark-sidebar-color .sidemenu-container .sidemenu>li.active.open>a,
.dark-sidebar-color .sidemenu-container .sidemenu>li.active>a,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li.active.open>a,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li.active>a{
	background-color:var(--sf-tint) !important;
	color:var(--sf-text);
}
.dark-sidebar-color .sidemenu-container .sidemenu>li.open>a,
.dark-sidebar-color .sidemenu-container .sidemenu>li:hover>a,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li.open>a,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li:hover>a{
	background-color:var(--sf-bg) !important;
	color:var(--sf-text);
}
.dark-sidebar-color .sidemenu-container .sidemenu>li.active.open>a>.arrow.open:before,
.dark-sidebar-color .sidemenu-container .sidemenu>li.active.open>a>.arrow:before,
.dark-sidebar-color .sidemenu-container .sidemenu>li.active.open>a>i,
.dark-sidebar-color .sidemenu-container .sidemenu>li.active>a>.arrow.open:before,
.dark-sidebar-color .sidemenu-container .sidemenu>li.active>a>.arrow:before,
.dark-sidebar-color .sidemenu-container .sidemenu>li.active>a>i,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li.active.open>a>.arrow.open:before,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li.active.open>a>.arrow:before,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li.active.open>a>i,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li.active>a>.arrow.open:before,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li.active>a>.arrow:before,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu>li.active>a>i{
	color:var(--sf-text) !important;
}
.dark-sidebar-color .sidemenu-hover-submenu li:hover a>.arrow{
	border-right:8px solid var(--sf-text);
}
.dark-sidebar-color .sidemenu-container .sidemenu .sub-menu,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu .sub-menu{
	background-color:#ffffff !important;
}
.dark-sidebar-color .sidemenu-container .sidemenu .sub-menu>li>a,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu .sub-menu>li>a{
	color:var(--sf-text);
}
.dark-sidebar-color .sidemenu-container .sidemenu .sub-menu>li.active>a,
.dark-sidebar-color .sidemenu-container .sidemenu .sub-menu>li.open>a,
.dark-sidebar-color .sidemenu-container .sidemenu .sub-menu>li:hover>a,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu .sub-menu>li.active>a,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu .sub-menu>li.open>a,
.dark-sidebar-color .sidemenu-closed.sidemenu-container-fixed .sidemenu-container:hover .sidemenu .sub-menu>li:hover>a,
.dark-sidebar-color .sidemenu-container .sidemenu .sub-menu>li:hover>a>i{
	color:var(--sf-text) !important;
}
.dark-sidebar-color .user-panel,
.dark-sidebar-color .txtOnline{
	color:#5c6a68;
}

/* --- Card di login/registrazione (.wrap-login100, era il gradiente scuro) --- */
.wrap-login100{
	background:#ffffff !important;
	border:1px solid var(--sf-border);
	box-shadow:0 1px 3px rgba(23,37,36,.06);
}
.login100-form-title{
	color:var(--sf-text);
}
.wrap-input100{
	border-bottom:2px solid var(--sf-border);
}
.input100{
	color:var(--sf-text);
}
.focus-input100::after{
	color:#5c6a68;
}
.focus-input100::before{
	background:var(--sf-primary);
}
.label-checkbox100{
	color:var(--sf-text);
}

/* --- Pagina di autenticazione (login.php, body.sf-auth-page): extra_pages.css
   da' a .container-login100 min-height:100vh, e la barra istituzionale del
   footer viene dopo come elemento a se' stante: il totale supera sempre
   l'altezza dello schermo e costringe allo scroll per vedere i loghi.
   Qui la pagina diventa una colonna flessibile alta esattamente 100vh, con
   il box di login che si adatta allo spazio restante invece di occupare
   sempre 100vh per conto suo: cosi' loghi istituzionali e box di login
   stanno entrambi nella viewport, senza scroll, sugli schermi comuni. --- */
.sf-auth-page{
	display:flex;
	flex-direction:column;
	min-height:100vh;
}
.sf-auth-page .container-login100{
	min-height:0;
	flex:1 1 auto;
	padding:24px 15px;
}
.sf-auth-page .sf-inst-bar,
.sf-auth-page .sf-inst-caption{
	flex-shrink:0;
}

/* --- Placeholder dei campi (.input100): extra_pages.css li mette bianchi
   (pensati per il vecchio sfondo scuro), ora invisibili su input chiaro --- */
.input100::-webkit-input-placeholder{ color:#5c6a68; }
.input100:-moz-placeholder{ color:#5c6a68; }
.input100::-moz-placeholder{ color:#5c6a68; }
.input100:-ms-input-placeholder{ color:#5c6a68; }
.input100::placeholder{ color:#5c6a68; }

/* --- Bottone "Accedi/Registrati" (era gradiente viola #9152f8/#7579ff/#b224ef) ---
   Il markup usa un ::before che copre il bottone e sfuma in hover: lo stato
   "a riposo" e' il colore mostrato dal ::before (opacita' 1 di default),
   lo stato hover e' il background del bottone stesso, che si rivela quando
   il ::before sfuma a opacita' 0. Entrambi testo bianco; le coppie di colore
   sono state verificate per contrasto AA (var(--sf-primary) puro da solo NON
   basta con testo bianco — circa 2.4:1 — per questo qui si usano
   primary-hover/primary-dark, che superano 4.5:1). */
.login100-form-btn{
	background:var(--sf-primary-dark);
	color:#fff;
}
.login100-form-btn::before{
	background-color:var(--sf-primary-hover);
}
.login100-form-btn:hover{
	color:#fff;
}

/* --- Pagina di errore (error.php): .content-404 / .form404-title / .txt-locked
   erano pensate bianche su sfondo scuro, ora la card e' bianca --- */
.content-404,
.form404-title,
.txt-locked{
	color:var(--sf-text);
}

/* --- Link dentro le card di login/registrazione/errore: extra_pages.css mette
   un generico a:hover{color:#fff}, invisibile su sfondo bianco. Scoperto solo
   a .container-login100 per non toccare i link del resto della piattaforma
   (extra_pages.css non e' comunque caricato altrove). --- */
.container-login100 a:hover{
	color:var(--sf-primary-hover);
}

/* ==================================================================
   Component library (fase 2) — pulsanti, badge, card, tabelle
   ------------------------------------------------------------------
   Applica i token del moodboard (smartfood-moodboard.html) ai componenti
   Bootstrap/gestionale usati in tutta la piattaforma, cosi' la dashboard
   segue la stessa linea grafica delle pagine pubbliche gia' rifatte.
   Le regole del tema legacy su .btn-primary/.badge-primary/.label-primary
   usano gia' !important: qui serve altrettanto !important per vincere,
   l'ordine di sorgente (questo file e' l'ultimo) fa il resto.
   ================================================================== */
:root{
	--sf-radius:    12px;
	--sf-radius-sm: 8px;
	--sf-shadow-card: 0 1px 2px rgba(23,37,36,.06);
}

/* Bottoni primari (dashboard, moduli, azioni) */
.btn-primary{
	background-color:var(--sf-primary) !important;
	border-color:var(--sf-primary) !important;
	color:#fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.focus,
.open>.dropdown-toggle.btn-primary{
	background-color:var(--sf-primary-hover) !important;
	border-color:var(--sf-primary-hover) !important;
	color:#fff !important;
}
.btn-primary:focus-visible,
.btn:focus-visible{
	outline:3px solid var(--sf-tint);
	outline-offset:1px;
}
.btn-outline-primary{
	background-color:#fff !important;
	border-color:var(--sf-primary) !important;
	color:var(--sf-primary-hover) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
	background-color:var(--sf-tint) !important;
	color:var(--sf-primary-dark) !important;
}

/* Badge / label di stato */
.badge-primary,
.label-primary{
	background:var(--sf-primary-dark) !important;
	color:#fff !important;
}
.badge-info{
	background-color:var(--sf-eu) !important;
	color:#fff !important;
}
.badge-success{
	background-color:var(--sf-primary-hover) !important;
	color:#fff !important;
}

/* Testi/util di brand (usati come classi rapide nei template) */
.text-primary{ color:var(--sf-primary-hover) !important; }
.bg-primary{ background-color:var(--sf-primary) !important; color:#fff !important; }
.border-primary{ border-color:var(--sf-primary) !important; }

/* Card: bordo leggero + angolo arrotondato 12px, ombra minima (no ombre pesanti) */
.card,
.card-box{
	border:1px solid var(--sf-border);
	border-radius:var(--sf-radius);
	box-shadow:var(--sf-shadow-card);
}
.card .card-head,
.card-box .card-head{
	border-bottom:1px solid var(--sf-border);
}

/* Tabelle: intestazione su fondo evidenziato, testo scuro invece del grigio generico */
table thead th,
.table thead th{
	background-color:var(--sf-tint);
	color:var(--sf-primary-dark);
	font-family:var(--sf-font-title);
	font-weight:700;
	text-transform:uppercase;
	font-size:11.5px;
	letter-spacing:.03em;
	border-color:var(--sf-border) !important;
}
table td,
.table td{
	border-color:var(--sf-border) !important;
}