/* RebrandingFLD Panel 1.1 — stile dell'app v2.2
   Layout: barra laterale fissa su schermi larghi, menu a scomparsa su telefono.
   Colori: fondo navy, superfici blu scuro, blu FLD per le azioni, ambra per focus ed evidenze. */
:root{
  --bg:#070D1C; --bg2:#0B1530; --surf:#111C38; --surf2:#16244A; --surf3:#1C2C58; --line:#22325C; --line2:#2C3F70;
  --blue:#2F7BFF; --blue2:#1D5CFF; --amber:#FFD54F; --sky:#38BDF8;
  --text:#ECEFF7; --mute:#8D98B3; --ok:#3CCF8E; --err:#FF5577; --warn:#F2A93B;
  --r:16px; --r-s:12px; --side:252px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 var(--font);min-height:100vh;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 55% at 70% -10%,rgba(47,123,255,.22) 0%,transparent 60%),
             radial-gradient(70% 50% at 0% 110%,rgba(56,189,248,.10) 0%,transparent 60%),
             linear-gradient(180deg,var(--bg2),var(--bg) 70%)}
a{color:var(--sky);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6em;line-height:1.2;text-wrap:balance}
h1{font-size:24px;font-weight:800;letter-spacing:-.01em}
h2{font-size:17px;font-weight:700}
h3{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.brand span,h1 span{color:var(--sky)}
::selection{background:rgba(47,123,255,.4)}

/* ---------- struttura ---------- */
.navt{position:absolute;opacity:0;pointer-events:none}
.side{position:fixed;top:0;bottom:0;left:0;width:var(--side);z-index:20;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(17,28,56,.97),rgba(7,13,28,.98));border-right:1px solid var(--line);
  padding:18px 12px calc(14px + env(safe-area-inset-bottom,0px))}
.sbrand{display:flex;align-items:center;gap:12px;padding:4px 8px 18px;color:var(--text)}
.sbrand:hover{text-decoration:none}
.sbrand img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(47,123,255,.45))}
.sbrand b{display:block;font-size:17px;font-weight:800;line-height:1.1}
.sbrand small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.nav a{position:relative;display:flex;align-items:center;gap:12px;color:var(--mute);padding:10px 12px;border-radius:var(--r-s);font-size:14.5px;font-weight:500}
.nav a svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{background:rgba(47,123,255,.08);color:var(--text);text-decoration:none}
.nav a.on{background:var(--surf2);color:var(--text)}
.nav a.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--amber)}
.nav a.on svg{color:var(--amber)}
.who{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf)}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;flex:none}
.wn{flex:1;min-width:0}
.wn b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wn small{color:var(--mute);font-size:12px}
.out{color:var(--mute);display:grid;place-items:center;width:34px;height:34px;border-radius:10px}
.out:hover{background:rgba(255,85,119,.12);color:var(--err)}
.out svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mtop,.scrim{display:none}
body.app main{margin-left:var(--side);max-width:1240px;padding:26px 28px 40px}
main{max-width:1180px;margin:0 auto;padding:18px 16px 40px}
.foot{color:var(--mute);font-size:12px;margin-top:34px;opacity:.7}

/* ---------- blocchi ---------- */
.card{position:relative;background:linear-gradient(180deg,rgba(22,36,74,.55),rgba(17,28,56,.85));border:1px solid var(--line);
  border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:0 14px 30px -22px rgba(0,0,0,.8)}
.card > h2:first-child{display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--surf2),var(--surf));border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(47,123,255,.22),transparent 70%)}
.stat b{display:block;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{color:var(--mute);font-size:13px}
.stat .hl{color:var(--amber)}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar form{display:flex;gap:8px;flex:1;min-width:220px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.plrow{border:1px solid var(--line);border-radius:var(--r-s);padding:12px;margin-top:10px;background:rgba(7,13,28,.6)}
details{margin-top:6px}
details summary{cursor:pointer;color:var(--sky);margin:6px 0;font-weight:600}

/* scorciatoie con le icone 3D dell'app */
.quick{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:16px}
.qa{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surf2),var(--surf));color:var(--text);transition:border-color .15s,transform .15s}
.qa:hover{text-decoration:none;border-color:var(--amber);transform:translateY(-1px)}
.qa img{width:46px;height:46px;object-fit:contain;flex:none}
.qa b{display:block;font-size:15px}
.qa small{color:var(--mute);font-size:12.5px}

