:root{
  --ink:#16181d; --ink-soft:#4b5160; --ink-faint:#8a90a0;
  --bg:#f4f5f7; --card:#ffffff; --line:#e4e6ea; --line-soft:#eef0f3;
  --navy:#1b2430; --brand:#1f5fa8; --brand-dark:#184a82;
  --warn-bg:#fdf3e7; --warn-line:#e8c389; --warn-ink:#7a5410;
  --danger-bg:#fdeeee; --danger-line:#e5a3a3; --danger-ink:#8c2f2f;
  --ok:#1f7a3d; --ok-bg:#e7f4ec;
  --input-bg:#fbfbfc;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --ink:#e7e9ee; --ink-soft:#aab1c0; --ink-faint:#7b8294;
  --bg:#0f1217; --card:#171b22; --line:#2a2f39; --line-soft:#222730;
  --navy:#0c1017; --brand:#4f97e6; --brand-dark:#3f7fcb;
  --warn-bg:#2b2415; --warn-line:#5e4d23; --warn-ink:#e8c389;
  --danger-bg:#2c1a1a; --danger-line:#5e2f2f; --danger-ink:#e5a3a3;
  --ok:#5fce8b; --ok-bg:#16271d;
  --input-bg:#11151b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.appbar{background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.appbar .inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 18px}
.appbar img.logo{height:30px;background:#fff;border-radius:6px;padding:3px 6px}
.appbar .brandtxt{font-weight:700;letter-spacing:.02em}
.appbar .brandtxt span{color:#9fc1e8}
.appbar nav{display:flex;gap:4px;margin-left:8px;flex-wrap:nowrap;align-items:center;overflow:visible}
.appbar nav a{color:#c7ccd6;padding:7px 11px;border-radius:7px;font-size:13px;white-space:nowrap}
.appbar nav a:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff}
.appbar nav a.on{background:rgba(255,255,255,.12);color:#fff}
/* More ▾ dropdown */
.nav-more{position:relative;display:inline-block}
.nav-more-btn{color:#c7ccd6;padding:7px 11px;border-radius:7px;font-size:13px;white-space:nowrap;cursor:pointer;background:none;border:none}
.nav-more-btn:hover,.nav-more:hover .nav-more-btn{background:rgba(255,255,255,.08);color:#fff}
.nav-more-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:170px;background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:5px;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.nav-more:hover .nav-more-menu,.nav-more:focus-within .nav-more-menu{display:block}
.nav-more-menu a{display:block;color:#c7ccd6;padding:7px 12px;border-radius:6px;font-size:13px;white-space:nowrap}
.nav-more-menu a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav-more-menu a.on{background:rgba(255,255,255,.12);color:#fff}
.appbar .spacer{flex:1}
.appbar .who{font-size:12.5px;color:#aeb6c2;text-align:right;line-height:1.3}
.appbar .who b{color:#fff;display:block}
.iconbtn{background:rgba(255,255,255,.08);border:none;color:#fff;border-radius:7px;padding:7px 10px;cursor:pointer;font-size:14px}
.iconbtn:hover{background:rgba(255,255,255,.16)}

/* Layout */
.wrap{max-width:1200px;margin:0 auto;padding:20px 18px}
.grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:16px}
h1{font-size:21px;margin:0 0 14px}
h2{font-size:16px;margin:0 0 12px;color:var(--navy)}
[data-theme="dark"] h2{color:var(--ink)}

.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
label.fld{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=time],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--input-bg);
  font:13.5px var(--mono);color:var(--ink);outline:none}
textarea{font-family:var(--sans);min-height:64px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--brand)}
input::placeholder{color:var(--ink-faint);opacity:.7}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>div{flex:1;min-width:120px}
.hint{font-size:12px;color:var(--ink-faint);margin-top:8px}
.muted{color:var(--ink-faint)}
.mono{font-family:var(--mono)}

button,.btn{font:600 13px var(--sans);padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:inline-block}
button:hover,.btn:hover{border-color:var(--brand);text-decoration:none}
.btn.primary,button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover,button.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.danger,button.danger{color:var(--danger-ink);border-color:var(--danger-line)}
.btn.ghost,button.ghost{border:1px dashed var(--line);color:var(--ink-soft);background:transparent}
.btn.sm{padding:6px 10px;font-size:12px}
.icon{padding:4px 9px;border:none;background:none;color:var(--ink-faint);font-size:16px;cursor:pointer}
.icon:hover{color:var(--danger-ink)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* Tables */
table.data{width:100%;border-collapse:collapse}
table.data th{font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.data td{padding:9px 10px;border-bottom:1px solid var(--line-soft);font-size:13px;vertical-align:middle}
table.data tr:hover td{background:var(--line-soft)}
table.data td.r,table.data th.r{text-align:right;font-family:var(--mono)}

/* Pills */
.pill{font:600 10.5px var(--mono);padding:3px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.pill.draft{background:var(--line);color:var(--ink-soft)}
.pill.submitted{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line)}
.pill.approved{background:var(--ok-bg);color:var(--ok)}
.pill.rejected{background:var(--danger-bg);color:var(--danger-ink);border:1px solid var(--danger-line)}
.pill.paid{background:#e6f7fb;color:#0b6a86}
[data-theme="dark"] .pill.paid{background:#10242b;color:#6fd2e8}
.badge{background:var(--brand);color:#fff;border-radius:99px;font:600 11px var(--mono);padding:1px 7px;margin-left:6px}

/* Callouts / flash */
.callout{border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:14px}
.callout.ok{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok)}
.callout.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink)}
.callout.danger{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-ink)}

/* Tabs */
.tabs{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px;background:var(--card);flex-wrap:wrap}
.tabs a{flex:1;text-align:center;padding:10px 8px;font-size:13px;color:var(--ink-soft);border-right:1px solid var(--line)}
.tabs a:last-child{border-right:none}
.tabs a:hover{background:var(--line-soft);text-decoration:none}
.tabs a.on{background:var(--navy);color:#fff}

/* Totals panel */
.total{background:var(--navy);color:#fff;border-radius:10px;padding:16px 18px;margin-bottom:14px}
.total .eyebrow{color:#9aa6b8}
.total .amt{font:700 28px/1.1 var(--mono);margin-top:6px}
.sumrow{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;color:var(--ink-soft)}
.sumrow .v{font:600 13px var(--mono);color:var(--ink)}
.sumrow.big{font-weight:700;color:var(--ink)}
.sumrow.big .v{font-size:15px}
/* Override sumrow text colours when inside the dark navy .total panel */
.total .sumrow{color:rgba(255,255,255,.65)}
.total .sumrow .v{color:#fff}
.total .sumrow.big{color:#fff;font-size:14px}
.total .sumrow.big .v{color:#fff;font-size:16px}

/* Auth screens */
.authwrap{max-width:420px;margin:8vh auto;padding:0 18px}
.authwrap .logo{display:block;height:46px;margin:0 auto 20px}
.center{text-align:center}

/* Dynamic line item rows */
.linerows{display:flex;flex-direction:column;gap:14px}
.lineitem{border:1px solid var(--line);border-radius:9px;padding:12px;background:var(--input-bg)}
.lineitem .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.lineitem .head .eyebrow{margin:0}
.fieldgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:760px){.fieldgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.fieldgrid{grid-template-columns:1fr}}
.fieldgrid .full{grid-column:1/-1}
.linecost{font:600 13px var(--mono);color:var(--brand)}