/* ============================================================
   Task Manager CO.DE — Design System "Operations Dark"
   ============================================================ */
:root {
  /* sidebar */
  --sb-from:#0f172a; --sb-to:#1e293b;
  --sb-text:#94a3b8; --sb-text-strong:#e2e8f0; --sb-muted:#64748b;
  --sb-divider:#334155;
  /* accent */
  --accent:#0284c7; --accent-hover:#0369a1; --accent-bright:#38bdf8;
  /* surfaces */
  --bg:#f1f5f9; --surface:#ffffff; --surface-2:#f8fafc;
  --border:#e2e8f0; --border-soft:#f1f5f9;
  /* text */
  --text:#0f172a; --text-2:#64748b; --text-3:#94a3b8;
  /* status */
  --danger:#dc2626; --danger-bg:#fee2e2; --danger-border:#fecaca;
  --success:#15803d;
  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  /* radius */
  --r-sm:7px; --r-md:12px; --r-pill:999px;
  /* shadow */
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 8px 28px rgba(15,23,42,.10);
  /* layout */
  --sidebar-w:220px;
}

* { box-sizing:border-box; }
[x-cloak] { display:none !important; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:23px; font-weight:700; letter-spacing:-.4px; margin:0; }
h2 { font-size:18px; font-weight:700; margin:0; }
h3 { font-size:13px; font-weight:700; text-transform:uppercase;
     letter-spacing:.05em; color:var(--text-2); margin:0 0 var(--s3); }

/* ---------- layout ---------- */
.layout { display:flex; min-height:100vh; }
.content { flex:1; padding:var(--s6) var(--s8); min-width:0; }

/* ---------- sidebar ---------- */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:linear-gradient(180deg,var(--sb-from),var(--sb-to));
  color:var(--sb-text); padding:var(--s4) var(--s3);
  display:flex; flex-direction:column;
}
.sidebar-logo {
  display:flex; align-items:center; gap:var(--s2);
  color:#fff; font-weight:800; font-size:15px;
  padding:0 var(--s1); margin-bottom:var(--s6);
}
.sidebar-logo .mark {
  width:26px; height:26px; border-radius:var(--r-sm);
  background:var(--accent); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-logo .mark svg { width:15px; height:15px; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-sm);
  color:var(--sb-text); font-size:13.5px; font-weight:500;
}
.nav a:hover { background:rgba(148,163,184,.12); color:var(--sb-text-strong); text-decoration:none; }
.nav a.active {
  background:rgba(56,189,248,.12); color:var(--accent-bright); font-weight:600;
  box-shadow:inset 2.5px 0 0 var(--accent-bright);
}
.nav a svg { width:17px; height:17px; flex-shrink:0; }
.sidebar-foot { margin-top:auto; }
.sidebar-divider { border:0; border-top:1px solid var(--sb-divider); margin:var(--s4) var(--s1); }
.sidebar-user { display:flex; align-items:center; gap:var(--s2); padding:0 var(--s1); }
.avatar {
  width:30px; height:30px; border-radius:50%;
  background:var(--sb-divider); color:var(--sb-text-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}
.sidebar-user .name { color:var(--sb-text-strong); font-weight:600; font-size:13px; }
.sidebar-logout {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--sb-muted); font-size:12px; margin-top:var(--s2); margin-left:40px;
}
.sidebar-logout:hover { color:var(--sb-text-strong); text-decoration:none; }
.sidebar-logout svg { width:13px; height:13px; }

/* ---------- mobile topbar + drawer ---------- */
.topbar { display:none; }
@media (max-width:900px) {
  .layout { flex-direction:column; }
  .topbar {
    display:flex; align-items:center; gap:12px;
    background:linear-gradient(180deg,var(--sb-from),var(--sb-to));
    color:#fff; padding:12px var(--s4);
  }
  .topbar .burger {
    background:none; border:0; color:#fff; cursor:pointer;
    padding:0; display:flex; align-items:center;
  }
  .topbar .burger svg { width:22px; height:22px; }
  .topbar .title { font-weight:800; font-size:15px; }
  .sidebar {
    position:fixed; top:0; left:0; bottom:0; z-index:50;
    width:250px; transform:translateX(-100%);
    transition:transform .22s ease; overflow-y:auto;
  }
  .sidebar.open { transform:translateX(0); }
  .content { padding:var(--s4); }
}
.scrim { position:fixed; inset:0; z-index:45; background:rgba(15,23,42,.5); }

/* ---------- page header ---------- */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s6); flex-wrap:wrap;
}
.page-header .subtitle { color:var(--text-2); font-size:13px; margin-top:4px; }
.page-header-action { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.back-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; margin-bottom:var(--s4);
}
.back-link svg { width:15px; height:15px; }

