/* ============================================================
   2M FormGest v1.4.0 — css/app.css
   Design: Industrial / Utilitarian — pulito, professionale
   Font: Syne (display) + IBM Plex Sans (corpo)
   Rev. 1 | 27/02/2026 | 2M SICURLAV DI MONTI MORENO
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ── Variabili ──────────────────────────────────────────────── */
:root {
  --ink:        #0f1117;
  --ink-2:      #2a2d36;
  --ink-3:      #4a4e5c;
  --ink-4:      #7b8093;
  --rule:       #dde0e8;
  --rule-lt:    #eff1f5;
  --bg:         #f5f6f9;
  --white:      #ffffff;

  --accent:     #1a4fff;
  --accent-h:   #0033cc;
  --accent-lt:  #e8edff;
  --danger:     #d91e1e;
  --danger-lt:  #fdeaea;
  --ok:         #0d8a4e;
  --ok-lt:      #e2f5ec;
  --warn:       #b55e00;
  --warn-lt:    #fef3e2;
  --slate:      #4e5569;
  --slate-lt:   #e8eaf0;

  --f-display: 'Inter', sans-serif;
  --f-body:    'IBM Plex Sans', sans-serif;

  --r:   4px;
  --r-lg:8px;
  --sidebar: 224px;
  --topbar:  56px;

  --sh-sm: 0 1px 3px rgba(15,17,23,.08);
  --sh:    0 3px 10px rgba(15,17,23,.09);
  --sh-lg: 0 8px 24px rgba(15,17,23,.12);

  --ease: cubic-bezier(.4,0,.2,1);
  --t: 150ms;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:14px; -webkit-text-size-adjust:100% }
body { font-family:var(--f-body); font-size:14px; line-height:1.6;
       color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font-family:inherit; font-size:inherit }
img { display:block; max-width:100% }

/* ── Utility ────────────────────────────────────────────────── */
.hidden  { display:none !important }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }

/* ── Shell layout ───────────────────────────────────────────── */
.shell { display:flex; min-height:100vh }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar);
  min-height: 100vh;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  position: fixed;
  top:0; left:0;
  z-index: 100;
}

