/* ===================================================================
   TERRANOVA HUB — Liquid Glass Light Theme
   Palette: #870000 · #f2f2f2 · #222222 · #7a9c59
   Stack: CSS3 puro + backdrop-filter + multi-layer 3D shadows
   =================================================================== */

/* ─── Variabili & Reset ─────────────────────────────────────────────── */
:root{
  /* Palette */
  --primary:#870000;
  --primary-hover:#9b0a0a;
  --primary-rgb:135,0,0;
  --white-rgb:255,255,255;
  --black-rgb:0,0,0;
  --green:#7a9c59;
  --green-rgb:122,156,89;

  /* Semantic */
  --text:#222;
  --text-secondary:rgba(0,0,0,.6);
  --muted:rgba(0,0,0,.4);
  --bg:#f2f2f2;

  /* Glass */
  --panel:rgba(255,255,255,.7);
  --panel-border:rgba(0,0,0,.08);
  --panel-shadow:
    0 2px 4px rgba(0,0,0,.06),
    0 8px 16px rgba(0,0,0,.04),
    0 20px 40px rgba(0,0,0,.03),
    inset 0 1px 0 rgba(255,255,255,.6);
  --glass-blur:20px;
  --glass-bg:rgba(255,255,255,.65);
  --glass-bg-hover:rgba(255,255,255,.8);
  --glass-border:rgba(0,0,0,.08);
  --glass-border-lit:rgba(0,0,0,.15);

  /* Timing */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box}

/* ─── Layout base ───────────────────────────────────────────────────── */
html{
  margin:0;
  height:100%;
}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  line-height:1.5;
}
/* Ambient background glow */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 5%, rgba(var(--primary-rgb),.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 95%, rgba(var(--primary-rgb),.03) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}

main{ flex:1; position:relative; z-index:1; }
header{ text-align:center; position:relative; z-index:1010; }
content{ display:block; flex:1; position:relative; z-index:1; }

/* ─── Top Navigation (responsive) ───────────────────────────────────── */
.topnav{
  position:sticky;
  top:0;
  z-index:1001;
  background:linear-gradient(135deg,rgba(14,14,16,.92) 0%,rgba(30,6,6,.92) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  backdrop-filter:blur(24px) saturate(1.6);
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 10px;
  min-height:54px;
  transition:box-shadow .3s ease;
  animation:topnavIn .55s cubic-bezier(.23,1,.32,1) both;
}
.topnav.nav-shadow{
  box-shadow:0 4px 28px rgba(0,0,0,.55);
}
@keyframes topnavIn{
  from{ transform:translateY(-100%); opacity:0; }
  to{   transform:translateY(0);     opacity:1; }
}
@keyframes sidenavIn{
  from{ transform:translateX(-100%); opacity:0; }
  to{   transform:translateX(0);     opacity:1; }
}

/* HEADER — Liquid Glass */
.site-header-content {
  text-align:center;
  padding:25px 15px;
  background:rgba(var(--white-rgb),.5);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--glass-border);
  position:relative;
}
/* Subtle top-light on header */
.site-header-content::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--primary-rgb),.5) 30%,
    rgba(var(--primary-rgb),.8) 50%,
    rgba(var(--primary-rgb),.5) 70%,
    transparent 100%);
}
.site-header-content .page-title {
  color:var(--primary);
  font-size:2.4rem;
  font-weight:700;
  margin:0;
  letter-spacing:1px;
  text-transform:uppercase;
  -webkit-text-fill-color:unset;
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
}
@media (max-width:768px){
  .site-header-content{ padding:15px 10px; }
  .site-header-content .page-title{ font-size:1.6rem; }
}

/* Brand / Logo */
.topnav .brand{
  display:flex;
  align-items:center;
  padding:8px 6px;
}
.topnav .brand picture,
.topnav .brand img{
  display:block;
  height:34px;
  width:auto;
  filter:drop-shadow(0 0 6px rgba(255,255,255,0.9));
}

/* Link container */
.topnav .links{
  display:flex;
  margin-left:auto;
}

/* Link */
.topnav .links a{
  position:relative;
  color:rgba(255,255,255,.72);
  text-align:center;
  padding:18px 13px 16px;
  text-decoration:none;
  font-size:11.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.55px;
  transition:color .2s ease, background .2s ease, transform .2s cubic-bezier(.23,1,.32,1), text-shadow .2s ease;
}
.topnav .links a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%) scaleX(0);
  width:55%;
  height:2px;
  background:rgba(255,255,255,.8);
  border-radius:2px;
  transition:transform .25s cubic-bezier(.23,1,.32,1);
}
.topnav .links a:hover{
  color:#fff;
  background:rgba(255,255,255,.07);
  transform:translateY(-2px);
  text-shadow:0 0 16px rgba(255,255,255,.3);
}
.topnav .links a:hover::after{
  transform:translateX(-50%) scaleX(1);
}
.topnav .links a.active{
  color:#fff;
  background:rgba(135,0,0,.45);
}
.topnav .links a.active::after{
  transform:translateX(-50%) scaleX(1);
  background:rgba(255,255,255,.9);
}

.disabled-link {
  pointer-events:none;
  color:rgba(0,0,0,.25);
  opacity:0.6;
  cursor:default;
  text-decoration:none;
}

