/* ==================================================================
   MEDIA ITALIA — VESTE UI DELLA EXTRANET ("xtranet.")
   Foglio condiviso: tutta la veste grafica della extranet vive qui.
   Spec di riferimento: docs/mediaitalia-ui-regole.md
   Token colore:        docs/mediaitalia-colori.css

   Regole per chi modifica:
   - nessun hex scritto a mano fuori dal :root, solo var(--token);
   - il nero è --ink (#1D1D1B), mai #000000;
   - misure in px, NON in rem: app.css (Bootstrap 3) imposta
     html{font-size:10px}, quindi 1rem qui vale 10px;
   - va caricato DOPO bootstrap 5 e app.css (vedi layouts/app.blade.php).
     Gli !important servono solo a battere le utility di Bootstrap 5
     presenti nel markup dei menu (.fs-4, .text-black) e gli stili inline
     rimasti in eventuali layout copiati da versioni vecchie.

   Indice:
   1. Token            5. Workspace + azioni     9.  Pagine di accesso
   2. Base             6. Dashboard Tableau      10. Stati / alert
   3. Testata          7. Home (banda)           11. Responsive
   4. Barra menu       8. Bottoni e input

   Le pagine standalone (welcome.blade.php, errors/503.blade.php) non usano
   questo foglio: hanno i token incorporati, come da spec §3.
================================================================== */

/* ============ 1. TOKEN ============ */
:root{
  --white:#FFFFFF; --red:#E30613; --ink:#1D1D1B; --slate:#35394A; --text:var(--ink);
  --bg:#F4F4F5; --surface:#FFFFFF; --hover:#F4F4F5;
  --border:#E4E4E7; --border-strong:#D4D4D8; --muted:#71717A; --muted-strong:#52525B;
  --on-slate:#FFFFFF; --on-slate-muted:#AEB1BC; --on-slate-border:#474B5C; --slate-raised:#3E4356;
  --nav-hover:rgba(255,255,255,0.06); --nav-active-bg:rgba(227,6,19,0.14);
  --success:#1E7D4F; --success-bg:#E6F3EC; --error:var(--red); --error-bg:#FCE8E9;
  --warning:#B45309; --warning-bg:#FEF3C7; --excel:#217346;
  --cat-arredo:#2563EB; --cat-comunali:#0D9488; --cat-digital:#7C3AED;
  --cat-medi:#D97706; --cat-poster:#DB2777; --cat-speciale:#16A34A;
  --r:10px; --r-sm:8px; --r-xs:6px;

  /* token locali della extranet (derivati dai brand, non nuovi colori) */
  --font:'DM Sans',system-ui,sans-serif;
  --focus-ring:0 0 0 3px rgba(227,6,19,.12);
  --shadow-pop:0 12px 32px rgba(29,29,27,.14);
  --header-h:60px;
  --nav-h:46px;
}

/* ============ 2. BASE ============ */
html,body{height:100%;width:100%}
body{margin:0;font-family:var(--font);font-size:15px;font-weight:400;line-height:1.5;
  color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,button,input,select,textarea,label,
.btn,.nav-link,.dropdown-item,.form-control{font-family:var(--font)}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--border-strong);
  text-underline-offset:3px}
a:hover,a:focus{color:var(--ink);text-decoration-color:var(--red)}
label{font-weight:500;color:var(--ink)}
#app{min-height:100%;display:flex;flex-direction:column}

/* icone Lucide inline (linea, stroke 2, currentColor) */
.mi-icon{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;display:block}

/* ============ 3. TESTATA (template §6) ============ */
.mi-header{display:grid;grid-template-columns:1fr auto;align-items:center;
  min-height:var(--header-h);background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1030}
.ws-title{display:flex;align-items:center;gap:12px;padding:14px 22px}
.ws-title::before{content:"";width:5px;height:26px;background:var(--red);border-radius:2px}
.ws-title h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.5px;color:var(--ink);
  text-transform:lowercase;line-height:1}
.ws-title h1 a,.ws-title h1 a:hover,.ws-title h1 a:focus{color:inherit;text-decoration:none}
.brand{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:8px 22px}
.brand-logo{display:block;line-height:0;padding-left:18px;border-left:1px solid var(--border)}
.brand-logo img{height:28px;width:auto;display:block}