.sidebar__brand {
  height: var(--topbar);
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand__sq {
  width:30px; height:30px;
  background: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800; font-size:12px;
  color:#fff; flex-shrink:0;
}

.brand__name {
  font-family:var(--f-display); font-weight:700; font-size:15px;
  color:#fff; line-height:1.1;
}

.brand__ver { font-size:10px; color:var(--ink-4); font-weight:300 }

.sidebar__nav { flex:1; padding: 16px 0; overflow-y:auto }

.nav__section {
  padding: 14px 20px 4px;
  font-size:10px; font-weight:600; letter-spacing:.8px;
  text-transform:uppercase; color:var(--ink-4);
}

.nav__item {
  display:flex; align-items:center; gap:10px;
  padding: 9px 20px;
  color:#9ba3ba; font-size:13.5px;
  cursor:pointer; border:none; background:none;
  width:100%; text-align:left;
  border-left:2px solid transparent;
  transition:color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav__item:hover { color:#fff; background:rgba(255,255,255,.04) }
.nav__item--active { color:#fff; background:rgba(26,79,255,.18); border-left-color:var(--accent); font-weight:500 }
.nav__ico { width:15px; text-align:center; opacity:.65; flex-shrink:0 }
.nav__item--active .nav__ico { opacity:1 }

.sidebar__foot {
  padding:14px 20px;
  border-top:1px solid rgba(255,255,255,.06);
}
.sidebar__email { font-size:11px; color:var(--ink-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:8px }

/* ── Main ────────────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar);
  flex:1; min-height:100vh;
  display:flex; flex-direction:column;
}

.topbar {
  height:var(--topbar);
  background:var(--white); border-bottom:1px solid var(--rule);
  display:flex; align-items:center;
  padding:0 32px;
  position:sticky; top:0; z-index:50;
  gap:12px;
}

.topbar__title {
  flex:1; font-family:var(--f-display); font-weight:700;
  font-size:15px; color:var(--ink);
}

.topbar__actions { display:flex; gap:8px; align-items:center }

#app { flex:1; padding:32px }

/* ── Page loader (barra top) ─────────────────────────────────── */
#page-loader {
  position:fixed; top:0; left:0; right:0; height:2px;
  background:var(--accent); z-index:999;
  transform-origin:left;
  animation:loader 1.4s ease-in-out infinite;
}
@keyframes loader { 0%{transform:scaleX(0);opacity:1} 70%{transform:scaleX(.8);opacity:1} 100%{transform:scaleX(1);opacity:0} }

/* ── Login — Opzione B (due colonne) ──────────────────────────── */

/* Layout wrapper */
.login-wrap {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* ── Colonna sinistra: branding ── */
.login-brand {
  flex: 0 0 40%;
  background: linear-gradient(160deg, #1e3a8a 0%, #1e40af 55%, #2563eb 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
}
.login-brand::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  top: -160px; right: -160px;
  pointer-events: none;
}
.login-brand::after {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  bottom: -100px; left: -100px;
  pointer-events: none;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.brand-logo {
  width: 200px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.3));
}
.brand-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.brand-company {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 2px;
}

.brand-body { position: relative; z-index: 2; }
.brand-headline {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 14px;
}
.brand-desc {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
}

.brand-footer { position: relative; z-index: 2; }
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: 12.5px;
  color: rgba(255,255,255,.9);
  font-weight: 500;
}
.badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(74,222,128,.3);
  flex-shrink: 0;
}

/* ── Colonna destra: form ── */
.login-form-col {
  flex: 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 52px;
}
.login-form-inner {
  width: 100%;
  max-width: 420px;
}
.form-heading { margin-bottom: 36px; }
.form-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 28px;
  color: #0f172a;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.form-sub { font-size: 14px; color: #64748b; }

.btn-accedi {
  width: 100%;
  padding: 13px;
  background: #1e40af;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s;
  letter-spacing: .01em;
}
.btn-accedi:hover  { background: #1d4ed8; }
.btn-accedi:active { transform: scale(.99); }

.gdpr-box {
  margin-top: 22px;
  padding: 14px 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
}
.gdpr-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 5px;
}
.gdpr-text {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.55;
}

/* Footer */
.login-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
  color: #94a3b8;
}
.footer-appname { font-weight: 700; color: #1e40af; }
.footer-version {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
}
.footer-copy { color: #64748b; font-weight: 500; margin-left: auto; }

/* Responsivo */
@media (max-width: 768px) {
  .login-wrap { flex-direction: column; }
  .login-brand { flex: 0 0 auto; padding: 32px 28px; }
  .brand-headline { font-size: 20px; }
  .login-form-col { padding: 36px 24px; }
}

/* Compatibilità classi legacy (vecchio layout card) */
.login-page {
  min-height:100vh; background:var(--ink);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card {
  background:var(--white); width:100%; max-width:380px;
  padding:48px 40px; border:1px solid var(--rule);
}
.login-brand__sq {
  width:44px; height:44px; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800; font-size:14px; color:#fff; flex-shrink:0;
}
.login-brand__name { font-family:var(--f-display); font-weight:700; font-size:22px; color:var(--ink); line-height:1; }
.login-brand__sub  { font-size:11px; color:var(--ink-4); margin-top:3px }

.login-form { display:flex; flex-direction:column; gap:20px }

.login-err {
  background:var(--danger-lt); color:var(--danger);
  padding:10px 14px; font-size:13px;
  border-left:3px solid var(--danger);
}

.login-foot {
  margin-top:32px; padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:11px; color:var(--ink-4); text-align:center;
}

.login-gdpr-notice {
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: .78rem;
  color: #374151;
  line-height: 1.55;
}

.login-gdpr-notice p {
  margin: 0 0 .4rem;
}

.login-gdpr-notice p:last-child {
  margin-bottom: 0;
}

.login-gdpr-notice a {
  color: #1e40af;
  text-decoration: underline;
  font-weight: 500;
}

.login-gdpr-notice a:hover {
  color: #1d4ed8;
}

/* Footer proprietà software */
.login-app-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  font-size: .72rem;
  color: #6b7280;
}

.login-app-name {
  font-weight: 700;
  color: #1e40af;
}

.login-app-version {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
  padding: .1rem .45rem;
  border-radius: 9999px;
  font-size: .68rem;
}

.login-app-owner {
  color: #374151;
  font-weight: 500;
}

.login-app-footer a {
  color: #1e40af;
  text-decoration: underline;
}

.login-app-footer a:hover {
  color: #1d4ed8;
}

/* ── Shell modalità guest (login / non autenticato) ─────────── */
/*
   Quando l'utente NON è autenticato, la sidebar è nascosta.
   Senza questi override il `.main` mantiene `margin-left: var(--sidebar)`
   e la `.topbar` rimane visibile → spazi bianchi indesiderati.
   La classe `shell--guest` viene aggiunta/rimossa da JS (index.html).
*/
.shell--guest .main {
  margin-left: 0;          /* elimina il gap lasciato dalla sidebar fissa  */
}

.shell--guest .topbar {
  display: none;           /* nascondi la topbar: non serve in stato guest  */
}

.shell--guest #app {
  padding: 0;              /* la .login-page gestisce il proprio padding    */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.shell--guest #app-footer {
  display: none;           /* footer app nascosto: il login ha il suo       */
}

/* ── Form ────────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:4px }

.field__lbl {
  font-size:11px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; color:var(--ink-3);
}
.field__lbl--req::after { content:' *'; color:var(--danger) }

.field__inp,
.field__sel,
.field__ta {
  width:100%; padding:8px 10px;
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--white); color:var(--ink);
  font-size:14px; line-height:1.5;
  transition:border-color var(--t), box-shadow var(--t);
  outline:none; appearance:none;
}
.field__inp:focus,.field__sel:focus,.field__ta:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(26,79,255,.12);
}
.field__inp::placeholder { color:var(--ink-4) }
.field__ta { resize:vertical; min-height:80px }
.field__inp--err { border-color:var(--danger) }
.field__err { font-size:11px; color:var(--danger) }
.field__hint { font-size:11px; color:var(--ink-4) }

.fgrid   { display:grid; gap:16px }
.fgrid-2 { grid-template-columns:1fr 1fr }
.fgrid-3 { grid-template-columns:1fr 1fr 1fr }

/* ── Bottoni ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 18px;
  font-size:13px; font-weight:500; line-height:1;
  border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; white-space:nowrap;
  transition:background var(--t), border-color var(--t), color var(--t);
}
.btn:disabled { opacity:.5; cursor:not-allowed }
.btn--sm { padding:5px 12px; font-size:12px }
.btn--full { width:100% }

.btn--primary  { background:var(--accent);  color:#fff;         border-color:var(--accent) }
.btn--primary:hover:not(:disabled) { background:var(--accent-h); border-color:var(--accent-h) }

.btn--secondary { background:var(--white);  color:var(--ink);   border-color:var(--rule) }
.btn--secondary:hover:not(:disabled) { background:var(--bg);    border-color:var(--ink-4) }

.btn--ghost    { background:transparent;    color:var(--ink-3);  border-color:transparent }
.btn--ghost:hover:not(:disabled) { background:var(--rule-lt);    color:var(--ink) }

.btn--danger   { background:var(--danger);  color:#fff;          border-color:var(--danger) }
.btn--danger:hover:not(:disabled) { background:#b81919 }

.btn--success  { background:#16a34a; color:#fff;  border-color:#16a34a }
.btn--success:hover:not(:disabled) { background:#15803d; border-color:#15803d }

.btn--archive  { background:#334155; color:#fff;  border-color:#334155 }
.btn--archive:hover:not(:disabled) { background:#1e293b; border-color:#1e293b }

.btn--danger-outline { background:transparent; color:var(--danger); border-color:#fca5a5 }
.btn--danger-outline:hover:not(:disabled) { background:var(--danger-lt); border-color:var(--danger) }

.btn-ico {
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); background:var(--white);
  color:var(--ink-3); border-radius:var(--r); cursor:pointer; font-size:13px;
  transition:all var(--t);
}
.btn-ico:hover { background:var(--bg); border-color:var(--ink-4); color:var(--ink) }
.btn-ico--danger:hover { background:var(--danger-lt); border-color:var(--danger); color:var(--danger) }

/* ── Tabella ─────────────────────────────────────────────────── */
.tbl-wrap {
  overflow-x:auto; border:1px solid var(--rule);
  border-radius:var(--r-lg); background:var(--white);
}

.tbl { width:100%; border-collapse:collapse; font-size:13.5px }

.tbl thead { background:var(--bg); border-bottom:1px solid var(--rule) }

.tbl th {
  padding:10px 16px; text-align:left;
  font-size:10.5px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; color:var(--ink-4); white-space:nowrap;
}
.th--sort  { cursor:pointer; user-select:none }
.th--sort:hover { color:var(--ink) }
.th--asc::after  { content:' ↑' }
.th--desc::after { content:' ↓' }
.th--act   { width:1%; white-space:nowrap }

.tbl td {
  padding:10px 16px; border-top:1px solid var(--rule-lt);
  color:var(--ink-2); vertical-align:middle;
}
.tbl tbody tr:hover td { background:#fafbfd }
.td--act { white-space:nowrap }

.tbl-empty {
  padding:56px 24px; text-align:center;
  color:var(--ink-4); background:var(--white);
  border:1px solid var(--rule); border-radius:var(--r-lg);
}
.tbl-empty__ico { display:block; font-size:28px; opacity:.35; margin-bottom:12px }

/* ── Badge ───────────────────────────────────────────────────── */
.badge {
  display:inline-block; padding:2px 7px;
  font-size:10.5px; font-weight:600; letter-spacing:.3px;
  border-radius:2px; text-transform:uppercase; white-space:nowrap;
}
.badge--green  { background:var(--ok-lt);      color:var(--ok)    }
.badge--red    { background:var(--danger-lt);  color:var(--danger)}
.badge--blue   { background:var(--accent-lt);  color:var(--accent)}
.badge--gray   { background:var(--rule-lt);    color:var(--ink-3) }
.badge--slate  { background:var(--slate-lt);   color:var(--slate) }
.badge--yellow { background:var(--warn-lt);    color:var(--warn)  }

/* ── Pill-bar filtro stati ───────────────────────────────────── */
.pill-bar { display:flex; gap:5px; flex-wrap:wrap; align-items:center }

.pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:20px; font-size:12px; font-weight:600;
  cursor:pointer; border:2px solid transparent;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
  white-space:nowrap; user-select:none; line-height:1.4;
}

/* base (non attivo): tono chiaro */
.pill--all   { background:var(--white);    color:var(--ink-3);  border-color:var(--rule) }
.pill--gray  { background:var(--rule-lt);  color:var(--ink-3);  border-color:var(--rule-lt) }
.pill--green { background:var(--ok-lt);    color:var(--ok);     border-color:var(--ok-lt) }
.pill--blue  { background:var(--accent-lt);color:var(--accent); border-color:var(--accent-lt) }
.pill--slate { background:var(--slate-lt); color:var(--slate);  border-color:var(--slate-lt) }
.pill--red   { background:var(--danger-lt);color:var(--danger); border-color:var(--danger-lt) }

/* attivo: bordo evidenziato */
.pill--all.pill--active,   .pill--all:hover   { background:var(--ink-2);    color:var(--white);  border-color:var(--ink-2) }
.pill--gray.pill--active,  .pill--gray:hover  { border-color:var(--slate) }
.pill--green.pill--active, .pill--green:hover { border-color:var(--ok) }
.pill--blue.pill--active,  .pill--blue:hover  { border-color:var(--accent) }
.pill--slate.pill--active, .pill--slate:hover { border-color:var(--slate) }
.pill--red.pill--active,   .pill--red:hover   { border-color:var(--danger) }

/* ── Stat cards (dashboard) ──────────────────────────────────── */
.stat-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
}

.stat-card {
  background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:20px 22px;
}
.stat-card__val {
  font-family:var(--f-display); font-weight:800; font-size:34px;
  color:var(--ink); line-height:1; margin-bottom:4px;
}
.stat-card__lbl {
  font-size:11px; color:var(--ink-4); font-weight:600;
  text-transform:uppercase; letter-spacing:.4px;
}
.stat-card--accent .stat-card__val { color:var(--accent) }
.stat-card--green  .stat-card__val { color:var(--ok) }
.stat-card--red    .stat-card__val { color:var(--danger) }
.stat-card--warn   .stat-card__val { color:var(--warn) }

/* ── Page header ─────────────────────────────────────────────── */
.ph {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:24px;
  margin-bottom:28px; flex-wrap:wrap;
}
.ph__title { font-family:var(--f-display); font-weight:700; font-size:22px; color:var(--ink); line-height:1.2 }
.ph__sub   { font-size:13px; color:var(--ink-4); margin-top:3px }
.ph__act   { display:flex; gap:10px; flex-shrink:0 }

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:24px;
}
.card__title {
  font-family:var(--f-display); font-size:14px; font-weight:700;
  color:var(--ink); margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--rule-lt);
}

