/* ============================================================================
   office-blocks-v1.css — the dashboard's look, written down.
   M163, phase 1 of the office plan. Deliberately not a new look.

   WHAT THIS IS, AND WHAT IT IS NOT
   Every value below was READ out of assets/css/style.css, which is the look the office already
   knows and which the Bookings page is signed off with. Nothing here was designed. The point of
   the file is that those pieces existed only as copies inside each screen's own namespace, so
   every new screen re-invented them, and that is why the new-office screens do not match.

   THE EVIDENCE, COUNTED IN style.css ON 2026-08-13
     the segmented filter   declared 5 times, as .tablehead .seg, .bo-head .seg, .bk-head .seg,
                            .evt-head .seg and .seg-pill, with the same body each time
     the figure card        declared 5 times, as .kband .k, .bk-kband .k, .bo-kband .k and
                            .rv-hero .k, differing only in padding
     the status dot         its 6px circle declared in fifteen places
     the sortable heading   table.attn / table.bo / table.bk / table.ptbl / table.evt each carry
                            their own copy of "cursor: pointer; user-select: none"
     the row actions        declared 5 times — and it has already DRIFTED: gap is 2px at
                            style.css:550 and 4px at :1972. Two screens' hover controls sit
                            differently and nobody chose that. It is the whole argument for
                            this file in one property.

   HOW A SCREEN INHERITS IT, WHICH IS THE PART THAT HAD TO BE MORE THAN AN INTENTION
   The file is linked from includes/layout.php, the single place every screen in this app already
   goes through, so it is present on every page whether or not anybody remembers it. A screen opts
   in by putting class="office-screen" on its container, and then writes class="seg", class="k",
   class="dot ok" and so on. includes/office_blocks.php goes one better and renders those pieces
   for you, so a screen calls a function rather than copying markup.

   WHY EVERYTHING IS SCOPED UNDER .office-screen
   Not tidiness — safety, and it is checkable. No existing file in this app contains the string
   "office-screen" (checked before this was written), so not one rule below can reach any existing
   screen. The Bookings page and the one-booking page are signed off as they stand and this file
   cannot touch them. It also means the older namespaced copies keep winning wherever they exist,
   because .bk-head .seg is more specific than .office-screen .seg would ever need to fight.

   CACHE BUSTING IS THE v1 IN THE FILENAME. Do not edit this file and expect browsers to notice:
   write office-blocks-v2.css and change the link in includes/layout.php. That is the house rule,
   and the query-string version on style.css is a live demonstration of why — it reads ?v=56 in
   includes/layout.php, ?v=48 in receipt.php and ?v=25 on the three password screens, all pointing
   at the same file.
   ========================================================================== */

/* Every value below inherits the tokens style.css already defines in :root — --ink, --muted,
   --line, --line-2, --orange, --green, --blue, --red, --amber and their soft variants. This file
   defines no colour of its own, on purpose: a second palette is a second look. */

.office-screen { min-width: 0; }

/* ── The page head: title, then filters that combine rather than replace ─────
   Taken from the Bookings and Book Orders heads, which are the same head twice. */
.office-screen .head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.office-screen .head h1 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.office-screen .head .count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.office-screen .head .spacer { margin-left: auto; }

/* ── The figure band ────────────────────────────────────────────────────────
   .kband > .k, one .k per figure, .k.hero for the big one. Money in and money out stay in
   separate cards, because the bank statement keeps them separate. */
.office-screen .kband {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    border-bottom: 1px solid var(--line); background: var(--card);
}
.office-screen .kband .k {
    padding: 16px 20px; border-right: 1px solid var(--line-2); position: relative; min-width: 0;
}
.office-screen .kband .k:last-child { border-right: none; }
.office-screen .k-label {
    font-size: 11px; color: var(--muted); text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 500;
}
.office-screen .k-value {
    font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; line-height: 1.05;
}
.office-screen .k.hero .k-value { font-size: 34px; }
.office-screen .k-sub {
    font-size: 12px; color: var(--muted); margin-top: 4px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* The delta pill beside a figure. Already global in style.css; repeated here only so a screen
   using the block set does not have to know which of the two files it came from. */
.office-screen .delta {
    font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.office-screen .delta.up   { background: rgba(46,125,50,0.1); color: var(--green); }
.office-screen .delta.down { background: rgba(198,40,40,0.1); color: var(--red); }
.office-screen .delta.flat { background: var(--line-2); color: var(--muted); }

/* ── The segmented filter (the period buttons, the online/in-person tabs) ──── */
.office-screen .seg { display: flex; background: var(--line-2); padding: 2px; border-radius: 7px; }
.office-screen .seg button {
    padding: 4px 10px; font-size: 12px; font-weight: 500;
    border: none; background: transparent; color: var(--muted);
    cursor: pointer; border-radius: 5px; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
.office-screen .seg button.active {
    background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight: 600;
}
/* The count beside a tab's name, which is how the office reads "how many are in here". */
.office-screen .seg .cpt {
    font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; margin-left: 3px;
}
.office-screen .seg button.active .cpt { color: var(--muted); }

/* ── The status dot ─────────────────────────────────────────────────────────
   One 6px circle, named by what it means rather than by its colour, so a screen says
   class="dot waiting" and not class="dot amber". The colour names in style.css are already
   consistent across five screens: green done, amber waiting, blue in progress, red wrong,
   grey nothing to do. */
.office-screen .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }
.office-screen .dot.done      { background: var(--green); }
.office-screen .dot.waiting   { background: var(--amber); }
.office-screen .dot.progress  { background: var(--blue); }
.office-screen .dot.wrong     { background: var(--red); }
.office-screen .dot.none      { background: var(--muted-2); }
.office-screen .dot.online    { background: var(--blue); }
.office-screen .dot.inperson  { background: var(--green); }
/* The dot plus its word, which is how a status appears in a cell. */
.office-screen .status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--muted); white-space: nowrap;
}