/* Hamburger */
.topnav .hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin-left:auto;
  background:none;
  border:none;
  width:40px;
  height:40px;
  padding:8px;
  cursor:pointer;
  border-radius:8px;
  transition:background .2s ease;
  flex-shrink:0;
}
.topnav .hamburger:hover{ background:rgba(255,255,255,.1); }
.topnav .hamburger span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .35s cubic-bezier(.23,1,.32,1), opacity .2s ease;
}
.topnav.expanded .hamburger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.topnav.expanded .hamburger span:nth-child(2){ opacity:0; transform:scaleX(0); }
.topnav.expanded .hamburger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ─── Desktop: sidebar fluttuante — Liquid Glass ────────────────────── */
@media (min-width:769px){
  body{
    padding-left:260px;
    transition:padding-left .4s cubic-bezier(.22,.68,0,1.0);
  }

  .topnav{
    position:fixed;
    top:12px; left:12px; bottom:12px;
    width:234px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0;
    overflow-y:auto;
    overflow-x:hidden;
    border-radius:18px;
    background:rgba(14,14,18,0.75);
    -webkit-backdrop-filter:blur(28px) saturate(1.8);
    backdrop-filter:blur(28px) saturate(1.8);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
      0 8px 32px rgba(0,0,0,.45),
      0 1px 0 rgba(255,255,255,.06) inset,
      0 0 60px rgba(var(--primary-rgb),.04);
    transform:translateX(0);
    transition:transform .4s cubic-bezier(.22,.68,0,1.0),
               opacity .3s ease,
               box-shadow .3s ease;
    animation:sidenavIn .45s cubic-bezier(.22,.68,0,1.0) forwards;
    z-index:1001;
  }
  .topnav::-webkit-scrollbar{ width:3px; }
  .topnav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:3px; }
  .topnav:hover{
    box-shadow:
      0 12px 44px rgba(0,0,0,.55),
      0 1px 0 rgba(255,255,255,.08) inset,
      0 0 80px rgba(var(--primary-rgb),.06);
  }

  .topnav .brand picture,
  .topnav .brand img{
    height:48px;
    filter:drop-shadow(0 0 10px rgba(255,255,255,0.9));
  }

  .topnav .hamburger{ display:none !important; }

  .topnav .links{
    flex-direction:column;
    margin-left:0;
    flex:1;
    padding:8px 10px;
    gap:2px;
  }
  .topnav .links a{
    text-align:left;
    padding:10px 14px;
    font-size:12px;
    font-weight:500;
    letter-spacing:.3px;
    border-radius:10px;
    border-left:none;
    color:rgba(255,255,255,.7);
    transition:color .2s ease, background .2s ease, transform .15s ease,
               border-color .2s ease, box-shadow .3s ease;
    border:1px solid transparent;
  }
  .topnav .links a::after{ display:none; }
  .topnav .links a:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
    border-color:var(--glass-border);
    transform:translateX(2px);
    text-shadow:none;
  }
  .topnav .links a.active{
    color:#fff;
    background:linear-gradient(135deg, rgba(135,0,0,.35), rgba(180,30,30,.15));
    border-color:rgba(var(--primary-rgb),.25);
    box-shadow:0 2px 12px rgba(135,0,0,.15),
               inset 0 1px 0 rgba(255,255,255,.05);
    font-weight:600;
  }

  .container{ margin:0 auto; }

  /* ── Toggle button ── */
  .sidebar-toggle{
    position:fixed;
    top:22px;
    left:254px;
    width:32px;
    height:32px;
    border-radius:10px;
    background:rgba(14,14,18,0.75);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:0;
    z-index:1003;
    transition:left .4s cubic-bezier(.22,.68,0,1.0),
               background .2s ease,
               border-color .2s ease,
               transform .2s ease;
    box-shadow:0 2px 12px rgba(0,0,0,.35);
  }
  .sidebar-toggle:hover{
    background:rgba(135,0,0,.5);
    border-color:rgba(255,255,255,.2);
    transform:scale(1.08);
    box-shadow:0 4px 16px rgba(var(--primary-rgb),.25);
  }
  .sidebar-toggle .toggle-bar{
    display:block;
    width:16px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:transform .3s cubic-bezier(.22,.68,0,1.0),
               opacity .2s ease,
               width .2s ease;
  }
  .sidebar-toggle .toggle-bar:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }
  .sidebar-toggle .toggle-bar:nth-child(2){
    opacity:0; transform:scaleX(0);
  }
  .sidebar-toggle .toggle-bar:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  /* ── Stato collapsed ── */
  body.sidebar-collapsed{ padding-left:0; }
  body.sidebar-collapsed .topnav{
    transform:translateX(calc(-100% - 24px));
    opacity:0;
    pointer-events:none;
    animation:none;
  }
  body.sidebar-collapsed .sidebar-toggle{ left:12px; }
  body.sidebar-collapsed .sidebar-toggle .toggle-bar:nth-child(1){
    transform:none; width:14px;
  }
  body.sidebar-collapsed .sidebar-toggle .toggle-bar:nth-child(2){
    opacity:1; transform:none; width:14px;
  }
  body.sidebar-collapsed .sidebar-toggle .toggle-bar:nth-child(3){
    transform:none; width:14px;
  }
}

/* ─── Mobile — menu a drawer laterale sinistro ────────────────── */
@media (max-width:768px){
  .sidebar-toggle{ display:none !important; }
  body.sidebar-collapsed .topnav{ transform:none; opacity:1; pointer-events:auto; }
  .topnav{
    flex-wrap:wrap;
    border-radius:0;
    background:linear-gradient(135deg, rgba(14,14,16,.97), rgba(30,6,6,.97) 85%);
    /* Niente blur ne' animazione sulla barra in mobile: transform e
       backdrop-filter renderebbero la barra il contenitore del drawer
       position:fixed qui sotto, che invece deve agganciarsi al viewport */
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    animation:none;
  }
  .topnav .hamburger{ display:flex; }

  /* Il menu e' un pannello fisso a tutta altezza che scivola da sinistra */
  .topnav .links{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    height:100dvh;
    width:min(80vw, 300px);
    flex-direction:column;
    margin-left:0;
    padding:14px 10px calc(24px + env(safe-area-inset-bottom, 0px));
    padding-left:calc(10px + env(safe-area-inset-left, 0px));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(160deg, rgba(14,14,16,.97), rgba(30,6,6,.97) 85%);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:8px 0 32px rgba(0,0,0,.55);
    z-index:1002;
    transform:translateX(-102%);
    visibility:hidden;
    transition:transform .38s cubic-bezier(.23,1,.32,1), visibility 0s linear .38s;
  }
  .topnav.expanded .links{
    transform:translateX(0);
    visibility:visible;
    transition:transform .38s cubic-bezier(.23,1,.32,1), visibility 0s;
  }

  /* Testata del drawer: logo */
  .topnav .links::before{
    content:'';
    flex-shrink:0;
    height:56px;
    margin:0 6px 10px;
    background:url("/includes/terranova_hub_logo_192x192.png") no-repeat center / auto 40px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }

  .topnav .links a{
    text-align:left;
    padding:13px 14px;
    font-size:12.5px;
    border-radius:10px;
    margin:1px 0;
    transform:translateX(-14px);
    opacity:0;
    transition:
      transform .35s cubic-bezier(.23,1,.32,1) calc(var(--i,0) * 26ms),
      opacity .3s ease calc(var(--i,0) * 26ms),
      background .2s ease,
      color .2s ease;
  }
  .topnav.expanded .links a{
    transform:translateX(0);
    opacity:1;
  }
  .topnav .links a::after{ display:none; }
}

/* ─── Hero immagini ─────────────────────────────────────────────────── */
.hero{ text-align:center; padding:10px 0; }
.hero img{ max-width:100%; height:auto; display:inline-block; border-radius:6px; }

/* ─── Titoli & Testi ────────────────────────────────────────────────── */
h1, h2, h3{
  color:var(--text);
  font-weight:700;
  margin:12px 0;
  text-align:center;
}
h1{
  color:var(--text);
}
h2{
  font-size:1.4rem;
  color:var(--text);
}
h3{ color:var(--text-secondary); }
@media (max-width:768px){ h2{ font-size:1.2rem; } }

.note{
  font-size:.95rem;
  color:var(--muted);
  text-align:center;
}

.legend {
  width:100%;
  text-align:center;
}
.legend ul {
  list-style-type:none;
  padding:0;
  border:1px solid var(--glass-border);
  display:flex;
  justify-content:center;
  background:var(--glass-bg);
  border-radius:8px;
}
.legend ul li {
  padding:4px 8px;
  font-size:8px;
  color:var(--text-secondary);
}

.red {
  color:#ff4444;
  font-weight:bold;
}