/* ── Toolbar (filtri sopra tabella) ──────────────────────────── */
.toolbar {
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:16px;
}
.toolbar__search { position:relative; flex:1; min-width:200px; max-width:300px }
.toolbar__search input { padding-left:28px; width:100% }
.toolbar__search::before {
  content:'⌕'; position:absolute; left:9px; top:50%;
  transform:translateY(-50%); color:var(--ink-4); pointer-events:none;
  font-size:14px;
}

/* ── Tab ─────────────────────────────────────────────────────── */
.tabs {
  display:flex; border-bottom:1px solid var(--rule);
  margin-bottom:20px; gap:0;
}
.tab {
  padding:10px 18px; font-size:13px; font-weight:500;
  color:var(--ink-4); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--t), border-color var(--t); white-space:nowrap;
}
.tab:hover { color:var(--ink) }
.tab--active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600 }
.tab-panel { display:none }
.tab-panel--active { display:block }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,17,23,.52);
  display:flex; align-items:center; justify-content:center;
  z-index:200; padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity var(--t) var(--ease);
}
.modal-overlay--open { opacity:1; pointer-events:all }

.modal {
  background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-lg); width:100%;
  max-height:90vh; overflow-y:auto;
  display:flex; flex-direction:column; box-shadow:var(--sh-lg);
}
.modal--sm { max-width:400px }
.modal--md { max-width:580px }
.modal--lg { max-width:780px }
.modal--xl { max-width:1000px }

