/* The same club, the same clothes. Tokens, fonts and control styling are
   copied from greenjacket-booking/public/admin/admin.css so the finance
   site reads as part of the estate rather than a report generator that
   happens to share a domain. */

@font-face { font-family:"Hilogen"; src:url("fonts/Hilogen-Regular.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Hilogen Sans"; src:url("fonts/Hilogen-Sans.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"HK Grotesk"; src:url("fonts/HKGrotesk-Regular.otf") format("opentype"); font-display:swap; }

:root {
  --reserve:#253c1d; --reserve-dark:#141f0e; --fairway:#4e6342;
  --slate:#4e6c88; --slate-light:#a9c2d1;
  --linen:#ecead5; --linen-soft:#faf9f2;
  --line:rgba(236,234,213,.19); --muted:rgba(236,234,213,.76);
  --danger:#ffd2c2; --amber:#f0d9a8;
  --display:"Hilogen Sans","HK Grotesk",sans-serif;
  --script:"Hilogen",cursive;
  --sans:"HK Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; }
body {
  min-width:320px; margin:0; color:var(--linen);
  background:radial-gradient(1200px 600px at 50% -180px,rgba(139,160,124,.34),transparent 70%),
             radial-gradient(800px 500px at 100% 40%,rgba(20,31,14,.4),transparent 70%),var(--fairway);
  font-family:var(--sans); line-height:1.45;
}
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--slate-light); outline-offset:3px; }
[hidden] { display:none !important; }

/* 16px is a threshold, not a taste: iOS Safari force-zooms the page when a
   control smaller than that takes focus, and never zooms back out. Same
   rule, same reason, as the staff screens. */
input,select,textarea {
  width:100%; color:var(--linen-soft); background:rgba(13,20,9,.46);
  border:1px solid var(--line); border-radius:12px; padding:12px 13px; font-size:16px;
}
input:focus { border-color:var(--slate-light); outline:none; box-shadow:0 0 0 3px rgba(169,194,209,.18); }
label { display:block; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
button {
  color:var(--linen); background:transparent; border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; font-weight:700; transition:transform .15s var(--ease),background .2s,border-color .2s;
}
button:hover:not(:disabled) { background:rgba(236,234,213,.08); border-color:rgba(236,234,213,.48); }
button:active { transform:scale(.97); }
button:disabled { opacity:.45; cursor:not-allowed; }
.primary { border:0; color:var(--linen-soft); background:var(--slate); padding:13px 18px; }
.primary:hover:not(:disabled) { background:#3f607d; }
.ghost-button { border-radius:999px; font-size:12px; padding:8px 14px; min-height:36px; }
.error { display:block; min-height:1.25em; color:var(--danger); font-size:13px; font-weight:700; }
.eyebrow { margin:0; color:var(--slate-light); font-size:11px; font-weight:800; letter-spacing:.18em; text-align:center; text-transform:uppercase; }
.muted { color:var(--muted); }

/* ---- the door ---- */
.splash { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:24px; }
.splash-card {
  width:min(420px,100%); display:grid; gap:14px; padding:36px 32px; text-align:center;
  border:1px solid var(--line); border-radius:26px;
  background:linear-gradient(180deg,rgba(37,60,29,.84),rgba(20,31,14,.9));
  box-shadow:0 24px 80px rgba(13,20,9,.24);
}
.splash-card img { width:172px; margin:auto; }
.splash-message { margin:0; color:var(--linen-soft); font-size:14px; }
.splash-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.splash-actions a {
  color:var(--linen-soft); background:var(--slate); border-radius:12px; padding:13px 18px;
  font-weight:700; text-decoration:none;
}

/* ---- frame ---- */
.shell { max-width:1080px; margin:0 auto; padding:14px 16px 56px; }
.bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg,rgba(37,60,29,.6),rgba(20,31,14,.55));
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--linen); }
.brand img { width:128px; }
.brand span { font-family:var(--display); font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-light); }
.bar-actions { display:flex; align-items:center; gap:10px; }
.viewer { color:var(--muted); font-size:12px; font-weight:700; }
.ghost-link {
  color:var(--linen); border:1px solid var(--line); border-radius:12px; padding:9px 13px;
  font-size:12px; font-weight:700; text-decoration:none;
}
.ghost-link:hover { background:rgba(236,234,213,.08); }