/* ── The search box ───────────────────────────────────────────────────────── */
.office-screen .search { position: relative; }
.office-screen .search input {
    border: 1px solid var(--line); border-radius: 7px;
    padding: 6px 10px 6px 30px; font-family: inherit; font-size: 12.5px;
    background: #fff; width: 240px; outline: none;
    transition: border-color .12s, box-shadow .12s, width .15s;
}
.office-screen .search input:focus {
    border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); width: 300px;
}
.office-screen .search svg {
    position: absolute; top: 50%; left: 9px; transform: translateY(-50%); color: var(--muted-2);
}

/* ── The table ──────────────────────────────────────────────────────────────
   class="tbl" rather than a new per-screen table class, which is the habit this file exists to
   break. The five existing table classes each carry their own identical copy of these rules. */
.office-screen table.tbl { width: 100%; border-collapse: collapse; }
.office-screen table.tbl th {
    text-align: left; padding: 10px 12px; font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
    border-bottom: 1px solid var(--line); background: #fbf9f5; white-space: nowrap;
}
.office-screen table.tbl td {
    padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle;
    font-size: 12.5px;
}
.office-screen table.tbl tr:last-child td { border-bottom: none; }
.office-screen table.tbl tbody tr { transition: background .1s; }
.office-screen table.tbl tbody tr:hover { background: #fbf9f5; }
.office-screen table.tbl tr.sel td { background: var(--orange-50); }
.office-screen table.tbl tr.sel:hover td { background: var(--orange-100); }
/* Numbers line up on the right and share one figure width, so a column of money can be read
   down rather than across. */
.office-screen table.tbl th.num,
.office-screen table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* The density classes the office already has on the existing tables. */
.density-compact  .office-screen table.tbl td,
.density-compact  .office-screen table.tbl th { padding: 7px 12px; }
.density-spacious .office-screen table.tbl td { padding: 15px 14px; }

/* ── The sortable column heading ───────────────────────────────────────────── */
.office-screen table.tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.office-screen table.tbl th.sortable:hover { color: var(--ink); }
.office-screen table.tbl th.sorted { color: var(--ink); }
.office-screen table.tbl th .sortarrow { opacity: 0.4; margin-left: 4px; font-size: 9px; }
.office-screen table.tbl th.sorted .sortarrow { opacity: 1; color: var(--orange); }

/* ── The row actions, revealed on hover ─────────────────────────────────────
   gap is 4px here. It is 2px in one of style.css's five copies and 4px in another, which is the
   drift this file removes rather than reproduces. Buttons vary row by row on purpose: the office
   already reads this column as "what can be done with this one". */
.office-screen .row-actions {
    display: flex; gap: 4px; opacity: 0; transition: opacity .12s; justify-content: flex-end;
}
.office-screen table.tbl tbody tr:hover .row-actions { opacity: 1; }
.office-screen .row-actions .btn { padding: 4px 6px; color: var(--muted); }
.office-screen .row-actions .btn:hover {
    color: var(--ink); background: var(--line-2); border-color: transparent;
}
/* Touch has no hover, so on a small screen the actions are simply always there. */
@media (hover: none) {
    .office-screen .row-actions { opacity: 1; }
}

/* ── The pager ──────────────────────────────────────────────────────────────── */
.office-screen .pager { display: flex; gap: 4px; }
.office-screen .pager button {
    padding: 4px 9px; font-size: 12px; border: 1px solid var(--line);
    background: #fff; border-radius: 5px; cursor: pointer; font-family: inherit;
}
.office-screen .pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.office-screen .pager button.active {
    background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600;
}
.office-screen .pagerow {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-top: 1px solid var(--line); font-size: 12px; color: var(--muted);
}

/* ── The empty state, which says what to do next rather than what went wrong ── */
.office-screen .empty {
    padding: 44px 20px; text-align: center; color: var(--muted); font-size: 13px;
}
.office-screen .empty strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 6px; }
.office-screen .empty .btn { margin-top: 14px; }

/* ── A figure that is older than it looks ───────────────────────────────────
   For the one honest case the caching foundation creates: the hourly job could not reach the
   events system, so the office is looking at the previous hour's answer. Saying so quietly is
   better than showing a fresh-looking wrong number, and better than showing nothing. */
.office-screen .kept {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--amber); background: var(--amber-soft);
    padding: 2px 7px; border-radius: 999px; font-weight: 600;
}

/* ── Narrow screens: the table scrolls inside itself, the page never does ──── */
.office-screen .tblwrap { overflow-x: auto; }
@media (max-width: 900px) {
    .office-screen .kband { grid-auto-flow: row; }
    .office-screen .kband .k { border-right: none; border-bottom: 1px solid var(--line-2); }
    .office-screen .search input,
    .office-screen .search input:focus { width: 100%; }
}