.modal__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--rule);
  position:sticky; top:0; background:var(--white); z-index:1;
}
.modal__title { font-family:var(--f-display); font-size:16px; font-weight:700 }
.modal__x {
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--ink-4); font-size:18px; cursor:pointer;
  border-radius:var(--r); transition:background var(--t);
}
.modal__x:hover { background:var(--rule-lt); color:var(--ink) }

.modal__body { padding:24px; flex:1 }
.modal__foot {
  padding:14px 24px; border-top:1px solid var(--rule);
  display:flex; justify-content:flex-end; gap:10px; background:var(--bg);
}
.modal-open { overflow:hidden }

/* ── Toast ───────────────────────────────────────────────────── */
#toast-container {
  position:fixed; bottom:24px; right:24px; z-index:999;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; background:var(--ink-2); color:#fff;
  border-radius:var(--r-lg); font-size:13.5px;
  min-width:270px; max-width:360px;
  box-shadow:var(--sh-lg); border-left:3px solid var(--accent);
  pointer-events:all;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.toast--visible { opacity:1; transform:translateY(0) }
.toast--out     { opacity:0; transform:translateY(4px) }
.toast--success { border-left-color:var(--ok) }
.toast--error   { border-left-color:var(--danger) }
.toast--warn    { border-left-color:var(--warn) }
.toast__icon {
  width:18px; height:18px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; border-radius:50%;
  background:rgba(255,255,255,.15);
}
.toast__msg { flex:1; line-height:1.45 }
.toast__close {
  background:none; border:none; color:rgba(255,255,255,.5);
  cursor:pointer; font-size:16px; line-height:1; flex-shrink:0;
  padding:0 2px;
}
.toast__close:hover { color:#fff }

/* ── Page error ──────────────────────────────────────────────── */
.page-error {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; padding:64px 24px; text-align:center;
}
.page-error__msg    { font-size:16px; color:var(--ink-2) }
.page-error__detail { font-size:12px; color:var(--ink-4) }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --sidebar:0px }
  .sidebar { display:none }
  .main { margin-left:0 }
  .fgrid-2,.fgrid-3 { grid-template-columns:1fr }
  #app { padding:20px 16px }
}