.segmented { display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.segmented button { border:0; border-radius:0; padding:9px 15px; font-size:12.5px; }
.segmented button + button { border-left:1px solid var(--line); }
.segmented button[aria-selected="true"], .segmented button[aria-pressed="true"] { background:rgba(236,234,213,.14); color:var(--linen-soft); }

/* The weekday sits ABOVE the date rather than beside it. Side by side, the
   label and a native date input together measure ~475px, which at 375 put
   the whole PAGE into horizontal scroll — the one thing a phone layout
   must never do, because it takes the first column off screen. */
.date-nav { margin:14px 0 0; align-items:stretch; max-width:100%; }
.date-nav button { flex:none; }
.date-display { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:4px 10px; min-width:0; flex:1 1 auto; }
.date-display b { font-family:var(--display); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.date-display input { width:auto; max-width:100%; border:0; background:transparent; padding:2px 0; text-align:center; }

.status { margin:10px 0 0; min-height:1.2em; color:var(--muted); font-size:13px; }
.status.error { color:var(--danger); font-weight:700; }
.notice {
  margin:12px 0 0; padding:11px 14px;
  border:1px solid rgba(169,194,209,.5); border-radius:12px;
  background:rgba(78,108,136,.28); color:#dcebf2; font-size:13px; font-weight:600;
}

.notice-actions { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0; }

/* ---- tiles ---- */

/* Which question the row of tiles below answers. Deliberately not a card and
   not a heading — it labels a group of cards, and anything with a border of
   its own would read as one more tile with nothing in it.

   Slate-LIGHT, not slate: the darker token measures 1.14:1 against this
   page's ground, which is a label nobody can read. This one measures 3.39:1
   at 10px, which is what makes the second "Collected" unmistakably a
   different question from the first. */
.row-eyebrow {
  margin:18px 0 0; color:var(--slate-light);
  font-family:var(--display); font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
.row-eyebrow:first-of-type { margin-top:14px; }

/* The sentence that reconciles the two rows. Prose, under the figures it
   explains, at the width of the text rather than the grid. */
.row-note { margin:8px 0 0; max-width:62ch; color:var(--muted); font-size:12.5px; }

.tiles { display:grid; gap:10px; margin:10px 0 0; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.tile {
  display:grid; gap:3px; padding:13px 16px; min-width:0;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,rgba(37,60,29,.6),rgba(20,31,14,.66));
}
/* A grid item refuses to shrink below its own min-content unless told to,
   which is how a long figure pushes its own tile open at 320px. */
.tile > * { min-width:0; }
.tile span { font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-light); }
.tile b { font-family:var(--display); font-size:18px; font-weight:900; }
.tile small { color:var(--muted); font-size:11px; }

/* Money still to come in, and the only warmth on the page — worn by this
   day's Still to collect and by the balance of everything played and never
   paid for, which are the same fact at two ranges. Amber rather than red:
   nobody has done anything wrong, the night is simply not paid for yet. At
   zero the class comes off and the tile is as plain as its neighbours — a
   day with nothing outstanding should look calm. */
.tile.warn { border-color:rgba(240,217,168,.55); background:linear-gradient(180deg,rgba(240,217,168,.16),rgba(20,31,14,.7)); }
.tile.warn span, .tile.warn b, .tile.warn small { color:var(--amber); }

.by-method, .flag-list { display:flex; flex-direction:column; gap:2px; min-width:0; }
.method-line { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; }
.method-line i { min-width:0; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.method-line b { flex:none; font-family:var(--display); font-size:13px; font-weight:800; }
/* Scoped under .tile deliberately: the tile styles its own span as a small
   uppercase LABEL, and a sentence inheriting that reads as five shouted
   headings instead of five things to look at. Specificity, not source
   order, so a later edit to the tile block cannot silently take it back. */
.tile .flag-line {
  font-size:12px; font-weight:700; letter-spacing:0; text-transform:none;
  color:var(--danger);
}

/* ---- panels ---- */
.panel { margin:16px 0 0; padding:16px; border:1px solid var(--line); border-radius:18px; background:rgba(13,20,9,.24); }
.panel h2 { margin:0 0 4px; font-family:var(--display); font-size:14px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--linen-soft); }
.panel h3 { margin:14px 0 8px; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-light); }
.panel-hint { margin:0 0 10px; color:var(--muted); font-size:12px; }
.empty { margin:6px 0 0; color:var(--muted); font-size:13px; }

.cards { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card {
  display:grid; gap:6px; padding:13px 15px; min-width:0;
  border:1px solid var(--line); border-radius:14px; background:rgba(13,20,9,.32);
}
.card > * { min-width:0; }
.card-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.card-head b { font-family:var(--display); font-size:14px; font-weight:800; }
.card-head small { color:var(--slate-light); font-size:11px; font-variant-numeric:tabular-nums; }
.card-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12.5px; }
.card-row span { color:var(--muted); }
.card-row b { font-family:var(--display); font-size:13px; font-weight:800; white-space:nowrap; }
.card-note { margin:0; color:var(--muted); font-size:12px; }

/* One line under the head saying what state this drawer is in, and how long
   it has been in it. It replaced the pill that used to sit beside the
   cashier's name: the pill said how long, and so did the range, and two
   places saying one thing is how they end up disagreeing. Full width and
   left-aligned, so a long name never pushes it out of the card. */
.card-status { font-size:12px; color:var(--muted); }
.tone-stale { color:var(--danger); font-weight:700; }
.tone-closed-by-other { color:var(--amber); }

/* Variance has three readings, and "exact" is the ordinary case rather
   than an achievement, so it stays the plain text colour. */
.v-exact { color:var(--linen-soft); }
.v-short { color:var(--danger); }
.v-over { color:var(--amber); }
.v-none { color:var(--muted); }

.pill {
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--muted);
}
.pill.matched { border-color:rgba(169,194,209,.5); background:rgba(78,108,136,.28); color:#dcebf2; }
.pill.short, .pill.over { border-color:rgba(224,133,99,.55); background:rgba(224,133,99,.12); color:var(--danger); }
.pill.open, .pill.awaiting { border-color:rgba(240,217,168,.4); background:rgba(240,217,168,.1); color:var(--amber); }

.thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.thumbs a { display:block; line-height:0; }
.thumbs img { width:72px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }

.deposit-summary { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.deposit-summary b { font-family:var(--display); font-size:20px; font-weight:900; }
.deposit-summary small { color:var(--muted); font-size:12px; }

/* One column per field, each holding its own label and box. The label sits
   directly above the input it names, at every width. */
/* Capped, because four short fields have no business spanning a desktop.
   Uncapped, auto-fit gave three ~190px boxes huddled at the left with a
   1000px note underneath them — the note read as a different form. */
.form-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:start; max-width:660px; }
.form-grid > * { min-width:0; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label { font-size:10px; letter-spacing:.14em; }
/* The note is prose, not a figure, so it takes the full row when there is
   one to take rather than being squeezed into a quarter. */
.field-wide { grid-column:1 / -1; }
.form-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 0; }
.photo-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11.5px; }
.reconcile-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0 0; }
.reconcile-state { margin:0; color:var(--muted); font-size:12.5px; }

/* ---- the month ---- */
.range-bar { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin:14px 0 0; }
.range-field { display:flex; flex-direction:column; gap:4px; flex:0 1 auto; min-width:0; }
.range-field label { flex:none; font-size:10px; letter-spacing:.14em; }
.range-bar input[type="date"] { width:auto; max-width:100%; padding:9px 11px; }
.range-bar .segmented, .range-bar .ghost-button { align-self:center; }

/* A wide table scrolls inside its own box. The page itself must never
   scroll sideways — that is how a phone loses the first column. */
.table-wrap { margin:12px 0 0; overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:rgba(13,20,9,.24); }
.month-table { width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
.month-table th, .month-table td { padding:9px 12px; text-align:right; white-space:nowrap; }
.month-table th:first-child, .month-table td:first-child { text-align:left; position:sticky; left:0; background:linear-gradient(180deg,rgba(37,60,29,.96),rgba(20,31,14,.96)); }
.month-table thead th {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate-light); border-bottom:1px solid var(--line);
}
.month-table tbody tr:nth-child(even) { background:rgba(236,234,213,.03); }
.month-table tfoot td { border-top:1px solid var(--line); font-family:var(--display); font-weight:800; }
.month-table td.zero { color:var(--muted); }