:root{
  --bg:#EAEDEC;
  --surface:#FFFFFF;
  --surface-2:#F2F4F3;
  --border:#D8DCDA;
  --border-strong:#C3C9C6;
  --text:#161A19;
  --text-2:#5B6461;
  --text-3:#8A928F;
  --accent:#B8620A;
  --accent-strong:#8F4C08;
  --accent-tint:#F3E3CD;
  --good:#1E7F4F;
  --good-tint:#DFF0E7;
  --bad:#B23A2E;
  --bad-tint:#F6E1DE;
  --shadow: 0 1px 2px rgba(20,24,23,.06), 0 6px 20px -10px rgba(20,24,23,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181A; --surface:#1C2124; --surface-2:#20262A; --border:#33393C; --border-strong:#454C4F;
    --text:#E9EDEB; --text-2:#A2ACA8; --text-3:#767F7C;
    --accent:#F0A63E; --accent-strong:#F7BE6A; --accent-tint:#3A2C14;
    --good:#49C08A; --good-tint:#163227; --bad:#FF7A63; --bad-tint:#3A2020;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -12px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#14181A; --surface:#1C2124; --surface-2:#20262A; --border:#33393C; --border-strong:#454C4F;
  --text:#E9EDEB; --text-2:#A2ACA8; --text-3:#767F7C;
  --accent:#F0A63E; --accent-strong:#F7BE6A; --accent-tint:#3A2C14;
  --good:#49C08A; --good-tint:#163227; --bad:#FF7A63; --bad-tint:#3A2020;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -12px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; background:var(--bg); color:var(--text); font-family:"IBM Plex Sans", system-ui, sans-serif; font-size:14px; line-height:1.45;}
h1,h2,h3{font-family:"Oswald", "Arial Narrow", sans-serif; margin:0;}
::selection{background:var(--accent-tint); color:var(--accent-strong);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.num{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}
a{color:var(--accent);}

.app{max-width:1180px; margin:0 auto; padding:28px 20px 64px;}

/* Topbar */
.topbar{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; padding-bottom:18px; border-bottom:2px dashed var(--border-strong); margin-bottom:20px;}
.eyebrow{font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 6px;}
.topbar h1{font-size:clamp(22px,3.4vw,30px); font-weight:600; letter-spacing:.01em;}
.topbar .subtitle{color:var(--text-2); font-size:13px; margin-top:4px; max-width:52ch;}
.top-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}

.btn{font:inherit; font-weight:600; font-size:13px; padding:9px 14px; border-radius:7px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:filter .12s ease, transform .05s ease; text-decoration:none;}
.btn:hover{filter:brightness(0.97);}
.btn:active{transform:translateY(1px);}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#1B1200;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-accent{color:#241800;} }
:root[data-theme="dark"] .btn-accent{color:#241800;}
.btn-ghost{background:transparent;}
.btn-sm{padding:5px 10px; font-size:12px; border-radius:6px;}
.btn.danger{color:var(--bad); border-color:var(--bad-tint);}
input[type=file]{display:none;}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px;}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow);}
.kpi-label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-2); margin-bottom:6px;}
.kpi-value{font-family:"Oswald",sans-serif; font-size:24px; font-weight:600; font-variant-numeric:tabular-nums;}
.kpi-value.good{color:var(--good);} .kpi-value.bad{color:var(--bad);}

/* Toolbar */
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
select, .text-input, .num-input, .date-input{font:inherit; padding:8px 10px; border-radius:7px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text);}
.storage-note{font-size:12px; color:var(--text-2); background:var(--surface-2); border:1px dashed var(--border-strong); padding:7px 12px; border-radius:7px;}

/* Truck / troca group */
.truck-group{background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:18px; box-shadow:var(--shadow); overflow:hidden;}
.truck-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid var(--border); border-left:5px solid var(--accent);}
.truck-id{display:flex; align-items:center; gap:12px;}
.truck-badge{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13px; background:var(--surface-2); border:1px solid var(--border-strong); padding:4px 10px; border-radius:6px;}
.truck-driver{font-weight:600; font-size:15px;}
.truck-substats{display:flex; gap:18px; color:var(--text-2); font-size:12px; flex-wrap:wrap;}
.truck-substats b{color:var(--text); font-family:"IBM Plex Mono",monospace; font-weight:600;}
.truck-substats b.good{color:var(--good);} .truck-substats b.bad{color:var(--bad);}
.spark-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
.spark-cap{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3);}

