/* ── CMR Design System ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root,[data-theme="dark"]{
  --bg:#0d0d18;
  --surface:#131320;
  --surface2:#1a1a2e;
  --border:#252540;
  --border2:#30304a;
  --text:#d8d8ee;
  --muted:#7878a0;
  --white:#f0f0ff;
  --accent:#7c6af5;
  --accent-dim:rgba(124,106,245,.15);
  --green:#22c55e;
  --green-dim:rgba(34,197,94,.12);
  --yellow:#f59e0b;
  --yellow-dim:rgba(245,158,11,.12);
  --orange:#f97316;
  --orange-dim:rgba(249,115,22,.12);
  --red:#ef4444;
  --red-dim:rgba(239,68,68,.12);
  --shadow:0 4px 24px rgba(0,0,0,.4);
  color-scheme:dark;
}

[data-theme="light"]{
  --bg:#f5f5fa;
  --surface:#ffffff;
  --surface2:#ededf5;
  --border:#e0e0ee;
  --border2:#d0d0e4;
  --text:#1a1a30;
  --muted:#7070a0;
  --white:#0d0d18;
  --accent:#5b49d4;
  --accent-dim:rgba(91,73,212,.1);
  --green:#16a34a;
  --green-dim:rgba(22,163,74,.1);
  --yellow:#d97706;
  --yellow-dim:rgba(217,119,6,.1);
  --orange:#ea580c;
  --orange-dim:rgba(234,88,12,.1);
  --red:#dc2626;
  --red-dim:rgba(220,38,38,.1);
  --shadow:0 4px 24px rgba(0,0,0,.08);
  color-scheme:light;
}

html{transition:background .2s,color .2s}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;
     font-size:14px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── TOPBAR ─────────────────────────────────────────────────────────────────── */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);
        position:sticky;top:0;z-index:100}
.topbar-inner{max-width:1400px;margin:0 auto;padding:0 20px;height:56px;
              display:flex;align-items:center;gap:16px}

.topbar-brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.brand-icon{font-size:1.3rem}
.brand-name{font-weight:800;font-size:1.05rem;color:var(--accent);letter-spacing:-.02em}
.brand-sub{font-size:.72rem;color:var(--muted);font-weight:500;margin-left:-4px}

.topbar-nav{display:flex;gap:2px;flex:1}
.nav-link{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:6px;
          color:var(--muted);font-size:.83rem;text-decoration:none;transition:.15s}
.nav-link:hover{color:var(--text);background:var(--surface2)}
.nav-link.active{color:var(--accent);background:var(--accent-dim)}
.nav-icon{font-size:.95rem}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.user-badge{font-size:.82rem;color:var(--muted)}

.theme-btn{background:none;border:1px solid var(--border);border-radius:6px;
           padding:5px 8px;cursor:pointer;color:var(--muted);font-size:.9rem;transition:.15s}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
[data-theme="dark"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:inline}
[data-theme="light"] .icon-sun{display:inline}
[data-theme="light"] .icon-moon{display:none}

.hamburger{display:none;background:none;border:1px solid var(--border);border-radius:6px;
           padding:6px 10px;cursor:pointer;color:var(--text);font-size:1.1rem}
@media(max-width:700px){
  .topbar-nav,.user-badge,.theme-btn{display:none}
  .hamburger{display:flex}
}

.mobile-nav{display:none;flex-direction:column;background:var(--surface);
            border-bottom:1px solid var(--border);padding:12px 20px;gap:4px}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:10px 12px;border-radius:6px;color:var(--text);font-size:.95rem}
.mobile-nav a:hover{background:var(--surface2)}

/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
.main-content{flex:1;max-width:1400px;width:100%;margin:0 auto;padding:24px 20px}
.footer{border-top:1px solid var(--border);padding:14px 24px;font-size:.78rem;
        color:var(--muted);display:flex;gap:20px;justify-content:center}
.footer a{color:var(--muted)}

