/*
 * NASSA STUDIO — Design Tokens
 * Fonte della verità: NassaPED/style.css
 * Tutte le app della suite importano questo file.
 * NON modificare senza aggiornare anche style.css
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* ── Brand ── */
  --green:#0dff00;--green-dk:#00cc00;--green-lt:#e6ffe4;--green-mid:#b3ffb0;--green-text:#111;
  --magenta:#C2185B;--magenta-lt:#FCE4EC;
  --teal:#b2dfdb;--teal-lt:#e8f5f4;--teal-dk:#004d40;
  --amber:#f0f4b2;--amber-dk:#616100;--amber-lt:#fafde8;
  --red:#ef4444;--red-lt:#fee2e2;--red-dk:#991b1b;
  --blue:#dbeafe;--blue-dk:#1e40af;--blue-lt:#e6f9fb;

  /* ── Text ── */
  --text:#1c1c1e;--text-2:#6b6b6b;--text-3:#6b7280;

  /* ── Surfaces — sfondo BIANCO come NassaPED ── */
  --bg:#ffffff;          /* sfondo pagina = bianco */
  --surface:#ffffff;     /* cards, modals, sidebar = bianco */
  --surface-lt:#f5f5f7;  /* hover row, input bg, subtle bg */
  --border:#e5e7eb;
  --border-lt:#f0f0f2;

  /* ── Semantic status ── */
  --warning-bg:#fef9ee;--warning-border:#fde68a;--warning-text:#92400e;
  --danger-bg:#fff5f5;--danger-border:#fca5a5;--danger-text:#ef4444;
  --success-bg:#f0fdf4;--success-border:#bbf7d0;--success-text:#166534;

  /* ── Font ── */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ── Border width ── */
  --bw:.5px;

  /* ── Radii ── */
  --r:8px;--rs:4px;--r-xs:3px;--r-pill:99px;

  /* ── Type scale ── */
  --fs-xs:11px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:18px;
  --fs-lg:28px;

  /* ── Letter spacing ── */
  --ls-tight:-.02em;--ls-normal:0em;--ls-wide:.06em;

  /* ── Spacing (4pt grid) ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;
  --sp-5:20px;--sp-6:24px;--sp-8:32px;

  /* ── Transitions ── */
  --t-fast:.1s ease;--t-base:.15s ease;--t-slow:.25s ease;

  /* ── Shadows ── */
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 10px 24px rgba(0,0,0,.1);

  /* ── Layout chrome ── */
  --topbar:56px;--sidebar:56px;--sidebar-expanded:220px;
  /* ── Extended palette (used across apps, missing from original tokens) ── */
  --pink:#D4537E;--pink-lt:#fbeaf0;--pink-dk:#993556;

  /* ── Surface scale ── */
  --surface-0:#f5f5f7;   /* page bg when not pure white */
  --surface-1:#f9f9fb;   /* subtle raised surface */
  --surface-2:#fafafa;   /* input bg, table alternating */

  /* ── Text aliases (used in brand/strategy/ped) ── */
  --text-primary:var(--text);
  --text-secondary:var(--text-2);
  --text-muted:var(--text-3);
  --text-accent:var(--green-dk);

  /* ── Border aliases ── */
  --border-strong:#d1d5db;
  --border-accent:var(--green-dk);
  --border-success:#bbf7d0;
  --border-warning:#fde68a;
  --border-danger:#fca5a5;

  /* ── Semantic bg aliases (used in strategy.html) ── */
  --bg-accent:var(--green-lt);
  --bg-success:#f0fdf4;
  --bg-warning:#fef9ee;
  --bg-danger:#fff5f5;

  /* ── Font alias ── */
  --font-sans:var(--font);

  /* ── Line-heights ── */
  --lh-tight:1.25;--lh-base:1.5;--lh-relaxed:1.7;

  /* ── Extra shadow ── */
  --shadow-xl:0 20px 40px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.08);

  /* ── Transition shorthand (used as var(--t) in index/tweek) ── */
  --t:var(--t-base);

  /* ── Placeholder text ── */
  --placeholder:#9ca3af;

  /* ── Alias per compatibilità plan.js ── */
  --text-2: var(--text-muted);
  --text-3: #9ca3af;
  --border-lt: #f0f0f2;

}

/* ── Dark mode ── */
[data-theme="dark"]{
  --bg:#0f0f11;
  --surface:#1a1a1e;
  --surface-lt:#222228;
  --border:#2a2a30;
  --border-lt:#222228;
  --text:#f0f0f2;--text-2:#9ca3af;--text-3:#6b7280;
  --green-lt:#0d2b0c;--green-mid:#1a4d18;--green-text:#0a1a00;
  --warning-bg:#1a1400;--warning-border:#3a2800;--warning-text:#fbbf24;
  --danger-bg:#1a0a0a;--danger-border:#5a1a1a;
  --success-bg:#0a1f0a;--success-border:#14532d;
  --surface-0:#111116;
  --surface-1:#16161a;
  --surface-2:#1e1e24;
  --border-strong:#3a3a42;
  --placeholder:#4b5563;
  --pink-lt:#2a0a14;
  --bg-success:#0a1f0a;
  --bg-warning:#1a1400;
  --bg-danger:#1a0a0a;

}

