/* Travel Budget vs Actual — theme tokens + layout */

:root{
  --paper:#F5F1E8;
  --paper-dim:#EAE4D6;
  --panel:#FFFFFF;
  --ink:#1E2124;
  --ink-soft:#5B5F63;
  --line:#D8D0BC;
  --navy:#2F4858;
  /* chart series (validated light-mode palette) */
  --actual:#2C6FC4;
  --budget:#7A7264;
  /* status (reserved) */
  --good:#3A7D5C;
  --watch:#B4762B;
  --bad:#B0413E;
  --good-bg:rgba(58,125,92,0.12);
  --bad-bg:rgba(176,65,62,0.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#20242A;
    --paper-dim:#2A2F37;
    --panel:#262B33;
    --ink:#E8E5DC;
    --ink-soft:#9AA0A8;
    --line:#3A4048;
    --navy:#7FA5BC;
    --actual:#5B95E0;
    --budget:#9A937F;
    --good:#55A981;
    --watch:#BA8330;
    --bad:#D4726E;
    --good-bg:rgba(85,169,129,0.15);
    --bad-bg:rgba(212,114,110,0.15);
  }
}

*{ box-sizing:border-box; }
html{ background:var(--paper); }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; padding:32px 24px 80px; }
.wrap{ max-width:1180px; margin:0 auto; }

.masthead{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:3px solid var(--ink); padding-bottom:14px; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.masthead h1{ font-family:'IBM Plex Mono',monospace; font-size:23px; font-weight:700; letter-spacing:0.5px; margin:0; text-transform:uppercase; }
.masthead .sub1{ font-size:12.5px; color:var(--ink-soft); margin-top:5px; font-weight:500; }
.masthead .meta{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); text-align:right; line-height:1.6; }
.masthead .meta span{ display:block; }
.navlink{ color:var(--navy); text-decoration:none; border-bottom:1px dotted var(--navy); }
.navlink:hover{ border-bottom-style:solid; }

#shareBar{ margin-bottom:18px; }
.btn{ font-family:'IBM Plex Mono',monospace; background:var(--navy); color:var(--paper); border:none; padding:10px 18px; font-size:12px; letter-spacing:1px; text-transform:uppercase; border-radius:2px; cursor:pointer; }
.btn:hover{ opacity:0.85; }
.btn.ghost{ background:none; color:var(--ink-soft); text-decoration:underline; padding:0 6px; letter-spacing:0.5px; }
#shareBar .note{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); margin-left:10px; }

.intake{
  border:2px dashed var(--ink-soft);
  background:repeating-linear-gradient(135deg,var(--paper),var(--paper) 10px,var(--paper-dim) 10px,var(--paper-dim) 11px);
  border-radius:2px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; flex-wrap:wrap; cursor:pointer;
}
.intake.drag{ border-color:var(--actual); background:var(--paper); }
.intake .tag{ font-size:10px; letter-spacing:1.5px; color:var(--ink-soft); text-transform:uppercase; margin-bottom:4px; font-family:'IBM Plex Mono',monospace; }
.intake .title{ font-size:15px; font-weight:600; font-family:'IBM Plex Mono',monospace; }
.intake .sub{ font-size:12px; color:var(--ink-soft); margin-top:4px; max-width:720px; }
#fileInput{ display:none; }

/* Filter bar */
.filters{ border:1px solid var(--line); background:var(--panel); border-radius:3px; margin-bottom:22px; padding:14px 16px; }
.filters .grp{ display:flex; gap:18px; flex-wrap:wrap; align-items:flex-end; }
.filters .grp + .grp{ margin-top:12px; padding-top:12px; border-top:1px dotted var(--line); }
.fld{ display:flex; flex-direction:column; gap:5px; }
.fld.push{ margin-left:auto; }
.fld label{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); }
.fld select{ font-family:'IBM Plex Sans'; font-size:13px; padding:7px 9px; border:1px solid var(--line); border-radius:2px; background:var(--paper); min-width:150px; color:var(--ink); }
.fld select:focus{ outline:none; border-color:var(--actual); }
.filters .arrow{ font-size:11px; color:var(--ink-soft); align-self:center; padding-bottom:8px; }
.filters .legend{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); align-self:center; margin-right:2px; }