/* ---------- badges ---------- */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600;
  padding:3px 10px; border-radius:var(--r-pill);
}
.badge .pip { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.stato-Da-fare        { background:#f1f5f9; color:#475569; }
.stato-Da-fare .pip   { background:#94a3b8; }
.stato-In-lavorazione      { background:#e0f2fe; color:#0369a1; }
.stato-In-lavorazione .pip { background:#0ea5e9; }
.stato-In-revisione        { background:#ede9fe; color:#6d28d9; }
.stato-In-revisione .pip   { background:#8b5cf6; }
.stato-Completato     { background:#dcfce7; color:#15803d; }
.stato-Completato .pip{ background:#22c55e; }
.prio-BASSA      { background:#f1f5f9; color:#475569; }
.prio-BASSA .pip { background:#94a3b8; }
.prio-MEDIA      { background:#fef3c7; color:#b45309; }
.prio-MEDIA .pip { background:#f59e0b; }
.prio-ALTA       { background:#ffedd5; color:#c2410c; }
.prio-ALTA .pip  { background:#f97316; }
.prio-MASSIMA      { background:#fee2e2; color:#b91c1c; }
.prio-MASSIMA .pip { background:#ef4444; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; line-height:1;
  padding:9px 16px; border-radius:var(--r-sm);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration:none; }
.btn svg { width:15px; height:15px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(2,132,199,.4); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:var(--surface); color:#334155; border-color:var(--border); }
.btn-secondary:hover { background:var(--surface-2); }
.btn-danger { background:var(--surface); color:var(--danger); border-color:var(--danger-border); }
.btn-danger:hover { background:var(--danger-bg); }
.btn-danger-solid { background:var(--danger); color:#fff; }
.btn-danger-solid:hover { background:#b91c1c; }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover { background:var(--surface-2); }

/* ---------- cards ---------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm);
}
.card-header {
  padding:11px var(--s4); border-bottom:1px solid var(--border);
  font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-2);
}
.card-body { padding:var(--s4); }
.card-row {
  display:flex; gap:var(--s4); padding:10px var(--s4);
  border-bottom:1px solid var(--border-soft); font-size:13px;
}
.card-row:last-child { border-bottom:0; }
.card-row .key { width:150px; flex-shrink:0; color:var(--text-2); font-weight:500; }
.card-row .val { color:var(--text); font-weight:600; }
.card-row .val.empty { color:var(--text-3); font-weight:500; }

/* ---------- stat cards ---------- */
.stat-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s4); margin-bottom:var(--s6);
}
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:var(--s4);
}
.stat-card.clickable { cursor:pointer; transition:border-color .12s, transform .12s; }
.stat-card.clickable:hover { border-color:var(--accent); transform:translateY(-2px); }
.stat-card .num { font-size:28px; font-weight:800; color:var(--text); letter-spacing:-.5px; }
.stat-card .lbl { font-size:12px; color:var(--text-2); margin-top:2px; }

/* ---------- forms ---------- */
.field { margin-bottom:var(--s4); }
.field label { display:block; font-size:12px; font-weight:600;
  color:var(--text-2); margin-bottom:5px; }
input, select, textarea {
  width:100%; font:inherit; font-size:13px; color:var(--text);
  padding:9px 11px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-sm);
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(2,132,199,.15);
}
textarea { min-height:90px; resize:vertical; }
select[multiple] { min-height:130px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s6); }
@media (max-width:640px) { .form-grid { grid-template-columns:1fr; } }
.form-section-title {
  grid-column:1/-1; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--text-2);
  margin:var(--s4) 0 var(--s3); padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.full-span { grid-column:1/-1; }
.form-actions {
  position:sticky; bottom:0; background:var(--bg);
  display:flex; gap:var(--s2); padding:var(--s4) 0;
  border-top:1px solid var(--border); margin-top:var(--s4);
}

/* ---------- toolbar ---------- */
.toolbar { display:flex; gap:var(--s2); align-items:center;
  margin-bottom:var(--s4); flex-wrap:wrap; }
.toolbar input[type=text] { flex:1; min-width:200px; }
.toolbar select { width:auto; }
.toolbar .check { display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text-2); white-space:nowrap; }
.toolbar .check input { width:auto; }
.toolbar .spacer { flex:1; }

/* ---------- data table ---------- */
.data-table {
  width:100%; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); overflow:hidden; border-collapse:collapse;
}
.data-table th {
  text-align:left; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-2); font-weight:700;
  padding:10px var(--s4); background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.data-table td {
  padding:11px var(--s4); font-size:13px;
  border-bottom:1px solid var(--border-soft); color:var(--text);
}
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr.clickable { cursor:pointer; }
.data-table tbody tr.clickable:hover { background:var(--surface-2); }
.data-table td.title { font-weight:600; }
.data-table td .muted { color:var(--text-3); }
@media (max-width:640px) {
  .data-table, .data-table thead, .data-table tbody,
  .data-table tr, .data-table td { display:block; width:100%; }
  .data-table { border:0; background:transparent; box-shadow:none; }
  .data-table thead { display:none; }
  .data-table tr {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-md); box-shadow:var(--shadow-sm);
    margin-bottom:var(--s3); padding:4px var(--s2);
  }
  .data-table td {
    display:flex; justify-content:space-between; gap:var(--s4);
    border-bottom:1px solid var(--border-soft); padding:8px var(--s3);
    text-align:right;
  }
  .data-table tr td:last-child { border-bottom:0; }
  .data-table td::before {
    content:attr(data-label); font-weight:700; color:var(--text-2);
    text-transform:uppercase; font-size:10.5px; letter-spacing:.04em;
    text-align:left; white-space:nowrap;
  }
  .data-table td:empty { display:none; }
}

/* ---------- empty state ---------- */
.empty-state {
  text-align:center; padding:var(--s8) var(--s4);
  background:var(--surface); border:1px dashed var(--border);
  border-radius:var(--r-md); color:var(--text-2);
}
.empty-state svg { width:38px; height:38px; color:var(--text-3); margin-bottom:var(--s3); }
.empty-state p { margin:0 0 var(--s4); font-size:14px; }
.empty-state p:last-child { margin-bottom:0; }

/* ---------- charts ---------- */
.charts { display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); }
@media (max-width:900px) { .charts { grid-template-columns:1fr; } }
.chart-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:var(--s4);
}
.chart-card h3 { margin-bottom:var(--s4); }

/* ---------- modal ---------- */
.modal-scrim {
  position:fixed; inset:0; z-index:60; background:rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center; padding:var(--s4);
}
.modal {
  background:var(--surface); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); max-width:420px; width:100%; padding:var(--s6);
}
.modal h3 { color:var(--text); text-transform:none; font-size:16px;
  letter-spacing:0; margin-bottom:var(--s2); }
.modal p { color:var(--text-2); font-size:13.5px; margin:0 0 var(--s6); }
.modal-actions { display:flex; gap:var(--s2); justify-content:flex-end; }

/* ---------- toast ---------- */
.toast-wrap {
  position:fixed; bottom:var(--s6); right:var(--s6); z-index:70;
  display:flex; flex-direction:column; gap:var(--s2);
}
.toast {
  display:flex; align-items:center; gap:10px;
  background:var(--text); color:#fff;
  padding:11px 16px; border-radius:var(--r-sm);
  box-shadow:var(--shadow-md); font-size:13px; font-weight:500;
}
.toast.success { background:var(--success); }
.toast.error { background:var(--danger); }
.toast svg { width:16px; height:16px; flex-shrink:0; }

/* ---------- login ---------- */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--sb-from),var(--sb-to)); padding:var(--s4);
}
.login-card {
  background:var(--surface); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:var(--s8); width:100%; max-width:380px;
}
.login-logo {
  display:flex; align-items:center; gap:var(--s2);
  font-weight:800; font-size:18px; color:var(--text); margin-bottom:var(--s2);
}
.login-logo .mark {
  width:30px; height:30px; border-radius:var(--r-sm);
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.login-logo .mark svg { width:17px; height:17px; }
.login-card .sub { color:var(--text-2); font-size:13px; margin-bottom:var(--s6); }
.login-error {
  background:var(--danger-bg); color:var(--danger);
  border:1px solid var(--danger-border); border-radius:var(--r-sm);
  padding:9px 12px; font-size:13px; margin-bottom:var(--s4);
}
.login-card .btn { width:100%; justify-content:center; margin-top:var(--s2); }

/* ---------- tabs ---------- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border);
  margin-bottom:var(--s6); }
.tab {
  background:none; border:0; cursor:pointer;
  padding:9px 14px; font-size:13px; font-weight:600; color:var(--text-2);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- utilities ---------- */
.muted { color:var(--text-2); }
.stack-lg > * + * { margin-top:var(--s6); }
.is-loading { opacity:.45; pointer-events:none; transition:opacity .1s ease; }
.loading-row {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--s8); color:var(--text-2); font-size:13px;
}
.spinner {
  width:18px; height:18px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:tm-spin .6s linear infinite; display:inline-block;
}
@keyframes tm-spin { to { transform:rotate(360deg); } }