/* ── Base reset ── */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  height:100%;font-family:var(--font);
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font-family:var(--font);}
button{cursor:pointer;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-pill);}

/* ════════════════════════════════════════════
   COMPONENTI CONDIVISI
   ════════════════════════════════════════════ */

/* ── Topbar (56px) ── */
.topbar{
  height:var(--topbar);flex-shrink:0;
  background:var(--surface);
  border-bottom:var(--bw) solid var(--border);
  display:flex;align-items:stretch;
  z-index:200;
}
.topbar-brand{
  width:var(--sidebar);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-right:var(--bw) solid var(--border);
  cursor:pointer;transition:background var(--t-fast);
}
.topbar-brand:hover{background:var(--surface-lt);}
.topbar-brand.expanded{width:var(--sidebar-expanded);justify-content:flex-start;padding:0 16px;gap:10px;}
.brand-mark{
  width:30px;height:30px;border-radius:var(--r);
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  color:var(--green-text);font-size:var(--fs-base);font-weight:700;
  flex-shrink:0;
}
.brand-name{
  font-size:var(--fs-base);font-weight:700;
  color:var(--text);letter-spacing:var(--ls-tight);
  opacity:0;white-space:nowrap;transition:opacity var(--t-base);
}
.topbar-brand.expanded .brand-name{opacity:1;}
.topbar-nav{display:flex;align-items:stretch;flex:1;padding:0 8px;gap:2px;}
.nav-tab{
  display:flex;align-items:center;padding:0 18px;
  font-size:var(--fs-base);font-weight:400;color:var(--text-2);
  cursor:pointer;border-bottom:2.5px solid transparent;border:none;background:none;
  transition:all var(--t-fast);white-space:nowrap;letter-spacing:var(--ls-tight);
}
.nav-tab:hover{color:var(--text);background:var(--surface-lt);}
.nav-tab.active{color:var(--text);font-weight:700;border-bottom:2.5px solid var(--green);}
.topbar-right{
  display:flex;align-items:center;gap:8px;
  padding:0 14px;
  border-left:var(--bw) solid var(--border);
}
.topbar-btn{
  width:30px;height:30px;border-radius:var(--r);
  border:var(--bw) solid var(--border);background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--text-2);transition:all var(--t-fast);
}
.topbar-btn:hover{background:var(--surface-lt);color:var(--text);}
.topbar-client{
  display:flex;align-items:center;gap:8px;
  padding:0 14px;border-right:var(--bw) solid var(--border);
  max-width:220px;
}
.client-avatar{
  width:28px;height:28px;border-radius:var(--rs);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;
}
.client-name{font-size:var(--fs-sm);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.client-sub{font-size:var(--fs-xs);color:var(--text-3);}

/* ── Sidebar (collassabile) ── */
.sidebar{
  width:var(--sidebar);flex-shrink:0;
  background:var(--surface);
  border-right:var(--bw) solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;transition:width .22s;
  z-index:100;
}
.sidebar.sb-expanded{width:var(--sidebar-expanded);}
.sb-main-nav{display:flex;flex-direction:column;height:100%;width:100%;}
.sb-nav-top{flex:1;overflow-y:auto;padding:8px 0;}
.sb-nav-foot{padding:4px 0 6px;}
.sb-group-lbl{
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--text-3);padding:8px 14px 3px;
  opacity:.65;white-space:nowrap;overflow:hidden;display:none;
}
.sidebar.sb-expanded .sb-group-lbl{display:block;}
.sb-nav-item{
  width:38px;height:38px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-3);
  transition:all var(--t-fast);margin:1px auto;flex-shrink:0;
  border:none;background:none;
}
.sidebar.sb-expanded .sb-nav-item{
  width:auto;height:auto;padding:10px 14px;
  margin:1px 6px;justify-content:flex-start;gap:12px;
}
.sb-nav-item:hover{background:var(--green-lt);color:var(--text);}
.sb-nav-item.active{background:var(--green);color:var(--green-text);}
.sidebar.sb-expanded .sb-nav-item.active{
  background:var(--green-lt);color:var(--text);
  border:1px solid var(--green-mid);
}
.sidebar.sb-expanded .sb-nav-item.active svg{color:var(--green-dk);}
.sidebar.sb-expanded .sb-nav-item.active .sb-nav-label{font-weight:700;}
.sb-nav-item svg{width:20px;height:20px;flex-shrink:0;}
.sb-nav-label{
  font-size:var(--fs-base);font-weight:400;
  white-space:nowrap;overflow:hidden;display:none;
}
.sidebar.sb-expanded .sb-nav-label{display:block;}
.sb-nav-sep{height:.5px;background:var(--border-lt);margin:5px auto;width:28px;}
.sidebar.sb-expanded .sb-nav-sep{width:calc(100% - 24px);margin:5px 12px;}
.sb-toggle-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:28px;margin:2px auto 4px;
  border-radius:var(--r);background:none;border:none;
  cursor:pointer;color:var(--text-3);transition:all var(--t-fast);
}
.sidebar.sb-expanded .sb-toggle-btn{
  width:calc(100% - 12px);margin:2px 6px 4px;
  justify-content:flex-end;padding-right:8px;
}
.sb-toggle-btn:hover{background:var(--surface-lt);color:var(--text);}
.sb-toggle-btn svg{width:15px;height:15px;}

