/* ========== RESET & VARS ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#BE1622; --red-d:#AD1E26; --red-bg:#FFEBEE;
  --green:#008D36; --green-d:#006633; --green-bg:#E8F5E9;
  --amber:#DBA100; --amber-bg:#FFF8E1;
  --brown:#936037; --brown-bg:#EFEBE9;
  --blue:#1565C0; --blue-bg:#E3F2FD;
  --purple:#6A1B9A; --purple-bg:#F3E5F5;
  --teal:#00695C; --teal-bg:#E0F2F1;
  --bg:#F5F5F5; --surface:#FFFFFF; --surface2:#FAFAFA;
  --divider:#E0E0E0; --divider2:#BDBDBD;
  --text:#212121; --text2:#424242; --text-s:#757575; --text-hint:#BDBDBD;
  --el1:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
  --el2:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
  --el3:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);
  --sw:256px; --r:4px; --r2:8px;
}
body{font-family:'Noto Sans',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}

/* ========== LAYOUT ========== */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sw);background:var(--red-d);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;box-shadow:var(--el2);overflow-y:auto;overflow-x:hidden}
.sb-brand{padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.15)}
.sb-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sb-icon{width:34px;height:34px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--red-d);font-weight:700;font-size:13px;flex-shrink:0}
.sb-title{font-size:15px;font-weight:700;color:#fff}
.sb-sub{font-size:10px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.6px}
nav{padding:8px 0;flex:1}
.nav-section{padding:8px 16px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.4)}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 20px;cursor:pointer;color:rgba(255,255,255,.75);font-size:13px;font-weight:500;transition:background .15s,color .15s;border-left:3px solid transparent;user-select:none}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:#fff}
.nav-item .material-icons{font-size:19px}
.sb-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:rgba(255,255,255,.4);text-align:center}
.sb-user{padding:10px 16px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px}
.sb-user-name{font-size:12px;color:rgba(255,255,255,.8);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-logout{background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.7);padding:4px 8px;border-radius:var(--r);cursor:pointer;font-size:11px;display:flex;align-items:center;gap:4px;transition:background .15s}
.sb-logout:hover{background:rgba(255,255,255,.2);color:#fff}
.sb-logout .material-icons{font-size:14px}

.main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column}
.topbar{background:var(--red);color:#fff;padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--el1);position:sticky;top:0;z-index:100}
.topbar-title{font-size:17px;font-weight:600}
.topbar-right{display:flex;align-items:center;gap:14px}
.year-sel-top{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:4px 10px;border-radius:var(--r);font-size:13px;font-family:'Noto Sans',sans-serif;cursor:pointer}
.year-sel-top option{background:var(--red-d)}
.sync-indicator{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.7)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.sync-dot.ok{background:#A5D6A7}
.sync-dot.syncing{background:var(--amber);animation:pulse .8s ease-in-out infinite}
.sync-dot.err{background:#EF9A9A}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
.content{padding:20px;flex:1}
.page{display:none}.page.active{display:block}

/* ========== STAT CARDS ========== */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:var(--surface);border-radius:var(--r);padding:16px;box-shadow:var(--el1);display:flex;align-items:flex-start;gap:14px;transition:box-shadow .2s}
.stat-card:hover{box-shadow:var(--el2)}
.stat-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-ico .material-icons{font-size:20px}
.s-green{background:var(--green-bg);color:var(--green-d)}.s-red{background:var(--red-bg);color:var(--red-d)}
.s-amber{background:var(--amber-bg);color:var(--amber)}.s-brown{background:var(--brown-bg);color:var(--brown)}
.stat-body{flex:1;min-width:0}
.stat-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-s);margin-bottom:3px}
.stat-val{font-size:20px;font-weight:700;font-family:'Noto Sans Mono',monospace;line-height:1.2}
.stat-val.g{color:var(--green-d)}.stat-val.r{color:var(--red-d)}
.stat-sub{font-size:11px;color:var(--text-s);margin-top:2px}

/* ========== CARD ========== */
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--el1);margin-bottom:18px;overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--divider)}
.card-title{font-size:14px;font-weight:600}

