/* CCL Expense Reporter — ledger-inspired UI.
   Figures set in IBM Plex Mono for accounting legibility; interface in
   IBM Plex Sans. Ink navy + paper white + ledger green for money. */

:root {
  --ink: #1b191a;        /* CCL black (from logo) */
  --blue: #015291;       /* CCL blue (from logo) */
  --blue-soft: #e6eef6;  /* light CCL blue tint */
  --paper: #f7f7f7;      /* neutral paper */
  --card: #ffffff;
  --rule: #d7d7d7;       /* ruled line */
  --text: #1b191a;
  --muted: #6b7280;
  --money: #015291;      /* totals in CCL blue */
  --warn-bg: #fdf3e2;
  --warn: #8a5a06;
  --error-bg: #fbe9e7;
  --error: #a4321f;
  --ok-bg: #e9f2ea;
  --ok: #1e6b4e;
  --focus: #015291;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 16px/1.5 "IBM Plex Sans", system-ui, sans-serif;
}
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ---------- chrome ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; color: var(--ink); padding: 10px 18px;
  border-bottom: 3px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-name { font-weight: 700; letter-spacing: .01em; }
.topnav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topnav a { color: var(--blue); text-decoration: none; font-weight: 600;
  border-bottom: 2px solid transparent; }
.topnav a:hover { border-bottom-color: var(--blue); }
.who { color: var(--muted); font-size: 14px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
.foot {
  max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px;
  color: var(--muted); font-size: 13px; border-top: 1px solid var(--rule);
}

/* ---------- flashes & checks ---------- */
.flashes { max-width: 1180px; margin: 12px auto 0; padding: 0 16px; }
.flash { padding: 10px 14px; border-left: 4px solid; margin-bottom: 8px; background: var(--card); }
.flash.ok { border-color: var(--ok); }
.flash.error { border-color: var(--error); background: var(--error-bg); }

.checks { display: grid; gap: 10px; margin: 14px 0 6px; }
.check-item { padding: 10px 14px; border-left: 4px solid; background: var(--card); font-size: 14px; }
.check-item.ok { border-color: var(--ok); background: var(--ok-bg); }
.check-item.warn { border-color: var(--warn); background: var(--warn-bg); }
.check-item strong { display: block; }

/* ---------- typography & layout ---------- */
h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 19px; margin: 30px 0 8px; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
h3 { font-size: 16px; margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.page-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- cards & forms ---------- */
.card { background: var(--card); border: 1px solid var(--rule); padding: 16px; margin: 14px 0; }
.card.slim { margin-top: 30px; }
.card.slim summary { cursor: pointer; font-weight: 600; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; }
.fields .wide { grid-column: span 2; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 500; }
label small { font-weight: 400; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; }
input, select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--rule);
  border-radius: 3px; background: #fff; width: 100%;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
}
.inline-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.inline-form label { min-width: 180px; }
.newreport { display: flex; gap: 8px; flex-wrap: wrap; }
.newreport input[type=text] { min-width: 220px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: 14.5px;
  padding: 8px 14px; border: 1.5px solid var(--ink); background: #fff;
  color: var(--ink); cursor: pointer; border-radius: 3px; text-decoration: none;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--blue); border-color: var(--blue); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.danger { border-color: var(--error); color: var(--error); }