.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(7,13,28,.7);border:1px solid var(--line2);border-radius:999px;padding:2px 10px;font-size:13px;color:var(--text)}

/* ---------- tabelle ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-s);background:rgba(7,13,28,.45)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{position:sticky;top:0;background:var(--surf);color:var(--mute);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(47,123,255,.06)}
.mono{font-family:var(--mono);font-size:13px}
.right{text-align:right}

/* ---------- etichette di stato ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-active,.p-online{background:rgba(60,207,142,.12);color:var(--ok);border-color:rgba(60,207,142,.28)}
.p-trial{background:rgba(56,189,248,.12);color:var(--sky);border-color:rgba(56,189,248,.28)}
.p-expired,.p-blocked{background:rgba(255,85,119,.12);color:var(--err);border-color:rgba(255,85,119,.3)}
.p-inactive{background:rgba(141,152,179,.12);color:var(--mute);border-color:rgba(141,152,179,.25)}

/* ---------- moduli ---------- */
form.inline{display:inline}
label{display:block;font-size:13px;color:var(--mute);margin:12px 0 5px;font-weight:600}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=url],input[type=email],input[type=search],select,textarea{
  width:100%;background:rgba(7,13,28,.85);color:var(--text);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 13px;font:inherit;
  transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#5f6b88}
input[type=file]{width:100%;color:var(--mute);font-size:14px;padding:10px;border:1px dashed var(--line2);border-radius:var(--r-s);background:rgba(7,13,28,.5)}
input[type=file]::file-selector-button{background:var(--surf3);color:var(--text);border:0;border-radius:10px;padding:8px 12px;margin-right:10px;font:inherit;font-weight:600;cursor:pointer}
textarea{min-height:110px;font-family:var(--mono);font-size:13px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,213,79,.18)}
button:focus-visible,a:focus-visible,.navt:focus-visible + .mtop .burger{outline:2px solid var(--amber);outline-offset:2px}
.check{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--text);font-size:14px;font-weight:500}
.check input{width:20px;height:20px;accent-color:var(--blue);flex:none}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#3A8DFF,var(--blue));color:#fff;border:1px solid transparent;
  border-radius:var(--r-s);padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 8px 18px -10px rgba(47,123,255,.8);transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.sec{background:var(--surf2);border-color:var(--line2);box-shadow:none;color:var(--text)}
.btn.sec:hover{border-color:var(--sky)}
.btn.danger{background:transparent;border-color:rgba(255,85,119,.5);color:var(--err);box-shadow:none}
.btn.danger:hover{background:rgba(255,85,119,.1)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:10px}

/* ---------- avvisi ---------- */
.flash{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-s);margin-bottom:16px;border:1px solid;font-weight:500}
.flash::before{font-weight:800}
.flash.ok{background:rgba(60,207,142,.1);border-color:rgba(60,207,142,.4)}
.flash.ok::before{content:"✓";color:var(--ok)}
.flash.err{background:rgba(255,85,119,.1);border-color:rgba(255,85,119,.4)}
.flash.err::before{content:"!";color:var(--err)}
.muted{color:var(--mute)}
.small{font-size:13px}
.hl{color:var(--amber)}

