/* ============================================================================
   Layout utilities (.u-*).

   WHY THIS FILE EXISTS:
   SecurityHeadersMiddleware sends `Content-Security-Policy: … style-src 'self'`
   with no 'unsafe-inline'. That directive governs style="" attributes as well as
   <style> blocks, so every inline style attribute in the Razor pages was being
   dropped by the browser and the layout it asked for never applied. 244 of them
   had accumulated across Pages/ - `style="padding:0"`, `style="margin-top:1rem"`
   and the like - all of them silently inert.

   Each one is now a class here. Nothing else changed: every rule below is the
   verbatim declaration its inline attribute carried, so the pages finally render
   the way the markup always said they should.

   WHY NOT TAILWIND UTILITIES:
   Styles/app.css is compiled with the Tailwind CLI into wwwroot/css/app.css, and
   no Node toolchain is installed here - that file is a committed artifact that
   cannot be regenerated. Tailwind only emits the classes it saw at build time,
   so reaching for `mt-4` or `max-w-3xl` would work only where some page happened
   to use it already. These are hand-authored for the same reason app-shell.css,
   auth.css and reports-dashboard.css are.

   SCALE: the numeric suffix counts 0.25rem steps, matching Tailwind's spacing
   scale - u-mt-4 is 1rem, u-w-32 is 8rem, u-mw-192 is 48rem. u-mt-035 is the one
   exception, an odd .35rem that had no step of its own.

   Loaded after app.css in every layout, so a .u-* rule and a Tailwind utility of
   equal specificity resolve in this file's favour.
   ============================================================================ */

/* --- Margin --- */
.u-mt-035 { margin-top: .35rem; }
.u-mt-2 { margin-top: .5rem; }
.u-mt-3 { margin-top: .75rem; }
.u-mt-4 { margin-top: 1rem; }
.u-mt-6 { margin-top: 1.5rem; }
.u-mt-8 { margin-top: 2rem; }

.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: .25rem; }
.u-mb-2 { margin-bottom: .5rem; }
.u-mb-3 { margin-bottom: .75rem; }
.u-mb-4 { margin-bottom: 1rem; }
.u-mb-6 { margin-bottom: 1.5rem; }

.u-ml-1 { margin-left: .25rem; }
.u-ml-2 { margin-left: .5rem; }

.u-m-0 { margin: 0; }
.u-my-4 { margin: 1rem 0; }

/* --- Padding --- */
.u-p-0 { padding: 0; }
.u-p-4 { padding: 1rem; }
.u-p-2-3 { padding: .5rem .75rem; }
.u-p-3-4 { padding: .75rem 1rem; }
.u-pt-3 { padding-top: .75rem; }

/* --- Flex box --- */
.u-gap-2 { gap: .5rem; }
.u-gap-4 { gap: 1rem; }
.u-gap-6 { gap: 1.5rem; }

.u-flex-1 { flex: 1; }
.u-flex-2 { flex: 2; }
.u-flex-row { flex-direction: row; }
.u-flex-wrap { flex-wrap: wrap; }

.u-items-center { align-items: center; }
.u-items-end { align-items: flex-end; }

.u-justify-between { justify-content: space-between; }
.u-justify-end { justify-content: flex-end; }
.u-justify-start { justify-content: flex-start; }
.u-justify-center { justify-content: center; }

/* --- Sizing --- */
.u-w-full { width: 100%; }
.u-w-20 { width: 5rem; }
.u-w-24 { width: 6rem; }
.u-w-28 { width: 7rem; }
.u-w-32 { width: 8rem; }
.u-w-36 { width: 9rem; }

.u-h-auto { height: auto; }
.u-h-9 { height: 2.25rem; }

.u-mw-32 { max-width: 8rem; }
.u-mw-40 { max-width: 10rem; }
.u-mw-64 { max-width: 16rem; }
.u-mw-80 { max-width: 20rem; }
.u-mw-96 { max-width: 24rem; }
.u-mw-128 { max-width: 32rem; }
.u-mw-144 { max-width: 36rem; }
.u-mw-160 { max-width: 40rem; }
.u-mw-168 { max-width: 42rem; }
.u-mw-192 { max-width: 48rem; }