/* ─── Bottoni & Form — 3D glass ─────────────────────────────────────── */
.button,
.button.agente,
.button.consegnatario{
  display:inline-block;
  border:1px solid rgba(var(--primary-rgb),.4);
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.35), rgba(var(--primary-rgb),.15));
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  transition:transform .2s var(--ease-out), box-shadow .3s ease, background .2s ease, border-color .2s ease;
  box-shadow:
    0 2px 8px rgba(var(--primary-rgb),.2),
    inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
/* Glass shine */
.button::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  pointer-events:none;
  border-radius:10px 10px 0 0;
}
.button:hover{
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.5), rgba(var(--primary-rgb),.25));
  border-color:rgba(var(--primary-rgb),.6);
  transform:translateY(-2px);
  box-shadow:
    0 4px 16px rgba(var(--primary-rgb),.3),
    0 8px 32px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.button:active{
  transform:translateY(0) scale(.98);
}
@media (max-width:768px){
  .button{ font-size:12px; padding:8px 12px; }
}

/* Varianti bottone */
.btn-sm{ padding:5px 12px !important; font-size:12px !important; }
.btn-danger{
  background:linear-gradient(135deg, rgba(198,40,40,.6), rgba(198,40,40,.35)) !important;
  border-color:rgba(198,40,40,.5) !important;
  color:#fff !important;
}
.btn-danger:hover{
  background:linear-gradient(135deg, rgba(198,40,40,.8), rgba(198,40,40,.5)) !important;
  border-color:rgba(198,40,40,.7) !important;
}
.btn-neutral{
  background:linear-gradient(135deg, rgba(var(--black-rgb),.12), rgba(var(--black-rgb),.06)) !important;
  border-color:rgba(var(--black-rgb),.15) !important;
  color:var(--text) !important;
}
.btn-neutral:hover{
  background:linear-gradient(135deg, rgba(var(--black-rgb),.18), rgba(var(--black-rgb),.10)) !important;
  border-color:rgba(var(--black-rgb),.22) !important;
}

.password{
  width:100%;
  max-width:320px;
  border:1px solid var(--glass-border);
  border-radius:10px;
  font-size:16px;
  padding:10px 12px;
  margin:6px auto;
  display:block;
  background:rgba(var(--white-rgb),.8);
  color:var(--text);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.password:focus{
  outline:none;
  border-color:rgba(var(--primary-rgb),.5);
  background:#fff;
  box-shadow:0 0 20px rgba(var(--primary-rgb),.1);
}
.password::placeholder{ color:var(--muted); }
@media (max-width:768px){
  .password{ font-size:14px; padding:8px 10px; }
}

.floating-button {
  position:fixed;
  right:16px;
  bottom:16px;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.7), rgba(var(--primary-rgb),.4));
  color:white;
  padding:14px 18px;
  border-radius:50px;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  box-shadow:
    0 4px 16px rgba(var(--primary-rgb),.3),
    0 8px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.1);
  border:1px solid rgba(var(--primary-rgb),.3);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0.9;
  transition:all .3s var(--ease-out);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:100;
}
.floating-button:hover {
  opacity:1;
  transform:translateY(-3px);
  box-shadow:
    0 6px 24px rgba(var(--primary-rgb),.4),
    0 12px 48px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* ─── Tabelle & Scroll — Glass ──────────────────────────────────────── */
table{
  width:100%;
  border-collapse:collapse;
}
th, td{
  border:1px solid var(--glass-border);
  text-align:center;
  padding:8px;
  color:var(--text);
}
th{
  background:rgba(var(--white-rgb),.8);
  font-weight:700;
  color:var(--text);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
td{
  background:rgba(var(--white-rgb),.5);
}
tr:hover td{
  background:rgba(var(--white-rgb),.9);
}

.tbl-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  width:100%;
}

.tabella-settimana{ font-size:14px; min-width:600px; }
.tabella-settimana th, .tabella-settimana td{ min-width:90px; padding:6px; }
@media (max-width:768px){
  .tabella-settimana{ font-size:12px; }
  th, td{ padding:6px; }
}

.tabella-divider{
  border:none;
  border-top:2px solid rgba(var(--primary-rgb),.4);
  margin:14px 0;
  box-shadow:0 1px 8px rgba(var(--primary-rgb),.15);
}

/* ─── KPI (pillole) — Glass ─────────────────────────────────────────── */
.kpi{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  padding:0;
  margin:10px 0;
  list-style:none;
}
.kpi li{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  padding:8px 14px;
  border-radius:9999px;
  font-weight:600;
  font-size:.95rem;
  color:var(--text-secondary);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:all .3s var(--ease-out);
}
.kpi li:hover{
  background:var(--glass-bg-hover);
  border-color:var(--glass-border-lit);
  color:var(--text);
}

/* ─── Contenitori ───────────────────────────────────────────────────── */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}
.wrap-narrow{
  max-width:900px;
  margin:16px auto;
}
.wrap-narrow .tbl-scroll{
  margin-top:10px;
  margin-bottom:20px;
}

/* ─── Griglie utili ─────────────────────────────────────────────────── */
.buttons-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.buttons-grid .button{
  min-width:240px;
  text-transform:uppercase;
}
@media (max-width:768px){
  .buttons-grid .button{ min-width:100%; }
}

.buttons-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.buttons-stack .button{
  width:auto;
  text-transform:uppercase;
}

.guide-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.colonne-menu {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  flex-direction:column;
}
@media (max-width:992px){
  .guide-grid{ grid-template-columns:1fr; }
}

/* Pannello — Liquid Glass */
.panel{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:8px;
  box-shadow:var(--panel-shadow);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  transition:border-color .3s ease, box-shadow .4s ease;
}
.panel:hover{
  border-color:var(--glass-border-lit);
}

/* ─── Footer — Enhanced Glass ───────────────────────────────────────── */
.site-footer{
  position:relative;
  padding:52px 20px 28px;
  background:rgba(var(--white-rgb),.6);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  overflow:hidden;
  z-index:1;
}
.site-footer::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--primary-rgb),.5) 30%,
    rgba(var(--primary-rgb),.8) 50%,
    rgba(var(--primary-rgb),.5) 70%,
    transparent 100%);
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
}
.site-footer .footer-title{
  margin:0 0 28px;
  text-align:center;
  color:rgba(0,0,0,.35);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  -webkit-text-fill-color:unset;
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
}
.footer-links{
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.footer-links .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  text-decoration:none;
  background:rgba(var(--white-rgb),.5);
  color:var(--text-secondary);
  border-radius:9999px;
  border:1px solid rgba(0,0,0,.06);
  font-size:.85rem;
  font-weight:500;
  white-space:nowrap;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:transform .25s cubic-bezier(.23,1,.32,1),
             box-shadow .25s ease,
             background .2s ease,
             color .2s ease,
             border-color .2s ease;
}
.footer-links .pill:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 10px 28px rgba(0,0,0,.1),
             0 0 0 1px rgba(var(--primary-rgb),.3),
             0 0 24px rgba(var(--primary-rgb),.06);
  background:rgba(var(--primary-rgb),.08);
  color:var(--primary);
  border-color:rgba(var(--primary-rgb),.3);
}
.footer-links .pill i{
  font-size:.88rem;
  opacity:.75;
}
.footer-bottom{
  text-align:center;
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid rgba(0,0,0,.06);
  color:rgba(0,0,0,.3);
  font-size:.72rem;
  letter-spacing:.5px;
}
.footer-roles-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
}
.footer-roles-label{
  color:rgba(0,0,0,.35);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-right:4px;
}
.footer-roles-label i{ margin-right:4px; }
.footer-role-badge{
  display:inline-block;
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.4px;
  padding:3px 10px;
  border-radius:4px;
  text-transform:uppercase;
}