/* ── Layout base ── */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.body{display:flex;flex:1;overflow:hidden;}
.main{flex:1;overflow:hidden;display:flex;flex-direction:column;}
.main-scroll{flex:1;overflow-y:auto;padding:24px;}

/* ── Bottoni ── */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:var(--r);
  font-size:var(--fs-sm);font-weight:500;
  cursor:pointer;border:var(--bw) solid var(--border);
  background:var(--surface);color:var(--text);
  transition:all var(--t-fast);white-space:nowrap;line-height:1;
}
.btn:hover{background:var(--surface-lt);}
.btn:active{transform:translateY(1px);opacity:.9;}
.btn-primary{background:var(--green);border-color:var(--green);color:var(--green-text);}
.btn-primary:hover{background:var(--green-dk);color:#fff;}
.btn-outline{background:transparent;color:var(--magenta);border-color:var(--magenta);}
.btn-outline:hover{background:var(--magenta-lt);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2);}
.btn-ghost:hover{background:var(--surface-lt);color:var(--text);}
.btn-danger{background:transparent;border-color:var(--danger-border);color:var(--danger-text);}
.btn-sm{padding:4px 10px;font-size:var(--fs-sm);}

/* ── Badge / Pill ── */
.badge{
  font-size:var(--fs-xs);font-weight:600;
  padding:2px 8px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:3px;
}
.badge-green{background:var(--green-lt);color:var(--green-dk);border:var(--bw) solid var(--green-mid);}
.badge-pending{background:var(--magenta-lt);color:var(--magenta);}
.badge-revision{background:var(--warning-bg);color:var(--warning-text);border:var(--bw) solid var(--warning-border);}
.badge-approved{background:var(--success-bg);color:var(--success-text);}
.badge-neutral{background:var(--surface-lt);color:var(--text-2);border:var(--bw) solid var(--border);}

/* ── Card ── */
.card{
  background:var(--surface);border:var(--bw) solid var(--border);
  border-radius:var(--r);padding:20px;
}

/* ── Tab bar ── */
.tab-bar{display:flex;border-bottom:var(--bw) solid var(--border);margin-bottom:20px;}
.tab-btn{
  padding:10px 18px;border:none;cursor:pointer;
  font-size:var(--fs-sm);background:transparent;
  color:var(--text-2);font-weight:400;
  border-bottom:2.5px solid transparent;margin-bottom:-1px;
  transition:all var(--t-fast);
}
.tab-btn:hover{color:var(--text);background:var(--surface-lt);}
.tab-btn.active{color:var(--text);font-weight:600;border-bottom-color:var(--green);}
.tab-badge{
  margin-left:5px;font-size:10px;font-weight:600;
  background:var(--magenta-lt);color:var(--magenta);
  padding:1px 6px;border-radius:var(--r-pill);
}

/* ── Section title ── */
.section-title{
  font-size:var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--ls-wide);
  color:var(--text);margin-bottom:10px;
}

/* ── Content header ── */
.content-header{padding:0 0 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.content-title{font-size:var(--fs-lg);font-weight:800;color:var(--text);letter-spacing:var(--ls-tight);line-height:1.1;}
.content-sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:4px;}

/* ── Empty state ── */
.empty{text-align:center;padding:48px 24px;color:var(--text-3);}
.empty-title{font-size:var(--fs-md);font-weight:600;color:var(--text-2);margin-bottom:6px;}
.empty-sub{font-size:var(--fs-sm);}

/* ── Loading ── */
.loading{display:flex;align-items:center;justify-content:center;flex:1;color:var(--text-3);font-size:var(--fs-sm);}

/* ── Input ── */
.input-base{
  width:100%;padding:8px 12px;
  font-size:var(--fs-base);font-family:var(--font);
  color:var(--text);background:var(--surface);
  border:var(--bw) solid var(--border);border-radius:var(--r);
  outline:none;transition:border-color var(--t-fast);
}
.input-base:focus{border-color:var(--green);}