.btn.danger:hover { background: var(--error); color: #fff; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.block { width: 100%; }
button.x {
  border: none; background: none; color: var(--error); font-size: 18px;
  cursor: pointer; line-height: 1; padding: 2px 6px;
}

/* ---------- tables ---------- */
.scroll-x { overflow-x: auto; border: 1px solid var(--rule); background: var(--card); }
.table { border-collapse: collapse; width: 100%; background: var(--card); font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.table td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table .num, .table th.num { text-align: right; }
.table .strong { font-weight: 600; color: var(--money); }
.table tfoot td { border-top: 2px solid var(--ink); font-weight: 600; }
.table tfoot .strong { color: var(--money); }
.grid td, .grid th { white-space: nowrap; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row-actions input { width: 150px; }

.pill {
  font-size: 12px; padding: 2px 9px; border-radius: 999px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.pill.draft { background: var(--blue-soft); color: var(--blue); }
.pill.submitted { background: var(--ok-bg); color: var(--ok); }

/* ---------- login ---------- */
.login-card { max-width: 400px; margin: 8vh auto 0; background: var(--card);
  border: 1px solid var(--rule); border-top: 4px solid var(--blue); padding: 26px; }
.login-card form { display: grid; gap: 12px; margin-top: 14px; }

/* ---------- receipts / OCR ---------- */
.capture-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.file-btn { cursor: pointer; }
.progress { height: 6px; background: var(--rule); margin-top: 10px; border-radius: 3px; overflow: hidden; }
.progress div { height: 100%; width: 0; background: var(--blue); transition: width .2s; }
.receipt-review { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 14px; }
#receipt-preview { max-width: 100%; max-height: 320px; object-fit: contain;
  border: 1px solid var(--rule); background: #fff; justify-self: start; }
.receipt-review form { display: grid; gap: 10px; align-content: start; }
.receipt-list { list-style: none; padding: 0; }
.receipt-list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--rule); padding: 8px 12px; margin-bottom: 6px; }

.empty { text-align: center; background: var(--card); border: 1px dashed var(--rule);
  padding: 46px 20px; margin-top: 22px; }

/* ---------- responsive ---------- */
@media (min-width: 720px) {
  .receipt-review { grid-template-columns: 320px 1fr; }
}
@media (max-width: 719px) {
  h1 { font-size: 22px; }
  .fields { grid-template-columns: 1fr 1fr; }
  .fields .wide { grid-column: 1 / -1; }
  .table { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress div { transition: none; }
}

/* meal detail block inside the receipt panel */
#meal-fields { display: grid; gap: 10px; border-left: 3px solid var(--blue);
  padding: 10px 12px; background: var(--ok-bg); }
#meal-fields[hidden] { display: none; }
.meal-note { margin: 0; }

/* receipt preview placeholder (shown until a real preview renders) */
.preview-pane { justify-self: start; width: 100%; max-width: 320px; }
.receipt-placeholder {
  display: flex; align-items: center; gap: 10px; min-height: 120px;
  border: 1px dashed var(--rule); background: #fff; padding: 14px;
  color: var(--muted); font-size: 14px; word-break: break-all;
}
.receipt-placeholder[hidden], #receipt-preview[hidden] { display: none; }
.doc-badge {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 12px;
  border: 1.5px solid var(--muted); padding: 2px 7px; letter-spacing: .08em;
  flex-shrink: 0;
}

/* enlarged receipt preview (lightbox) */
#receipt-preview { cursor: zoom-in; }
.preview-pane #r-enlarge { margin-top: 8px; }
body.no-scroll { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(23, 37, 58, 0.88);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 24px; gap: 10px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 94vw; max-height: 84vh; object-fit: contain;
  background: #fff; box-shadow: 0 8px 40px rgba(0,0,0,.5);
  cursor: zoom-in;
}
.lightbox img.zoomed {
  max-width: none; max-height: none; width: auto; height: auto;
  cursor: zoom-out; overflow: auto;
}
.lightbox img.zoomed ~ .lightbox-hint { visibility: hidden; }
.lightbox.zoom-scroll { overflow: auto; }
.lightbox-close {
  position: fixed; top: 14px; right: 18px; z-index: 1001;
  font-size: 34px; line-height: 1; padding: 2px 12px;
  background: transparent; border: none; color: #fff; cursor: pointer;
}
.lightbox-close:hover { color: #ffd973; }
.lightbox-hint { color: #cfd6e0; font-size: 13px; margin: 0; text-align: center; }
@media (max-width: 719px) {
  .lightbox { padding: 10px; }
  .lightbox img { max-width: 98vw; max-height: 82vh; }
}

/* ============================ mobile refinements ============================ */

/* smooth horizontal scrolling for wide tables everywhere */
.scroll-x { -webkit-overflow-scrolling: touch; }
.scroll-x .table { min-width: 560px; }        /* keep columns readable */
.scroll-x .grid { min-width: 1080px; }        /* the full expense grid */

/* keep the date column visible while swiping the expense grid */
@media (max-width: 900px) {
  .grid th:first-child, .grid td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--card);
    box-shadow: 2px 0 0 var(--rule);
  }
  .grid thead th:first-child { background: var(--card); }
}

/* comfortable touch targets */
@media (max-width: 719px) {
  .btn { padding: 11px 16px; }
  .btn.small { padding: 8px 12px; }
  button.x { font-size: 22px; padding: 8px 12px; }
  input, select { padding: 11px 12px; }
  .topbar { padding: 10px 12px; }
  .who { display: none; }              /* reclaim header space */
  .wrap { padding: 14px 10px 48px; }
  .page-head { flex-direction: column; }
  .page-head .actions { width: 100%; }
  .newreport { width: 100%; }
  .newreport input[type=text] { min-width: 0; flex: 1 1 100%; }
  .newreport select, .newreport .btn { flex: 1 1 auto; }
  .inline-form label { min-width: 0; width: 100%; }
  .row-actions input { width: 100%; }
}

/* stack primary action buttons full-width on phones */
@media (max-width: 480px) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; text-align: center; }
  .fields { grid-template-columns: 1fr; }
  .fields .wide { grid-column: 1; }
  .capture-row { flex-direction: column; align-items: stretch; }
  .capture-row .file-btn { text-align: center; }
  h1 { font-size: 20px; }
  .checks { font-size: 13px; }
}

