@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --ink:    #1A1410;
  --stone:  #3D332A;
  --bark:   #6B5040;
  --sand:   #C4A882;
  --cream:  #F5EDD8;
  --bg:     #F0E8D5;
  --gold:   #C8A028;
  --ember:  #C84820;
  --sage:   #7C9070;
  --sky:    #4A7C9A;
  --border: rgba(100,80,50,.18);
  --success:#4A7C9A;
  --warn:   #C84820;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--bg); color:var(--ink);
  font-family:'DM Sans',sans-serif; font-weight:300;
  font-size:15px; line-height:1.6; overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(100,80,50,.05) 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(100,80,50,.04) 40px);
  background-size:40px 40px;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.topnav {
  background:#1A1410; padding:.55rem 1.5rem;
  font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.1em;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  position:sticky; top:0; z-index:200;
}
.topnav a { color:#C4A882; text-decoration:none; text-transform:uppercase; transition:color .15s }
.topnav a:hover { color:#C8A028 }
.topnav a.home { color:#C8A028; font-weight:500 }
.topnav .sep { color:#3D332A; font-size:.5rem }
.topnav .cur { color:#6B5040; text-transform:uppercase }
#user-badge { margin-left:auto; display:none; align-items:center; gap:.5rem;
              font-family:'DM Mono',monospace; font-size:.62rem; color:#C4A882 }
#user-badge button { background:none; border:1px solid #3D332A; color:#C4A882;
                     font-family:'DM Mono',monospace; font-size:.6rem;
                     padding:.2rem .5rem; border-radius:2px; cursor:pointer }

/* ── Tab strip ────────────────────────────────────────────────────────────── */
.tab-strip {
  background:#fff; border-bottom:2px solid rgba(100,80,50,.12);
  position:sticky; top:2.2rem; z-index:190;
  display:flex; overflow-x:auto;
}
.tab-btn {
  flex:1; min-width:110px; padding:.85rem 1.25rem;
  font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; border:none; border-bottom:3px solid transparent;
  background:none; cursor:pointer; color:var(--bark); transition:all .15s;
  white-space:nowrap;
}
.tab-btn:hover  { background:rgba(100,80,50,.04); color:var(--ink) }
.tab-btn.active { border-bottom-color:var(--gold); color:var(--ink); font-weight:500 }

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.page { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 1.5rem 5rem }
.view { display:none; padding-top:2rem }
.view.active { display:block }

/* ── Section headers ──────────────────────────────────────────────────────── */
.section-head {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:1.5rem; flex-wrap:wrap; gap:.5rem;
  border-bottom:2px solid var(--border); padding-bottom:.75rem;
}
.section-head h2 { font-family:'Bebas Neue',sans-serif; font-size:2rem; color:var(--stone) }
.section-sub { font-family:'DM Mono',monospace; font-size:.68rem; color:var(--bark); opacity:.75 }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; margin-bottom:2rem }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:5px; padding:1.1rem 1.25rem }
.stat-label { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.12em;
              text-transform:uppercase; color:var(--bark); margin-bottom:.35rem }
.stat-value { font-family:'Bebas Neue',sans-serif; font-size:2rem; color:var(--stone); line-height:1 }
.stat-unit  { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--bark); margin-top:.2rem }
.stat-card.good .stat-value  { color:var(--sage) }
.stat-card.warn .stat-value  { color:var(--ember) }
.stat-card.gold .stat-value  { color:var(--gold) }

/* ── Data table ───────────────────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:.84rem; background:#fff;
              border:1px solid var(--border); border-radius:5px; overflow:hidden }
.data-table th {
  font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:var(--stone);
  padding:.55rem .75rem; text-align:left;
}
.data-table td { padding:.6rem .75rem; border-bottom:1px solid rgba(196,168,130,.2);
                 color:var(--ink); vertical-align:middle }
.data-table tr:last-child td { border-bottom:none }
.data-table tr:nth-child(even) td { background:rgba(245,237,216,.4) }
.data-table tfoot td {
  font-family:'DM Mono',monospace; font-size:.78rem; font-weight:500;
  color:var(--stone); background:var(--cream); border-top:2px solid var(--sand);
}
.mono { font-family:'DM Mono',monospace; font-size:.78rem }
.amt  { font-family:'DM Mono',monospace; font-weight:500 }
.dim  { color:var(--bark); font-size:.78rem }
.r    { text-align:right }

/* ── Status badges ────────────────────────────────────────────────────────── */
.badge {
  font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.2rem .6rem; border-radius:2rem;
  border:1px solid currentColor; white-space:nowrap;
}
.badge-paid    { color:var(--sage);  background:#edf4eb }
.badge-partial { color:var(--gold);  background:#fdf8e8 }
.badge-pending { color:var(--ember); background:#fdf0ee }
.badge-approved{ color:var(--sage);  background:#edf4eb }
.badge-rejected{ color:var(--ember); background:#fdf0ee }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.5rem .9rem; border-radius:3px;
  border:1px solid var(--sand); background:transparent; color:var(--bark);
  cursor:pointer; transition:background .15s,color .15s; white-space:nowrap;
}
.btn:hover   { background:var(--stone); color:var(--cream); border-color:var(--stone) }
.btn-primary { background:var(--gold); border-color:var(--gold); color:#fff }
.btn-primary:hover { background:#a88020 }
.btn-sage    { background:var(--sage); border-color:var(--sage); color:#fff }
.btn-sage:hover { background:#5a7050 }
.btn-danger  { border-color:rgba(200,72,32,.3); color:var(--ember) }
.btn-danger:hover { background:var(--ember); border-color:var(--ember); color:#fff }
.btn-sm { padding:.3rem .6rem; font-size:.6rem }
.btn-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1.25rem }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-card { background:#fff; border:1px solid var(--border); border-radius:5px; padding:1.5rem; margin-bottom:1.5rem }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem }
.field { display:flex; flex-direction:column; gap:.3rem }
.field label { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.1em;
               text-transform:uppercase; color:var(--bark) }
.field input, .field select, .field textarea {
  font-family:'DM Sans',sans-serif; font-size:.88rem;
  border:1px solid var(--sand); border-radius:3px;
  padding:.45rem .65rem; background:var(--bg); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline:1px solid var(--gold) }
.field textarea { resize:vertical; min-height:80px }

/* ── Itemized expense rows ────────────────────────────────────────────────── */
.item-row { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:.5rem; align-items:end; margin-bottom:.5rem }
.item-row input, .item-row select { font-size:.82rem; padding:.35rem .5rem }
@media(max-width:600px) { .item-row { grid-template-columns:1fr 1fr } }

/* ── Receipt upload ───────────────────────────────────────────────────────── */
.upload-zone {
  border:2px dashed var(--sand); border-radius:4px; padding:1.5rem;
  text-align:center; cursor:pointer; transition:border-color .15s;
  background:var(--bg); font-family:'DM Mono',monospace;
  font-size:.72rem; color:var(--bark); letter-spacing:.08em;
}
.upload-zone:hover, .upload-zone.drag { border-color:var(--gold); color:var(--stone) }
.upload-zone input[type=file] { display:none }
.file-list { margin-top:.75rem; display:flex; flex-direction:column; gap:.35rem }
.file-item { display:flex; justify-content:space-between; align-items:center;
             padding:.35rem .6rem; background:#fff; border:1px solid var(--border);
             border-radius:3px; font-size:.78rem }
.file-item .fname { font-family:'DM Mono',monospace; font-size:.72rem }
.file-item .fsize { color:var(--bark); font-size:.68rem }

/* ── Trip cards ───────────────────────────────────────────────────────────── */
.trip-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; margin-bottom:2rem }
.trip-card {
  background:#fff; border:1px solid var(--border); border-radius:5px;
  overflow:hidden; cursor:pointer; transition:transform .2s,box-shadow .2s;
}
.trip-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.08) }
.trip-card-head { background:var(--stone); color:#fff; padding:1rem 1.25rem }
.trip-card-head h3 { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; margin-bottom:.2rem }
.trip-card-head .dates { font-family:'DM Mono',monospace; font-size:.62rem; opacity:.75 }
.trip-card-body { padding:1rem 1.25rem }
.progress-bar { height:6px; background:rgba(100,80,50,.12); border-radius:3px; margin:.5rem 0 }
.progress-fill { height:100%; border-radius:3px; background:var(--sage); transition:width .4s }
.progress-fill.over { background:var(--ember) }

/* ── Payment info box ─────────────────────────────────────────────────────── */
.payment-info {
  background:rgba(200,160,40,.07); border:1px solid rgba(200,160,40,.25);
  border-radius:4px; padding:1.1rem 1.25rem; margin-bottom:1.5rem;
  font-size:.85rem;
}
.payment-info h4 { font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.12em;
                   text-transform:uppercase; color:var(--bark); margin-bottom:.6rem }
.payment-info p { margin-bottom:.35rem }
.payment-info strong { color:var(--stone) }

/* ── Loading / empty ──────────────────────────────────────────────────────── */
.loading { font-family:'DM Mono',monospace; font-size:.75rem; color:var(--bark);
           opacity:.6; padding:2rem; text-align:center; letter-spacing:.08em }
.empty   { font-family:'DM Mono',monospace; font-size:.75rem; color:var(--bark);
           opacity:.55; font-style:italic; padding:1.5rem 0; text-align:center }

/* ── Login modal ──────────────────────────────────────────────────────────── */
#login-overlay { position:fixed; inset:0; background:rgba(26,20,16,.88);
                 z-index:9999; display:flex; align-items:center; justify-content:center }
#login-box { background:var(--cream); border-radius:6px; padding:2.5rem 2rem;
             width:100%; max-width:380px; box-shadow:0 24px 60px rgba(0,0,0,.3) }
#login-box h2 { font-family:'Bebas Neue',sans-serif; font-size:2.2rem; color:var(--stone); margin-bottom:.2rem }
#login-box p  { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--bark); margin-bottom:1.5rem }
#login-box input { width:100%; padding:.65rem .9rem; margin-bottom:.85rem;
                   border:1px solid rgba(100,80,50,.25); border-radius:3px;
                   font-size:.88rem; background:#fff; box-sizing:border-box }
#login-box input:focus { outline:2px solid var(--gold) }
#login-btn { width:100%; padding:.8rem; background:var(--gold); color:#fff; border:none;
             border-radius:3px; font-family:'DM Mono',monospace; font-size:.8rem;
             letter-spacing:.1em; text-transform:uppercase; cursor:pointer; font-weight:500 }
#login-btn:hover { background:#a88020 }
#login-err { font-family:'DM Mono',monospace; font-size:.72rem; color:var(--ember);
             margin-top:.75rem; min-height:1rem }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer { border-top:1px solid var(--border); padding:2rem 0; margin-top:3rem;
         display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem }
.footer-brand { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; color:var(--bark) }
.footer-note  { font-family:'DM Mono',monospace; font-size:.62rem; color:var(--bark); opacity:.55 }

@media(max-width:768px) {
  .stat-grid { grid-template-columns:1fr 1fr }
  .tab-btn   { min-width:90px; font-size:.62rem; padding:.7rem .75rem }
}