/* blocco utente (logo cliente + nome + logout): markup Bootstrap 3 invariato */
.mi-user{display:flex;align-items:center;float:none!important;margin:0!important;padding:0;
  list-style:none}
.mi-user>li{position:relative;display:block}
.mi-user>li>a{display:flex;align-items:center;gap:12px;padding:4px 10px 4px 4px;
  border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--ink);
  text-decoration:none;background:transparent;border:0}
.mi-user>li>a:hover,.mi-user>li>a:focus,
.mi-user>li.open>a,.mi-user>li.open>a:hover,.mi-user>li.open>a:focus{
  background:var(--hover);color:var(--ink);border:0}
/* I loghi cliente sono in parte bianchi e in parte scuri (nati per il vecchio
   fondo grigio): il chip neutro a mezzo tono li rende leggibili entrambi. */
.mi-client-logo{height:36px;width:auto;max-width:190px;box-sizing:border-box;
  padding:4px 10px;background:var(--muted);border-radius:var(--r-xs);display:block;
  object-fit:contain}
.mi-client-logo[src=""]{display:none}
.mi-user .dropdown-menu{right:0;left:auto}
.mi-user .dropdown-menu .mi-icon{width:16px;height:16px;color:var(--red)}

/* "Login" in testata per l'ospite */
.mi-user>li>a.mi-login{gap:8px;padding:9px 16px 9px 18px;position:relative;overflow:hidden;
  background:var(--ink);color:var(--white);font-weight:700;text-transform:lowercase}
.mi-user>li>a.mi-login::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--red)}
.mi-user>li>a.mi-login:hover,.mi-user>li>a.mi-login:focus{background:var(--slate);color:var(--white)}

/* menu a tendina (testata e barra menu) */
.dropdown-menu{min-width:230px;margin-top:6px;padding:6px;font-size:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-pop)}
.dropdown-menu>li>a,.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 12px;border-radius:var(--r-xs);font-size:14px!important;font-weight:400;
  line-height:1.35;color:var(--ink)!important;text-decoration:none;white-space:nowrap;
  background:transparent}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,
.dropdown-item:hover,.dropdown-item:focus,.dropdown-item:active,.dropdown-item.active{
  background:var(--hover);color:var(--ink)!important;box-shadow:inset 3px 0 0 var(--red)}

/* ============ 4. BARRA MENU (telaio scuro) ============ */
.mi-nav{min-height:var(--nav-h);margin:0!important;padding:0 12px;border:0;border-radius:0;
  background:var(--slate)!important;font-size:13px!important}
.mi-nav>.container-fluid{padding:0}
/* il clearfix ::before/::after di app.css diventerebbe un flex-item e sposterebbe il toggler */
.mi-nav>.container-fluid::before,.mi-nav>.container-fluid::after{display:none}
.mi-nav .navbar-collapse{padding:0;border:0;box-shadow:none}
.mi-nav .navbar-nav{margin:0;gap:2px}
.mi-nav .nav-item{font-size:13px!important}
.mi-nav .nav-link{display:flex;align-items:center;height:var(--nav-h);margin:0!important;
  padding:0 14px!important;font-size:13px!important;font-weight:500;letter-spacing:.06em;
  line-height:1;color:var(--on-slate-muted);text-decoration:none;background:transparent;
  transition:color .15s,background-color .15s}
.mi-nav .nav-link:hover,.mi-nav .nav-link:focus{color:var(--on-slate);background:var(--nav-hover)}
.mi-nav .nav-link.show,.mi-nav .nav-link[aria-expanded="true"]{color:var(--on-slate);
  background:var(--nav-active-bg);box-shadow:inset 0 -3px 0 var(--red)}
/* app.css (Bootstrap 3) ha l'helper .show{display:block!important}: collide con la
   classe .show che Bootstrap 5 mette sulla voce aperta e ne romperebbe l'allineamento */
.mi-nav .nav-link.show{display:flex!important}
.mi-nav .nav-link:focus-visible{outline:2px solid var(--on-slate);outline-offset:-2px}
.mi-nav .dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}