/* ========== CHIPS ========== */
.chip{display:inline-flex;align-items:center;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;letter-spacing:.2px;white-space:nowrap;line-height:1.6}
.ch-green{background:var(--green-bg);color:var(--green-d)}.ch-red{background:var(--red-bg);color:var(--red-d)}
.ch-amber{background:var(--amber-bg);color:var(--amber)}.ch-brown{background:var(--brown-bg);color:var(--brown)}
.ch-blue{background:var(--blue-bg);color:var(--blue)}.ch-purple{background:var(--purple-bg);color:var(--purple)}
.ch-teal{background:var(--teal-bg);color:var(--teal)}.ch-gray{background:#EEE;color:#616161}

/* ========== TABLE ========== */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{background:var(--surface2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-s);padding:9px 14px;text-align:left;border-bottom:2px solid var(--divider);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--divider);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:#FAFAFA}
td{padding:9px 14px;vertical-align:middle;font-size:13px}
.td-mono{font-family:'Noto Sans Mono',monospace;font-size:12px}
.td-amount{font-family:'Noto Sans Mono',monospace;font-size:13px;font-weight:600;text-align:right;white-space:nowrap}
.td-ent{color:var(--green-d)}.td-usc{color:var(--red-d)}
.td-actions{display:flex;gap:4px;justify-content:flex-end}

/* ========== BUTTONS ========== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r);font-size:13px;font-weight:600;letter-spacing:.3px;cursor:pointer;border:none;font-family:'Noto Sans',sans-serif;text-transform:uppercase;transition:box-shadow .2s,background .15s}
.btn .material-icons{font-size:17px}
.btn-red{background:var(--red);color:#fff;box-shadow:var(--el1)}.btn-red:hover{background:var(--red-d);box-shadow:var(--el2)}
.btn-green{background:var(--green);color:#fff;box-shadow:var(--el1)}.btn-green:hover{background:var(--green-d);box-shadow:var(--el2)}
.btn-out{background:transparent;color:var(--red-d);border:1px solid var(--red-d)}.btn-out:hover{background:var(--red-bg)}
.btn-text{background:transparent;color:var(--red-d);box-shadow:none;padding:6px 10px}.btn-text:hover{background:var(--red-bg)}
.btn-sm{padding:5px 12px;font-size:12px}
.ico-btn{background:transparent;border:none;cursor:pointer;padding:5px;border-radius:50%;display:inline-flex;align-items:center;color:var(--text-s);transition:background .15s}
.ico-btn:hover{background:var(--divider);color:var(--text)}
.ico-btn .material-icons{font-size:17px}
.ico-btn.del:hover{background:var(--red-bg);color:var(--red-d)}
.ico-btn.edit:hover{background:var(--blue-bg);color:var(--blue)}

/* ========== FILTER BAR ========== */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;background:var(--surface2);border-bottom:1px solid var(--divider)}
.fi{padding:6px 10px;border:1px solid var(--divider);border-radius:var(--r);font-size:13px;font-family:'Noto Sans',sans-serif;background:var(--surface);color:var(--text);transition:border-color .15s}
.fi:focus{outline:none;border-color:var(--red)}
.tabs-bar{display:flex;border-bottom:1px solid var(--divider);padding:0 16px}
.tab{padding:11px 14px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;color:var(--text-s);border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.tab:hover{color:var(--red)}.tab.active{color:var(--red);border-bottom-color:var(--red)}

/* ========== MODAL ========== */
.modal-bd{display:none;position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:500;align-items:center;justify-content:center;padding:16px}
.modal-bd.open{display:flex}
.modal{background:var(--surface);border-radius:var(--r2);width:100%;max-width:580px;box-shadow:var(--el3);overflow:hidden;max-height:90vh;display:flex;flex-direction:column}
.modal-lg{max-width:760px}
.modal-hd{background:var(--red);color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-hd h3{font-size:15px;font-weight:600}
.modal-hd.g-hd{background:var(--green-d)}
.modal-close{background:transparent;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;opacity:.8}
.modal-close:hover{opacity:1;background:rgba(255,255,255,.15)}
.modal-body{padding:18px;overflow-y:auto;flex:1}
.modal-ft{padding:12px 18px;border-top:1px solid var(--divider);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}

/* ========== FORM ========== */
.frow{display:grid;gap:14px;margin-bottom:14px}
.frow.c2{grid-template-columns:1fr 1fr}.frow.c3{grid-template-columns:1fr 1fr 1fr}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-s)}
.fg input,.fg select,.fg textarea{padding:8px 11px;border:1px solid var(--divider);border-radius:var(--r);font-size:13px;font-family:'Noto Sans',sans-serif;color:var(--text);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(190,22,34,.1)}
.field-hidden{display:none}
.section-divider{border:none;border-top:1px solid var(--divider);margin:16px 0}
.section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-s);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.section-label::after{content:'';flex:1;height:1px;background:var(--divider)}