/* Weeks */
.week{border-top:1px dashed var(--border);}
.truck-group .week:first-child{border-top:none;}
.week-head{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:13px 18px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:inherit; font:inherit;}
.week-head:hover{background:var(--surface-2);}
.week-date{font-family:"IBM Plex Mono",monospace; font-weight:600; min-width:96px; color:var(--text);}
.week-stats{display:flex; gap:22px; flex-wrap:wrap; flex:1;}
.stat{display:flex; flex-direction:column; gap:1px; min-width:76px;}
.stat em{font-style:normal; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3);}
.stat .v{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13px;}
.stat .v.good{color:var(--good);} .stat .v.bad{color:var(--bad);}
.chev{color:var(--text-3); transition:transform .15s ease; font-size:14px;}
.week.expanded .chev{transform:rotate(180deg);}
.week-body{padding:4px 18px 18px; display:grid; gap:16px;}
.week-body[hidden]{display:none;}

.subhead{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-2); margin-bottom:6px; font-weight:600;}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:8px;}
table{width:100%; border-collapse:collapse; min-width:520px;}
th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); background:var(--surface-2); padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap;}
td{padding:8px 10px; border-bottom:1px solid var(--border); font-size:13px;}
tr:last-child td{border-bottom:none;}
td.num, th.num{text-align:right;}
.chip{display:inline-block; font-size:11px; padding:2px 8px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text-2);}
.prevbal-line{display:flex; justify-content:space-between; align-items:center; background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:8px; padding:9px 14px; font-size:13px;}
.row-actions{display:flex; gap:8px; justify-content:flex-end;}

.empty{padding:48px 20px; text-align:center; color:var(--text-2); background:var(--surface); border:1px dashed var(--border-strong); border-radius:12px;}

/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(10,12,11,.5); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto; z-index:50;}
.modal-backdrop[hidden]{display:none;}
.modal{background:var(--surface); border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow); width:100%; max-width:640px; padding:22px 24px 24px;}
.modal.wide{max-width:820px;}
.modal h2{font-size:19px; margin-bottom:4px;}
.modal .modal-sub{color:var(--text-2); font-size:12.5px; margin-bottom:16px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); font-weight:600;}
.field input, .field select{width:100%;}
.dyn-section{margin-bottom:16px;}
.dyn-section .subhead{display:flex; justify-content:space-between; align-items:center;}
.dyn-table{width:100%; border-collapse:collapse;}
.dyn-table th{font-size:10px;}
.dyn-table td{padding:5px 4px; border-bottom:1px solid var(--border);}
.dyn-table input{width:100%; padding:6px 7px; font-size:12.5px; border-radius:5px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text);}
.dyn-table input.narrow{width:64px;}
.rm-row{background:none; border:none; color:var(--bad); font-size:16px; cursor:pointer; line-height:1; padding:4px;}
.footer-preview{display:flex; gap:20px; flex-wrap:wrap; background:var(--surface-2); border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:12.5px;}
.footer-preview b{font-family:"IBM Plex Mono",monospace;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px;}

.review-item{border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:var(--surface-2);}
.review-item-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:8px;}
.review-warn{color:var(--bad); font-size:12.5px; background:var(--bad-tint); border-radius:7px; padding:8px 10px; margin-bottom:10px;}

/* Login */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}
.login-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:32px 30px; width:100%; max-width:380px;}
.login-card h1{font-size:22px; margin-bottom:6px;}
.login-error{background:var(--bad-tint); color:var(--bad); font-size:12.5px; padding:9px 12px; border-radius:7px; margin:12px 0;}

@media (max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr 1fr;}
  .week-stats{gap:14px;}
}