/* ---------- accesso (login, installazione, pagina playlist) ---------- */
body.auth{display:flex;align-items:center;min-height:100vh}
body.auth::before{background:radial-gradient(90% 70% at 50% 0%,#12307a 0%,var(--bg2) 55%,var(--bg) 100%)}
body.auth main{width:100%}
.login{max-width:420px;margin:6vh auto;padding:26px 24px}
.login .lhead{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:12px;text-align:center}
.login .lhead img{width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(47,123,255,.5))}
.login h1{text-align:center;font-size:26px;margin:0}
.login .lsub{color:var(--mute);font-size:14px;text-align:center;margin:0 0 6px}
.login .btn{width:100%;padding:13px;font-size:16px}

/* ---------- telefono (uso principale) ---------- */
.bnav,.mav{display:none}
@media (max-width:900px){
  body{font-size:16px}
  /* barra in alto: logo, nome, pagina, avatar */
  .mtop{display:flex;position:sticky;top:0;z-index:15;align-items:center;gap:10px;
    padding:calc(8px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));
    background:rgba(7,13,28,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .mlogo{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(47,123,255,.45))}
  .mhead{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
  .mhead .brand{font-size:15px;font-weight:800}
  .mtitle{color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mav{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue),var(--sky))}
  .mav:hover{text-decoration:none}

  /* barra in basso */
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:16;background:rgba(9,16,34,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .bnav a,.bnav label{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;color:var(--mute);font-size:11px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .bnav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .bnav label{margin:0}
  .bnav a:hover{text-decoration:none}
  .bnav .on{color:var(--amber)}
  .bnav .on svg{filter:drop-shadow(0 0 6px rgba(255,213,79,.45))}

  /* menu completo: pannello che sale dal basso */
  .side{top:auto;bottom:0;left:0;right:0;width:auto;max-height:82vh;border-right:0;border-top:1px solid var(--line2);border-radius:22px 22px 0 0;
    transform:translateY(105%);transition:transform .24s ease;box-shadow:0 -20px 40px rgba(0,0,0,.5);z-index:20;
    padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px))}
  .side::before{content:"";display:block;width:42px;height:4px;border-radius:4px;background:var(--line2);margin:2px auto 10px}
  .sbrand{display:none}
  .nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible}
  .nav a{flex-direction:column;gap:6px;padding:14px 4px;font-size:12.5px;text-align:center;background:var(--surf);border:1px solid var(--line)}
  .nav a svg{width:24px;height:24px}
  .nav a.on{border-color:var(--amber)}
  .nav a.on::before{display:none}
  .navt:checked ~ .side{transform:none}
  .navt:checked ~ .scrim{display:block;position:fixed;inset:0;z-index:18;background:rgba(0,0,0,.55)}

  body.app main{margin-left:0;padding:14px max(12px,env(safe-area-inset-right,0px)) calc(92px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  h1{font-size:21px;margin-bottom:12px}
  h2{font-size:16px}
  .card{padding:14px;border-radius:14px;margin-bottom:12px}

  /* dashboard compatta */
  .quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
  .qa{flex-direction:column;text-align:center;gap:6px;padding:12px 6px}
  .qa img{width:40px;height:40px}
  .qa b{font-size:13px}
  .qa small{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{padding:12px 14px;border-radius:14px}
  .stat b{font-size:24px}
  .stat span{font-size:12.5px}

  /* tabelle -> schede */
  .tw{border:0;background:none;overflow:visible}
  table.cards,table.cards tbody{display:block}
  table.cards tr.thead{display:none}
  table.cards tr{display:block;background:rgba(7,13,28,.55);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px}
  table.cards tr:hover td{background:none}
  table.cards td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:6px 0;border:0;text-align:right;font-size:14.5px}
  table.cards td::before{content:attr(data-label);color:var(--mute);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:none;padding-top:2px}
  table.cards td:first-child{display:block;text-align:left;padding:2px 0 8px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:600}
  table.cards td:first-child::before{display:none}
  table.cards td.hm{display:flex}
  table.cards td:empty{display:none}
  table.cards td .actions,table.cards td form{justify-content:flex-end}

  /* moduli comodi col pollice (16px = niente zoom automatico) */
  input[type=text],input[type=password],input[type=number],input[type=date],input[type=url],input[type=email],input[type=search],select,textarea{font-size:16px;padding:13px 14px;min-height:48px}
  .row{grid-template-columns:1fr;gap:4px}
  .btn{min-height:46px;padding:11px 16px}
  .btn.sm{min-height:38px;padding:7px 12px}
  .actions{gap:8px}
  .actions .btn{flex:1 1 auto}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar form{min-width:0}
  .check input{width:22px;height:22px}
  .flash{font-size:14.5px}
  .foot{text-align:center}
  body.auth main{padding-bottom:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}