.mi-nav .navbar-toggler{margin:7px 0 7px auto;padding:6px 9px;color:var(--on-slate);
  border:1px solid var(--on-slate-border);border-radius:var(--r-xs);background:transparent}
.mi-nav .navbar-toggler:focus{box-shadow:none;outline:2px solid var(--on-slate);outline-offset:1px}
.mi-nav .navbar-toggler-icon{width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--ico-menu) center/contain no-repeat;mask:var(--ico-menu) center/contain no-repeat}

/* ============ 5. WORKSPACE + AZIONI ============ */
.mi-workspace{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:0 18px 18px}
.ws-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;
  padding:12px 0 10px}

/* icone Lucide usate come maschera: prendono il colore del testo */
:root{
  --ico-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='12' y2='12'/%3E%3Cline x1='4' x2='20' y1='6' y2='6'/%3E%3Cline x1='4' x2='20' y1='18' y2='18'/%3E%3C/svg%3E");
  --ico-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  --ico-refresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
}

.mi-action{display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden;
  margin:0!important;padding:7px 14px;font-size:13px;font-weight:700;line-height:1.35;
  text-transform:lowercase;text-decoration:none;color:var(--ink)!important;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  transition:border-color .15s,background-color .15s}
.mi-action::after{content:"";order:-1;width:15px;height:15px;flex:0 0 auto;background:currentColor}
.mi-action:hover,.mi-action:focus{border-color:var(--ink);text-decoration:none}
.mi-action:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--red)}
.mi-action--reload::after{-webkit-mask:var(--ico-refresh) center/contain no-repeat;
  mask:var(--ico-refresh) center/contain no-repeat}
.mi-action--open::after{-webkit-mask:var(--ico-external) center/contain no-repeat;
  mask:var(--ico-external) center/contain no-repeat}
/* azione principale = bottone primario: fondo ink + accento rosso a sinistra */
.mi-action--open{order:2;padding-left:18px;color:var(--white)!important;background:var(--ink);
  border-color:var(--ink)}
.mi-action--open::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--red)}
.mi-action--open:hover,.mi-action--open:focus{background:var(--slate);border-color:var(--slate)}

/* richiamo lampeggiante già usato da alcuni clienti sul link "Apri la dashboard" */
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
.blinking{animation:blink 5s infinite}
@media (prefers-reduced-motion:reduce){.blinking{animation:none}}

/* ============ 6. DASHBOARD TABLEAU ============ */
#idTableau{flex:1 1 auto;display:flex;flex-direction:column;width:100%;min-height:620px;
  margin:0;padding:0;overflow:hidden;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r)}
#map-det{flex:1 1 auto;display:block;width:100%;height:100%;min-height:620px;margin:0;padding:0;
  border:0;border-radius:0;background:var(--surface)}

/* ============ 7. HOME (banda) ============ */
.mi-banner{display:block;width:100%;height:auto;margin:18px 0 0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r)}

/* ============ 8. BOTTONI E INPUT ============ */
.btn{font-weight:700;border-radius:var(--r-sm)}
.btn-primary,.btn-primary:active,.btn-primary:visited{position:relative;overflow:hidden;
  padding:10px 18px 10px 20px;font-size:15px;font-weight:700;line-height:1.35;
  text-transform:lowercase;color:var(--white);background:var(--ink);border:0;
  border-radius:var(--r-sm);box-shadow:none}
.btn-primary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--red)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active:hover,.btn-primary:active:focus{
  color:var(--white);background:var(--slate);border:0}
.btn-primary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn-link,.btn-link:hover,.btn-link:focus{padding:0;font-size:14px;font-weight:500;
  color:var(--ink);border:0}

.form-control{height:auto;padding:10px 12px;font-size:15px;line-height:1.35;color:var(--ink);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  box-shadow:none}
.form-control:focus{outline:none;border-color:var(--red);box-shadow:var(--focus-ring)}
input[type=checkbox],input[type=radio]{accent-color:var(--red)}