@media (max-width:768px){
  .site-footer{ padding:36px 16px 20px; }
  .footer-links .pill{ font-size:.8rem; padding:8px 13px; }
  .footer-roles-bar{ gap:6px; }
  .footer-role-badge{ font-size:.58rem; padding:2px 7px; }
}

/* ─── Fluent Reveal Effect — CSS ────────────────────────────────────── */
.reveal-target{
  position:relative;
  overflow:hidden;
}
.reveal-target::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s var(--ease-out);
  z-index:2;
  background:radial-gradient(
    circle 180px at var(--mouse-x,-200px) var(--mouse-y,-200px),
    rgba(var(--primary-rgb),.10),
    transparent 70%
  );
}
.reveal-target:hover::before{ opacity:1; }

/* Reveal border glow */
.reveal-border::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity .4s var(--ease-out);
  background:radial-gradient(
    circle 150px at var(--mouse-x,-200px) var(--mouse-y,-200px),
    rgba(var(--white-rgb),.12),
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
}
.reveal-border:hover::after{ opacity:1; }

/* ─── Scrollbar — Glass ─────────────────────────────────────────────── */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(var(--black-rgb),.15);
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(var(--black-rgb),.25);
}

/* ─── General input/select/textarea — Glass ─────────────────────────── */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea{
  background:rgba(var(--white-rgb),.8);
  border:1px solid var(--glass-border);
  border-radius:8px;
  color:var(--text);
  padding:8px 12px;
  font-family:inherit;
  font-size:14px;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:rgba(var(--primary-rgb),.5);
  background:#fff;
  box-shadow:0 0 20px rgba(var(--primary-rgb),.08);
}
input::placeholder,
textarea::placeholder{
  color:var(--muted);
}
/* Autofill override */
input:-webkit-autofill,
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:#222;
  caret-color:#222;
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:30px;
}
option{
  background:#fff;
  color:#222;
}

/* ─── Entry animation ───────────────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(16px) scale(0.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ─── Links ─────────────────────────────────────────────────────────── */
a{ color:var(--primary); transition:color .2s ease; }
a:hover{ color:var(--primary-hover); }

/* ===================================================================
   PAGE-SPECIFIC STYLES
   Consolidated from inline <style> blocks — April 2026
   =================================================================== */

/* ─── Login Page ──────────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(-45deg, #111113, #1e0606, #111113, #180404);
    background-size: 400% 400%;
    animation: bgShift 10s ease infinite;
    position: relative;
    overflow: hidden;
}
.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(135,0,0,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(135,0,0,.05) 1px, transparent 1px);
    background-size: 50px 50px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 100%);
    pointer-events: none;
}
.login-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(135,0,0,.08) 0%, transparent 70%);
    pointer-events: none;
}
@keyframes bgShift {
    0%, 100% { background-position: 0%   50%; }
    50%       { background-position: 100% 50%; }
}
.login-card {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow:
        0 32px 64px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -1px 0 rgba(0,0,0,.2);
    padding: 44px 40px;
    max-width: 400px;
    width: 100%;
    transform-style: preserve-3d;
    will-change: transform;
    animation: cardIn .75s cubic-bezier(.23,1,.32,1) both;
}
@keyframes cardIn {
    from { opacity:0; transform:perspective(800px) translateY(40px) scale(.94) rotateX(4deg); }
    to   { opacity:1; transform:perspective(800px) translateY(0)    scale(1)   rotateX(0deg); }
}
.login-logo { text-align: center; margin-bottom: 26px; }
.login-logo img {
    height: 60px;
    animation: logoFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 6px 20px rgba(135,0,0,.55));
}
@keyframes logoFloat {
    0%, 100% { transform: translateY(0px)  rotate(0deg); }
    50%       { transform: translateY(-7px) rotate(.5deg); }
}
.login-title {
    text-align: center;
    color: rgba(255,255,255,.92);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin: 0 0 28px;
}
.login-field { margin-bottom: 16px; }
.login-field label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .7px;
}
.login-field input {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    font-size: 15px;
    padding: 12px 14px;
    color: rgba(255,255,255,.9);
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.login-field input::placeholder { color: rgba(255,255,255,.18); }
.login-field input:focus {
    outline: none;
    border-color: rgba(135,0,0,.7);
    background: rgba(255,255,255,.09);
    box-shadow: 0 0 0 3px rgba(135,0,0,.14), 0 0 20px rgba(135,0,0,.08);
}
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1a0606 inset;
    -webkit-text-fill-color: rgba(255,255,255,.9);
    caret-color: #fff;
}
.login-remember { margin: 16px 0 4px; }
.login-remember-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    user-select: none;
    transition: color .2s;
}
.login-remember-label:hover { color: rgba(255,255,255,.7); }
.login-remember-label input { display: none; }
.login-remember-check {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, background .2s;
    flex-shrink: 0;
}
.login-remember-check::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: transparent;
    transition: background .2s;
}
.login-remember-label input:checked ~ .login-remember-check {
    border-color: rgba(135,0,0,.8);
    background: rgba(135,0,0,.25);
}
.login-remember-label input:checked ~ .login-remember-check::after {
    background: #c01818;
}
.login-btn {
    width: 100%;
    background: linear-gradient(135deg, #870000 0%, #c01818 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    padding: 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s ease, background .2s ease;
    margin-top: 8px;
    font-family: inherit;
    box-shadow: 0 4px 22px rgba(135,0,0,.45);
    position: relative;
    overflow: hidden;
}
.login-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 55%);
    pointer-events: none;
}
.login-btn:hover {
    background: linear-gradient(135deg, #9b0a0a 0%, #d42020 100%);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 30px rgba(135,0,0,.6);
}
.login-btn:active {
    transform: translateY(1px) scale(.98);
    box-shadow: 0 2px 10px rgba(135,0,0,.35);
}
.login-error {
    background: rgba(135,0,0,.14);
    border: 1px solid rgba(200,50,50,.35);
    color: #ff9999;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 18px;
    text-align: center;
    animation: shake .45s cubic-bezier(.23,1,.32,1);
}
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-8px); }
    40%     { transform: translateX(8px); }
    60%     { transform: translateX(-5px); }
    80%     { transform: translateX(4px); }
}
.login-guest { text-align: center; margin-top: 18px; }
.login-guest-link {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,.38);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.1);
    transition: color .2s, border-color .2s, background .2s;
}
.login-guest-link:hover {
    color: rgba(255,255,255,.7);
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.06);
}
.login-footer {
    text-align: center;
    margin-top: 14px;
    font-size: 11px;
    color: rgba(255,255,255,.18);
    letter-spacing: .3px;
}

/* ─── Dashboard Toolbar — Liquid Glass ────────────────────────────────── */
.dash-toolbar {
    margin: 18px auto 0;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dash-toolbar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-right: auto;
}
.dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid rgba(var(--primary-rgb),.4);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb),.3), rgba(var(--primary-rgb),.12));
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .3s, border-color .2s;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),.15), inset 0 1px 0 rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
}
.dash-btn:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb),.45), rgba(var(--primary-rgb),.2));
    transform: translateY(-1px);
    border-color: rgba(var(--primary-rgb),.6);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb),.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.dash-btn-outline {
    background: rgba(var(--black-rgb),.04);
    color: var(--muted);
    border: 1px solid var(--glass-border);
    box-shadow: none;
}
.dash-btn-outline:hover {
    background: var(--glass-bg-hover);
    color: var(--text);
    border-color: var(--glass-border-lit);
}

