/* ═══════════════════════════════════════════════════════════
   THEME VARIABLES — dark (default) & light
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg-body:      #0A0A0A;
  --bg-card:      #111111;
  --bg-sidebar:   #0d0d0d;
  --bg-hover:     #181818;
  --bg-hover2:    #1e1e1e;
  --bg-input:     #181818;
  --bg-deep:      #080808;
  --border:       #222222;
  --border-soft:  #2a2a2a;
  --border-muted: #1a1a1a;
  --text:         #e5e5e5;
  --text-muted:   #666666;
  --text-faint:   #444444;
  --brand:        #534AB7;
  --brand-hover:  #6058d0;
  --brand-light:  #c5c0ff;
  --brand-bg:     #1e1b3a;
  --ok-bg:        #0f2818;
  --ok-text:      #4ade80;
  --ok-border:    #166534;
  --err-bg:       #200a0a;
  --err-text:     #f87171;
  --err-border:   #991b1b;
  --warn-bg:      #1c1608;
  --warn-text:    #fbbf24;
  --warn-border:  #92400e;
  --info-bg:      #0a1428;
  --info-text:    #60a5fa;
  --info-border:  #1e3a5f;
  --teal-bg:      #0a1e1c;
  --teal-text:    #2dd4bf;
  --teal-border:  #134e4a;
  --overlay:      rgba(0,0,0,0.7);
  --scrollbar:    #222;
}

[data-theme="light"] {
  --bg-body:      #f0f0f0;
  --bg-card:      #ffffff;
  --bg-sidebar:   #fafafa;
  --bg-hover:     #f0f0f0;
  --bg-hover2:    #e8e8e8;
  --bg-input:     #f8f8f8;
  --bg-deep:      #ebebeb;
  --border:       #e0e0e0;
  --border-soft:  #d0d0d0;
  --border-muted: #e8e8e8;
  --text:         #111111;
  --text-muted:   #666666;
  --text-faint:   #999999;
  --brand:        #534AB7;
  --brand-hover:  #6058d0;
  --brand-light:  #534AB7;
  --brand-bg:     #ede9ff;
  --ok-bg:        #f0fdf4;
  --ok-text:      #16a34a;
  --ok-border:    #bbf7d0;
  --err-bg:       #fef2f2;
  --err-text:     #dc2626;
  --err-border:   #fecaca;
  --warn-bg:      #fffbeb;
  --warn-text:    #d97706;
  --warn-border:  #fde68a;
  --info-bg:      #eff6ff;
  --info-text:    #2563eb;
  --info-border:  #bfdbfe;
  --teal-bg:      #f0fdfa;
  --teal-text:    #0d9488;
  --teal-border:  #99f6e4;
  --overlay:      rgba(0,0,0,0.45);
  --scrollbar:    #d0d0d0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--bg-body); color: var(--text); font-size: 13px; }

.ms { font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20;
  font-size: 18px; line-height: 1; vertical-align: middle; }
.ms-f { font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20; }

.theme-logo { width:auto; height:26px; display:none; }
.logo-light { display:none; }
.logo-dark { display:inline-block; }
[data-theme="light"] .logo-light { display:inline-block; }
[data-theme="light"] .logo-dark { display:none; }
[data-theme="dark"] .logo-dark { display:inline-block; }
[data-theme="dark"] .logo-light { display:none; }

.hidden { display: none !important; }

/* NAV */
.nav { display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--text-muted);cursor:pointer;
  border-radius:8px;transition:all 0.12s;font-size:13px;border:1px solid transparent;margin-bottom:2px; }
.nav:hover { color:var(--text);background:var(--bg-hover); }
.nav.active { color:var(--text);background:var(--brand-bg);border-color:var(--brand); }
.nav .ms { font-size:16px; }

/* SECTION TITLE */
.section-title { font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:8px;display:flex;align-items:center;gap:8px; }

/* CARDS */
.card { background:var(--bg-card);border:1px solid var(--border);border-radius:12px; }
.card-tight { background:var(--bg-card);border:1px solid var(--border);border-radius:8px; }

/* BUTTONS */
.btn { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;
  font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border-soft);background:var(--bg-hover);
  color:var(--text);transition:all 0.12s;font-family:'Inter',sans-serif; }
