:root{
  --ivory:#FEFBF2;
  --paper:#F5F0E6;
  --navy:#15364B;
  --navy2:#0D293A;
  --green:#4D7159;
  --gold:#CEB182;
  --ink:#1D252A;
  --muted:#6D746F;
  --line:#DED6C7;
  --danger:#A54F47;
  --warn:#B17A28;
  --ok:#3F6B4C;
  --blue:#3F6275;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ivory);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{display:grid;grid-template-columns:225px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--navy2),var(--navy));color:white;padding:18px 14px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:0 5px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.18)}
.brand-title{font-family:Georgia,serif;font-size:21px;letter-spacing:.08em}
.brand-sub{font-size:10px;text-transform:uppercase;color:#DDD2BC;letter-spacing:.08em}
.nav{display:flex;flex-direction:column;gap:5px;padding-top:16px}
.nav button{border:0;background:transparent;color:#EEF3F2;text-align:left;padding:11px 12px;border-radius:10px;font-size:13px}
.nav button span{font-size:7px;opacity:.45;margin-right:8px}
.nav button:hover,.nav button.active{background:rgba(255,255,255,.11)}
.nav button.active span{opacity:1;color:var(--gold)}
.side-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
.backup-btn{width:100%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#EAF0F0;border-radius:10px;padding:9px;font-size:11px}
.profile{display:flex;align-items:center;gap:9px;padding:14px 5px 2px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--navy2);font-weight:800}
.profile b{display:block;font-size:12px}.profile small{display:block;font-size:10px;color:#C8D2D3}
.main{min-width:0;padding:24px 30px 60px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:22px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--green)}
h1{font-family:Georgia,serif;font-size:34px;font-weight:500;color:var(--navy2);margin:3px 0}
.topbar p{margin:0;color:var(--muted);font-size:13px}
.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:800}
.btn.primary{background:var(--navy);color:white}
.btn.secondary{background:var(--gold);color:var(--navy2)}
.btn.light{background:white;color:var(--navy2);border:1px solid var(--line)}
.btn.danger{background:#F7E4E1;color:var(--danger)}
.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:white;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 5px 18px rgba(13,41,58,.04)}
.card.soft{background:var(--paper)}
.section{margin-top:23px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.section-head h2{margin:0;font-family:Georgia,serif;font-size:20px;font-weight:500;color:var(--navy2)}
.metric .label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.metric .value{font-family:Georgia,serif;font-size:27px;color:var(--navy2);margin:5px 0}
.metric .note{font-size:10px;color:var(--muted)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row-title{font-size:13px;font-weight:800}
.row-sub{font-size:11px;color:var(--muted);margin-top:2px}
.badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap}
.badge.ok{background:#E5F0E7;color:var(--ok)}
.badge.warn{background:#FAEED8;color:var(--warn)}
.badge.danger{background:#F7E5E2;color:var(--danger)}
.badge.info{background:#E7EEF3;color:var(--blue)}
.badge.gold{background:#F4EAD8;color:#7D642F}
.alert{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.alert:last-child{border-bottom:0}
.dot{width:9px;height:9px;border-radius:50%;margin-top:4px;background:var(--warn);flex:0 0 auto}
.dot.danger{background:var(--danger)}.dot.ok{background:var(--ok)}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.filter{border:1px solid var(--line);background:white;border-radius:999px;padding:7px 10px;font-size:11px}
.filter.active{background:var(--navy);color:white;border-color:var(--navy)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:white}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{background:var(--paper);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:0}
tr.clickable:hover{background:#FBF8F0;cursor:pointer}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{border:1px solid var(--line);background:white;border-radius:999px;padding:8px 12px;font-size:11px}
.tabs button.active{background:var(--navy);color:white;border-color:var(--navy)}
.progress{height:7px;background:#EAE5DA;border-radius:999px;overflow:hidden}
.progress span{display:block;height:100%;background:var(--green)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:10px;color:var(--muted);font-weight:800}
.field input,.field textarea,.field select{border:1px solid var(--line);border-radius:10px;background:white;padding:10px}
.field textarea{min-height:100px;resize:vertical}
.world-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.world-card{border:1px solid var(--line);background:white;border-radius:14px;padding:14px}
.world-card b{display:block;color:var(--navy2);margin-bottom:7px}
.world-card .num{font-family:Georgia,serif;font-size:22px;color:var(--navy2)}
.check{display:flex;gap:9px;align-items:flex-start}
.check input{margin-top:3px}
.kpi-line{display:flex;justify-content:space-between;gap:12px;margin:8px 0}
.big-number{font-family:Georgia,serif;font-size:30px;color:var(--navy2)}
.money-positive{color:var(--ok);font-weight:800}
.money-negative{color:var(--danger);font-weight:800}
.modal-backdrop{position:fixed;inset:0;background:rgba(8,24,33,.58);display:grid;place-items:center;padding:20px;z-index:50}
.modal-backdrop.hidden{display:none}
.modal{width:min(720px,96vw);max-height:90vh;overflow:auto;background:var(--ivory);border-radius:18px;padding:24px;position:relative}
.modal-close{position:absolute;right:14px;top:9px;border:0;background:none;font-size:28px;color:var(--muted)}
.toast{position:fixed;right:20px;bottom:20px;background:var(--navy2);color:white;padding:12px 16px;border-radius:12px;opacity:0;transform:translateY(10px);transition:.2s;z-index:90}
.toast.show{opacity:1;transform:none}
.small{font-size:11px;color:var(--muted)}
.inline-actions{display:flex;gap:7px;flex-wrap:wrap}
@media(max-width:1050px){
  .cols-4,.world-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:850px){
  .app{grid-template-columns:76px 1fr}
  .brand>div,.profile>div:not(.avatar){display:none}
  .brand{justify-content:center}
  .nav button{font-size:0;text-align:center;padding:11px 5px}.nav button span{font-size:9px;margin:0}
  .backup-btn{font-size:0}.backup-btn:after{content:"Backup";font-size:10px}
  .main{padding:20px}
  .cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .app{display:block}
  .sidebar{height:auto;position:relative;padding:10px}
  .brand{justify-content:flex-start;padding-bottom:10px}.brand>div{display:block}
  .nav{flex-direction:row;overflow:auto;padding-top:8px}
  .nav button{font-size:11px;white-space:nowrap}.nav button span{display:none}
  .side-bottom{display:none}
  .main{padding:14px}
  .topbar{align-items:flex-start}
  .topbar .primary{font-size:11px;padding:9px 10px}
  h1{font-size:28px}
  .cols-2,.cols-3,.cols-4,.world-grid,.form-grid{grid-template-columns:1fr}
}


/* v5 — calendario, da fare, acquisizione clienti */
.calendar-wrap{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.calendar-head{font-size:9px;color:var(--muted);text-align:center;text-transform:uppercase;padding:4px}
.calendar-day{min-height:66px;border:1px solid var(--line);border-radius:10px;background:white;padding:7px;position:relative}
.calendar-day.empty{background:transparent;border-color:transparent}
.calendar-day.today{outline:2px solid var(--gold)}
.calendar-day .num{font-size:11px;font-weight:800;color:var(--navy2)}
.calendar-day .marks{display:flex;gap:3px;flex-wrap:wrap;margin-top:8px}
.cal-mark{width:6px;height:6px;border-radius:50%;background:var(--green)}
.cal-mark.follow{background:var(--warn)}
.cal-mark.todo{background:var(--danger)}
.calendar-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.calendar-controls b{font-family:Georgia,serif;color:var(--navy2)}
.todo-add{display:grid;grid-template-columns:minmax(220px,1fr) 145px 150px 120px auto;gap:8px;margin-bottom:12px}
.todo-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.todo-item:last-child{border-bottom:0}
.todo-item.done .todo-text{text-decoration:line-through;color:var(--muted)}
.todo-text b{display:block;font-size:13px}
.todo-text span{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.follow-card{border:1px solid var(--line);border-radius:14px;background:white;padding:14px}
.follow-history{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.history-item{font-size:11px;color:var(--muted);padding:6px 0;border-bottom:1px dashed var(--line)}
.history-item:last-child{border-bottom:0}
.crm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.status-select{border:1px solid var(--line);border-radius:9px;background:white;padding:7px;font-size:11px}
@media(max-width:850px){
  .todo-add{grid-template-columns:1fr 130px}
    .crm-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .todo-add,.crm-grid{grid-template-columns:1fr}
  .calendar-day{min-height:54px;padding:5px}
}

.idea-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.idea-card{border:1px solid var(--line);border-radius:14px;background:white;padding:14px}
.idea-card h3{font-family:Georgia,serif;color:var(--navy2);font-weight:500;margin:0 0 7px}
.idea-card p{font-size:11px;color:var(--muted);line-height:1.45}
.idea-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.invoice-upload{border:1px dashed var(--gold);border-radius:14px;background:#FFFCF5;padding:18px}
.invoice-upload input[type=file]{display:block;width:100%;margin-top:10px}
.invoice-status{display:flex;gap:6px;flex-wrap:wrap}
.invoice-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.invoice-text{background:#F7F4EC;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:10px;white-space:pre-wrap;max-height:180px;overflow:auto;color:#59605C}
.file-name{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loader{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}
.loader:before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--navy);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.idea-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.idea-grid,.invoice-detail-grid{grid-template-columns:1fr}.file-name{max-width:150px}}

.invoice-yearbar{display:flex;justify-content:space-between;align-items:end;gap:18px;border:1px solid var(--line);background:white;border-radius:14px;padding:14px}
.year-select{min-width:170px;border:1px solid var(--line);border-radius:10px;background:white;padding:9px 11px;margin-top:5px;color:var(--navy2);font-weight:800}
.year-help{max-width:520px;text-align:right}
.candlestick-wrap{width:100%;overflow-x:auto}
.candlestick{width:100%;min-width:660px;height:auto;display:block}
.chart-grid{stroke:#E8E1D5;stroke-width:1}
.chart-base{stroke:#CFC5B5;stroke-width:1.2}
.chart-axis,.chart-label{fill:#6D746F;font-size:10px;font-family:Inter,system-ui,sans-serif}
.candle .wick{stroke-width:2}
.candle .body{stroke-width:1}
.candle-up .wick,.candle-up .body{stroke:#3F6B4C;fill:#DCEBDF}
.candle-down .wick,.candle-down .body{stroke:#A54F47;fill:#F1D8D4}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin-top:4px}
.chart-legend span{display:flex;align-items:center;gap:6px}
.chart-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.legend-up{background:#DCEBDF;border:1px solid #3F6B4C}
.legend-down{background:#F1D8D4;border:1px solid #A54F47}
.candle-explain{margin-top:12px;background:var(--paper);border-radius:10px;padding:10px 12px;font-size:10px;color:var(--muted);line-height:1.45}
.chart-empty{padding:36px 12px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--line);border-radius:12px}
@media(max-width:650px){
  .invoice-yearbar{align-items:stretch;flex-direction:column}
  .year-help{text-align:left}
  .year-select{width:100%}
}

/* v8 — andamento fatture basato sulla spesa reale */
.expense-chart-wrap{width:100%;overflow-x:auto}
.expense-chart{width:100%;min-width:680px;height:auto;display:block}
.expense-body{fill:#DCE6E0;stroke:#4D7159;stroke-width:1}
.expense-bar:hover .expense-body{fill:#CEDDD1}
.chart-value{fill:#15364B;font-size:10px;font-weight:800;font-family:Inter,system-ui,sans-serif}
.chart-count{fill:#9A9184;font-size:9px;font-family:Inter,system-ui,sans-serif}

/* v9 — fatture emesse: fatturato e incassi */
.revenue-issued{fill:#D9E5EA;stroke:#3F6275;stroke-width:1}
.revenue-collected{fill:#DCEBDF;stroke:#3F6B4C;stroke-width:1}
.revenue-group:hover .revenue-issued{fill:#C8D9E1}
.revenue-group:hover .revenue-collected{fill:#CADFCF}
.legend-issued{background:#D9E5EA;border:1px solid #3F6275}
.legend-collected{background:#DCEBDF;border:1px solid #3F6B4C}

/* v11 stabilità */
.todo-item .inline-actions{justify-content:flex-end}
@media(max-width:1000px){.todo-add{grid-template-columns:1fr 140px 140px}.todo-add .btn{grid-column:auto}}
@media(max-width:650px){.todo-add{grid-template-columns:1fr}.todo-item{grid-template-columns:auto 1fr}.todo-item>.badge,.todo-item>.inline-actions{grid-column:2}}

/* v12 — leggibilità controlli e tendine */
.tabs button,
.filter,
.calendar-controls button,
.invoice-status .filter {
  color: var(--navy2) !important;
  background: #FFFFFF;
  -webkit-text-fill-color: var(--navy2);
  opacity: 1;
}
.tabs button:hover,
.filter:hover,
.calendar-controls button:hover,
.invoice-status .filter:hover {
  color: var(--navy2) !important;
  background: var(--paper);
  -webkit-text-fill-color: var(--navy2);
}
.tabs button.active,
.filter.active,
.invoice-status .filter.active {
  color: #FFFFFF !important;
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  -webkit-text-fill-color: #FFFFFF;
}

/* Tutti i campi di selezione devono restare leggibili anche con tema scuro del sistema */
select,
.field select,
.status-select,
.year-select,
.todo-add select {
  color: var(--ink) !important;
  background-color: #FFFFFF !important;
  -webkit-text-fill-color: var(--ink);
  color-scheme: light;
}
select option,
.field select option,
.status-select option,
.year-select option,
.todo-add select option {
  color: #1D252A !important;
  background: #FFFFFF !important;
}

/* Pulsanti secondari bianchi: testo sempre visibile */
.btn.light,
.backup-btn:not(:hover) {
  opacity: 1;
}
.btn.light {
  color: var(--navy2) !important;
  -webkit-text-fill-color: var(--navy2);
  background: #FFFFFF !important;
}
.btn.light:hover {
  background: var(--paper) !important;
}

/* Focus più chiaro senza cambiare il colore del testo */
.tabs button:focus-visible,
.filter:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* v13 — candele fatture realmente visibili */
.management-chart{min-height:360px;background:linear-gradient(180deg,#fff,#FCFAF4);border:1px solid var(--line);border-radius:12px}
.management-candle .candle-wick{stroke:#34586B;stroke-width:2.2;stroke-linecap:round}
.management-candle.open .candle-body{fill:#E7C98F;stroke:#92702E;stroke-width:1.3}
.management-candle.paid .candle-body{fill:#9FC5A9;stroke:#3F6B4C;stroke-width:1.3}
.management-candle .collection-mark{stroke:#2E7A4A;stroke-width:3;stroke-linecap:round}
.management-candle:hover .candle-body{filter:brightness(.96);stroke-width:2}
.management-legend{margin-top:10px}
.management-legend i{width:12px;height:12px}
.legend-open{background:#E7C98F;border:1px solid #92702E}
.legend-paid{background:#9FC5A9;border:1px solid #3F6B4C}
.legend-mark{height:3px!important;background:#2E7A4A;border-radius:999px!important}
.invoice-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.invoice-choice{border:1px solid var(--line);background:white;border-radius:14px;padding:18px;text-align:left;color:var(--navy2);min-height:120px}
.invoice-choice b{display:block;font-size:16px;margin-bottom:7px}
.invoice-choice span{display:block;font-size:11px;color:var(--muted);line-height:1.45}
.invoice-choice.due:hover{border-color:#B17A28;background:#FFF8E9}
.invoice-choice.paid:hover{border-color:#3F6B4C;background:#F0F7F1}
.verification-warning{margin-top:12px;background:#FFF3D9;border:1px solid #E5C780;border-radius:10px;padding:10px 12px;color:#755A20}
.verification-warning b{display:block;font-size:12px}.verification-warning span{font-size:10px}
@media(max-width:650px){.invoice-choice-grid{grid-template-columns:1fr}.management-chart{min-width:720px}}

/* v14 — fatture fornitori, prezzi e food cost */
.supplier-upload{border:1px dashed var(--gold);background:#FFFCF5}
.supplier-upload input[type=file]{display:block;width:100%;margin-top:10px;color:var(--ink)}
.verification-warning{display:flex;flex-direction:column;gap:4px;background:#FFF3DC;border:1px solid #E9D3AA;border-radius:10px;padding:10px 12px;font-size:11px;color:#72551F;margin-top:10px}
.verification-warning b{color:#604815}