/* Widget Picker — Liquid Glass Modal */
.dash-picker {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.dash-picker-inner {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    box-shadow:
        0 20px 60px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.8);
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
}
.dash-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
}
.dash-picker-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: rgba(var(--black-rgb),.4);
    line-height: 1;
    transition: color .2s;
}
.dash-picker-close:hover { color: #ff4444; }
.dash-picker-grid {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: background .2s, border-color .2s, box-shadow .3s;
    position: relative;
    overflow: hidden;
}
.picker-item:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-lit);
}
.picker-item.active {
    background: rgba(var(--green-rgb),.08);
    border-color: rgba(var(--green-rgb),.25);
    box-shadow: 0 0 16px rgba(var(--green-rgb),.08);
}
.picker-item .pi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
}
.picker-item .pi-info { flex: 1; }
.picker-item .pi-title { font-weight: 600; font-size: .92rem; color: var(--text); }
.picker-item .pi-desc { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.picker-item .pi-toggle {
    width: 20px; height: 20px;
    border-radius: 4px;
    border: 2px solid rgba(var(--black-rgb),.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .75rem;
    color: transparent;
    transition: all .2s;
}
.picker-item.active .pi-toggle {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 8px rgba(var(--primary-rgb),.3);
}

/* Dashboard Grid */
.dash-grid {
    margin: 16px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.wdg-span-1 { grid-column: span 1; }
.wdg-span-2 { grid-column: span 2; }
.wdg-span-3 { grid-column: span 3; }
.wdg-span-4 { grid-column: span 4; }

@media (max-width: 1024px) {
    .dash-grid { grid-template-columns: repeat(2, 1fr); }
    .wdg-span-3, .wdg-span-4 { grid-column: span 2; }
}
@media (max-width: 768px) {
    .dash-grid { grid-template-columns: 1fr; gap: 12px; }
    .dash-toolbar { padding: 0 12px; }
    .wdg-span-1, .wdg-span-2, .wdg-span-3, .wdg-span-4 { grid-column: span 1; }
}

/* Widget Card — Liquid Glass */
.wdg {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    overflow: hidden;
    transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out), border-color .3s;
    position: relative;
    animation: fadeSlideUp .5s var(--ease-out) backwards;
}
.wdg:hover {
    box-shadow:
        0 4px 8px rgba(var(--primary-rgb),.06),
        0 12px 24px rgba(0,0,0,.08),
        0 28px 56px rgba(0,0,0,.04),
        inset 0 1px 0 rgba(255,255,255,.5);
    border-color: var(--glass-border-lit);
}
.wdg.dragging { opacity: .5; transform: scale(.97); }
.wdg.drag-over {
    border-color: rgba(var(--primary-rgb),.4);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.15), 0 0 24px rgba(var(--primary-rgb),.1);
}
.wdg-head {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    gap: 8px;
    cursor: grab;
    user-select: none;
}
.wdg-head:active { cursor: grabbing; }
.wdg-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
}
.wdg-title {
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
    flex: 1;
}
.wdg-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: rgba(var(--black-rgb),.3);
    padding: 4px;
    border-radius: 6px;
    transition: background .2s, color .2s;
    line-height: 1;
}
.wdg-close:hover {
    background: rgba(var(--primary-rgb),.15);
    color: #ff4444;
}
.wdg-body { padding: 16px; }