/* --- Text --- */
.u-text-right { text-align: right; }
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-pre-wrap { white-space: pre-wrap; }

/* Table headings: every table style (.app-table, .rpt-table, .iv-table, .ba-table, .bk-table,
   .vs-table, .cn-table) sets `thead th { text-align: left }` at (0,1,2), which beats a bare
   .text-right / .u-text-right (0,1,0) — so a right-aligned figure column had its heading stuck
   on the left over numbers on the right. (0,1,3) wins on all of them, on every layout. */
table thead th.text-right,
table thead th.u-text-right,
table thead th.num { text-align: right; }
table thead th.text-center,
table thead th.u-text-center { text-align: center; }

/* A figure column: right-aligned, and tabular digits so decimals line up down the column. */
table td.num,
table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-inline-block { display: inline-block; }

/* --- Colour --- */

/* Was `color: var(--color-danger, #b91c1c)`. No --color-danger is declared
   anywhere in this project, so the fallback was always the operative value. */
.u-text-danger { color: #B91C1C; }

/* Was `border-top: 1px solid var(--border-subtle, #e5e7eb)`. Same story: no
   --border-subtle exists, so the fallback is the colour that was meant. */
.u-border-t { border-top: 1px solid #E5E7EB; }

/* Was `background: var(--tw-bg-opacity, #f7f5f4)` on a card in
   Staff/Notifications/Templates.cshtml. That one was broken twice over: even
   with CSP allowing it, Tailwind's preflight declares --tw-bg-opacity:1 on html,
   so the var resolved to the number 1 and the whole declaration was invalid -
   the fallback tint could never apply. The tint is what it wanted. */
.u-bg-tint { background: #F7F5F4; }

/* Stock-health swatches on the inventory donut legend. These must stay equal to
   the arc colours the legend labels - see stockDonutSegments in
   Staff/Inventory/Index.cshtml and Staff/Reports/Index.cshtml. */
.u-swatch-ok { background: #059669; }
.u-swatch-low { background: #D97706; }
.u-swatch-out { background: #E11D48; }

/* --- Audit Log viewer (Staff/Audit/Index.cshtml) ---
   Plain CSS because Tailwind is not rebuilt for this page. The filter bar wraps
   into as many columns as fit; the detail modal is an .app-modal (app-components.css)
   widened past .app-modal-lg so two JSON panes can sit side by side on a desktop. */
.audit-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); align-items: end; }
.audit-filter-actions { display: flex; gap: .5rem; align-items: end; }
.audit-row { cursor: pointer; }
.audit-row:hover, .audit-row:focus { background: #F8FAFC; outline: none; }
.audit-ellipsis { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-pager { display: inline-flex; gap: .5rem; align-items: center; }
.app-modal.audit-modal { max-width: 56rem; }
.audit-modal .app-modal-title { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.audit-modal-body { display: flex; flex-direction: column; gap: 1rem; }
.audit-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem 1.25rem; }
.audit-facts dt { font-size: .75rem; color: #64748B; }
.audit-facts dd { font-size: .875rem; color: #0F172A; word-break: break-all; }
.audit-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.audit-values h3 { font-size: .75rem; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .375rem; }
.audit-json { margin: 0; padding: .75rem; max-height: 50vh; overflow: auto; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; font-size: .75rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }


/* ============================================================================
   Booking / Calendar / Occupancy additions: drawer, seat map, resource tiles,
   peak-hour bars. Plain CSS for the same reason as the rest of this file (no
   Tailwind rebuild, CSP forbids inline style attributes).
   ============================================================================ */

/* --- Right-side detail drawer (Pages/Shared/_BookingDrawer.cshtml) --- */
.app-drawer-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, .45);
}
.app-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: 26rem; max-width: 100vw;
  display: flex; flex-direction: column;
  background: #FFFFFF; border-left: 1px solid #E2E8F0;
  box-shadow: -12px 0 32px -12px rgba(15, 23, 42, .25);
  animation: app-drawer-in .18s ease-out;
}
@keyframes app-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .app-drawer { animation: none; } }
.app-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid #E2E8F0;
}
.app-drawer-title { margin: 0; font-size: 1rem; font-weight: 700; color: #0F172A; }
.app-drawer-sub { margin: .125rem 0 0; font-size: .75rem; color: #64748B; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.app-drawer-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none;
  border: 1px solid #E2E8F0; border-radius: .5rem; background: #FFFFFF;
  color: #475569; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.app-drawer-close:hover { background: #F1F5F9; color: #0F172A; }
.app-drawer-close:focus-visible { outline: 2px solid #9E4323; outline-offset: 2px; }
.app-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.app-drawer-foot { padding: .875rem 1.25rem; border-top: 1px solid #E2E8F0; display: flex; gap: .5rem; justify-content: flex-end; }
.app-drawer-dl { display: grid; grid-template-columns: 7rem 1fr; gap: .625rem 1rem; margin: 0; font-size: .8125rem; }
.app-drawer-dl dt { color: #64748B; font-weight: 600; }
.app-drawer-dl dd { margin: 0; color: #0F172A; word-break: break-word; }
@media (max-width: 640px) {
  .app-drawer { width: 100vw; border-left: 0; }
}

/* A table row that opens the drawer. */
tr.app-row-clickable { cursor: pointer; }
tr.app-row-clickable:hover td { background: #F8FAFC; }
tr.app-row-clickable:focus-visible { outline: 2px solid #9E4323; outline-offset: -2px; }

/* --- Calendar: customer lookup results under the filter field --- */
.app-lookup-menu {
  position: absolute; top: 100%; left: 0; z-index: 30; margin-top: .25rem;
  min-width: 16rem; max-height: 16rem; overflow-y: auto;
  background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: .5rem;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .2);
}
.app-lookup-option {
  display: flex; flex-direction: column; width: 100%; padding: .5rem .75rem;
  text-align: left; background: none; border: 0; border-bottom: 1px solid #F1F5F9; cursor: pointer; font-size: .8125rem;
}
.app-lookup-option:last-child { border-bottom: 0; }
.app-lookup-option:hover, .app-lookup-option:focus-visible { background: #F8FAFC; outline: none; }

/* --- Calendar: the table's resource cell carries the shared .app-calendar-event
   block (status colour). The row is the click target, so the block keeps the
   row's cursor and sits flush in the cell. --- */
.app-calendar-event.cal-event-cell { margin: 0; cursor: inherit; max-width: 20rem; }

/* --- Occupancy: state cards (five, wrap evenly) --- */
.app-state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .75rem; }
/* Each card is the shared .app-resource-card (aria-pressed = the active filter);
   these only size the label row and the count as the old tiles had them. */
.app-resource-card .occ-state-label {
  display: flex; align-items: center; gap: .375rem;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.occ-state-dot { width: .5rem; height: .5rem; flex: none; border-radius: 9999px; }
.app-resource-card .occ-state-value { font-size: 1.5rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* --- Occupancy: resource tiles (Visual view) --- */
.app-resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; padding: 1rem; }
.app-resource-status {
  display: flex; flex-direction: column; gap: .5rem;
  border: 1px solid #E2E8F0; border-left-width: 4px; border-radius: .75rem;
  padding: .75rem; background: #FFFFFF;
}
.app-resource-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.app-resource-status-name { font-size: .8125rem; font-weight: 700; color: #0F172A; }
.app-resource-status-type { font-size: .6875rem; color: #64748B; }
.app-resource-status-state { font-size: .6875rem; font-weight: 700; white-space: nowrap; }
/* Occupancy board: the card head and each seat open the resource's page. */
.app-resource-status-link { color: inherit; text-decoration: none; border-radius: .375rem; }
.app-resource-status-link:hover .app-resource-status-name { color: #9E4323; text-decoration: underline; }
.app-resource-status-link:focus-visible, .app-seat-link:focus-visible { outline: 2px solid #9E4323; outline-offset: 2px; }
.app-seat-link { text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.app-seat-link:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15, 23, 42, .12); }

/* --- Occupancy page polish --- */
/* Cards keep their own height: without this a one-line room card stretched to match the tall
   seat-map card beside it, leaving a large empty box. */
.app-resource-grid { align-items: start; }
.app-resource-status { transition: box-shadow .15s ease; }
.app-resource-status:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
/* Status as a soft pill in the state's colour (the text colour comes from the state rules below). */
.occ-state-pill {
  display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
  padding: .125rem .5rem; border-radius: 9999px; background: #F1F5F9;
  font-size: .6875rem; font-weight: 700;
}
.app-resource-status.is-available .occ-state-pill { background: #ECFDF5; color: #047857; }
.app-resource-status.is-reserved .occ-state-pill { background: #FFFBEB; color: #B54D00; }
.app-resource-status.is-occupied .occ-state-pill { background: #EFF6FF; color: #0C66E4; }
.app-resource-status.is-maintenance .occ-state-pill { background: #E2E8F0; color: #475569; }
.app-resource-status.is-blocked .occ-state-pill { background: #FFE4E6; color: #BE123C; }
.app-resource-status.is-inactive .occ-state-pill { background: #F1F5F9; color: #64748B; }
.occ-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding-top: .5rem; border-top: 1px dashed #E2E8F0; font-size: .6875rem; color: #64748B;
}
.occ-card-code {
  padding: .0625rem .375rem; border: 1px solid #E2E8F0; border-radius: .375rem; background: #F8FAFC;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: #475569;
}
.occ-card-size { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; }
.occ-card-size svg { width: .875rem; height: .875rem; }

/* Filter bar: As-of field with a "Now" toggle beside it. */
.occ-asof { display: flex; align-items: center; gap: .5rem; }
.occ-now-btn {
  display: inline-flex; align-items: center; gap: .3rem; height: 2.75rem; padding: 0 .875rem;
  border: 1px solid #E2E8F0; border-radius: .625rem; background: #FFFFFF;
  font: inherit; font-size: .8125rem; font-weight: 600; color: #334155; cursor: pointer; white-space: nowrap;
}
.occ-now-btn svg { width: 1rem; height: 1rem; }
.occ-now-btn:hover { border-color: #CBD5E1; background: #F8FAFC; }
.occ-now-btn.is-active { border-color: #9E4323; background: #FDF6F3; color: #9E4323; cursor: default; }
.occ-now-btn:focus-visible { outline: 2px solid #9E4323; outline-offset: 2px; }
.app-filter-reset:disabled { opacity: .45; cursor: not-allowed; }

/* Peak Hours card. */
.occ-peak-card { display: flex; flex-direction: column; gap: 1rem; }
.occ-peak-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.occ-peak-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 1rem; border: 1px solid #E2E8F0; border-radius: .75rem; background: #F8FAFC;
}
.occ-peak-presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.occ-preset {
  height: 2.25rem; padding: 0 .875rem; border: 1px solid #E2E8F0; border-radius: 9999px; background: #FFFFFF;
  font: inherit; font-size: .75rem; font-weight: 600; color: #334155; cursor: pointer;
}
.occ-preset:hover { border-color: #CBD5E1; color: #0F172A; }
.occ-preset.is-active { border-color: #9E4323; background: #FDF6F3; color: #9E4323; }
.occ-preset:focus-visible { outline: 2px solid #9E4323; outline-offset: 2px; }
.occ-peak-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.occ-peak-range .app-field { min-width: 10rem; }
.occ-peak-show { height: 2.75rem; padding: 0 1.5rem; }
.occ-peak-empty { padding: 1.5rem 1rem; }
@media (max-width: 640px) {
  .occ-peak-form, .occ-peak-range { flex-direction: column; align-items: stretch; }
  .occ-peak-range .app-field { min-width: 0; }
  .occ-asof { flex-wrap: wrap; }
}
.app-resource-status.is-available { border-left-color: #059669; }
.app-resource-status.is-available .app-resource-status-state { color: #047857; }
.app-resource-status.is-reserved { border-left-color: #D97706; }
.app-resource-status.is-reserved .app-resource-status-state { color: #B54D00; }
.app-resource-status.is-occupied { border-left-color: #0C66E4; }
.app-resource-status.is-occupied .app-resource-status-state { color: #0C66E4; }
.app-resource-status.is-maintenance { border-left-color: #64748B; background: #F8FAFC; }
.app-resource-status.is-maintenance .app-resource-status-state { color: #475569; }
.app-resource-status.is-blocked { border-left-color: #E11D48; background: #FFF1F2; }
.app-resource-status.is-blocked .app-resource-status-state { color: #BE123C; }
.app-resource-status.is-inactive { border-left-color: #CBD5E1; background: #F8FAFC; opacity: .75; }
.app-resource-status.is-inactive .app-resource-status-state { color: #64748B; }

/* --- Seat map: one glyph cell per seat (Occupancy Visual view, Resource Detail) --- */
.app-seat-map { display: flex; flex-wrap: wrap; gap: .375rem; }
.app-seat {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 3.25rem; padding: .25rem .375rem;
  border: 1px solid #E2E8F0; border-radius: .5rem; background: #FFFFFF;
  font-size: .625rem; line-height: 1.2; color: #475569;
}
.app-seat-glyph { font-size: 1rem; line-height: 1; }
.app-seat-code { font-weight: 600; max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-seat.is-available { border-color: #A7F3D0; color: #047857; }
.app-seat.is-reserved { border-color: #FCD34D; background: #FFFBEB; color: #B54D00; }
.app-seat.is-occupied { border-color: #93C5FD; background: #EFF6FF; color: #0C66E4; }
.app-seat.is-maintenance { border-color: #CBD5E1; background: #F1F5F9; color: #475569; }
.app-seat.is-blocked { border-color: #FDA4AF; background: #FFF1F2; color: #BE123C; }
.app-seat.is-inactive { border-color: #E2E8F0; background: #F8FAFC; color: #94A3B8; }
.app-seat-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .75rem; color: #475569; }
.app-seat-legend span { display: inline-flex; align-items: center; gap: .25rem; }
/* Resource Detail: a roomier cell with the state spelled out under the code. */
.app-seat.res-seat { min-width: 4.5rem; padding: .375rem .625rem; font-size: .6875rem; }

/* --- Peak hours bar list (Occupancy) --- */
.app-peak-list { display: flex; flex-direction: column; gap: .25rem; }
.app-peak-row { display: grid; grid-template-columns: 3.25rem 1fr 4.5rem; align-items: center; gap: .5rem; font-size: .75rem; color: #475569; }
.app-peak-hour { font-variant-numeric: tabular-nums; font-weight: 600; }
/* The bar is the shared .app-usage-meter track + fill. This is a volume, not a
   used-of-allowance meter, so it is info blue rather than the meter's green; the
   peak hour takes .is-brand (which, loaded later, wins over this).
   PROMOTE: an .is-info fill variant for .app-usage-meter. */
.app-usage-meter-fill.occ-peak-fill { background: #0C66E4; }
.app-peak-row.is-peak .app-peak-hour { color: #9E4323; }
.app-peak-value { text-align: right; font-variant-numeric: tabular-nums; }


/* ============================================================================
   Front Desk / Service Desk additions (SRS 5.5/5.6, 25, 26, 48): recent-activity
   panels (Pages/Staff/FrontDesk/_RecentActivity.cshtml), the included-vs-
   chargeable sub-line on cart add-on rows, the inline Record Payment panel, the
   New Booking drawer body and the benefit Adjust modal. Plain CSS - no Tailwind
   rebuild, and CSP forbids inline style attributes.
   ============================================================================ */
/* Two columns at most: at three, each five-column table was squeezed until invoice
   numbers and timestamps wrapped and the Status column scrolled out of view. */
.desk-activity-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem 1.25rem; align-items: start; }
@media (min-width: 80rem) { .desk-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.desk-activity-section { min-width: 0; }
.desk-activity-heading { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748B; }
.desk-activity-empty { margin: 0; padding: .75rem; border: 1px dashed #E2E8F0; border-radius: 10px; font-size: .8125rem; color: #64748B; }
.desk-activity-table { overflow-x: auto; border: 1px solid #E2E8F0; border-radius: 12px; }
.desk-activity-table .app-table thead th,
.desk-activity-table .app-table tbody td { padding: .625rem .75rem; white-space: nowrap; }
.desk-activity-table .app-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* The add-on item cell carries the plan-credit / chargeable chips, so it may wrap. */
.desk-activity-table .app-table tbody td:has(.desk-activity-strong) { white-space: normal; min-width: 9rem; }
.desk-activity-strong { display: block; font-weight: 600; color: #0F172A; }

/* "Plan credit N / Chargeable M" under an add-on line is the shared
   .app-cart-line-split; in the activity table it needs a little air above it. */
.desk-activity-table .app-cart-line-split { margin-top: .25rem; }

/* A button's leading glyph that swaps for an .app-loading spinner while busy: a
   wrapper Alpine can x-show, kept inline-flex so the glyph stays centred. */
.desk-btn-glyph { display: inline-flex; align-items: center; }

/* Inline Record Payment (Front Desk, after Prepare for Billing). */
.desk-pay-panel { margin-top: 1rem; border: 1px solid #EDF1F6; border-radius: 14px; background: #FFFFFF; padding: 1rem; }
.desk-pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.desk-pay-title { margin: 0; font-size: .9375rem; font-weight: 700; color: #0F172A; }
.desk-pay-outstanding { font-size: .875rem; color: #64748B; }
.desk-pay-outstanding b { color: #9E4323; font-variant-numeric: tabular-nums; }
.desk-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.desk-form-field { display: flex; flex: 1 1 9rem; min-width: 0; flex-direction: column; gap: .375rem; }
.desk-form-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748B; }
.desk-form-hint { margin: .5rem 0 0; font-size: .75rem; color: #64748B; }
.desk-form-stack { display: flex; flex-direction: column; gap: .875rem; }

/* New Booking drawer: availability choices. Whole resources are the shared
   .app-resource-card, as a <label> around a visually hidden radio — the card
   takes the keyboard focus ring from the radio inside it.
   PROMOTE: .app-resource-card:has(input:focus-visible) for label-wrapped inputs. */
.desk-resource-choice { position: relative; }
.app-resource-card.desk-resource-choice:has(input:focus-visible) { outline: 2px solid #9E4323; outline-offset: 2px; }
.desk-seat-grid { display: flex; flex-wrap: wrap; gap: .375rem; }
.desk-seat { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border: 1px solid #E2E8F0; border-radius: 8px; font-size: .75rem; cursor: pointer; }
/* The seat chip wraps the shared .app-checkbox in .app-check-label; keep the chip's own size. */
.desk-seat.app-check-label { gap: .375rem; font-size: .75rem; }
.desk-seat:has(.app-checkbox:checked) { border-color: #9E4323; background: #FDF6F3; }
.desk-section-title { margin: 0 0 .375rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748B; }
.desk-inline-actions { display: inline-flex; align-items: center; gap: .5rem; }

/* Legacy modal body. Service Desk's Adjust modal is now the shared .app-modal;
   these remain for Staff/Inventory/Index.cshtml, which still uses them. */
.desk-modal { padding: 1.25rem; background: #FFFFFF; border-radius: 14px; width: calc(100% - 2rem); }
.desk-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.desk-modal-title { margin: 0; font-size: 1rem; font-weight: 700; color: #0F172A; }
.desk-modal-sub { margin: .125rem 0 0; font-size: .8125rem; color: #64748B; }
.desk-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }