/* ============================================================
   SWGG · TEMA CHIARO · v1.0
   Override pulito delle variabili e degli stili di swgg_core.css
   Caricato DOPO swgg_core.css — la cascata CSS garantisce priorità
   Nessun !important necessario
   ============================================================ */

/* ── VARIABILI: rimappa le shorthand del core al Design System chiaro ── */
:root {
  /* Colori principali */
  --g:   var(--swgg-gold);
  --g2:  var(--swgg-gold);
  --g3:  var(--swgg-accent);

  /* Sfondi */
  --k:   var(--swgg-shell);       /* era #1e1d1b (scuro) → #f5f3ee (chiaro) */
  --d1:  var(--swgg-sidebar);     /* era #232220 → #ece9e2 */
  --d2:  #ddd9d0;                 /* superfici card/dropdown */
  --d3:  #d5d1c8;                 /* superfici hover */
  --d4:  #ccc8bf;

  /* Testi */
  --w:   var(--swgg-wordmark);    /* era #f2ece0 → #2a2825 */
  --w2:  var(--swgg-h1);          /* era rgba(242,236,224,.85) → #1e1c1a */
  --w3:  var(--swgg-inactive);    /* era rgba(242,236,224,.50) → #9a9690 */
  --w4:  #b0ada8;
  --w5:  rgba(42,40,37,.08);

  /* Accenti */
  --red: #c0392b;
  --grn: #27ae60;
  --blu: var(--swgg-accent);

  /* Bordi e ombre — toni caldi trasparenti */
  --gd:  rgba(122,106,80,.06);
  --gl:  rgba(122,106,80,.12);
  --gll: rgba(122,106,80,.08);

  /* Ombre chiare */
  --sh-sm: 0 2px 8px rgba(0,0,0,.06);
  --sh-md: 0 8px 20px rgba(0,0,0,.1);
  --sh-lg: 0 12px 30px rgba(0,0,0,.12);

  /* Layout */
  --radius: 8px;
  --sans: var(--swgg-font-body);
}

/* ── BODY ── */
body {
  background: var(--swgg-shell);
  color: var(--swgg-wordmark);
  font-family: var(--swgg-font-body);
}