/* Widget: Big Number */
.wdg-big-number { text-align: center; padding: 20px 16px; }
.wdg-big-value { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.wdg-big-label { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.wdg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: .78rem;
    font-weight: 700;
    margin-top: 10px;
}
.wdg-badge.up { background: rgba(var(--green-rgb),.12); color: var(--green); }
.wdg-badge.down { background: rgba(var(--primary-rgb),.15); color: #ff5555; }
.wdg-badge.neutral { background: rgba(var(--black-rgb),.06); color: var(--muted); }

/* Widget: Table List */
.wdg-list { list-style: none; margin: 0; padding: 0; }
.wdg-list li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
    gap: 10px;
    transition: background .2s;
}
.wdg-list li:last-child { border-bottom: none; }
.wdg-list li:hover { background: rgba(var(--black-rgb),.03); }
.wdg-rank {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: rgba(var(--black-rgb),.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 800;
    color: var(--muted);
    flex-shrink: 0;
}
.wdg-list li:nth-child(1) .wdg-rank { background: rgba(255,193,7,.12); color: #ffc107; }
.wdg-list li:nth-child(2) .wdg-rank { background: rgba(var(--black-rgb),.06); color: rgba(var(--black-rgb),.4); }
.wdg-list li:nth-child(3) .wdg-rank { background: rgba(205,127,50,.12); color: #cd7f32; }
.wdg-prod-name {
    flex: 1;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wdg-prod-val { font-size: .82rem; font-weight: 700; color: #ff6666; white-space: nowrap; }
.wdg-prod-badge {
    font-size: .72rem;
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 700;
    white-space: nowrap;
}

/* Widget: Daily Tip (override) */
.wdg-tip-body .daily-tip {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border-left: none;
    box-shadow: none;
}
.wdg-tip-body .daily-tip p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Skeleton loading */
.wdg-skeleton {
    background: linear-gradient(90deg, rgba(var(--black-rgb),.04) 25%, rgba(var(--black-rgb),.08) 50%, rgba(var(--black-rgb),.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
    height: 48px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Periodo di riferimento */
.wdg-periodo {
    text-align: right;
    font-size: .72rem;
    color: var(--muted);
    padding: 6px 16px 10px;
    border-top: 1px solid var(--glass-border);
    margin-top: 8px;
}

/* Span full width for tip */
.wdg-full { grid-column: 1 / -1; }

/* Widget: Table (temporal YoY) — Glass */
.wdg-chart-scroll {
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
}
.wdg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}
.wdg-table th {
    text-align: left;
    font-weight: 700;
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 6px 8px;
    border-bottom: 2px solid var(--glass-border);
    position: sticky;
    top: 0;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.wdg-table td { padding: 5px 8px; border-bottom: 1px solid rgba(var(--black-rgb),.04); color: var(--text-secondary); }
.wdg-td-label { font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.wdg-td-val { text-align: right; font-weight: 600; white-space: nowrap; color: var(--text); }
.wdg-td-muted { color: var(--muted); font-weight: 400; }
.wdg-td-bar { width: 80px; padding-right: 0; }
.wdg-badge-sm {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}
.wdg-badge-sm.up { background: rgba(var(--green-rgb),.12); color: var(--green); }
.wdg-badge-sm.down { background: rgba(var(--primary-rgb),.15); color: #ff5555; }
.wdg-badge-sm.neutral { background: rgba(var(--black-rgb),.06); color: var(--muted); }

/* Widget: Scrollable list */
.wdg-list-scroll { max-height: 320px; overflow-y: auto; }

/* Widget: Bar track — Glass */
.wdg-bar-row { flex-wrap: wrap; }
.wdg-bar-track {
    width: 100%;
    height: 4px;
    background: rgba(var(--black-rgb),.06);
    border-radius: 2px;
    margin-top: 4px;
}
.wdg-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--primary-rgb),.6), rgba(var(--primary-rgb),.3));
    border-radius: 2px;
    transition: width .4s ease;
    min-width: 2px;
    box-shadow: 0 0 8px rgba(var(--primary-rgb),.2);
}
.wdg-td-bar .wdg-bar {
    height: 6px;
    background: linear-gradient(90deg, rgba(var(--primary-rgb),.5), rgba(var(--primary-rgb),.25));
    border-radius: 3px;
    opacity: .7;
}

/* ─── Commerciale — Daily Tip ─────────────────────────────────────────── */
.daily-tip {
    max-width: 900px;
    margin: 30px auto;
    padding: 24px 28px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    box-shadow: var(--panel-shadow);
    transition: border-color .3s;
}
.daily-tip:hover { border-color: var(--glass-border-lit); }
.daily-tip h2 {
    margin-top: 0;
    color: var(--primary);
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.daily-tip p {
    font-size: 1.05em;
    color: var(--text);
    line-height: 1.7;
}
.daily-tip ul { padding-left: 18px; }
.daily-tip li { margin-bottom: 6px; color: var(--text); }

/* ─── Contatti ────────────────────────────────────────────────────────── */
.contatti-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.contatti-sezione {
    background: var(--glass-bg);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--panel-shadow);
    transition: border-color .3s;
}
.contatti-sezione:hover { border-color: var(--glass-border-lit); }
.contatti-sezione h3 {
    color: var(--primary);
    border-bottom: 2px solid rgba(135,0,0,.3);
    padding-bottom: 8px;
    margin: 0 0 15px 0;
    font-size: 1.1em;
    text-align: left;
}
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.contact-item:last-child { border-bottom: none; }
.contact-item.empty { display: none; }
body.edit-mode .contact-item.empty { display: flex; opacity: 0.5; }
.contact-name { font-weight: 600; color: var(--text); font-size: 0.95em; }
.contact-email { color: #0077cc; text-decoration: none; font-size: 0.9em; }
.contact-email:hover { text-decoration: underline; }
.contact-phone {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    text-decoration: none;
    width: fit-content;
}
.contact-phone:hover { background: #c8e6c9; }
.contact-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pec {
    background: #e3f2fd;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7em;
    color: #1565c0;
    margin-left: 5px;
}
.telefoni-section {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 16px;
    box-shadow: var(--panel-shadow);
}
.telefoni-section.assistenza {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.telefoni-section h2 { text-align: center; margin: 0 0 20px 0; font-size: 1.4em; }
.telefoni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}
.telefono-box {
    background: rgba(255,255,255,.9);
    color: var(--text);
    padding: 15px;
    border-radius: 8px;
    position: relative;
    border: 1px solid rgba(0,0,0,.06);
}
.telefono-box h4 {
    margin: 0 0 10px 0;
    color: #555;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.telefono-box .telefono { font-size: 1.5em; font-weight: bold; margin: 5px 0; }
.telefono-box .telefono a { color: #2e7d32; text-decoration: none; }
.telefono-box .telefono a:hover { text-decoration: underline; }
.telefono-box .telefono-secondario { font-size: 1.2em; font-weight: bold; margin: 5px 0; }
.telefono-box .telefono-secondario a { color: #2e7d32; text-decoration: none; }
.telefono-box.emergenza { background: #fff3e0; border: 2px solid #ff5722; }
.telefono-box.emergenza .telefono a { color: #d32f2f; }
.telefono-box .referente,
.telefono-box .nota { font-size: 0.8em; color: #666; margin: 5px 0 0 0; }
.telefono-box .nota a { color: #0077cc; }
.edit-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.btn-edit-mode {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-edit-mode.edit { background: #3498db; color: white; }
.btn-edit-mode.edit:hover { background: #2980b9; }
.btn-edit-mode.save { background: #27ae60; color: white; }
.btn-edit-mode.save:hover { background: #219a52; }
.btn-edit-mode.cancel { background: #e74c3c; color: white; }
.btn-edit-mode.cancel:hover { background: #c0392b; }
.editable-field { display: inline; }
.editable-field input {
    display: none;
    padding: 4px 8px;
    border: 2px solid #3498db;
    border-radius: 4px;
    font-size: inherit;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}
.editable-field input.phone { width: 120px; }
.editable-field input.name { width: 150px; }
.editable-field input.email { width: 220px; }
.editable-field input.title { width: 200px; font-weight: bold; }
body.edit-mode .editable-field .display-text { display: none; }
body.edit-mode .editable-field input { display: inline-block; }
.btn-remove-box,
.btn-remove-item {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    cursor: pointer;
    display: none;
    line-height: 1;
}
.btn-remove-box:hover,
.btn-remove-item:hover { background: #c0392b; }
body.edit-mode .btn-remove-box,
body.edit-mode .btn-remove-item { display: block; }
.btn-remove-item {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 12px;
}
.btn-add-box,
.btn-add-item {
    background: rgba(255,255,255,0.3);
    border: 2px dashed rgba(255,255,255,0.7);
    border-radius: 6px;
    padding: 30px 20px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: none;
    text-align: center;
    min-height: 120px;
}
.btn-add-box:hover,
.btn-add-item:hover { background: rgba(255,255,255,0.4); border-color: white; }
body.edit-mode .btn-add-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}
.btn-add-item {
    background: #f5f5f5;
    border-color: #ccc;
    color: #666;
    padding: 10px;
    min-height: auto;
    margin-top: 10px;
}
body.edit-mode .btn-add-item { display: block; }
.btn-add-box span,
.btn-add-item span { font-size: 1.5rem; }
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 15px 25px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s;
    z-index: 1000;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #27ae60; }
.toast.error { background: #e74c3c; }
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal-overlay.show { display: flex; }
.modal {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal h3 { margin: 0 0 20px 0; color: var(--text); }
.modal-field { margin-bottom: 15px; }
.modal-field label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; }
.modal-field input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
    color: var(--text);
}
.modal-field input:focus { border-color: #3498db; outline: none; background: #fff; }
.modal-buttons { display: flex; gap: 10px; margin-top: 20px; }
.modal-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.modal-buttons .btn-confirm { background: #27ae60; color: white; }
.modal-buttons .btn-cancel { background: #95a5a6; color: white; }

@media (max-width: 600px) {
    .telefono-box .telefono { font-size: 1.2em; }
    .edit-controls { flex-direction: column; align-items: center; }
    .editable-field input.email { width: 180px; }
    .editable-field input.title { width: 160px; }
    .contatti-grid { grid-template-columns: 1fr; }
}

/* ─── Logistica — Statistiche settimana ───────────────────────────────── */
.sw-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
.sw-table{width:100%;border-collapse:separate;border-spacing:0;min-width:660px;font-size:13px}
.sw-table thead th{padding:14px 10px 16px;text-align:center;font-weight:700;border-bottom:2px solid rgba(0,0,0,.08);vertical-align:bottom;background:rgba(255,255,255,.7)}
.sw-table thead th:first-child{text-align:left;width:160px;background:transparent;border-bottom-color:transparent}
.sw-day-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#888;margin-bottom:2px}
.sw-day-num{display:block;font-size:24px;font-weight:800;color:#222;line-height:1.1}
.sw-day-sub{display:block;font-size:10px;color:#aaa;margin-top:1px}
.sw-hbar{height:8px;background:rgba(0,0,0,.06);border-radius:4px;margin-top:8px;overflow:hidden;display:flex}
.sw-hbar-seg{height:100%;min-width:0;transition:width .4s ease}
.sw-table tbody td{padding:9px 10px;text-align:center;border-bottom:1px solid rgba(0,0,0,.05);vertical-align:middle;color:#333}
.sw-table tbody tr:last-child td{border-bottom:none}
.sw-table tbody td:first-child{text-align:left}
.sw-table tbody tr:hover td{background:rgba(255,255,255,.7)}
.sw-metric{display:inline-flex;align-items:center;gap:8px}
.sw-metric svg{flex-shrink:0;width:18px;height:18px;opacity:.75}
.sw-metric-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#555}
.sw-cell{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.sw-val{font-size:15px;font-weight:700;text-align:center;line-height:1}
.sw-minibar{width:100%;height:4px;background:rgba(0,0,0,.06);border-radius:2px;overflow:hidden}
.sw-minibar-fill{height:100%;border-radius:2px;transition:width .4s ease}
.sw-c-dap{background:#bdbdbd}.sw-c-prep{background:#e65100}.sw-c-fatt{background:#1565c0}.sw-c-cons{background:#2e7d32}.sw-c-rien{background:#c62828}
.sw-t-dap{color:#666}.sw-t-prep{color:#e65100}.sw-t-fatt{color:#1565c0}.sw-t-cons{color:#2e7d32}.sw-t-rien{color:#c62828}.sw-t-neu{color:#555}
.sw-sep td{padding:0!important;border-bottom:none!important}
.sw-sep hr{border:none;border-top:1px dashed rgba(0,0,0,.1);margin:2px 0}
.sw-legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:11px;color:#666}
.sw-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
@media(max-width:768px){
  .sw-table{font-size:11px;min-width:560px}
  .sw-table thead th{padding:10px 6px 12px}
  .sw-table tbody td{padding:7px 6px}
  .sw-day-num{font-size:18px}
  .sw-val{font-size:13px}
  .sw-metric-name{font-size:10px}
  .sw-metric svg{width:15px;height:15px}
  .sw-table thead th:first-child{width:120px}
}

/* ─── Magazzino — KPI & Menu ──────────────────────────────────────────── */
.mag-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.mag-section { margin-bottom: 36px; }
.mag-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0,0,0,.08);
}
.mag-section-title i {
    font-size: 1.1rem;
    width: 28px;
    text-align: center;
}
.kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.kpi-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--panel-shadow);
    transition: transform .2s, box-shadow .2s, border-color .3s;
    text-decoration: none;
    color: var(--text);
    display: block;
}
.kpi-card:hover {
    transform: translateY(-3px);
    border-color: var(--glass-border-lit);
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 20px rgba(135,0,0,.08);
}
.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    margin-bottom: 12px;
}
.kpi-icon.ean      { background: linear-gradient(135deg, #667eea, #764ba2); }
.kpi-icon.peso     { background: linear-gradient(135deg, #f093fb, #f5576c); }
.kpi-icon.immagine { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.kpi-number {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}
.kpi-number.ean      { color: #667eea; }
.kpi-number.peso     { color: #f5576c; }
.kpi-number.immagine { color: #4facfe; }
.kpi-label { font-size: .82rem; color: var(--muted); margin-bottom: 12px; }
.kpi-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--primary);
}
.kpi-cta i { font-size: .7rem; }
.kpi-totale {
    background: linear-gradient(135deg, #870000, #9b0a0a);
    color: #fff;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: .95rem;
}
.kpi-totale strong { font-size: 1.6rem; }
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.menu-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: .92rem;
    transition: all .2s ease;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--panel-shadow);
}
.menu-card:hover {
    border-color: var(--primary);
    background: rgba(135,0,0,.08);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(135,0,0,.15);
}
.menu-card i {
    font-size: 1.2rem;
    color: var(--primary);
    min-width: 24px;
    text-align: center;
}

@media (max-width: 768px) {
    .kpi-row { grid-template-columns: 1fr; }
    .kpi-number { font-size: 2rem; }
    .menu-grid { grid-template-columns: 1fr; }
}

/* ─── Mansioni — Share FAB ────────────────────────────────────────────── */
.share-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary, #870000);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    z-index: 9999;
}
.share-fab:hover {
    background: var(--primary-hover, #9b0a0a);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.share-fab:active { transform: scale(0.95); }
@media (max-width: 768px) {
    .share-fab { bottom: 16px; right: 16px; width: 50px; height: 50px; font-size: 20px; }
}

/* ─── Profilo ─────────────────────────────────────────────────────────── */
.profilo-wrap  { max-width: 680px; margin: 28px auto; padding: 0 16px; }
.profilo-card  { background: var(--glass-bg); border-radius: 16px;
                 box-shadow: var(--panel-shadow);
                 backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
                 border: 1px solid var(--glass-border);
                 padding: 28px; margin-bottom: 22px;
                 transition: border-color .3s, box-shadow .4s; }
.profilo-card:hover { border-color: var(--glass-border-lit); }
.profilo-card h2 { font-size: 1.05rem; color: var(--text); text-transform: uppercase;
                   letter-spacing: .5px; margin: 0 0 20px; display: flex; align-items: center; gap: 8px;
                   -webkit-text-fill-color: unset; background: none; -webkit-background-clip: unset; }
.info-row      { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.info-label    { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
                 letter-spacing: .4px; min-width: 130px; }
.info-value    { font-size: 15px; color: var(--text); }
.form-group    { margin-bottom: 16px; flex: 1; min-width: 180px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary);
                    margin-bottom: 5px; text-transform: uppercase; letter-spacing: .3px; }
.form-group input { width: 100%; border: 1px solid var(--glass-border); border-radius: 8px;
                    padding: 10px 13px; font-size: 14px; background: rgba(var(--white-rgb),.8);
                    color: var(--text);
                    box-sizing: border-box; font-family: inherit;
                    transition: border-color .25s, background .25s, box-shadow .25s; }
.form-group input:focus { outline: none; border-color: rgba(var(--primary-rgb),.5);
                          background: #fff;
                          box-shadow: 0 0 20px rgba(var(--primary-rgb),.08); }
.form-group select { width: 100%; border: 1px solid var(--glass-border); border-radius: 8px;
                     padding: 9px 12px; font-size: 14px; background: rgba(var(--white-rgb),.8);
                     color: var(--text);
                     box-sizing: border-box; font-family: inherit;
                     transition: border-color .25s, background .25s, box-shadow .25s; }
.form-group select:focus { outline: none; border-color: rgba(var(--primary-rgb),.5);
                           background: #fff;
                           box-shadow: 0 0 20px rgba(var(--primary-rgb),.08); }
.form-hint     { font-size: 11px; color: var(--muted); margin-top: 4px; }
.divider       { border: none; border-top: 1px solid var(--glass-border); margin: 20px 0; }

/* ─── Shared: Messages & Badges ───────────────────────────────────────── */
.msg-ok        { background: rgba(var(--green-rgb),.1); border: 1px solid rgba(var(--green-rgb),.25);
                 color: var(--green);
                 border-radius: 10px; padding: 11px 16px; margin-bottom: 20px; font-size: 14px; }
.msg-error     { background: rgba(var(--primary-rgb),.1); border: 1px solid rgba(var(--primary-rgb),.25);
                 color: #c62828;
                 border-radius: 10px; padding: 11px 16px; margin-bottom: 20px; font-size: 14px; }
.badge-admin     { background:rgba(var(--primary-rgb),.5); color:#fff; border-radius:6px; padding:3px 10px; font-size:11px; font-weight:700; box-shadow: 0 0 8px rgba(var(--primary-rgb),.2); }
.badge-user      { background:rgba(var(--black-rgb),.06); color:var(--text-secondary); border-radius:6px; padding:3px 10px; font-size:11px; font-weight:600; }
.badge-agente    { background:rgba(21,101,192,.12); color:#1565c0; border-radius:6px; padding:3px 10px; font-size:11px; font-weight:600; }
.badge-magazzino { background:rgba(230,81,0,.12); color:#e65100; border-radius:6px; padding:3px 10px; font-size:11px; font-weight:600; }

/* ─── Gestione Accessi ────────────────────────────────────────────────── */
.ga-wrap        { max-width: 960px; margin: 28px auto; padding: 0 16px; }
.ga-card        { background: var(--glass-bg); border-radius: 16px; box-shadow: var(--panel-shadow);
                  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
                  border: 1px solid var(--glass-border);
                  padding: 24px; margin-bottom: 22px; transition: border-color .3s; }
.ga-card:hover  { border-color: var(--glass-border-lit); }
.ga-card h2     { font-size: 1.05rem; color: var(--text); text-transform: uppercase;
                  letter-spacing: .5px; margin-bottom: 18px;
                  -webkit-text-fill-color: unset; background: none; -webkit-background-clip: unset; }
.form-row       { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.form-check     { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; }
.form-check label { font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.form-check input { width: auto; cursor: pointer; accent-color: var(--primary); }
.form-actions   { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ga-table       { width: 100%; border-collapse: collapse; font-size: 14px; }
.ga-table th    { background: rgba(var(--white-rgb),.8); padding: 10px 12px; text-align: left;
                  font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
                  letter-spacing: .4px; border-bottom: 2px solid var(--glass-border); white-space: nowrap;
                  backdrop-filter: blur(10px); }
.ga-table td    { padding: 10px 12px; border-bottom: 1px solid var(--glass-border); vertical-align: middle;
                  color: var(--text-secondary); }
.ga-table tr:last-child td { border-bottom: none; }
.ga-table tbody tr:hover   { background: var(--glass-bg-hover); }
.actions-cell   { display: flex; gap: 6px; flex-wrap: wrap; }
.status-on      { color: var(--green); font-weight: 700; font-size: 12px; text-shadow: 0 0 8px rgba(var(--green-rgb),.3); }
.status-off     { color: var(--muted); font-size: 12px; }
.me-tag         { font-size: 11px; color: var(--muted); margin-left: 4px; }

/* Legenda ruoli — Glass */
.acm-table       { width:100%; border-collapse:collapse; font-size:13px; }
.acm-table th    { background:rgba(var(--white-rgb),.8); padding:9px 10px; text-align:center;
                   font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase;
                   letter-spacing:.3px; border-bottom:2px solid var(--glass-border); white-space:nowrap; }
.acm-table th:first-child { text-align:left; min-width:180px; }
.acm-table td    { padding:8px 10px; border-bottom:1px solid var(--glass-border); text-align:center;
                   vertical-align:middle; color:var(--text-secondary); }
.acm-table td:first-child { text-align:left; font-weight:500; }
.acm-table tbody tr:hover { background:var(--glass-bg-hover); }
.acm-sub td:first-child { padding-left:28px; color:var(--muted); font-weight:400; }
.acm-sub td:first-child::before { content:'└ '; color:rgba(var(--black-rgb),.2); }
.acm-icon        { display:inline-block; width:22px; text-align:center; margin-right:4px; color:#ff6666; font-size:13px; }
.acm-full        { color:var(--green); font-weight:700; font-size:15px; }
.acm-limited     { color:#e65100; font-weight:700; font-size:14px; }
.acm-denied      { color:rgba(var(--black-rgb),.25); font-size:14px; }
.acm-notes       { font-size:11px; color:var(--muted); font-style:italic; display:block; margin-top:1px; }
.acm-detected    { font-size:10px; color:var(--muted); display:block; margin-top:2px; }
.acm-legend-row  { display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; padding-top:12px;
                   border-top:1px solid var(--glass-border); font-size:12px; color:var(--muted); }
.acm-legend-item { display:flex; align-items:center; gap:5px; }
.acm-badge-th    { font-size:10px; padding:2px 6px; border-radius:3px; color:#fff; font-weight:700; }
.acm-dir-header td {
    background: rgba(var(--white-rgb),.8);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: .6px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--glass-border);
}
.acm-dir-header td i { color: #ff6666; margin-right: 5px; }
.acm-path       { font-size: 10px; color: var(--muted); margin-left: 4px; font-family: monospace; }
.acm-page-link  { text-decoration: none; color: var(--text-secondary); }
.acm-page-link:hover { text-decoration: underline; color: #ff6666; }