.btn:hover { background:var(--border);border-color:var(--text-faint); }
.btn:disabled { opacity:0.4;cursor:not-allowed; }
.btn-pri { background:var(--brand-bg);border-color:var(--brand);color:var(--brand-light); }
.btn-pri:hover { background:#2a2550; }
.btn-solid { background:#534AB7;border-color:var(--brand);color:#fff; }
.btn-solid:hover { background:#6058d0; }
.btn-ok { background:var(--ok-bg);border-color:#166534;color:var(--ok-text); }
.btn-ok:hover { background:var(--ok-bg); }
.btn-warn { background:var(--warn-bg);border-color:#92400e;color:var(--warn-text); }
.btn-err { background:var(--err-bg);border-color:#991b1b;color:var(--err-text); }
.btn-sm { padding:5px 10px;font-size:11px; }
.btn-xs { padding:3px 8px;font-size:10px; }

/* INPUTS */
.input { width:100%;background:var(--bg-hover);border:1px solid var(--border-soft);border-radius:8px;
  padding:9px 12px;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;
  outline:none;transition:border-color 0.15s; }
.input:focus { border-color:var(--brand); }
.input::placeholder { color:var(--text-faint); }
textarea.input { resize:vertical;min-height:80px; }
select.input { appearance:none;cursor:pointer; }

/* FORM */
.lbl { font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;display:block; }
.form-row { margin-bottom:14px; }
.form-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.form-grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px; }

/* TABLE */
.tbl { width:100%;border-collapse:collapse; }
.tbl th { padding:10px 16px;text-align:left;font-size:10px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border-muted); }
.tbl td { padding:12px 16px;border-bottom:1px solid var(--border-muted);vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--bg-hover);cursor:pointer; }
.tbl-overflow { overflow:hidden;border-radius:12px;border:1px solid var(--border); }

/* BADGES */
.badge { display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;
  font-size:10px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase; }
.badge-ok { background:var(--ok-bg);color:var(--ok-text); }
.badge-warn { background:var(--warn-bg);color:var(--warn-text); }
.badge-err { background:var(--err-bg);color:var(--err-text); }
.badge-pri { background:var(--brand-bg);color:var(--brand-light); }
.badge-muted { background:var(--border);color:var(--text-muted); }
.badge-teal { background:var(--teal-bg);color:var(--teal-text); }
.badge-blue { background:var(--info-bg);color:var(--info-text); }

/* DOTS */
.dot { width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block; }
.dot-ok { background:#4ade80; }
.dot-warn { background:#fbbf24; }
.dot-err { background:#f87171; }
.dot-pri { background:#c5c0ff; }
.dot-muted { background:#444; }
.dot-teal { background:#2dd4bf; }

/* MISC */
.tip { font-size:11px;color:var(--text-muted);line-height:1.5; }
.sep { border:none;border-top:1px solid var(--border-muted);margin:16px 0; }
.stat-num { font-size:22px;font-weight:700;letter-spacing:-0.02em; }
.ai-panel { background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px; }
.ai-tag { display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;
  color:#534AB7;text-transform:uppercase;letter-spacing:0.06em; }

/* TOAST */
#toast { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px; }
.toast-item { padding:12px 16px;border-radius:10px;font-size:12px;font-weight:500;
  animation:slideIn 0.2s ease;max-width:320px; }
.toast-ok { background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-text); }
.toast-err { background:var(--err-bg);border:1px solid var(--err-border);color:var(--err-text); }
.toast-info { background:#0e0c1f;border:1px solid var(--brand);color:var(--brand-light); }
@keyframes slideIn { from { transform:translateX(20px);opacity:0; } to { transform:translateX(0);opacity:1; } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* MODAL */
.modal-overlay { position:fixed;inset:0;background:var(--overlay);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:24px; }
.modal { background:var(--bg-card);border:1px solid var(--border-soft);border-radius:16px;
  width:100%;max-width:560px;max-height:80vh;overflow-y:auto; }
.modal-header { display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px 0; }
.modal-body { padding:20px 24px; }
.modal-footer { padding:0 24px 20px;display:flex;gap:8px;justify-content:flex-end; }

/* PREVIEW FULLSCREEN MODAL */
.prv-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:200;
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:40px 20px;outline:none;cursor:zoom-out; }
.prv-modal-wrap { cursor:default;flex-shrink:0; }
.prv-modal-iframe { display:block;width:794px;min-height:1123px;height:1123px;border:none;
  box-shadow:0 8px 48px rgba(0,0,0,0.7);border-radius:2px; }
.prv-modal-close { position:fixed;top:16px;right:20px;background:rgba(20,20,20,0.8);
  border:1px solid var(--border-soft);color:#ccc;width:40px;height:40px;border-radius:50%;
  cursor:pointer;z-index:201;display:flex;align-items:center;justify-content:center;
  transition:background 0.12s; }
.prv-modal-close:hover { background:#333;color:#fff; }

/* STATUS MAP */
.status-draft { color:var(--text-muted); }
.status-quoted,.status-sent { color:var(--info-text); }
.status-approved { color:var(--teal-text); }
.status-in_progress { color:var(--warn-text); }
.status-completed { color:var(--ok-text); }
.status-invoiced,.status-paid { color:var(--brand-light); }
.status-overdue { color:var(--err-text); }
.status-cancelled { color:var(--text-faint); }

/* ── DOCUMENT PIPELINE PILLS ────────────────────────────────── */
.pipe-pill { display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;
  font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;
  transition:opacity 0.12s; }
.pipe-pill:hover { opacity:0.75; }
.pipe-none  { background:var(--bg-hover);color:var(--text-faint);border:1px solid var(--border-soft);cursor:default; }
.pipe-draft { background:var(--info-bg);color:var(--info-text);border:1px solid #1e3a5f; }
.pipe-sent  { background:var(--info-bg);color:var(--info-text);border:1px solid #1e3a5f; }
.pipe-ok    { background:var(--teal-bg);color:var(--teal-text);border:1px solid #134e4a; }
.pipe-paid  { background:var(--brand-bg);color:var(--brand-light);border:1px solid var(--brand); }
.pipe-rejected { background:var(--err-bg);color:var(--err-text);border:1px solid var(--err-border); }

/* ── TIMELINE GANTT (dot style) ──────────────────────────────── */
.gantt-wrap { position:relative;background:var(--bg-sidebar);border-radius:8px;border:1px solid var(--border-muted); }

/* ── PRIORITY LIST (Dashboard "Da fare ora") ─────────────────── */
.priority-item { display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--bg-card);border-radius:10px;border-left:3px solid;margin-bottom:6px; }
.priority-item.p-red    { border-color:var(--err-text); }
.priority-item.p-amber  { border-color:var(--warn-text); }
.priority-item.p-purple { border-color:#a78bfa; }
.priority-item.p-green  { border-color:var(--ok-text); }
.priority-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.p-red    .priority-dot { background:#f87171; }
.p-amber  .priority-dot { background:#fbbf24; }
.p-purple .priority-dot { background:#a78bfa; }
.p-green  .priority-dot { background:#4ade80; }

/* ── KPI CARDS ───────────────────────────────────────────────── */
.kpi-card { background:var(--bg-card);border:1px solid var(--border-muted);border-radius:12px;
  padding:18px 20px;flex:1;min-width:180px; }
.kpi-card.kpi-alert { border-color:#7f1d1d;background:var(--err-bg); }
.kpi-num  { font-size:28px;font-weight:800;letter-spacing:-0.03em;line-height:1; }
.kpi-sub  { font-size:11px;color:var(--text-muted);margin-top:4px; }
.kpi-label { font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--text-faint);margin-bottom:8px; }

/* ── PROJECT MINI-CARD (Dashboard row 3) ─────────────────────── */
.proj-mini { background:var(--bg-card);border:1px solid var(--border-muted);border-radius:12px;
  padding:16px;cursor:pointer;transition:border-color 0.12s; }
.proj-mini:hover { border-color:var(--brand); }
.proj-mini-bar { height:4px;background:var(--bg-hover2);border-radius:2px;margin:10px 0;overflow:hidden; }
.proj-mini-bar-fill { height:100%;background:#534AB7;border-radius:2px;transition:width 0.3s; }

/* ── DOC CHAIN PANEL ─────────────────────────────────────────── */
.doc-chain { border:1px solid var(--border-muted);border-radius:10px;overflow:hidden; }
.doc-chain-row { padding:12px 16px;border-bottom:1px solid var(--border-muted);
  display:flex;align-items:center;justify-content:space-between; }
.doc-chain-row:last-child { border-bottom:none; }
.doc-chain-row.doc-exists { background:var(--bg-sidebar); }
.doc-chain-row.doc-empty  { background:var(--bg-deep); }
.doc-chain-type { font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--text-faint); }
.doc-chain-num  { font-size:12px;font-weight:600;color:var(--text); }
.doc-chain-meta { font-size:11px;color:var(--text-muted); }

/* ── TWO-COLUMN LAYOUT ───────────────────────────────────────── */
.layout-2col { display:grid;grid-template-columns:60% 40%;gap:20px;align-items:start; }
@media (max-width: 1100px) { .layout-2col { grid-template-columns:1fr; } }

/* ── UPLOAD DROP ZONE ────────────────────────────────────────── */
.drop-zone { border:2px dashed #2a2a2a;border-radius:10px;padding:24px;
  text-align:center;cursor:pointer;transition:all 0.15s;background:var(--bg-sidebar); }
.drop-zone:hover,.drop-zone.drag-over { border-color:var(--brand);background:#0e0c1f; }
.drop-zone input[type=file] { display:none; }

/* ── STEP WIZARD ─────────────────────────────────────────────── */
.wizard-step { display:flex;flex-direction:column;align-items:center;position:relative;flex:1; }
.wizard-step::after { content:'';position:absolute;top:12px;left:50%;right:-50%;
  height:1px;background:var(--border);z-index:0; }
.wizard-step:last-child::after { display:none; }
.wizard-step.done::after { background:#534AB7; }
.step-circle { width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:700;z-index:1;position:relative; }
.step-circle.active { background:#fff;color:#111; }
.step-circle.done   { background:#534AB7;color:#fff; }
.step-circle.idle   { background:var(--bg-hover2);color:var(--text-muted); }
.step-label { font-size:9px;margin-top:4px;color:var(--text-muted);font-weight:500; }
.step-label.active { color:var(--text);font-weight:600; }

/* ── DATE INPUT ──────────────────────────────────────────────── */
input[type=date].input,
input[type=date] {
  color-scheme: dark;
}
[data-theme="light"] input[type=date].input,
[data-theme="light"] input[type=date] {
  color-scheme: light;
}
input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(0.6) sepia(1) saturate(2) hue-rotate(200deg);
  cursor: pointer;
  padding: 2px;
}

/* ── DOC PREVIEW A4 ──────────────────────────────────────────── */
#doc-preview-wrap { transition:transform 0.15s; }

/* ── CLIENT SEARCH ───────────────────────────────────────────── */
.client-result { padding:10px 14px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid transparent;transition:all 0.12s; }
.client-result:hover { background:var(--bg-hover);border-color:var(--border-soft); }
.client-result.selected { background:var(--brand-bg);border-color:var(--brand); }

/* ── NUOVO PREVENTIVO: SPLIT LAYOUT ─────────────────────────── */
.split-layout { display:grid;grid-template-columns:55% 45%;gap:16px;align-items:start; }
.split-left, .split-right { min-width:0; }
.split-preview-sticky { position:sticky;top:20px; }
@media (max-width:1000px) {
  .split-layout { grid-template-columns:1fr; }
  .split-preview-sticky { position:static; }
}

/* ── A4 DOCUMENT PREVIEW ─────────────────────────────────────── */
.preview-a4 { background:#fff;color:#111;border-radius:8px;padding:24px 20px;
  font-family:'Inter',sans-serif;font-size:9px;line-height:1.5;
  box-shadow:0 4px 24px rgba(0,0,0,0.45);min-height:320px; }
.preview-header { display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:10px;border-bottom:2px solid #111;margin-bottom:10px; }
.preview-brand { font-size:16px;font-weight:800;color:#111;letter-spacing:-0.03em; }
.preview-brand-sub { font-size:8px;color:#888;font-weight:400;margin-top:1px; }
.preview-doc-num { font-size:11px;font-weight:700;color:#534AB7; }
.preview-meta { font-size:8px;color:#aaa;margin-top:2px; }
.preview-parties { margin-bottom:10px; }
.preview-lbl { font-size:7px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:#aaa;margin-bottom:2px; }
.preview-party-name { font-size:10px;font-weight:600;color:#111; }
.preview-subject { font-size:10px;font-weight:700;color:#111;margin-bottom:6px; }
.preview-body { font-size:8px;color:var(--text-muted);margin-bottom:10px;white-space:pre-wrap; }
.preview-placeholder { color:#ccc;font-style:italic; }
.preview-section-title { font-size:7px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:#aaa;margin:6px 0 4px;border-bottom:1px solid #eee;padding-bottom:2px; }
.preview-table { width:100%;border-collapse:collapse;margin-bottom:6px; }
.preview-table th { font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  color:#aaa;border-bottom:1px solid #ddd;padding:3px 0; }
.preview-table td { font-size:8px;color:#333;border-bottom:1px solid #f0f0f0;padding:3px 0; }
.preview-totals { border-top:1px solid #ddd;padding-top:6px;margin-top:4px; }
.preview-total-row { display:flex;justify-content:space-between;font-size:8px;color:var(--text-muted);margin-bottom:2px; }
.preview-total-grand { font-weight:700;font-size:10px;color:#111;
  padding-top:4px;border-top:1px solid #111;margin-top:3px; }
.preview-footer { font-size:7px;color:#bbb;text-align:center;
  margin-top:16px;padding-top:8px;border-top:1px solid #eee; }

/* =========================================
   CALENDARIO V2 — AE-style (sostituisce vecchio track)
   ========================================= */
.tl-cal-module { background:var(--bg-sidebar);border-bottom:1px solid var(--border);overflow:hidden;min-width:0; }

/* Header: dropdown mesi + pulsante Oggi */
.tl-cal-topbar {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:10px 16px;background:var(--bg-sidebar);border-bottom:1px solid var(--border);
}
.tl-cal-topbar > :last-child { justify-self:end; }
.tl-cal-topbar-lbl { font-size:10px;font-weight:700;color:var(--text-faint);
  letter-spacing:0.08em;text-transform:uppercase; }

/* Navigazione frecce + label */
.tl-cal-nav-label-static {
  font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;
  min-width:110px;text-align:center;letter-spacing:0.04em;
  user-select:none;
}
.tl-cal-arrow-btn {
  background:none;border:none;color:var(--text-muted);cursor:pointer;
  padding:4px;border-radius:4px;display:flex;align-items:center;
  transition:color 0.12s,background 0.12s;
}
.tl-cal-arrow-btn:hover { color:var(--text);background:var(--bg-hover); }

/* Year pills */
.tl-cal-year-pill {
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
  padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;
  cursor:pointer;letter-spacing:0.04em;transition:0.12s;
}
.tl-cal-year-pill:hover { border-color:var(--brand);color:var(--brand); }
.tl-cal-year-pill.tl-cal-year-active { background:var(--brand);border-color:var(--brand);color:#fff; }

.tl-cal-today-btn {
  background:var(--bg-body);border:1px solid var(--border);color:var(--text);
  padding:6px 12px;border-radius:4px;font-size:10px;font-weight:600;
  cursor:pointer;text-transform:uppercase;letter-spacing:0.04em;transition:0.1s;
}
.tl-cal-today-btn:hover { border-color:var(--brand);color:var(--brand); }

/* Viewport: nastro mesi affiancati */
.tl-cal-viewport {
  display:flex;overflow-x:auto;overflow-y:auto;
  width:100%;min-width:0;
  background:var(--bg-body);max-height:500px;
  -ms-overflow-style:none;scrollbar-width:none;
  cursor:grab;
}
.tl-cal-viewport::-webkit-scrollbar { display:none; }
.tl-cal-viewport.tl-cal-dragging { cursor:grabbing;user-select:none; }

.tl-cal-grid-container { display:flex;gap:20px;padding:12px; }

.tl-cal-month-block {
  display:flex;flex-direction:column;width:max-content;flex-shrink:0;
}
.tl-cal-month-title {
  font-size:14px;font-weight:800;color:var(--text-muted);
  padding:6px 8px 10px;text-transform:uppercase;letter-spacing:0.08em;
  position:sticky;top:0;z-index:3;
  background:var(--bg-sidebar);
  border-bottom:1px solid var(--border-soft);
  margin-bottom:4px;
}
.tl-cal-month-title.tl-month-current { color:var(--brand); }
.tl-cal-month-year { font-weight:400;color:var(--text-faint);margin-left:5px;font-size:12px; }

/* Griglia settimane con day-width dinamico */
:root { --tl-day-width:120px; }

.tl-cal-viewport .ms-cal-week-hdr {
  display:grid;grid-template-columns:repeat(7,var(--tl-day-width));
  gap:2px;border-bottom:1px solid var(--border);margin-bottom:4px;
}
.tl-cal-viewport .ms-cal-week {
  display:grid;grid-template-columns:repeat(7,var(--tl-day-width));
  grid-auto-rows:minmax(80px,auto);gap:2px;margin-bottom:2px;
}
.tl-cal-viewport .ms-cal-cell {
  container-type:inline-size;overflow:visible;
}

/* Zoom estremo: chip → lineetta colorata */
@container (max-width:55px) {
  .ms-chip { font-size:0 !important;padding:0 !important;height:4px !important;
    border-radius:2px !important;border-left:none !important;
    background:var(--_chip-color,#3b82f6) !important; }
  .ms-chip > div { display:none !important; }
  .ms-chip-tooltip { display:none !important; }
  .ms-cal-day-num { font-size:9px !important; }
}

/* Scrollbar AE-style */
.tl-ae-scrollbar {
  background:var(--bg-sidebar);padding:12px 16px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
  user-select:none;-webkit-user-select:none;
}
.tl-ae-track {
  flex-grow:1;height:14px;background:var(--bg-card);border-radius:7px;
  position:relative;border:1px solid var(--border);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);
}
.tl-ae-thumb {
  position:absolute;top:1px;bottom:1px;background:var(--text-faint);border-radius:6px;
  cursor:grab;display:flex;justify-content:space-between;align-items:center;
  transition:background 0.15s;box-shadow:0 1px 3px rgba(0,0,0,0.2);min-width:30px;
  touch-action:none;
}
.tl-ae-thumb:hover { background:var(--text-muted); }
.tl-ae-thumb:active { cursor:grabbing;background:var(--brand); }
.tl-ae-handle {
  width:10px;height:100%;cursor:ew-resize;position:relative;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  touch-action:none;
}
.tl-ae-handle::after {
  content:'';width:2px;height:7px;background:var(--text-muted);border-radius:1px;
}
.tl-ae-handle:hover::after { background:var(--text); }

/* Singolo mese — compatibilità legacy (non più flex:0 0 100%) */
.month-classic-wrapper {
  display:flex;flex-direction:column;
}
.month-header-title { font-size:18px;font-weight:800;color:var(--text);
  margin-bottom:12px;text-transform:capitalize; }
.month-header-current { color:var(--brand-light) !important; }
.month-header-year { font-size:14px;font-weight:600;color:var(--text-muted); }

/* Riga settimana nella griglia classica */
.ms-cal-week { display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px; }

/* Intestazione Mese e Giorni */
.month-title-bar { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; }
.month-title-text { font-size:14px;font-weight:800;color:var(--text);text-transform:uppercase; }

.ms-cal-week-hdr { display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px; }
.ms-cal-hdr { font-size:10px;font-weight:700;text-align:right;color:#64748b;padding:4px 6px; }

/* Griglia e Celle */
.ms-cal-grid { display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(70px,auto);gap:2px; }

.ms-cal-cell {
  background:var(--bg-hover);border-radius:6px;padding:6px;
  border:1px solid var(--border-soft);cursor:pointer;transition:0.15s;
  display:flex;flex-direction:column;gap:4px;
}
.ms-cal-cell:hover { background:var(--bg-hover2);border-color:var(--border-soft); }
.ms-cal-empty { background:transparent !important;pointer-events:none; }
.ms-cal-weekend { background:var(--bg-hover2); }
.ms-cal-today {
  background:var(--brand-bg);
  border:1.5px solid var(--brand) !important;
  animation:todayCellGlow 2.4s ease-in-out infinite;
}
@keyframes todayCellGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(83,74,183,0.1), inset 0 0 0 0 rgba(83,74,183,0); }
  50%     { box-shadow:0 0 8px 2px rgba(83,74,183,0.28), inset 0 0 10px rgba(83,74,183,0.12); }
}
.ms-cal-sel { border-color:var(--brand) !important;background:var(--brand-bg) !important; }
.ms-cal-drag-over { border:1px dashed var(--ok-text) !important;background:var(--ok-bg) !important; }

.ms-cal-day-num { font-size:13px;font-weight:700;color:var(--text-muted);text-align:right;margin-bottom:4px; }
.ms-cal-today .ms-cal-day-num { color:var(--brand-light);font-size:14px;font-weight:800; }

/* Giorni passati: dot-grid viola, non interattivi */
.ms-cal-past { pointer-events: none; }
.ms-cal-past .ms-chip { pointer-events: auto; }
.ms-cal-past {
  background-image: radial-gradient(circle, rgba(83,74,183,0.28) 1.2px, transparent 1.2px);
  background-size: 7px 7px;
  background-position: 3px 3px;
}
[data-theme="light"] .ms-cal-past {
  background-image: radial-gradient(circle, rgba(83,74,183,0.18) 1.2px, transparent 1.2px);
}

/* Chip milestone */
.ms-chip { font-size:11px;font-weight:600;padding:3px 6px;border-radius:4px;
  white-space:normal;line-height:1.4;cursor:pointer;
  transition:opacity 0.1s;position:relative; }
.ms-chip:hover { opacity:0.85; filter:brightness(1.1); }
.ms-chip[draggable="true"] { cursor:grab; }
.ms-chip[draggable="true"]:active { cursor:grabbing; }
.ms-chip.tl-dragging { opacity:0.4;cursor:grabbing; }
.ms-chip.ms-chip-past { background:var(--bg-hover) !important;color:var(--text-muted) !important;
  border-left-color:var(--border-soft) !important; }
.ms-chip-more { background:var(--border);color:var(--text-muted);font-size:9px;padding:2px 4px;
  border-radius:3px;white-space:nowrap; }

/* Tooltip deliverable sulla chip */
.ms-chip-tooltip { position:absolute;top:100%;left:0;transform:translateY(8px);opacity:0;
  min-width:220px;max-width:280px;z-index:200;
  background:var(--bg-card);border:1px solid var(--border-soft);
  border-radius:12px;padding:10px;box-shadow:0 16px 40px rgba(0,0,0,0.25);
  transition:opacity 0.14s ease,transform 0.14s ease;pointer-events:none;
  font-size:10px;line-height:1.4;color:var(--text); }
.ms-chip:hover .ms-chip-tooltip { opacity:1;transform:translateY(2px);pointer-events:auto; }
.ms-chip-tooltip .tl-tt-item { display:flex;align-items:center;gap:6px;margin-bottom:4px; }
.ms-chip-tooltip .tl-tt-item:last-child { margin-bottom:0; }
.ms-chip-tooltip .tl-tt-item-dot { width:5px;height:5px;border-radius:50%;flex-shrink:0; }
.ms-chip-tooltip .tl-tt-item-text { font-size:10px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ms-chip-tooltip .tl-tt-deliv { font-size:8px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px; }

/* Inline rename input (tlFocusTitle) */
.tl-tbl-ms-name input, .tlws-ms-title input {
  width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--brand);color:var(--text);
  font:inherit;outline:none;padding:0 2px;
}

.ms-preset { display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
  border-radius:8px;border:1px solid transparent;font-size:10px;font-weight:500;
  cursor:pointer;background:var(--bg-hover);color:#888;transition:all 0.12s; }
.ms-preset:hover { background:var(--border);border-color:var(--border-soft);color:var(--text); }
.ms-preset-active { background:var(--brand-bg); }

/* Scrollbar indicatore calendario */
.cal-scrollbar { display:flex;gap:4px;padding:8px 16px 10px;background:var(--bg-sidebar); }
.cal-scrollbar-pill {
  flex:1;height:4px;border-radius:2px;cursor:pointer;
  background:#1e1e1e;transition:background 0.2s,height 0.2s;
}
.cal-scrollbar-pill:hover { background:#333;height:6px; }
.cal-scrollbar-pill.active { background:var(--brand);height:6px; }

/* ═══════════════════════════════════════════════════════════
   TIMELINE MODULE — tl- / tlcal- / tlws- namespaces
   ═══════════════════════════════════════════════════════════ */

.tl-module { background:var(--bg-card);border:1px solid var(--border-muted);border-radius:12px;min-width:0; }

/* TOP BAR */
.tl-topbar-mod { padding:20px 32px 28px;background:var(--bg-sidebar);position:relative; }
.tl-topbar-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:32px; }
.tl-topbar-title { font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px; }
/* Track: altezza calibrata su date(15)+gap(2)+dot(30)+gap(2)+label(12) = 61px, +margine */
.tl-track { position:relative;height:68px;margin:0 28px;overflow:visible; }
/* Linea grigia sfondo — centrata sul dot (15+2+15=32px dal top) */
.tl-line  { position:absolute;top:32px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--border-muted) 0%,var(--border-soft) 50%,var(--border-muted) 100%);border-radius:1px;z-index:0; }
/* Linea progresso colorata (spessa, glow viola) */
.tl-progress-line { position:absolute;top:29px;left:0;height:6px;
  background:linear-gradient(90deg,#3730a3 0%,#6d5fe6 60%,#a78bfa 100%);
  border-radius:0 3px 3px 0;z-index:1;
  box-shadow:0 0 10px 3px rgba(109,95,230,0.55); }
/* Linea "oggi" pulsante — z-index:2 per stare DIETRO ai dot (z-index:3) */
.tl-today-line { position:absolute;top:-20px;bottom:-6px;width:2px;
  background:linear-gradient(180deg,#a78bfa 0%,#6d5fe6 100%);
  border-radius:1px;z-index:2;pointer-events:none;
  animation:todayGlow 2s ease-in-out infinite; }
/* Label oggi a due livelli */
.tl-today-label { position:absolute;top:-48px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;white-space:nowrap;
  background:var(--brand-bg);border:1px solid #6d5fe666;border-radius:6px;padding:4px 8px;
  box-shadow:0 4px 16px rgba(109,95,230,0.3); }
.tl-today-date { font-size:14px;font-weight:800;color:#a78bfa;letter-spacing:0.02em;line-height:1.15; }
.tl-today-sub  { font-size:7px;font-weight:700;color:#6d5fe6;letter-spacing:0.2em;margin-top:1px; }
@keyframes todayGlow {
  0%,100% { opacity:0.6; box-shadow:0 0 6px 1px rgba(167,139,250,0.3); }
  50%      { opacity:1;   box-shadow:0 0 16px 5px rgba(167,139,250,0.6); }
}
/* Ring pulsante milestone imminente */
@keyframes imminentRing {
  0%,100% { transform:scale(1);   opacity:0.75; }
  50%     { transform:scale(1.4); opacity:0.1;  }
}
/* Nodo milestone sulla barra */
.tl-node { position:absolute;top:0;display:flex;flex-direction:column;
  align-items:center;transform:translateX(-50%);cursor:pointer;z-index:3;gap:2px; }
/* Data sopra il dot */
.tl-date-above { font-size:11px;font-weight:700;color:#999;white-space:nowrap;
  line-height:1;text-align:center;height:15px; }
/* Dot con icona dentro */
.tl-dot-icon { width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--border);
  transition:transform 0.15s,box-shadow 0.15s;flex-shrink:0; }
.tl-node:hover .tl-dot-icon { transform:scale(1.18); }
.tl-node-sel .tl-dot-icon { box-shadow:0 0 0 4px rgba(83,74,183,0.4); }
/* Titolo sotto il dot — abbastanza largo per "Condivisione 3" */
.tl-title-below { font-size:10px;font-weight:600;color:#888;white-space:nowrap;
  text-align:center;max-width:96px;overflow:hidden;text-overflow:ellipsis; }
.tl-node-sel .tl-title-below { color:var(--brand-light); }
/* keep old .tl-dot referenced in widget */
.tl-dot  { width:11px;height:11px;border-radius:50%;background:var(--bg-hover2);
  border:2px solid var(--border-soft);flex-shrink:0; }

/* ACCORDION BAR */
.tl-cal-bar { background:var(--bg-sidebar);border-top:1px solid var(--border-muted);border-bottom:1px solid var(--border-muted);
  display:flex;justify-content:center; }
.btn-tl-toggle { background:transparent;border:none;width:100%;padding:7px 16px;
  color:var(--text-muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  cursor:pointer;transition:all 0.15s;display:flex;align-items:center;
  justify-content:center;gap:8px;font-family:inherit; }
.btn-tl-toggle:hover { color:#888;background:var(--bg-hover); }
.btn-tl-toggle.tl-open { color:#534AB7; }

/* CALENDARIO — stili legacy (non rimossi per sicurezza, non usati) */
.tlcal-header { padding:8px 16px;display:flex;justify-content:center;align-items:center;
  background:var(--bg-sidebar);border-bottom:1px solid var(--border-muted); }
.tlcal-month-nav { display:flex;align-items:center;gap:12px; }
.tlcal-grid { display:grid;grid-template-columns:repeat(7,1fr); }
.tlcal-header-row { border-bottom:1px solid var(--border-muted); }
.tlcal-col-hdr { padding:5px;text-align:center;font-size:8px;font-weight:700;
  color:var(--text-faint);text-transform:uppercase;letter-spacing:0.04em;border-right:1px solid var(--border-muted); }
.tlcal-col-hdr:last-child { border-right:none; }
.tlcal-cell { min-height:56px;border-right:1px solid var(--border-muted);border-bottom:1px solid var(--border-muted);
  padding:4px;position:relative;display:flex;flex-direction:column;
  gap:2px;cursor:pointer;transition:background 0.1s;overflow:hidden; }
.tlcal-cell:nth-child(7n) { border-right:none; }
.tlcal-cell:hover { background:var(--bg-hover); }
.tlcal-weekend { background:var(--bg-sidebar); }
.tlcal-has-ms  { background:#0e1118; }
.tlcal-today   { outline:1px solid #534AB7;outline-offset:-1px;background:#0f0d1e; }
.tlcal-sel     { outline:2px solid #60a5fa !important;outline-offset:-1px;background:var(--info-bg) !important; }
.tlcal-sel .tlcal-day-num { color:var(--info-text); }
.tlcal-empty   { background:transparent;cursor:default;pointer-events:none;min-height:56px; }
.tlcal-day-num { font-size:9px;font-weight:600;color:var(--text-muted);text-align:right;line-height:1; }
.tlcal-today .tlcal-day-num { color:#7c6fcd;font-weight:800; }
.tlcal-add-btn { position:absolute;top:2px;left:4px;font-size:13px;font-weight:700;
  color:var(--text-faint);opacity:0;cursor:pointer;transition:opacity 0.15s,color 0.15s;line-height:1; }
.tlcal-cell:hover .tlcal-add-btn { opacity:1; }
.tlcal-add-btn:hover { color:#534AB7; }
.tlcal-badge { font-size:8px;font-weight:600;padding:2px 4px;border-radius:0 3px 3px 0;
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;border-left:2px solid transparent; }
.tlcal-badge-done    { background:rgba(16,185,129,0.12);border-left-color:#10b981;color:#d1fae5; }
.tlcal-badge-prog    { background:rgba(245,158,11,0.12);border-left-color:#f59e0b;color:#fef3c7; }
.tlcal-badge-plan    { background:rgba(59,130,246,0.12);border-left-color:#3b82f6;color:#dbeafe; }
.tlcal-badge-overdue { background:rgba(248,113,113,0.12);border-left-color:var(--err-text);color:#fee2e2; }
.tlcal-badge-more    { font-size:7px;color:var(--text-muted);padding:1px 3px; }

/* WORKSPACE */
.tl-workspace { display:grid;grid-template-columns:260px 1fr;min-height:360px;
  border-top:1px solid var(--border-muted); }
.tl-ws-list   { border-right:1px solid var(--border-muted);display:flex;flex-direction:column;
  background:var(--bg-sidebar);overflow:hidden;max-height:480px; }
.tl-ws-editor { background:var(--bg-card);overflow:hidden;display:flex;flex-direction:column; }
.tlws-card { display:flex;margin:0 12px 6px;background:var(--bg-hover);border:1px solid var(--border);
  border-radius:6px;cursor:pointer;transition:border-color 0.12s,background 0.12s;overflow:hidden; }
.tlws-card:first-child { margin-top:12px; }
.tlws-card:hover { background:var(--bg-hover2);border-color:var(--border-soft); }
.tlws-card-sel { border-color:var(--brand) !important;background:var(--brand-bg); }
.tlws-card-done    { border-left:3px solid #10b981; }
.tlws-card-prog    { border-left:3px solid #f59e0b; }
.tlws-card-plan    { border-left:3px solid #3b82f6; }
.tlws-card-overdue { border-left:3px solid #f87171; }
.tlws-date { padding:10px;text-align:center;border-right:1px solid var(--border);min-width:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center; }
.tlws-card-sel .tlws-date { background:rgba(83,74,183,0.1); }
.tlws-day  { font-size:16px;font-weight:800;color:var(--text);line-height:1; }
.tlws-month { font-size:8px;font-weight:600;color:var(--text-muted);letter-spacing:0.06em;margin-top:2px; }
.tlws-info { padding:10px;flex:1;min-width:0; }
.tlws-ms-title  { font-size:11px;font-weight:600;color:var(--text);margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tlws-ms-status { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em; }
.tlws-st-done    { color:#10b981; }
.tlws-st-prog    { color:#f59e0b; }
.tlws-st-plan    { color:#3b82f6; }
.tlws-st-overdue { color:var(--err-text); }
.tlws-editor-inner { display:flex;flex-direction:column;flex:1;padding:20px 24px;box-sizing:border-box;overflow-y:auto; }
.tlws-ed-head  { display:flex;align-items:flex-start;gap:10px; }
.tlws-input-title { background:transparent;border:none;color:var(--text);font-size:18px;
  font-weight:700;width:100%;outline:none;font-family:inherit;
  padding:0 0 4px;border-bottom:1px solid var(--border-muted);margin-bottom:8px; }
.tlws-input-title:focus { border-bottom-color:#534AB7; }
.tlws-input-title:disabled { color:var(--text-muted);cursor:default; }
.tlws-date-btn { background:transparent;border:1px dashed #2a2a2a;color:var(--text-muted);
  font-size:10px;font-weight:600;padding:4px 10px;border-radius:4px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-family:inherit;
  transition:border-color 0.15s,color 0.15s; }
.tlws-date-btn:hover { border-color:var(--brand);color:var(--brand-light); }
.tlws-textarea { resize:none;flex:1;min-height:70px;margin-bottom:0; }

/* DELIVERY BADGE nella lista */
.tlws-deliv-badge { display:inline-flex;align-items:center;gap:2px;font-size:9px;
  font-weight:600;color:var(--text-faint);padding:1px 5px;border-radius:10px;background:var(--bg-hover);
  border:1px solid var(--border);line-height:1.3; }
.tlws-deliv-badge.tlws-deliv-all { color:#10b981;border-color:#10b98130;background:#0d1a12; }

/* EDITOR: sezione deliverable e note */
.tlws-ed-deliv { display:flex;flex-direction:column;gap:6px;
  padding:12px 0;border-bottom:1px solid var(--border-muted); }
.tlws-ed-deliv-hdr { display:flex;align-items:center;justify-content:space-between; }
.tlws-deliver-list { display:flex;flex-direction:column;gap:3px;
  max-height:180px;overflow-y:auto; }
.tlws-deliv-count { font-size:9px;font-weight:700;color:var(--text-muted);
  background:var(--bg-hover);border:1px solid var(--border);border-radius:10px;padding:1px 6px; }
.tlws-deliv-count.all-done { color:#10b981;border-color:#10b98130;background:#0d1a12; }
.tlws-ed-notes { display:flex;flex-direction:column;gap:4px;
  padding:10px 0;flex:1;min-height:0; }
.tlws-ed-notes .tlws-textarea { flex:1;min-height:60px; }

/* SATELLITE DOTS — badge in basso a destra del dot principale */
.tl-satellites-badge { position:absolute;bottom:-3px;right:-5px;
  display:flex;gap:2px;align-items:center;z-index:5; }
.tl-satellite { width:9px;height:9px;border-radius:50%;cursor:pointer;flex-shrink:0;
  border:1.5px solid var(--bg-card);transition:transform 0.15s,box-shadow 0.15s; }
.tl-satellite:hover { transform:scale(1.5); }
.tl-satellite-sel { box-shadow:0 0 0 2px rgba(255,255,255,0.3); }
.tl-dot-sel { box-shadow:0 0 0 3px rgba(255,255,255,0.15) !important; }

/* DELIVERABLE PANEL (legacy editor) */
.tlws-deliver-panel { display:flex;flex-direction:column;min-width:0; }
.tlws-deliver-item { display:flex;align-items:center;gap:8px;padding:5px 8px;
  background:var(--bg-hover);border-radius:5px;border:1px solid transparent;
  transition:border-color 0.1s; }
.tlws-deliver-item:hover { border-color:var(--border-soft); }
.tlws-deliver-item input[type=checkbox] { accent-color:#534AB7;cursor:pointer;flex-shrink:0; }
.tlws-deliver-text { font-size:11px;color:var(--warn-text);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.tlws-deliver-text.done { color:var(--ok-text);text-decoration:line-through;opacity:0.6; }
.tlws-deliver-del { background:transparent;border:none;color:#3a3a3a;cursor:pointer;
  font-size:14px;padding:0;line-height:1;transition:color 0.1s;flex-shrink:0; }
.tlws-deliver-del:hover { color:var(--err-text); }
.tlws-deliver-add { display:flex;gap:6px;margin-top:6px; }
.tlws-deliver-input { flex:1;background:var(--bg-hover);border:1px solid var(--border-soft);border-radius:5px;
  color:var(--text);font-size:11px;padding:5px 8px;font-family:inherit;
  outline:none;transition:border-color 0.15s; }
.tlws-deliver-input:focus { border-color:var(--brand); }
.tlws-deliver-input::placeholder { color:var(--text-faint); }

/* TOOLTIP sui dot timeline — appare SOTTO il dot */
.tl-tooltip { position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%);min-width:150px;max-width:210px;
  background:var(--bg-hover);border:1px solid var(--border-soft);border-radius:8px;
  padding:10px 12px;pointer-events:none;opacity:0;
  transition:opacity 0.15s;z-index:50;white-space:normal;text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,0.6); }
.tl-node:hover .tl-tooltip { opacity:1; }
.tl-tt-title { font-size:11px;font-weight:700;color:var(--text);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tl-tt-meta  { font-size:9px;color:var(--text-muted);margin-bottom:6px; }
.tl-tt-deliv { font-size:8px;color:#888;text-transform:uppercase;
  letter-spacing:0.08em;margin-bottom:4px; }
.tl-tt-item  { display:flex;align-items:center;gap:4px;margin-bottom:2px; }
.tl-tt-item-dot { width:4px;height:4px;border-radius:50%;flex-shrink:0; }
.tl-tt-item-text { font-size:9px;color:#bbb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.tlws-ed-footer { display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--border-muted);padding-top:16px;margin-top:auto; }
.tlws-status-sel { display:flex;background:var(--bg-hover);border:1px solid var(--border);
  border-radius:6px;overflow:hidden; }
.tlws-status-btn { background:transparent;border:none;padding:7px 12px;color:var(--text-muted);
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  cursor:pointer;font-family:inherit;transition:all 0.12s;white-space:nowrap; }
.tlws-status-btn:hover { color:#888;background:var(--bg-hover2); }
.tlws-st-active-done    { background:rgba(16,185,129,0.1) !important;color:#10b981 !important; }
.tlws-st-active-prog    { background:rgba(245,158,11,0.1) !important;color:#f59e0b !important; }
.tlws-st-active-plan    { background:rgba(59,130,246,0.1) !important;color:#3b82f6 !important; }
.tlws-st-active-overdue { background:rgba(248,113,113,0.1) !important;color:var(--err-text) !important; }

/* ── WORKSPACE V3 ────────────────────────────────────────────── */
.tl-ws-v3 { display:grid;gap:20px;align-items:start;transition:grid-template-columns 0.3s; }

/* GRIGLIA OPERATIVA */
.tlgrid-wrap { background:var(--bg-sidebar);border:1px solid var(--border-muted);border-radius:10px;overflow:hidden; }
.tlgrid-header { display:grid;grid-template-columns:minmax(180px,auto) 1fr;gap:0;
  padding:10px 16px;border-bottom:1px solid var(--border-muted);
  font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-faint); }
.tlgrid-body {}
.tlgrid-empty { padding:24px;text-align:center;font-size:13px;color:var(--text-muted); }

.tlgrid-row { display:grid;grid-template-columns:minmax(180px,auto) 1fr;gap:0;
  border-bottom:1px solid var(--border-muted);cursor:pointer;transition:background 0.1s; }
.tlgrid-row:last-child { border-bottom:none; }
.tlgrid-row:hover { background:var(--bg-card); }
.tlgrid-row-sel { background:var(--bg-sidebar); }
.tlgrid-row-exp { background:var(--bg-sidebar); }
.tlgrid-row-past .tlgrid-day,
.tlgrid-row-past .tlgrid-mon,
.tlgrid-row-past .tlgrid-dot,
.tlgrid-row-past .tlgrid-ms-title { color:var(--text-faint) !important;opacity:0.6; }
.tlgrid-row-past .tlgrid-ms-status { opacity:0.4; }

.tlgrid-left { display:flex;align-items:flex-start;gap:8px;padding:7px 12px;min-width:0; }
.tlgrid-date-block { display:flex;flex-direction:column;align-items:center;
  min-width:34px;flex-shrink:0;padding-top:1px; }
.tlgrid-day { font-size:17px;font-weight:700;color:var(--text-muted);line-height:1; }
.tlgrid-mon { font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;margin-top:2px; }
.tlgrid-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px; }
.tlgrid-ms-info { flex:1;min-width:0; }
.tlgrid-ms-title { font-size:14px;font-weight:600;color:var(--text);
  white-space:normal;word-break:break-word; }
.tlgrid-ms-date { font-size:11px;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:4px;flex-wrap:wrap; }
.tlgrid-ms-status { font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px; }
.tlgrid-st-done    { background:rgba(16,185,129,0.12);color:#10b981; }
.tlgrid-st-prog    { background:rgba(245,158,11,0.12);color:#f59e0b; }
.tlgrid-st-plan    { background:rgba(59,130,246,0.12);color:#3b82f6; }
.tlgrid-st-overdue { background:rgba(248,113,113,0.12);color:var(--err-text); }
.tlgrid-chevron { font-size:14px;color:var(--text-muted);flex-shrink:0;margin-top:2px;
  transition:color 0.1s; }
.tlgrid-row:hover .tlgrid-chevron { color:var(--text-faint); }

.tlgrid-right { padding:7px 12px 7px 0;min-width:0; }
.tlgrid-chips-row { display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
.tlgrid-chip { font-size:14px;padding:3px 8px;border-radius:4px;
  background:rgba(251,191,36,0.1);color:var(--warn-text);border:1px solid rgba(251,191,36,0.25);white-space:nowrap; }
.tlgrid-chip-done { background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border);text-decoration:line-through;opacity:0.75; }
.tlgrid-chip-more { font-size:11px;color:var(--text-faint);padding:2px 5px;white-space:nowrap; }
.tlgrid-count { font-size:14px;font-weight:600;color:var(--text-faint);margin-left:auto;flex-shrink:0;
  white-space:nowrap; }
.tlgrid-count-done { color:#10b981; }
.tlgrid-empty-del { font-size:13px;color:var(--text-faint); }

.tlgrid-expanded { margin-top:8px;padding:14px 16px;background:var(--bg-deep);
  border-radius:6px;border:1px solid var(--border-muted); }
.tlgrid-date-edit { display:flex;align-items:center;gap:8px;padding:0 0 10px;
  border-bottom:1px solid var(--border-muted);margin-bottom:10px; }
.tlgrid-date-edit-lbl { font-size:14px;color:var(--text-muted);flex:1; }
.tlgrid-deliv-list { display:flex;flex-direction:column;gap:5px;margin-bottom:10px; }
.tlgrid-deliv-item { display:flex;align-items:center;gap:10px;padding:5px 8px;
  border-radius:4px;border:1px solid transparent;transition:border-color 0.1s; }
.tlgrid-deliv-item:hover { border-color:#1e1e1e; }
.tlgrid-deliv-item input[type=checkbox] { accent-color:#534AB7;cursor:pointer;flex-shrink:0;
  width:16px;height:16px; }
.tlgrid-deliv-text { font-size:14px;color:var(--warn-text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; }
.tlgrid-deliv-text.done { color:var(--ok-text);text-decoration:line-through;opacity:0.6; }
.tlgrid-deliv-del { background:transparent;border:none;color:var(--text-muted);cursor:pointer;
  padding:0;display:flex;align-items:center;flex-shrink:0;transition:color 0.1s; }
.tlgrid-deliv-del:hover { color:var(--err-text); }
.tlgrid-deliv-edit { background:transparent;border:none;color:var(--text-muted);cursor:pointer;
  padding:0 2px;display:flex;align-items:center;flex-shrink:0;transition:color 0.1s;
  opacity:0; }
.tlgrid-deliv-item:hover .tlgrid-deliv-edit { opacity:1; }
.tlgrid-deliv-edit:hover { color:#a78bfa; }
.tlgrid-deliv-empty { font-size:13px;color:var(--text-faint);padding:5px 0; }
.tlgrid-archive-hdr { display:flex;align-items:center;gap:8px;padding:10px 16px;
  background:var(--bg-body);border-top:1px solid var(--border-muted);cursor:pointer;
  font-size:12px;font-weight:600;color:var(--text-faint);letter-spacing:0.04em;
  user-select:none;transition:background 0.1s; }
.tlgrid-archive-hdr:hover { background:var(--bg-card);color:var(--text-muted); }
.tlgrid-add-row { display:flex;gap:6px;margin-top:6px; }
.tlgrid-add-input { flex:1;background:var(--bg-hover);border:1px solid var(--border-soft);border-radius:5px;
  padding:8px 10px;color:var(--text);font-size:14px;font-family:inherit;outline:none; }
.tlgrid-add-input:focus { border-color:var(--brand); }
.tlgrid-add-input::placeholder { color:var(--text-faint); }
.tlgrid-note { font-size:13px;color:var(--text-muted);margin-top:8px;padding-top:8px;
  border-top:1px solid var(--border-muted);line-height:1.6; }
.tlgrid-note-preview { font-size:14px;color:var(--text-muted);margin-top:4px;font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.tlgrid-note-input { width:100%;box-sizing:border-box;background:var(--bg-input);
  border:1px solid var(--border-soft);border-radius:5px;padding:9px 11px;color:var(--text);
  font-size:14px;font-family:inherit;resize:vertical;min-height:72px;
  margin-top:8px;outline:none;line-height:1.6; }
.tlgrid-note-input:focus { border-color:var(--brand); }
.tlgrid-note-input::placeholder { color:var(--text-faint); }

/* A4 WRAP */
.tla4-wrap { background:#cbd5e1;border-radius:8px;display:flex;flex-direction:column;overflow:hidden; }
.tla4-topbar { background:#9ca3af;padding:10px 15px;display:flex;
  justify-content:space-between;align-items:center;flex-shrink:0; }
.tla4-topbar-title { font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:#374151; }

/* SCALER — aspect ratio A4 + container query per cqh */
/* Il scaler è un viewport che scala il foglio A4 con transform */
.tla4-scaler { width:100%;position:relative;overflow:hidden;
  background:#cbd5e1;box-sizing:border-box; }

/* IL FOGLIO — 794×1123px (A4 @ 96dpi). Valori px derivati esattamente dal
   print CSS (mm→px @96dpi, pt→px @96dpi) così screen = zoom = PDF. */
.a4-sheet {
  width:794px;height:1123px;
  transform-origin:top left;
  background:#ffffff;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  box-sizing:border-box;overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;color:#111;
  padding:60px 83px 38px;
  display:flex;flex-direction:column;
}
/* Header  (16mm top già nel padding del foglio) */
.a4-hdr-tbl { width:100%;border-collapse:collapse;margin-bottom:19px;flex-shrink:0; }
.a4-logo-cell { width:50%;vertical-align:top; }
.a4-logo { height:83px;width:auto; }                    /* 22mm */
.a4-tagline-cell { text-align:right;vertical-align:top;padding-top:11px;
  font-size:11px;font-style:italic;color:#333;line-height:1.4; }
.a4-hr-top { border:none;border-top:1px solid #111;margin-bottom:53px;flex-shrink:0; } /* 14mm */
/* Titolo */
.a4-doc-title { text-align:center;margin-bottom:34px;flex-shrink:0; }  /* 9mm */
.a4-doc-title h1 { font-size:19px;font-weight:bold;text-transform:uppercase;
  letter-spacing:0.08em;margin:0 0 11px; }              /* 14pt, 3mm */
.a4-doc-title h2 { font-size:13px;font-weight:normal;color:var(--text-faint);margin:0; } /* 10pt */
/* Righe */
.a4-rows { flex:1;overflow:hidden; }
.a4-row { width:100%;border-collapse:collapse;margin-bottom:19px;font-size:14px;line-height:1.6; } /* 5mm */
.a4-row td { border-bottom:1px solid #eee;padding-bottom:19px;vertical-align:top; } /* 5mm */
.a4-row:last-child td { border-bottom:none;padding-bottom:0; }
.a4-row.active td { background:rgba(83,74,183,0.04); }
.a4-date { width:121px;padding-right:19px;font-weight:bold;color:#111;font-size:13px; } /* 32mm, 5mm, 10pt */
.a4-content { /* inherits */ }
.a4-phase { font-weight:bold;font-size:15px;margin-bottom:11px; }        /* 11pt, 3mm */
.a4-ul { margin:0 0 11px;padding-left:19px;font-size:13px;color:#333; }  /* 3mm, 5mm, 10pt */
.a4-ul li { list-style-type:disc;margin-bottom:2px; }
.a4-li-done { text-decoration:line-through;color:#aaa; }
.a4-note { font-size:13px;font-style:italic;color:var(--text-muted);margin-top:8px; } /* 9.5pt, 2mm */
.a4-empty { font-size:13px;color:#ccc;text-align:center;padding:38px 0; }
/* Footer */
.a4-footer-block { margin-top:auto;flex-shrink:0; }
.a4-hr-bot { border:none;border-top:1px solid #111;margin-bottom:11px; } /* 3mm */
.a4-footer-text { font-size:10px;color:var(--text-faint);text-align:center;line-height:1.7; } /* 7.5pt */
.a4-readonly-note { font-size:12px;background:#fffbeb;color:#92400e;
  text-align:center;padding:11px;margin-bottom:15px; }

/* VERSION BAR */
.tla4-ver-bar { display:flex;gap:4px;flex-wrap:wrap;padding:8px;
  background:#b0bec5;flex-shrink:0; }
.tla4-ver-btn { background:#e2e8f0;border:1px solid #94a3b8;border-radius:5px;
  padding:3px 9px;font-size:9px;font-weight:600;color:#475569;cursor:pointer;
  font-family:inherit;transition:all 0.12s;white-space:nowrap; }
.tla4-ver-btn:hover { background:#f1f5f9;border-color:#64748b;color:#1e293b; }
.tla4-ver-active { background:#534AB7;border-color:var(--brand);color:#fff; }
.tla4-ver-date { font-weight:400; }
.tla4-ver-draft.tla4-ver-active { background:#1d4ed8;border-color:#1d4ed8;color:#fff; }

/* ── STAMPA PDF ─────────────────────────────────────────────────
   Replica esatta del layout document.html (WeasyPrint reference)
   ────────────────────────────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 0; }

  /* Nascondi tutto il gestionale */
  body, html { background: white !important; margin: 0 !important; padding: 0 !important; }
  body * { visibility: hidden; }

  /* Rendi visibile solo il foglio */
  #tla4-sheet, #tla4-sheet * { visibility: visible; }

  /* Estrai il foglio e impostalo come pagina fisica A4 */
  #tla4-sheet {
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    width: 210mm !important;
    min-height: 297mm !important;
    padding: 16mm 22mm 38mm 22mm !important;
    box-shadow: none !important;
    transform: none !important;
    container-type: normal !important;   /* disabilita cqh */
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10.5pt !important;
    color: #111 !important;
    background: white !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Header tabella */
  .a4-hdr-tbl { width: 100% !important; border-collapse: collapse !important; margin-bottom: 5mm !important; }
  .a4-logo-cell { width: 50% !important; vertical-align: top !important; }
  .a4-logo { height: 22mm !important; width: auto !important; }
  .a4-tagline-cell {
    text-align: right !important; vertical-align: top !important;
    padding-top: 3mm !important; font-size: 8pt !important;
    font-style: italic !important; color: #333 !important; line-height: 1.4 !important;
  }
  .a4-hr-top { border: none !important; border-top: 1px solid #111 !important; margin-bottom: 14mm !important; }

  /* Titolo documento */
  .a4-doc-title { text-align: center !important; margin-bottom: 9mm !important; }
  .a4-doc-title h1 {
    font-size: 14pt !important; text-transform: uppercase !important;
    letter-spacing: 0.06em !important; font-weight: bold !important;
    margin: 0 0 3mm 0 !important;
  }
  .a4-doc-title h2 {
    font-size: 10pt !important; font-weight: normal !important;
    color: #333 !important; margin: 0 !important;
  }

  /* Righe milestone */
  .a4-rows { display: block !important; overflow: visible !important; }
  .a4-row {
    display: flex !important; gap: 5mm !important;
    border-bottom: 1pt solid #eeeeee !important;
    padding-bottom: 5mm !important; margin-bottom: 5mm !important;
    font-size: 10.5pt !important; line-height: 1.6 !important;
    page-break-inside: avoid !important;
  }
  .a4-row:last-child { border-bottom: none !important; }
  .a4-row.active { background: transparent !important; }

  .a4-date {
    width: 32mm !important; flex-shrink: 0 !important;
    font-size: 10pt !important; font-weight: bold !important; color: #000 !important;
  }
  .a4-content { flex: 1 !important; }
  .a4-phase { font-size: 11pt !important; font-weight: bold !important; margin-bottom: 3mm !important; color: #000 !important; }
  .a4-ul { margin: 0 0 3mm 0 !important; padding-left: 5mm !important; font-size: 10pt !important; line-height: 1.5 !important; }
  .a4-ul li { margin-bottom: 1.5pt !important; }
  .a4-li-done { text-decoration: line-through !important; color: #aaa !important; }
  .a4-note { font-size: 9.5pt !important; font-style: italic !important; color: #555 !important; margin-top: 2mm !important; }

  /* Footer — posizionato in fondo alla pagina come in document.html */
  .a4-footer-block {
    position: fixed !important;
    bottom: 10mm !important; left: 22mm !important; right: 22mm !important;
    margin-top: 0 !important;
  }
  .a4-hr-bot { border: none !important; border-top: 1px solid #111 !important; margin-bottom: 3mm !important; }
  .a4-footer-text { font-size: 7.5pt !important; color: #444 !important; text-align: center !important; line-height: 1.7 !important; }
  .a4-readonly-note { font-size: 9pt !important; background: #fffbeb !important; color: #92400e !important; text-align: center !important; padding: 3mm !important; margin-bottom: 4mm !important; }
}

/* ── FINANCIAL HUB (3-column document pipeline) ──────────────── */
.financial-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; margin-bottom: 20px; }
.hub-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.col-header { display: flex; justify-content: space-between; align-items: center; background: var(--bg-hover); border-bottom: 1px solid var(--border); padding: 10px 14px; }
.col-title { font-size: 10px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.btn-add { background: transparent; border: 1px dashed var(--border-soft); color: var(--text-muted); padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; cursor: pointer; transition: 0.15s; text-transform: uppercase; }
.btn-add:hover { background: var(--brand); color: #fff; border-color: var(--brand); border-style: solid; }
.col-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 80px; flex-grow: 1; }
.doc-group { display: flex; flex-direction: column; gap: 3px; }
/* Layout riga: icon+info | amount+status | actions (non sovrapposte) */
.doc-row { background: var(--bg-hover); border: 1px solid transparent; border-radius: 6px;
  padding: 8px 10px; display: flex; align-items: center; gap: 8px;
  transition: 0.15s; cursor: pointer; }
.doc-row:hover { border-color: var(--border-soft); background: var(--bg-hover2); }
.doc-row.approved { border-left: 3px solid #10b981; background: rgba(16,185,129,0.05); }
.doc-row.approved .ic-prv { background: rgba(16,185,129,0.12); color: var(--ok-text); }
.doc-row.rejected { opacity: 0.45; filter: grayscale(100%); }
.row-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.row-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-prv { background: rgba(92,106,196,0.15); color: #93a5eb; }
.ic-csn { background: rgba(245,158,11,0.15); color: #f59e0b; }
.ic-ftt { background: rgba(16,185,129,0.15); color: #10b981; }
.row-info { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.row-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 2px; }
.row-title span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.type-badge { padding: 1px 4px; border-radius: 3px; border: 1px solid var(--border); }
.type-tool { background: var(--bg-hover); color: var(--text-muted); }
.type-ext { background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.row-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex-shrink: 0; gap: 3px; }
.row-amount { font-size: 12px; font-weight: 800; color: var(--text); }
.row-status { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.fh-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.st-draft { color: var(--text-muted); } .st-draft .fh-dot { background: var(--text-muted); }
.st-ok  { color: #10b981; }  .st-ok .fh-dot  { background: #10b981; }
.st-ko  { color: #ef4444; }  .st-ko .fh-dot  { background: #ef4444; }
.st-sent { color: var(--info-text); } .st-sent .fh-dot { background: var(--info-text); }
/* Azioni: inline, visibili solo su hover — non sovrappongono l'importo */
.row-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.doc-row:hover .row-actions { opacity: 1; }
.btn-icon-sm { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); width: 22px; height: 22px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; padding: 0; }
.btn-icon-sm:hover { background: var(--bg-hover2); color: var(--text); }
.btn-approve-sm { background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.3); font-size: 9px; font-weight: 700; padding: 0 7px; border-radius: 4px; cursor: pointer; height: 22px; text-transform: uppercase; white-space: nowrap; }
.btn-approve-sm:hover { background: #10b981; color: #000; }
.doc-versions { display: flex; gap: 5px; align-items: center; padding-left: 48px; flex-wrap: wrap; }
.v-pill { font-size: 9px; font-weight: 700; color: var(--text-muted); background: var(--bg-hover); border: 1px solid var(--border); padding: 2px 7px; border-radius: 10px; cursor: pointer; transition: 0.15s; }
.v-pill:hover { color: var(--text); border-color: var(--border-soft); }
.v-pill.active { color: #93a5eb; background: rgba(92,106,196,0.1); border-color: rgba(92,106,196,0.3); }
.fh-empty { padding: 24px 16px; text-align: center; color: var(--text-faint); font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: auto 0; flex: 1; }
.version-confirm-badge { font-size: 9px; color: #a78bfa; background: var(--brand-bg); border: 1px solid var(--brand); border-radius: 4px; padding: 1px 6px; white-space: nowrap; letter-spacing: 0.02em; }
.connector-box { background: rgba(92,106,196,0.05); border: 1px dashed rgba(92,106,196,0.3); border-radius: 6px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; }
.conn-text { font-size: 9px; color: #93a5eb; font-weight: 700; text-transform: uppercase; }
.conn-btn { background: var(--brand); color: #fff; border: none; padding: 5px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; cursor: pointer; transition: 0.15s; }
.conn-btn:hover { background: var(--brand-hover); }