.page-header{margin-bottom:20px;display:flex;align-items:center;
             justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-title{font-size:1.4rem;font-weight:700;color:var(--white)}
.page-sub{color:var(--muted);font-size:.88rem;margin-top:2px}

/* ── CARDS ──────────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px}
.card+.card{margin-top:16px}
.card-header{display:flex;align-items:center;justify-content:space-between;
             margin-bottom:16px;gap:10px}
.card-title{font-weight:700;color:var(--white);font-size:1rem}

/* ── STATS ──────────────────────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;
           padding:16px;text-align:center;cursor:pointer;transition:.15s}
.stat-card:hover{border-color:var(--accent)}
.stat-num{font-size:2rem;font-weight:800;line-height:1}
.stat-label{font-size:.78rem;color:var(--muted);margin-top:4px}
.stat-scaduta .stat-num{color:var(--red)}
.stat-critica .stat-num{color:var(--orange)}
.stat-warning .stat-num{color:var(--yellow)}
.stat-ok .stat-num{color:var(--green)}
.stat-total .stat-num{color:var(--accent)}

/* ── TABLE ──────────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;background:var(--surface)}
thead th{background:var(--surface2);padding:10px 12px;text-align:left;
         font-size:.75rem;color:var(--muted);font-weight:600;letter-spacing:.04em;
         text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:10px 12px;border-bottom:1px solid var(--border2);
         font-size:.875rem;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.025)}
[data-theme="light"] tbody tr:hover{background:rgba(0,0,0,.025)}

/* ── URGENZA RIGHE ──────────────────────────────────────────────────────────── */
.row-scaduta td:first-child{border-left:3px solid var(--red)}
.row-critica td:first-child{border-left:3px solid var(--orange)}
.row-warning td:first-child{border-left:3px solid var(--yellow)}
.row-attenzione td:first-child{border-left:3px solid #6b7280}
.row-ok td:first-child{border-left:3px solid var(--green)}

/* ── BADGES ─────────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;
       border-radius:20px;font-size:.72rem;font-weight:600;white-space:nowrap}
.badge-scaduta{background:var(--red-dim);color:var(--red)}
.badge-critica{background:var(--orange-dim);color:var(--orange)}
.badge-warning{background:var(--yellow-dim);color:var(--yellow)}
.badge-attenzione{background:rgba(107,114,128,.15);color:#9ca3af}
.badge-ok{background:var(--green-dim);color:var(--green)}
.stato-da_lavorare{background:var(--yellow-dim);color:var(--yellow)}
.stato-inviato{background:var(--accent-dim);color:var(--accent)}
.stato-fatturato{background:var(--green-dim);color:var(--green)}
.stato-scaduto{background:var(--red-dim);color:var(--red)}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:7px;
     font-weight:600;cursor:pointer;border:none;font-size:.875rem;transition:.15s;
     text-decoration:none;font-family:inherit;line-height:1;vertical-align:middle}
.btn:hover{text-decoration:none;opacity:.88}
.btn-primary{background:var(--accent);color:#fff}
.btn-green{background:var(--green);color:#000}
.btn-danger{background:var(--red);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--border2);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);opacity:1}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:var(--surface2);opacity:1}
.btn-sm{padding:5px 11px;font-size:.78rem}
.btn-icon{padding:6px 8px}

/* ── FORM ───────────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:14px}
label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:5px;font-weight:600}
input,textarea,select{width:100%;padding:9px 12px;background:var(--surface2);
  border:1px solid var(--border2);border-radius:7px;color:var(--text);font-size:.9rem;
  font-family:inherit;outline:none;transition:border .15s}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:80px}
select option{background:var(--surface2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.form-hint{font-size:.75rem;color:var(--muted);margin-top:3px}

/* ── ALERT ──────────────────────────────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:7px;font-size:.875rem;margin-bottom:16px;
       display:flex;align-items:flex-start;gap:10px}
.alert-success{background:var(--green-dim);border:1px solid var(--green);color:var(--green)}
.alert-error{background:var(--red-dim);border:1px solid var(--red);color:var(--red)}
.alert-info{background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent)}
.alert-warn{background:var(--yellow-dim);border:1px solid var(--yellow);color:var(--yellow)}

/* ── FILTRI ─────────────────────────────────────────────────────────────────── */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filter-bar input,.filter-bar select{width:auto;flex:1;min-width:160px}
.filter-count{font-size:.82rem;color:var(--muted);margin-left:auto;white-space:nowrap}

/* ── LOGIN ──────────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
            padding:20px;background:var(--bg)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
            padding:40px;width:100%;max-width:400px;box-shadow:var(--shadow)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo .brand-icon{font-size:2.5rem;display:block;margin-bottom:8px}
.login-logo .brand-name{font-size:1.5rem;display:block;color:var(--accent);font-weight:800}
.login-logo .brand-sub{color:var(--muted);font-size:.88rem}

/* ── MODAL ──────────────────────────────────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);
               z-index:200;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;
       padding:28px;width:100%;max-width:580px;max-height:90vh;overflow-y:auto;
       box-shadow:var(--shadow)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-title{font-size:1.1rem;font-weight:700;color:var(--white)}
.modal-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.3rem;
             padding:4px 6px;border-radius:4px}
.modal-close:hover{color:var(--red);background:var(--red-dim)}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;
              padding-top:16px;border-top:1px solid var(--border)}

/* ── DETAIL ─────────────────────────────────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.detail-item{background:var(--surface2);border-radius:7px;padding:12px}
.detail-key{font-size:.7rem;color:var(--muted);font-weight:700;
            text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.detail-val{font-size:.9rem;color:var(--white);font-weight:500;word-break:break-word}

/* ── FILE UPLOAD ────────────────────────────────────────────────────────────── */
.upload-area{border:2px dashed var(--border2);border-radius:8px;padding:24px;
             text-align:center;cursor:pointer;transition:.2s;color:var(--muted)}
.upload-area:hover,.upload-area.drag{border-color:var(--accent);color:var(--accent);
             background:var(--accent-dim)}
.upload-area input[type=file]{display:none}
.file-list{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.file-item{display:flex;align-items:center;gap:10px;background:var(--surface2);
           border-radius:6px;padding:8px 12px;font-size:.84rem}
.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item-size{color:var(--muted);white-space:nowrap}

/* ── BREADCRUMB ─────────────────────────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.82rem;
            color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:var(--border2)}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .main-content{padding:16px 12px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .page-header{flex-direction:column;align-items:flex-start}
  .table-wrap th:nth-child(n+5),.table-wrap td:nth-child(n+5){display:none}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .filter-bar{flex-direction:column}
  .filter-bar input,.filter-bar select{width:100%;min-width:unset}
}

/* ── UTILITY ────────────────────────────────────────────────────────────────── */
.text-muted{color:var(--muted)}
.text-right{text-align:right}
.nowrap{white-space:nowrap}
.d-flex{display:flex;align-items:center;gap:8px}
.mt-16{margin-top:16px}
.mt-8{margin-top:8px}
.hidden{display:none!important}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}

/* ── ORDINAMENTO COLONNE ─────────────────────────────────────────────────────── */
thead th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:22px}
thead th.sortable:hover{color:var(--text);background:var(--border)}
thead th.sortable::after{content:'↕';position:absolute;right:8px;opacity:.35;font-size:.8rem}
thead th.sort-asc::after{content:'↑';opacity:1;color:var(--accent)}
thead th.sort-desc::after{content:'↓';opacity:1;color:var(--accent)}

/* ── QUILL RICH TEXT ─────────────────────────────────────────────────────────── */
.ql-toolbar{background:var(--surface2);border:1px solid var(--border2)!important;
            border-bottom:none!important;border-radius:7px 7px 0 0;
            padding:6px 8px!important}
.ql-container{background:var(--surface2);border:1px solid var(--border2)!important;
              border-radius:0 0 7px 7px;font-family:inherit;font-size:.9rem;
              color:var(--text);min-height:120px}
.ql-editor{min-height:100px;padding:10px 12px;color:var(--text)}
.ql-editor.ql-blank::before{color:var(--muted);font-style:normal}
.ql-toolbar .ql-stroke{stroke:var(--muted)}
.ql-toolbar .ql-fill{fill:var(--muted)}
.ql-toolbar button:hover .ql-stroke,.ql-toolbar button.ql-active .ql-stroke{stroke:var(--accent)}
.ql-toolbar button:hover .ql-fill,.ql-toolbar button.ql-active .ql-fill{fill:var(--accent)}
.ql-toolbar .ql-picker-label{color:var(--muted)}
[data-theme="light"] .ql-toolbar{background:#f0f0f8}
[data-theme="light"] .ql-container{background:#fff}

/* Note HTML renderizzate */
.note-html{font-size:.88rem;line-height:1.6;color:var(--text)}
.note-html h1,.note-html h2,.note-html h3{color:var(--white);margin:.5em 0 .25em}
.note-html ul,.note-html ol{padding-left:1.4em;margin:.4em 0}
.note-html a{color:var(--accent)}
.note-html strong{color:var(--white)}