/* ========== VISIBILITÀ ========== */
.vis-section{border-left:4px solid var(--amber);background:var(--amber-bg);border-radius:0 var(--r) var(--r) 0;padding:10px 14px;margin-bottom:14px;font-size:12px}
.vis-select{display:flex;flex-direction:column;gap:8px}
.vis-option{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:2px solid var(--divider);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s}
.vis-option:hover{background:var(--surface2)}.vis-option.sel{border-color:var(--red);background:var(--red-bg)}
.vis-opt-title{font-size:13px;font-weight:600}.vis-opt-desc{font-size:11px;color:var(--text-s);margin-top:1px}

/* ========== CHART ========== */
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:130px;padding:10px 18px 6px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.bar-pair{width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center}
.bar{flex:1;border-radius:3px 3px 0 0;min-height:2px;transition:height .4s cubic-bezier(.4,0,.2,1);position:relative;cursor:default}
.bar:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;font-size:10px;padding:3px 7px;border-radius:3px;white-space:nowrap;pointer-events:none;z-index:10}
.bar.bi{background:var(--green)}.bar.bu{background:var(--red)}
.bar-lbl{font-size:10px;color:var(--text-s);font-weight:500}
.chart-legend{display:flex;gap:14px;font-size:12px;color:var(--text-s);padding:0 18px 12px}
.leg-dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}

/* ========== SETTINGS TAGS ========== */
.tag-list{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;min-height:52px}
.tag-item{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid var(--divider);background:var(--surface2)}
.tag-item .del-tag{background:none;border:none;cursor:pointer;color:var(--text-hint);font-size:14px;line-height:1;padding:0;display:flex;align-items:center}
.tag-item .del-tag:hover{color:var(--red-d)}
.tag-add-row{display:flex;gap:8px;padding:0 18px 14px;align-items:center}
.tag-input{padding:7px 11px;border:1px solid var(--divider);border-radius:var(--r);font-size:13px;font-family:'Noto Sans',sans-serif;flex:1}
.tag-input:focus{outline:none;border-color:var(--red)}

/* ========== TOAST ========== */
.toast-wrap{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:6px;z-index:9999}
.toast{background:#323232;color:#fff;padding:10px 18px;border-radius:var(--r);font-size:13px;font-weight:500;box-shadow:var(--el2);display:flex;align-items:center;gap:8px;animation:toIn .2s ease}
.toast.ok{background:var(--green-d)}.toast.err{background:var(--red-d)}.toast.warn{background:var(--amber);color:#212121}
@keyframes toIn{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast .material-icons{font-size:16px}

/* ========== EMPTY ========== */
.empty{text-align:center;padding:40px 20px;color:var(--text-s)}
.empty .material-icons{font-size:44px;color:var(--text-hint);display:block;margin-bottom:10px}

/* ========== LOGIN PAGE ========== */
.login-page{min-height:100vh;background:var(--red-d);display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:#fff;border-radius:var(--r2);padding:40px;width:100%;max-width:400px;box-shadow:var(--el3)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo .sb-icon{width:56px;height:56px;font-size:22px;margin:0 auto 12px}
.login-logo h1{font-size:22px;font-weight:700;color:var(--red-d)}
.login-logo p{font-size:13px;color:var(--text-s);margin-top:4px}
.login-err{background:var(--red-bg);color:var(--red-d);padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:16px;display:none}

/* ========== PRINT ========== */
@media print{.sidebar,.topbar,.no-print{display:none!important}.main{margin-left:0}.card{box-shadow:none;border:1px solid #ccc}}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--divider2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-hint)}