/* KPI cards */
.kpi-title{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--navy); margin:0 0 8px; display:flex; justify-content:space-between; align-items:baseline; font-weight:600; flex-wrap:wrap; gap:4px; }
.kpi-title .scope{ color:var(--ink-soft); font-size:10px; }
.summary{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:8px; }
.forecast{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:24px; }
.stat{ background:var(--paper); padding:15px 10px; text-align:center; }
.stat .num{ font-family:'IBM Plex Mono',monospace; font-size:21px; font-weight:700; line-height:1.05; word-break:break-word; }
.stat .lbl{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.8px; text-transform:uppercase; color:var(--ink-soft); margin-top:7px; }
.stat.b1 .num{ color:var(--ink); }
.stat.b2 .num{ color:var(--actual); }
.stat.b3 .num{ color:var(--navy); }
.stat.good .num{ color:var(--good); }
.stat.bad .num{ color:var(--bad); }
.stat.mid .num{ color:var(--watch); }
.block-gap{ margin-bottom:24px; }

.charts{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:18px 20px; }
.panel h3, .table-panel h3{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-soft); margin:0 0 14px; border-bottom:1px solid var(--line); padding-bottom:10px; display:flex; justify-content:space-between; font-weight:600; }
.h3-scope{ color:var(--ink-soft); font-weight:400; }
.panel.wide{ grid-column:1 / -1; }
.chart-box{ position:relative; height:280px; }
.chart-box.tall{ height:320px; }

.history-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.history-list{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); max-height:90px; overflow-y:auto; flex:1; min-width:220px; }
.history-list div{ display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px dotted var(--line); }

.table-panel{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:18px 20px; margin-bottom:24px; }
details.table-panel summary{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-soft); cursor:pointer; list-style:none; outline:none; }
details.table-panel summary::-webkit-details-marker{ display:none; }
details.table-panel summary::before{ content:'▸  '; color:var(--navy); }
details.table-panel[open] > summary::before{ content:'▾  '; }
details.table-panel[open] > summary{ border-bottom:1px solid var(--line); padding-bottom:10px; }
.dim{ color:var(--ink-soft); font-weight:400; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ text-align:right; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-soft); border-bottom:2px solid var(--ink); padding:8px 10px; white-space:nowrap; position:sticky; top:0; background:var(--panel); }
th:first-child{ text-align:left; }
td{ padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle; text-align:right; white-space:nowrap; }
td:first-child{ text-align:left; white-space:normal; }
tbody tr:hover{ background:var(--paper-dim); }
.table-scroll{ max-height:460px; overflow:auto; margin-top:14px; }
.num-cell{ font-family:'IBM Plex Mono',monospace; }
.gl-cell{ text-align:left; color:var(--ink-soft); font-size:12px; white-space:normal; }

tr.group-row td{ font-weight:700; background:var(--paper-dim); }
tr.dept-row td:first-child{ padding-left:26px; color:var(--ink-soft); }
tr.sel td{ box-shadow:inset 3px 0 0 var(--actual); }
tr.grand-row td{ font-weight:700; border-top:2px solid var(--ink); border-bottom:none; background:var(--panel); }
tr.credit-row td{ color:var(--ink-soft); }
.badge{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:2px 6px; border-radius:2px; margin-left:8px; }
.badge.credit{ background:var(--good-bg); color:var(--good); }

.bar-cell{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.bar-track{ width:90px; height:8px; background:var(--paper-dim); border-radius:4px; overflow:hidden; flex:none; }
.bar-fill{ height:100%; border-radius:4px; }
.pct-good{ background:var(--good); } .pct-mid{ background:var(--watch); } .pct-bad{ background:var(--bad); }
.pct-lbl{ font-family:'IBM Plex Mono',monospace; font-size:11px; min-width:44px; text-align:right; }
.var-good{ color:var(--good); } .var-bad{ color:var(--bad); }

.local-note{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); border:1px solid var(--watch); background:var(--paper-dim); border-radius:2px; padding:8px 12px; margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.local-note .btn.ghost{ color:var(--watch); }
.local-note[hidden]{ display:none; }
.empty-note{ font-family:'IBM Plex Mono',monospace; color:var(--ink-soft); font-size:13px; text-align:center; padding:60px 20px; border:1px dashed var(--line); border-radius:3px; }
.footnote{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); margin-top:18px; line-height:1.7; border-top:1px dotted var(--line); padding-top:12px; }

@media (max-width:820px){
  body{ padding:20px 12px 60px; }
  .charts{ grid-template-columns:1fr; }
  .summary{ grid-template-columns:repeat(2,1fr); }
  .forecast{ grid-template-columns:1fr; }
  .masthead .meta{ text-align:left; }
  .fld.push{ margin-left:0; }
  .fld select{ min-width:120px; }
}