/* =============================================================================
   MSL Reimbursement — steel console theme
   Cool graphite/steel neutrals, one steel-blue accent, a dark structural nav
   rail, monospaced tabular figures. Light + dark, responsive to phone width.
   ========================================================================== */
:root {
    /* Steel neutrals (cool, slight blue bias) */
    --bg:#eef2f6; --card:#ffffff; --surface-2:#f6f9fc;
    --text:#0f1a24; --heading:#0f1a24; --muted:#5c6f80; --faint:#8394a3;
    --line:#dce4ec; --line-strong:#c6d2dc; --thead:#f6f9fc;

    --steel:#16222e;                 /* structural rail / emphasis */
    --accent:#2e6fb0; --accent-ink:#ffffff; --accent-soft:#e4eef8;
    --ok:#1a7f47; --ok-soft:#e2f3e9;
    --warn:#a86717; --warn-soft:#fbeed6;
    --err:#c0392b; --err-soft:#fbe4e1;

    --rail:#16222e; --rail-ink:#c7d4df; --rail-ink-dim:#7d8f9e;
    --topbar-bg:#ffffff; --topbar-text:#0f1a24;
    --shadow:0 1px 2px rgba(15,26,36,.06), 0 8px 24px rgba(15,26,36,.06);
    --radius:12px; --rail-w:236px;
    --ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
    /* placeholder so the selector list below stays valid */
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:#0c1218; --card:#131d26; --surface-2:#0f1821;
        --text:#e7eef4; --heading:#eaf2ff; --muted:#94a5b3; --faint:#6d7f8d;
        --line:#22303c; --line-strong:#2d3e4c; --thead:#0f1821;
        --steel:#0a1219;
        --accent:#4d94d8; --accent-ink:#06121d; --accent-soft:#16283a;
        --ok:#4cc684; --ok-soft:#12241b; --warn:#e0a33c; --warn-soft:#2a2113;
        --err:#ec6a5c; --err-soft:#2c1613;
        --rail:#0a1219; --rail-ink:#c2d0dc; --rail-ink-dim:#6f8290;
        --topbar-bg:#0f1821; --topbar-text:#e7eef4;
        --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    }
}
:root[data-theme="dark"] {
    --bg:#0c1218; --card:#131d26; --surface-2:#0f1821;
    --text:#e7eef4; --heading:#eaf2ff; --muted:#94a5b3; --faint:#6d7f8d;
    --line:#22303c; --line-strong:#2d3e4c; --thead:#0f1821;
    --steel:#0a1219;
    --accent:#4d94d8; --accent-ink:#06121d; --accent-soft:#16283a;
    --ok:#4cc684; --ok-soft:#12241b; --warn:#e0a33c; --warn-soft:#2a2113;
    --err:#ec6a5c; --err-soft:#2c1613;
    --rail:#0a1219; --rail-ink:#c2d0dc; --rail-ink-dim:#6f8290;
    --topbar-bg:#0f1821; --topbar-text:#e7eef4;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing:border-box; }
body {
    margin:0; font-family:var(--ui); color:var(--text); background:var(--bg);
    line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1 { color:var(--heading); font-size:1.4rem; letter-spacing:-.01em; text-wrap:balance; }
h2 { color:var(--heading); }
a { color:var(--accent); }

/* ---- Login / reviewer card pages ---- */
body.centered { display:flex; flex-direction:column; min-height:100vh; }
.card {
    background:var(--card); padding:2rem; border-radius:var(--radius); width:100%; max-width:26rem;
    box-shadow:var(--shadow); border:1px solid var(--line); margin:auto;
}

/* ---- Branding ---- */
.brand { display:inline-flex; align-items:center; gap:.6rem; }
.logo { height:30px; width:auto; display:block; background:#fff; border-radius:4px; padding:2px; }
.logo-card { display:block; width:100%; max-width:230px; height:auto; margin:0 auto 1.25rem; }

/* =============================================================================
   App shell: fixed nav rail + content column (console pages)
   ========================================================================== */
.app { display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh; }
.rail {
    background:var(--rail); color:var(--rail-ink); display:flex; flex-direction:column;
    padding:1.1rem .85rem; position:sticky; top:0; height:100vh;
}
.rail .brand { padding:.2rem .5rem 1.1rem; }
.rail .brand .logo { height:34px; }
.rail .brand b { color:#fff; font-weight:700; letter-spacing:.02em; }
.rail .brand small { display:block; color:var(--rail-ink-dim); font-weight:500; font-size:.72rem;
                     letter-spacing:.06em; text-transform:uppercase; }
.rail nav { display:flex; flex-direction:column; gap:2px; margin-top:.3rem; }
.rail nav .label { text-transform:uppercase; font-size:.68rem; letter-spacing:.08em;
                   color:var(--rail-ink-dim); padding:1rem .7rem .3rem; }
.rail nav a { display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:8px;
              color:var(--rail-ink); text-decoration:none; font-size:.92rem; font-weight:500; }
.rail nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.rail nav a.active { background:var(--accent); color:var(--accent-ink); font-weight:600; }
.rail nav svg { width:18px; height:18px; flex:0 0 auto; opacity:.85; }
.rail .spacer { flex:1; }
.rail-context { margin-top:.6rem; padding:.7rem; display:flex; flex-direction:column; gap:.4rem;
                border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.03); }
.rail-context .label { text-transform:uppercase; font-size:.68rem; letter-spacing:.08em; color:var(--rail-ink-dim); }
.rail-context .rc-name { color:#fff; font-weight:600; }
.rail-context .rc-sub { color:var(--rail-ink-dim); font-size:.8rem; }
.rail-context .rc-amt { color:var(--rail-ink); font-size:1.2rem; font-weight:700; }
.rail-context .status-badge { align-self:flex-start; }

.main { min-width:0; display:flex; flex-direction:column; }

/* ---- Topbar ---- */
.topbar {
    position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1rem;
    padding:.8rem 1.4rem; background:var(--topbar-bg); color:var(--topbar-text);
    border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.topbar h1 { font-size:1.12rem; font-weight:650; margin:0; }
.topbar .crumb { color:var(--faint); font-weight:500; }
.topbar .who { margin-left:auto; display:flex; align-items:center; gap:.6rem; font-size:.9rem; }
.topbar .who a { color:var(--accent); text-decoration:none; }
.topbar .who a:hover { text-decoration:underline; }
.hamburger { display:none; background:transparent; border:1px solid var(--line-strong); color:var(--text);
             width:38px; height:38px; border-radius:9px; cursor:pointer; font-size:1.15rem; line-height:1; }
.avatar { width:38px; height:38px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
          display:grid; place-items:center; font-weight:700; font-size:.85rem; font-family:var(--ui);
          border:1px solid var(--line); cursor:pointer; text-decoration:none; padding:0; }
.avatar:hover, .avatar[aria-expanded="true"] { border-color:var(--accent); }
.usermenu { position:relative; }
.usermenu-pop { position:absolute; right:0; top:calc(100% + 8px); min-width:12rem; z-index:60;
    background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:.4rem; }
.usermenu-pop[hidden] { display:none; }
.usermenu-pop .um-id { padding:.5rem .6rem .6rem; border-bottom:1px solid var(--line); margin-bottom:.3rem; }
.usermenu-pop .um-id b { display:block; font-size:.9rem; }
.usermenu-pop .um-id small { color:var(--muted); font-family:var(--mono); font-size:.78rem; word-break:break-all; }
.um-theme, .um-lang { display:none; align-items:center; justify-content:space-between; gap:.6rem;
            padding:.35rem .6rem .55rem; margin-bottom:.25rem; border-bottom:1px solid var(--line); }
.um-theme > span, .um-lang > span { color:var(--muted); font-size:.85rem; }
.usermenu-pop a { display:block; padding:.5rem .6rem; border-radius:8px; text-decoration:none; color:var(--text); font-size:.9rem; }
.usermenu-pop a:hover { background:var(--surface-2); color:var(--accent); }

.container, .content { max-width:1120px; margin:0 auto; padding:1.5rem 1.4rem 3rem; width:100%; }

/* ---- Theme toggle (topbar + card footer) ---- */
.theme-switch, .theme-toggle { display:inline-flex; gap:2px; background:var(--surface-2);
    border:1px solid var(--line); border-radius:10px; padding:3px; }
.theme-switch button, .theme-toggle button {
    border:0; background:transparent; color:var(--faint); min-width:32px; height:30px;
    display:inline-grid; place-items:center; border-radius:7px; cursor:pointer; padding:0 .5rem;
    font-size:.82rem; transition:color .12s, background .12s;
}
.theme-switch button:hover, .theme-toggle button:hover { color:var(--text); }
.theme-switch button[aria-pressed="true"], .theme-toggle button[aria-pressed="true"] {
    background:var(--card); color:var(--accent); box-shadow:var(--shadow);
}
.theme-toggle svg { width:17px; height:17px; display:block; }

/* Language switcher: same pill as the theme toggle, but links, so it works
   without JavaScript and each option is a real URL a browser can follow. */
.lang-switch { display:inline-flex; gap:2px; background:var(--surface-2);
    border:1px solid var(--line); border-radius:10px; padding:3px; }
.lang-switch a { color:var(--faint); height:30px; padding:0 .6rem; border-radius:7px;
    display:inline-grid; place-items:center; font-size:.82rem; text-decoration:none;
    transition:color .12s, background .12s; }
.lang-switch a:hover { color:var(--text); }
.lang-switch a.on { background:var(--card); color:var(--accent); box-shadow:var(--shadow); }

/* Topbar form: a globe (never a flag - a flag is a country, not a language) plus
   the two-letter codes, so the pill sits in the row of icon buttons. */
.lang-switch.compact a { padding:0 .4rem; font-size:.74rem; font-weight:700; letter-spacing:.03em; }
.lang-switch.compact .lang-globe { width:15px; height:15px; align-self:center;
    margin:0 .1rem 0 .32rem; color:var(--faint); flex:none; }

/* ---- Context-sensitive help (topbar "?" + modal dialog) ---- */
.help-btn { width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
    background:var(--surface-2); color:var(--muted); font-weight:700; font-size:1rem; line-height:1;
    cursor:pointer; display:inline-grid; place-items:center; padding:0; transition:color .12s, border-color .12s; }
.help-btn:hover { color:var(--accent); border-color:var(--accent); }
.help-dialog { max-width:32rem; width:calc(100% - 2rem); border:1px solid var(--line); border-radius:var(--radius);
    background:var(--card); color:var(--text); box-shadow:var(--shadow); padding:1.25rem 1.4rem 1.5rem; }
.help-dialog::backdrop { background:rgba(6,12,18,.5); }
.help-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 .5rem; }
.help-head h2 { margin:0; font-size:1.15rem; }
.help-close { border:0; background:transparent; color:var(--muted); font-size:1.5rem; line-height:1;
    cursor:pointer; padding:0 .2rem; }
.help-close:hover { color:var(--text); }
.help-intro { color:var(--muted); margin:.25rem 0 1rem; }
.help-list { margin:0; }
.help-list dt { font-weight:650; color:var(--heading); margin-top:.8rem; }
.help-list dd { margin:.15rem 0 0; color:var(--text); }

/* ---- Profile block (submission detail) ---- */
.profile {
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.1rem 1.2rem; margin-bottom:1.25rem; display:grid; gap:.4rem; box-shadow:var(--shadow);
}
.profile .lbl { display:inline-block; width:7rem; color:var(--muted); font-size:.85rem; }

/* ---- Tables ---- */
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
             background:var(--card); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; background:var(--card);
        font-variant-numeric:tabular-nums; }
.tablewrap > table { border:0; }
th, td { padding:.65rem .85rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
thead th { background:var(--thead); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
           color:var(--muted); font-weight:600; white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--surface-2); }
tfoot td { font-weight:600; background:var(--surface-2); }
td.num, th.num, td[style*="right"] { font-family:var(--mono); }
td input, td select {
    width:100%; padding:.4rem; border:1px solid var(--line); border-radius:7px;
    background:var(--card); color:var(--text); font:inherit; font-size:.88rem;
}

/* ---- Buttons ---- */
button {
    font:inherit; cursor:pointer; border:1px solid var(--accent); border-radius:9px;
    padding:.55rem 1.05rem; background:var(--accent); color:var(--accent-ink); font-weight:600;
}
button:hover { filter:brightness(1.05); }
button:disabled { opacity:.5; cursor:not-allowed; filter:none; }
button.secondary { background:var(--surface-2); color:var(--text); border-color:var(--line-strong); font-weight:500; }
button.removeRow { background:var(--card); color:var(--err); border:1px solid var(--line); padding:.3rem .6rem; font-weight:500; }
#submitBtn { display:block; margin-top:1.25rem; font-size:1.02rem; padding:.72rem 1.5rem; }
button.approve { background:var(--ok); border-color:var(--ok); color:#fff; }
button.reject  { background:var(--err); border-color:var(--err); color:#fff; }

/* ---- Form fields ---- */
label { display:block; margin:.75rem 0 .25rem; font-weight:600; }
input[type=email], input[type=text], input[type=date], input[type=number], textarea, select {
    width:100%; padding:.6rem; border:1px solid var(--line); border-radius:8px;
    background:var(--card); color:var(--text); font:inherit;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.card button { width:100%; margin-top:1rem; }
/* The sign-in card offers one button per language. The second is quieter: both
   do the same thing, and the pair should not read as a decision between two
   different actions. */
.card button.secondary { margin-top:.5rem; }

.receipts { margin-top:1.25rem; border:1px solid var(--line); border-radius:var(--radius); padding:.4rem .8rem .8rem; }
.receipts legend { padding:0 .4rem; color:var(--heading); font-weight:600; }
/* The browser draws "Choose files" and "No file chosen" itself, in ITS language,
   not the page's — so a Spanish employee saw two English strings we could not
   reach. The real input stays (it does the work and keeps the keyboard and
   screen-reader behaviour); it is moved off-screen and we draw the button and
   the filename ourselves, from lang/*.php. */
.filepick { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
    margin:.4rem 0 .2rem; font-weight:400; cursor:pointer; }
.filepick input[type=file] { position:absolute; width:1px; height:1px; padding:0;
    margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.filepick-btn { display:inline-flex; align-items:center; padding:.5rem 1rem;
    border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-2);
    color:var(--text); font-size:.92rem; font-weight:600; white-space:nowrap; }
.filepick:hover .filepick-btn { border-color:var(--accent); color:var(--accent); }
/* Focus lands on the hidden input, so the ring has to be drawn on the button. */
.filepick input[type=file]:focus-visible + .filepick-btn {
    outline:2px solid var(--accent); outline-offset:2px; }
.filepick-name { color:var(--muted); font-size:.88rem; overflow-wrap:anywhere; }

/* Working location: office + setting side by side, mailing address full width. */
.work-location { margin-bottom:1.25rem; border:1px solid var(--line); border-radius:var(--radius); padding:.4rem .8rem .8rem; }
.work-location legend { padding:0 .4rem; color:var(--heading); font-weight:600; }
.work-location { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.work-location legend, .work-location .mailing { grid-column:1 / -1; }
@media (max-width:32rem) { .work-location { grid-template-columns:1fr; } }

/* Mailing address: street lines full width; city / state / ZIP share a row. */
.mailing-address { margin-bottom:1.25rem; border:1px solid var(--line); border-radius:var(--radius); padding:.4rem .8rem .8rem; }
.mailing-address legend { padding:0 .4rem; color:var(--heading); font-weight:600; }
.mailing-address { display:grid; grid-template-columns:2fr 1fr 1fr; gap:0 1rem; }
.mailing-address legend, .mailing-address .ma-street, .mailing-address .ma-street2 { grid-column:1 / -1; }
@media (max-width:32rem) {
    .mailing-address { grid-template-columns:1fr; }
    .mailing-address .ma-street, .mailing-address .ma-street2 { grid-column:auto; }
}
.mailing-address .addr-status { grid-column:1 / -1; margin:.4rem 0 0; color:var(--danger, #c0392b); font-size:.9rem; font-weight:600; }
.hint { color:var(--muted); font-size:.85rem; margin:.25rem 0 .6rem; }
.gl-saved { color:#0a7d33; font-weight:600; }

.notice { padding:.7rem .9rem; border-radius:9px; margin:.75rem 0; border:1px solid transparent; }
.notice.success { background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,transparent); }
.notice.error { background:var(--err-soft); color:var(--err); border-color:color-mix(in srgb,var(--err) 35%,transparent); }
.notice.info { background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,transparent); }

.actions { display:flex; gap:.75rem; margin-top:1.25rem; flex-wrap:wrap; }
.actions button { font-size:1.02rem; padding:.7rem 1.5rem; }

/* ---- Status pills ---- */
.status-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .6rem; border-radius:999px;
    font-size:.76rem; font-weight:600; white-space:nowrap; }
.status-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status-Submitted { background:var(--accent-soft); color:var(--accent); }
.status-Info-Requested { background:var(--warn-soft); color:var(--warn); }
.status-Approved { background:var(--ok-soft); color:var(--ok); }
.status-Rejected { background:var(--err-soft); color:var(--err); }

/* ---- Conversation thread ---- */
.thread { margin:1.5rem 0; }
.thread h2 { color:var(--heading); font-size:1.1rem; margin-bottom:.5rem; }
.msg { border:1px solid var(--line); border-radius:var(--radius); padding:.7rem .9rem; margin:.5rem 0; background:var(--card); }
.msg-approver { border-left:3px solid var(--steel); }
.msg-employee { border-left:3px solid var(--accent); }
.msg-meta { font-size:.85rem; margin-bottom:.25rem; }
.msg-meta .hint { margin-left:.4rem; }
.msg-body { white-space:pre-wrap; }
.remove-receipt { font-size:.85rem; color:var(--err); }

/* ---- KPI / report cards ---- */
.report { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.9rem; margin:0 0 1.25rem; }
.report .stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:.9rem 1.05rem; display:grid; gap:.2rem; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.report .stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.report .stat.total::before { background:var(--steel); }
.report .stat-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.report .stat-n { font-family:var(--mono); font-size:1.7rem; font-weight:700; line-height:1.1; }
.report .stat-amt { font-family:var(--mono); font-size:.88rem; color:var(--muted); }

/* ---- Filter bar (legacy) + toolbar ---- */
.filters { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.filters label { display:inline-flex; align-items:center; gap:.35rem; margin:0; font-weight:400; font-size:.9rem; }
.filters select, .filters input { width:auto; }
.btnlink { display:inline-block; text-decoration:none; padding:.5rem .9rem; border-radius:9px;
           background:var(--surface-2); color:var(--text); border:1px solid var(--line-strong); font-size:.88rem; }
.btnlink:hover { border-color:var(--accent); color:var(--accent); }
.btnlink.active { border-color:var(--accent); color:var(--accent); background:var(--card); font-weight:600; }
.toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0 0 1.1rem; }

/* ---- Sortable headers ---- */
th a.sort { color:inherit; text-decoration:none; display:inline-block; }
th a.sort:hover { color:var(--accent); }

/* ---- Filter bar (standalone, above data tables) ----
   Controls live in their own flex bar, independent of the table's column
   widths (the old in-header filter row inherited column sizing and overflowed). */
/* Console pages use the screen they are given. 1600px was a fixed number that
   left roughly a third of a 3440px monitor empty on either side; 96vw uses the
   width, and the 2200px ceiling keeps a description field from becoming a line
   of text nobody can track back to its row. */
.wide .content { max-width:min(96vw, 2200px); }
.filterbar {
    display:flex; flex-wrap:wrap; align-items:flex-end; gap:.55rem .9rem;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:.85rem 1rem; margin:0 0 1rem;
}
.fb-field { display:flex; flex-direction:column; gap:.25rem; }
.fb-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
            color:var(--muted); font-weight:600; }
.fb-inputs { display:flex; gap:.4rem; }
.fb-grow { flex:1 1 12rem; min-width:9rem; }
.filterbar input, .filterbar select, .filterbar textarea {
    padding:.4rem .5rem; border:1px solid var(--line); border-radius:7px;
    background:var(--card); color:var(--text); font:inherit; font-size:.88rem;
}
.filterbar textarea { width:100%; resize:vertical; }
/* A note that explains the row it sits under, on its own line below it. */
.fb-note { flex:1 1 100%; margin:.2rem 0 0; color:var(--muted); font-size:.82rem; line-height:1.5; }
/* "Configured - last set ..." under a write-only field. */
.fb-hint { font-size:.75rem; color:var(--muted); font-weight:400; }
/* A filter bar aligns its fields on their BOTTOM edge, which is right when they
   are all the same height. Give some of them a hint underneath and those fields
   grow downwards, so their inputs ride up out of line with the rest. A form that
   mixes the two aligns on the top edge instead. */
.filterbar.fb-top { align-items:flex-start; }
/* One row per stored value: the English the app keeps, and what it reads in the
   other language. Full width inside the filter bar so it never rides beside a
   field it has nothing to do with. */
.labelgrid { flex:1 1 100%; margin:.4rem 0 0; padding:.5rem .9rem .8rem;
    border:1px solid var(--line); border-radius:9px; background:var(--card); }
.labelgrid legend { padding:0 .4rem; color:var(--muted); font-size:.78rem; font-weight:600; }
.labelgrid label { display:grid; grid-template-columns:9rem 1fr; align-items:center;
    gap:.6rem; margin:.3rem 0; font-weight:400; }
.labelgrid .lg-en { color:var(--muted); font-size:.84rem; font-weight:600; }
@media (max-width:640px) {
    .labelgrid label { grid-template-columns:1fr; gap:.15rem; }
}
.filterbar.fb-top .fb-actions { align-self:flex-end; }
/* What a save did, on its own line inside the form that did it. A banner at the
   top of the page pushed every section down to say the same thing. */
.fb-status { flex:1 1 100%; margin:.5rem 0 0; padding:.45rem .7rem; border-radius:7px;
    font-size:.84rem; font-weight:600; border:1px solid transparent; }
.fb-status.busy  { background:var(--accent-soft); color:var(--accent);
                   border-color:color-mix(in srgb,var(--accent) 30%,transparent); }
.fb-status.ok    { background:var(--ok-soft); color:var(--ok);
                   border-color:color-mix(in srgb,var(--ok) 30%,transparent); }
.fb-status.error { background:var(--err-soft); color:var(--err);
                   border-color:color-mix(in srgb,var(--err) 30%,transparent); font-weight:400; }
.filterbar input[type=date] { min-width:8.5rem; }
.filterbar input[type=number] { width:5.5rem; }
.filterbar input[type=search] { width:100%; }
.filterbar select { min-width:8rem; }
.fb-actions { display:flex; gap:.5rem; align-items:flex-end; margin-left:auto; }
.fb-actions .btnlink { padding:.5rem .85rem; }
@media (max-width:640px) {
    .fb-field, .fb-grow { flex:1 1 100%; }
    .fb-inputs input { flex:1 1 0; width:auto; min-width:0; }
    .fb-actions { margin-left:0; width:100%; }
    .fb-actions button, .fb-actions .btnlink { flex:1 1 0; text-align:center; }
}

/* ---- Pager + receipts ---- */
.pager { display:flex; gap:1rem; align-items:center; margin-top:1rem; color:var(--muted); }
.pager a { color:var(--accent); text-decoration:none; }
.receipt-list { margin:.25rem 0 .5rem; padding-left:1.2rem; }
.receipt-list li { margin:.15rem 0; }
.receipt-gallery { display:flex; flex-wrap:wrap; gap:.6rem; margin:.35rem 0 .5rem; }
.receipt-thumb { display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); }
.receipt-thumb img { display:block; height:120px; width:auto; max-width:200px; object-fit:cover; }
.receipt-file { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
    border:1px solid var(--line); border-radius:8px; padding:.5rem .75rem; background:var(--card); color:var(--text); }
.receipt-ico { font-size:1.4rem; line-height:1; }

/* ---- GL coding form ---- */
.glform { margin:1.5rem 0; }
.glform h2 { font-size:1.1rem; margin-bottom:.5rem; }

/* ---- Data management (upload / version history) ---- */
.datakind, .settings-section { margin:2rem 0; }
.datakind h2, .settings-section h2 { color:var(--heading); font-size:1.1rem; margin:0 0 .5rem; }
.status-Live { background:var(--ok-soft); color:var(--ok); }
/* Validation errors listed under the flash that refused the upload. */
.notice-detail { margin:-.4rem 0 1rem; padding:.6rem 1rem .6rem 2.2rem; list-style:disc;
    border:1px solid var(--line); border-left:0; border-radius:0 0 var(--radius) var(--radius);
    background:var(--card); font-size:.86rem; }
.notice-detail li { margin:.25rem 0; }
/* Row actions sit on one line: a link, then buttons that look like links. */
form.inline { display:inline; }
.linkish { background:none; border:0; padding:0; margin-left:.6rem; font:inherit;
    color:var(--accent); cursor:pointer; text-decoration:underline; }
.linkish:hover { opacity:.8; }
.linkish.danger { color:var(--err); }

/* ---- Settings: the "where do I find these" walkthrough ----
   Collapsed by default: it is read once, during setup, and never again. */
.setuphelp { margin:.9rem 0 1.4rem; border:1px solid var(--line); border-radius:9px;
    background:var(--surface-2); }
.setuphelp > summary { cursor:pointer; padding:.6rem .9rem; font-size:.88rem; font-weight:600;
    color:var(--accent); list-style:none; }
.setuphelp > summary::-webkit-details-marker { display:none; }
.setuphelp > summary::before { content:"\25B8"; display:inline-block; margin-right:.5rem;
    transition:transform .15s ease; }
.setuphelp[open] > summary::before { transform:rotate(90deg); }
.setuphelp > summary:hover { text-decoration:underline; }
.setuphelp > *:not(summary) { margin:.6rem .9rem; font-size:.86rem; line-height:1.6; }
.setuphelp ol, .setuphelp ul { padding-left:1.3rem; }
.setuphelp li { margin:.4rem 0; }
.setuphelp code { font-family:var(--mono); font-size:.92em; }

/* ---- Settings: the test-email result, reported next to its button ----
   It used to be a flash at the top of the page, which pushed every card down
   and left the reader hunting for what had moved. */
.testlog { position:relative; flex:1 1 100%; margin:.6rem 0 0; padding:.7rem 2.2rem .7rem .9rem;
    border:1px solid var(--line); border-radius:9px; background:var(--surface-2); }
.testlog.busy  { border-color:color-mix(in srgb,var(--accent) 35%,transparent); background:var(--accent-soft); }
.testlog.ok    { border-color:color-mix(in srgb,var(--ok) 35%,transparent);     background:var(--ok-soft); }
.testlog.error { border-color:color-mix(in srgb,var(--err) 35%,transparent);    background:var(--err-soft); }
.testlog pre { margin:0; font-family:var(--mono); font-size:.82rem; line-height:1.55;
    white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); }
.testlog.ok pre    { color:var(--ok); }
.testlog.error pre { color:var(--err); }
.testlog-close { position:absolute; top:.25rem; right:.4rem; background:none; border:0;
    padding:.1rem .4rem; font-size:1.15rem; line-height:1; color:var(--muted); cursor:pointer; }
.testlog-close:hover { color:var(--text); }

/* ---- Footer ---- */
.site-footer { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; justify-content:center; align-items:center;
    color:var(--muted); font-size:.85rem; padding:1.5rem 1rem; border-top:1px solid var(--line); margin-top:2rem; }
body.centered .site-footer { border-top:0; margin-top:0; }
.site-footer .support-link { color:var(--accent); text-decoration:none; }
.site-footer .support-link:hover { text-decoration:underline; }

/* ---- Mobile drawer scrim ---- */
.scrim { display:none; }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width:820px) {
    .app { grid-template-columns:1fr; }
    .rail { position:fixed; z-index:50; width:260px; left:0; top:0; transform:translateX(-100%);
            transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.45); }
    .app.nav-open .rail { transform:none; }
    .app.nav-open .scrim { display:block; position:fixed; inset:0; z-index:40; background:rgba(6,12,18,.5); }
    .hamburger { display:inline-grid; place-items:center; }
    .container, .content { padding:1rem; }
}

/* Collapse LIST tables (rows with data-label cells) into cards on phones */
@media (max-width:640px) {
    table.list, table.list thead, table.list tbody, table.list tfoot, table.list tr, table.list td { display:block; }
    table.list thead { display:none; }
    table.list tbody tr { background:var(--card); border:1px solid var(--line); border-radius:10px;
        margin:.6rem; padding:.2rem 0; }
    table.list tbody tr:hover td { background:transparent; }
    table.list td { display:flex; justify-content:space-between; align-items:center; gap:1rem;
        border-bottom:1px dashed var(--line); padding:.5rem .85rem; }
    table.list tbody tr td:last-child { border-bottom:0; }
    table.list td::before { content:attr(data-label); color:var(--muted); font-size:.7rem;
        text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
    table.list td:not([data-label]) { justify-content:flex-end; }
    /* A blank cell is just a label with nothing after it once the row is a card. */
    table.list td:empty { display:none; }
    /* A cell holding a control (the GL dropdown) reads label-above, full-width —
       a label/value pair squeezes the control to nothing at this size. */
    table.list td:has(> select), table.list td:has(> input) { display:block; }
    table.list td:has(> select)::before, table.list td:has(> input)::before { margin-bottom:.3rem; }
    /* The totals row is its own, visually heavier card; cells that carry no
       label are headings for the wide layout and have nothing to show here. */
    table.list tfoot tr { border:1px solid var(--line-strong); border-radius:10px;
        background:var(--surface-2); margin:.6rem; }
    table.list tfoot td { border-bottom:1px dashed var(--line); }
    table.list tfoot tr td:last-child { border-bottom:0; }
    table.list tfoot td:not([data-label]) { display:none; }
}

/* =============================================================================
   Phones: the expense-entry table becomes one card per line
   Seven columns of inputs can't fit a phone, so each row stacks — label above
   control, full-width targets, the totals row as a single line. Between here and
   the desktop layout the table just scrolls inside its .tablewrap.
   ========================================================================== */
@media (max-width:640px) {
    table.entry, table.entry tbody, table.entry tfoot, table.entry tr, table.entry td { display:block; }
    table.entry thead { display:none; }
    table.entry tbody tr { position:relative; background:var(--surface-2); border:1px solid var(--line);
        border-radius:10px; margin:.6rem; padding:.5rem .8rem .7rem; }
    table.entry tbody tr:hover td { background:transparent; }
    table.entry td { border-bottom:0; padding:.35rem 0; }
    table.entry td::before { content:attr(data-label); display:block; color:var(--muted); font-size:.7rem;
        text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-bottom:.2rem; }
    /* Miles only applies to a Mileage line; app.js hides the input on the rest. */
    table.entry td:has(> input[hidden]) { display:none; }
    /* Remove sits at the foot of its own card, labelled — a bare x is too vague
       once the row is no longer read across. */
    table.entry td.row-remove { padding:.5rem 0 0; text-align:right; }
    table.entry td.row-remove::before { content:none; }
    table.entry td.row-remove .removeRow::after { content:" Remove"; }
    table.entry tfoot tr { display:flex; justify-content:flex-end; align-items:baseline;
        gap:.6rem; padding:.2rem 1rem .8rem; }
    table.entry tfoot td { background:none; padding:0; border:0; font-size:1.1rem; }
    table.entry tfoot td:not([data-label]) { display:none; }
    table.entry tfoot td::before { display:inline; margin:0 .5rem 0 0; }
}

/* =============================================================================
   Phones: trim the chrome, size the touch targets
   ========================================================================== */
@media (max-width:640px) {
    /* 16px is the threshold below which iOS Safari zooms the page on focus. */
    td input, td select, .filterbar input, .filterbar select { font-size:1rem; }
    input[type=email], input[type=text], input[type=date], input[type=number],
    textarea, select, td input, td select { padding:.6rem; }

    .topbar { padding:.65rem .9rem; gap:.55rem; }
    .topbar h1 { font-size:1.05rem; }
    /* Theme is chrome the phone header can't spare, so it moves into the account
       menu. Language does NOT: roughly two thirds of the roster are field and
       shop crews filing from a phone, and someone who needs Spanish cannot be
       asked to find it behind an avatar they have no reason to open. It stays in
       the header at every width, and the account-menu copy stays hidden so the
       two are never on screen at once. */
    .topbar .who > .theme-toggle { display:none; }
    .um-theme { display:flex; }
    .lang-switch.compact a { padding:0 .35rem; }

    /* Label above value reads better than a 7rem label column at this width. */
    .profile { padding:.9rem 1rem; }
    .profile .lbl { display:block; width:auto; font-size:.7rem; text-transform:uppercase;
        letter-spacing:.05em; font-weight:600; }

    .toolbar button, .toolbar .btnlink { flex:1 1 auto; text-align:center; }
    .actions button { flex:1 1 100%; }
    #submitBtn, #addRow { width:100%; }
    .receipt-thumb img { height:88px; }
}

@media (prefers-reduced-motion:reduce) { .rail { transition:none; } }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---- Print ---- */
@media print {
    :root { --bg:#fff; --text:#000; --heading:#000; --card:#fff; --line:#ccc; --muted:#555; --thead:#eee; }
    .rail, .topbar, .site-footer, .toolbar, #decisionForm, .actions, .hamburger { display:none !important; }
    body { background:#fff; }
    .app { display:block; }
    .container, .content { margin:0; max-width:none; padding:0; }
    .tablewrap { border:0; box-shadow:none; }
    .profile, table, .msg { break-inside:avoid; }
}

/* ---- Log viewer: the three logs, and a badge per severity ---- */
.logtabs { display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 1rem; }
.logtabs a { padding:.45rem .8rem; border-radius:9px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--muted); text-decoration:none; font-size:.88rem; }
.logtabs a:hover { color:var(--text); }
.logtabs a.on { background:var(--card); color:var(--accent); border-color:var(--accent); font-weight:600; }
/* Severity reads at a glance: only warning and error should draw the eye. */
.status-badge.lvl-debug   { background:var(--surface-2); color:var(--faint); }
.status-badge.lvl-info    { background:var(--surface-2); color:var(--muted); }
.status-badge.lvl-warning { background:#fdf0d5; color:#8a5a00; }
.status-badge.lvl-error   { background:#fbe0e0; color:#a11; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .status-badge.lvl-warning { background:#4a3608; color:#f0c46a; }
    :root:not([data-theme="light"]) .status-badge.lvl-error   { background:#4a1414; color:#f3a0a0; }
}
:root[data-theme="dark"] .status-badge.lvl-warning { background:#4a3608; color:#f0c46a; }
:root[data-theme="dark"] .status-badge.lvl-error   { background:#4a1414; color:#f3a0a0; }
/* A log line is long and must not stretch the table. */
.list code { font-family:var(--mono); font-size:.78rem; word-break:break-all; }