/* ── SIDEBAR ── */
.sidebar { background: var(--swgg-sidebar); }
.sb-brand { padding: 20px 20px 16px; }
.sb-logo {
  width: 42px; height: 42px;
  border: 1.5px solid var(--swgg-gold);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(160,120,64,.08), rgba(160,120,64,.02));
}
.sb-brand-name {
  font-family: var(--swgg-font-display, 'Libre Bodoni', serif);
  font-size: 18px; font-weight: 600;
  color: var(--swgg-wordmark, #2a2520);
}
.sb-brand-name em { color: var(--swgg-gold); }
.sb-brand-sub { font-size: 8px; letter-spacing: 3px; color: var(--swgg-inactive); }
.sb-meta-tag { color: var(--swgg-gold); }
.sb-meta-ver { color: var(--swgg-inactive); }
.sb-uname { color: var(--swgg-wordmark); font-size: 11.5px; font-weight: 600; }
.sb-urole { color: var(--swgg-inactive); font-size: 9px; }
.sb-avatar { width: 34px; height: 34px; font-size: 10px; }
.sb-st { color: var(--swgg-inactive); }
.sb-search { background: var(--swgg-shell); border-color: var(--swgg-line); }
.sb-logout { color: var(--swgg-inactive); }
.sb-collapse-icon { color: var(--swgg-inactive); }
.ni-icon { color: rgba(122,106,80,.5); }
.ni-txt { color: #1a1815; font-size: 12px; font-weight: 500; letter-spacing: 0.2px; }

/* ── NAVIGAZIONE ── */
.nav-lbl {
  color: var(--swgg-gold);
  font-size: 14px; letter-spacing: 0.5px;
  font-weight: 700; text-transform: none;
  padding-top: 14px; padding-bottom: 6px;
}
.nav-arrow { color: var(--swgg-gold); opacity: .5; }

/* ── TOPNAV & MOBILE TOPBAR ── */
.topnav, .mob-topbar {
  background: var(--swgg-surface);
  border-bottom: 1px solid var(--swgg-line);
}

/* Breadcrumb */
.tn-bc-home { color: var(--swgg-gold); }
.tn-bc-home:hover { background: rgba(122,106,80,.08); }
.tn-bc-sep { color: var(--swgg-inactive); }
.tn-bc-item { color: var(--swgg-inactive); }
.tn-bc-item.clickable:hover { color: var(--swgg-gold); background: rgba(122,106,80,.06); }
.tn-bc-item.tn-bc-current { color: var(--swgg-wordmark); font-weight: 600; }

/* Search compatto */
.tn-search-compact { border-color: var(--swgg-line); }
.tn-search-compact:hover { border-color: var(--swgg-gold); background: rgba(122,106,80,.04); }
.tn-search-ico { color: var(--swgg-gold); }
.tn-search-label { color: var(--swgg-inactive); }

/* Notifiche */
.tn-notif-btn { border-color: var(--swgg-line); color: var(--swgg-inactive); background: transparent; }
.tn-notif-btn:hover { border-color: var(--swgg-gold); color: var(--swgg-gold); background: rgba(122,106,80,.04); }
.tn-notif-btn.has-notif { color: var(--swgg-gold); }
.tn-notif-badge { background: #c0392b; }

/* Avatar */
.tn-avatar-btn { background: rgba(122,106,80,.08); border-color: rgba(122,106,80,.2); }
.tn-avatar-btn:hover { border-color: var(--swgg-gold); background: rgba(122,106,80,.14); }
.tn-avatar-initials { color: var(--swgg-gold); }

/* Dropdown profilo */
.tn-user-dropdown { background: #fff; border-color: var(--swgg-line); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.tn-dd-avatar { background: rgba(122,106,80,.08); border-color: rgba(122,106,80,.2); color: var(--swgg-gold); }
.tn-dd-name { color: var(--swgg-wordmark); }
.tn-dd-role { color: var(--swgg-inactive); }
.tn-dd-divider { background: var(--swgg-line); }
.tn-dd-item { color: var(--swgg-body); }
.tn-dd-item:hover { background: rgba(122,106,80,.06); color: var(--swgg-wordmark); }
.tn-dd-item span:first-child { color: var(--swgg-gold); }

/* Mobile */
.mob-wt span { color: var(--swgg-gold); }
.tn-logo::before { content: 'SW'; font-size: 10px; letter-spacing: .5px; }

/* ── PASSWORD GATE ── */
.pw-gate { background: var(--swgg-shell); }
.pw-box { background: #fff; border-color: var(--swgg-line); }
.pw-title { color: var(--swgg-wordmark); }
.pw-sub { color: var(--swgg-inactive); }
.pw-input { background: var(--swgg-shell); color: var(--swgg-wordmark); border-color: var(--swgg-line); }
.pw-btn { background: rgba(122,106,80,.1); border-color: var(--swgg-gold); color: var(--swgg-gold); }

/* ── COMPONENTI GENERALI ── */
.card { background: #fff; border-color: var(--swgg-line); }
.card-title { color: var(--swgg-wordmark); }
.card-body, .card-sub { color: var(--swgg-body); }
.mod-title { color: var(--swgg-h1); }
.mod-title em { color: var(--swgg-gold); }
.mod-eye { color: var(--swgg-gold); }
.mod-desc { color: var(--swgg-body); }
.note { background: rgba(122,106,80,.04); color: var(--swgg-body); }
.note strong { color: var(--swgg-wordmark); }

/* ── SEARCH OVERLAY ── */
.search-overlay { background: rgba(245,243,238,.97); }
.search-input { background: #fff; color: var(--swgg-wordmark); border-color: var(--swgg-line); }
.search-input::placeholder { color: var(--swgg-inactive); }
.sr-title { color: var(--swgg-wordmark); }
.sr-sub { color: var(--swgg-inactive); }
.sr-item:hover, .search-result:hover { background: rgba(122,106,80,.06); }
.search-close { color: var(--swgg-inactive); }

/* ── TOAST ── */
.toast { background: #fff; border-color: var(--swgg-gold); color: var(--swgg-wordmark); }

/* ── LANG MORE ── */
.lang-more { opacity: .5; font-size: 9px; letter-spacing: 0; padding: 3px 6px; }

/* ── PW USERS ── */
.pw-users { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.pw-user-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 12px 8px; gap: 6px;
  background: var(--swgg-shell); border: 1px solid var(--swgg-line);
  border-radius: 8px; cursor: pointer; transition: border-color .15s;
}
.pw-user-card:hover { border-color: var(--swgg-accent); }
.pw-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--swgg-sidebar); border: 1px solid var(--swgg-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--swgg-accent);
}
.pw-user-name { font-size: 11px; font-weight: 500; color: var(--swgg-wordmark); }
.pw-user-role { font-size: 9px; color: var(--swgg-inactive); }

/* ── MOBILE BOTTOM NAV — responsive ── */
@media (max-width: 900px) {
  #mobileNav { display: flex; }
  #app { padding-bottom: 66px; }
  .fab { display: none; }
}