/* iOS: prevent 300ms-ish double-tap zoom feel on buttons and avoid
   accidental text selection on tap targets */
.btn, button.x, .file-btn { touch-action: manipulation; user-select: none; -webkit-user-select: none; }

/* respect notched-screen safe areas */
@supports (padding: env(safe-area-inset-left)) {
  .topbar { padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right)); }
  .wrap { padding-left: max(10px, env(safe-area-inset-left));
          padding-right: max(10px, env(safe-area-inset-right)); }
}

/* line edit affordances */
.line-actions { white-space: nowrap; }
.line-actions form { display: inline-block; }
.edit-link { font-size: 13px; font-weight: 600; color: var(--focus);
  text-decoration: none; margin-right: 4px; }
.edit-link:hover { text-decoration: underline; }
.card.editing { border-left: 4px solid var(--focus); }

/* tip helper (handwritten tips) */
.tip-helper { border-left: 3px solid var(--warn); background: var(--warn-bg);
  padding: 10px 12px; display: grid; gap: 8px; }
.tip-helper[hidden] { display: none; }
.tip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tip-note { margin: 0; }
@media (max-width: 480px) { .tip-row { grid-template-columns: 1fr; } }

/* login logo */
.login-logo { height: 44px; width: auto; display: block; margin-bottom: 14px; }
@media (max-width: 480px) { .brand-logo { height: 28px; } .brand-name { font-size: 15px; } }

/* per-user editor row in admin */
.edit-user { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.edit-user select { width: auto; max-width: 190px; }
.edit-user input { width: 130px; }
.btn.small.danger { border-color: var(--error); color: var(--error); }
.btn.small.danger:hover { background: var(--error); color: #fff; }

/* multi-page upload + review */
.multi-upload { margin-top: 8px; align-items: center; }
.review-page { transition: opacity .15s; }
.review-page.skipped { opacity: .45; }
.review-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
.review-preview { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.page-canvas { border: 1px solid var(--rule); background: #fff; max-width: 100%; }
.review-fields { min-width: 0; }
.import-toggle { margin-bottom: 10px; font-weight: 600; }
.meal-extra { border-left: 3px solid var(--blue); background: var(--blue-soft);
  padding: 8px 10px; margin-top: 10px; }
.meal-extra[hidden] { display: none; }
.review-actions { margin-top: 8px; }
.review-cancel { margin-top: 18px; }
@media (max-width: 719px) {
  .review-grid { grid-template-columns: 1fr; }
  .page-canvas { max-width: 220px; }
}

/* incomplete-line list in the completeness check */
.missing-list { margin: 6px 0 0; padding-left: 18px; }
.missing-list li { margin: 2px 0; }
.missing-list a { color: var(--blue); font-weight: 600; margin-left: 6px; }

/* soft (non-blocking) note — distinct from warn/error */
.check-item.note { border-color: var(--blue); background: var(--blue-soft); }
.dup-note { margin-top: 10px; }