/* ============ 9. PAGINE DI ACCESSO (login, registrazione, reset) ============ */
.mi-auth{width:100%;max-width:520px;margin:0 auto;padding:40px 18px 8px}
.mi-auth .row{margin:0}
.mi-auth [class*="col-md-"]{float:none;width:100%;margin-left:0;padding:0}
.mi-auth .panel{margin:0;overflow:hidden;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:none}
.mi-auth .panel-heading{display:flex;align-items:center;gap:10px;padding:18px 22px;
  font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1;text-transform:lowercase;
  color:var(--ink);background:var(--surface);border-bottom:1px solid var(--border);
  border-radius:0}
.mi-auth .panel-heading::before{content:"";width:4px;height:20px;background:var(--red);
  border-radius:2px}
.mi-auth .panel-body{padding:22px}
.mi-auth .form-horizontal .form-group{margin:0 0 16px}
.mi-auth .form-horizontal .form-group:last-child{margin-bottom:0}
.mi-auth .form-horizontal .control-label{display:block;margin:0 0 6px;padding:0;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-align:left;text-transform:uppercase;
  color:var(--muted)}
.mi-auth .btn-primary{width:100%}
.mi-auth .checkbox{min-height:0;margin:0;padding:0}
.mi-auth .checkbox label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:0;
  padding:0;font-size:14px;font-weight:400;color:var(--muted-strong)}
.mi-auth .checkbox input[type=checkbox]{position:static;width:16px;height:16px;margin:0}
.mi-auth .checkbox .btn-link{margin-left:auto}

/* login: le etichette sono icone → icona e campo sulla stessa riga */
.mi-auth--icons .form-horizontal .form-group{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:12px}
.mi-auth--icons .form-horizontal .control-label{flex:0 0 20px;width:20px;margin:0;
  color:var(--muted-strong)}
.mi-auth--icons .form-horizontal .control-label+[class*="col-md-"]{flex:1 1 0;width:auto;min-width:0}

/* ============ 10. STATI / ALERT ============ */
.help-block{margin:6px 0 0;font-size:13px;color:var(--error)}
.has-error .form-control,.has-error .form-control:focus{border-color:var(--error);box-shadow:none}
.has-error .control-label,.has-error .checkbox,.has-error .help-block{color:var(--error)}
.alert{padding:12px 14px;font-size:14px;border:1px solid transparent;border-radius:var(--r-sm)}
.alert-success{color:var(--success);background:var(--success-bg)}
.alert-danger{color:var(--error);background:var(--error-bg)}
.alert-warning{color:var(--warning);background:var(--warning-bg)}

/* ============ 11. RESPONSIVE ============ */
@media (max-width:991.98px){
  /* app.css (Bootstrap 3) forza aperto il collapse da 768px: qui comanda il toggler di Bootstrap 5 */
  .mi-nav .navbar-collapse.collapse:not(.show){display:none!important}
  .mi-nav .navbar-nav{gap:0;padding:4px 0 10px}
  .mi-nav .nav-link{height:42px}
  .mi-nav .nav-link.show,.mi-nav .nav-link[aria-expanded="true"]{box-shadow:inset 3px 0 0 var(--red)}
  .mi-nav .dropdown-menu{width:100%;margin:4px 0 8px;border-radius:var(--r-sm);box-shadow:none}
  .mi-nav .dropdown-menu>li>a,.mi-nav .dropdown-item{white-space:normal}
}
@media (max-width:767.98px){
  .ws-title{padding:12px 14px}
  .ws-title h1{font-size:21px}
  .brand{gap:10px;padding:8px 14px}
  .brand-logo{padding-left:10px}
  .brand-logo img{height:34px}
  .mi-user-name{display:none}
  .mi-client-logo{height:34px;max-width:120px}
  .mi-workspace{padding:0 10px 10px}
  .ws-actions{justify-content:stretch}
  .mi-action{flex:1 1 auto;justify-content:center}
  .mi-action--open{order:0}
}
@media (max-width:399.98px){
  .ws-title{gap:8px;padding:12px 10px}
  .brand{gap:6px;padding:8px 10px}
  .brand-logo{padding-left:6px}
  .mi-user>li>a{gap:4px;padding-right:4px}
  .mi-client-logo{height:30px;max-width:92px;padding:4px 6px}
}