/* ═══════════════════════════════════════════════════════════════════════
   TRYARENA DESIGN SYSTEM
   One stylesheet. Every screen. If a page needs a style that isn't here,
   it belongs here — not in that page.

   The operational product is LIGHT. The consumer site is dark and
   gaming-forward; this is used for eight-hour shifts, read across a
   counter and printed. Violet is the accent, not the atmosphere.
   ═══════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — warm neutrals, not blue-grey. Reads as paper, not screen. */
  --s-app:      #f6f5f8;
  --s-card:     #ffffff;
  --s-sunken:   #f0eef4;
  --s-hover:    #f7f5fb;
  --s-inverse:  #16121f;

  /* Ink */
  --t-1: #16121f;   /* headings, numbers that matter */
  --t-2: #4a4458;   /* body */
  --t-3: #7d7690;   /* labels, meta */
  --t-4: #a8a2b8;   /* placeholder, disabled */

  /* Brand — deeper than the consumer violet so it passes contrast on white */
  --v-700: #5b21b6;
  --v-600: #6d28d9;
  --v-500: #7c3aed;
  --v-100: #ede9fe;
  --v-50:  #f5f3ff;

  /* Semantic. One meaning per colour, everywhere, no exceptions. */
  --ok-600:   #047857;  --ok-100:   #d1fae5;
  --warn-600: #b45309;  --warn-100: #fef3c7;
  --bad-600:  #b91c1c;  --bad-100:  #fee2e2;
  --info-600: #0369a1;  --info-100: #e0f2fe;
  --busy-600: #6d28d9;  --busy-100: #ede9fe;
  --idle-600: #57534e;  --idle-100: #ececf0;

  /* Lines */
  --line:      #e5e2ec;
  --line-soft: #efedf4;
  --line-hard: #d4d0de;

  /* Type */
  --display: 'Syne', -apple-system, sans-serif;
  --body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Scale — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-full: 999px;

  --sh-1: 0 1px 2px rgba(22,18,31,.06);
  --sh-2: 0 2px 8px rgba(22,18,31,.08), 0 1px 2px rgba(22,18,31,.04);
  --sh-3: 0 12px 32px rgba(22,18,31,.14), 0 2px 8px rgba(22,18,31,.06);

  --nav-w: 232px;
  --bar-h: 58px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--s-app);
  color: var(--t-2);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--v-500); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--v-100); }

/* ── LAYOUT ─────────────────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

.nav {
  width: var(--nav-w); flex-shrink: 0;
  background: var(--s-card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.nav-head { padding: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.logo { font-family: var(--display); font-weight: 800; font-size: 18px;
        letter-spacing: -.03em; color: var(--t-1); }
.logo em { font-style: normal; color: var(--v-600); }

.nav-scroll { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-2); }
.nav-group { margin-bottom: var(--sp-5); }
.nav-label {
  font-size: 10.5px; font-weight: 700; color: var(--t-4);
  text-transform: uppercase; letter-spacing: .09em;
  padding: 0 var(--sp-3) var(--sp-2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px var(--sp-3); border-radius: var(--r-sm);
  color: var(--t-2); font-size: 13.5px; font-weight: 500;
  margin-bottom: 1px; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--s-hover); color: var(--t-1); }
.nav-item.on { background: var(--v-50); color: var(--v-700); font-weight: 600; }
.nav-item .ic { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.nav-item.on .ic { opacity: 1; }
.nav-item .count {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  background: var(--s-sunken); color: var(--t-3);
  padding: 1px 6px; border-radius: var(--r-full); font-weight: 600;
}
.nav-item.on .count { background: var(--v-100); color: var(--v-700); }

.nav-foot { padding: var(--sp-3); border-top: 1px solid var(--line-soft); }

.main { flex: 1; margin-left: var(--nav-w); min-width: 0; }

/* ── TOP BAR + SWITCHER ─────────────────────────────────────────────── */
.bar {
  height: var(--bar-h); background: var(--s-card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-5); position: sticky; top: 0; z-index: 30;
}
.burger { display: none; padding: 6px; border-radius: var(--r-sm); color: var(--t-2); }

/* The switcher is the one place the tenant hierarchy is visible.
   Org above, venue below, in one control — so nobody ever has to
   wonder which company's data they are looking at. */
.switch {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 6px var(--sp-3) 6px var(--sp-2); border-radius: var(--r);
  border: 1px solid var(--line); background: var(--s-card);
  min-width: 210px; text-align: left;
}
.switch:hover { border-color: var(--line-hard); background: var(--s-hover); }
.switch-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--v-600); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 13px;
}
.switch-txt { min-width: 0; flex: 1; }
.switch-org {
  font-size: 10.5px; color: var(--t-3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switch-venue {
  font-size: 13.5px; font-weight: 600; color: var(--t-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switch-caret { color: var(--t-4); flex-shrink: 0; }

.pop {
  position: absolute; top: calc(var(--bar-h) - 6px); left: var(--sp-5);
  width: 300px; background: var(--s-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: var(--sp-2); z-index: 60; display: none;
}
.pop.on { display: block; }
.pop-label {
  font-size: 10.5px; font-weight: 700; color: var(--t-4);
  text-transform: uppercase; letter-spacing: .09em;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.pop-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--t-2); text-align: left;
}
.pop-item:hover { background: var(--s-hover); }
.pop-item.on { background: var(--v-50); color: var(--v-700); font-weight: 600; }
.pop-item .meta { margin-left: auto; font-size: 11.5px; color: var(--t-4); }
.pop-sep { height: 1px; background: var(--line-soft); margin: var(--sp-2) 0; }

.bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.avatar {
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--v-100); color: var(--v-700);
  display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
}

/* ── PAGE ───────────────────────────────────────────────────────────── */
.page { padding: var(--sp-6) var(--sp-5) var(--sp-12); max-width: 1440px; }
.page-head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-6); flex-wrap: wrap;
}
h1 { font-family: var(--display); font-size: 22px; font-weight: 700;
     letter-spacing: -.025em; color: var(--t-1); line-height: 1.2; }
h2 { font-family: var(--display); font-size: 16px; font-weight: 700;
     letter-spacing: -.015em; color: var(--t-1); }
h3 { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--t-1); }
.lede { color: var(--t-3); font-size: 13.5px; margin-top: 3px; max-width: 68ch; }
.page-actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 9px 15px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--v-600); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--v-700); }
.btn-default { background: var(--s-card); border-color: var(--line-hard); color: var(--t-1); }
.btn-default:hover:not(:disabled) { background: var(--s-hover); border-color: var(--t-4); }
.btn-quiet { color: var(--t-2); }
.btn-quiet:hover:not(:disabled) { background: var(--s-sunken); }
.btn-danger { background: var(--bad-600); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn-danger-quiet { color: var(--bad-600); border-color: var(--bad-100); background: var(--bad-100); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.btn-block { width: 100%; }

/* ── CARDS ──────────────────────────────────────────────────────────── */
.card {
  background: var(--s-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card-pad { padding: var(--sp-5); }
.card-head {
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: var(--sp-3);
}
.card-head .btn { margin-left: auto; }
.card-body { padding: var(--sp-5); }
.card-foot {
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-soft);
  background: var(--s-sunken); border-radius: 0 0 var(--r-lg) var(--r-lg);
  font-size: 12.5px; color: var(--t-3);
}

/* ── METRICS ────────────────────────────────────────────────────────── */
.metrics {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-bottom: var(--sp-5);
}
.metric {
  background: var(--s-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
.metric-label {
  font-size: 11px; color: var(--t-3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600; margin-bottom: 7px;
}
.metric-value {
  font-family: var(--mono); font-size: 25px; font-weight: 700;
  color: var(--t-1); letter-spacing: -.03em; line-height: 1;
}
.metric-value.sm { font-size: 20px; }
.metric-sub { font-size: 12px; color: var(--t-3); margin-top: 6px; }
.metric-delta { font-weight: 600; }
.metric-delta.up { color: var(--ok-600); }
.metric-delta.down { color: var(--bad-600); }

/* Fill bar for occupancy and usage limits — same component both places */
.fill { height: 5px; background: var(--s-sunken); border-radius: var(--r-full);
        overflow: hidden; margin-top: 9px; }
.fill i { display: block; height: 100%; background: var(--v-600); border-radius: var(--r-full); }
.fill i.warn { background: var(--warn-600); }
.fill i.bad  { background: var(--bad-600); }

/* ── STATUS BADGES ──────────────────────────────────────────────────── */
/* ONE vocabulary across every screen. A resource, a booking and an
   invoice all use these, so staff learn the colours once. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%;
                 background: currentColor; flex-shrink: 0; }
.badge-ok      { background: var(--ok-100);   color: var(--ok-600); }
.badge-busy    { background: var(--busy-100); color: var(--busy-600); }
.badge-warn    { background: var(--warn-100); color: var(--warn-600); }
.badge-bad     { background: var(--bad-100);  color: var(--bad-600); }
.badge-info    { background: var(--info-100); color: var(--info-600); }
.badge-idle    { background: var(--idle-100); color: var(--idle-600); }
.badge-plain::before { display: none; }

/* ── TABLES ─────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; color: var(--t-3);
  text-transform: uppercase; letter-spacing: .08em;
  padding: var(--sp-3) var(--sp-4); background: var(--s-sunken);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
thead th:first-child { border-radius: var(--r) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--r) 0 0; }
tbody td {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--t-2); vertical-align: middle;
}
tbody tr:hover td { background: var(--s-hover); }
tbody tr:last-child td { border-bottom: none; }
.td-strong { color: var(--t-1); font-weight: 600; }
.td-num { font-family: var(--mono); font-variant-numeric: tabular-nums;
          text-align: right; white-space: nowrap; }
.td-quiet { color: var(--t-3); font-size: 12.5px; }
.td-actions { text-align: right; white-space: nowrap; }

/* ── FORMS ──────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block; font-size: 12px; font-weight: 600; color: var(--t-2);
  margin-bottom: 6px;
}
.field .help { font-size: 12px; color: var(--t-3); margin-top: 5px; }
.field .err  { font-size: 12px; color: var(--bad-600); margin-top: 5px; font-weight: 500; }
.input, .select, textarea.input {
  width: 100%; padding: 9px var(--sp-3); font-size: 14px; font-family: inherit;
  background: var(--s-card); border: 1px solid var(--line-hard);
  border-radius: var(--r); color: var(--t-1); transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--v-500);
  box-shadow: 0 0 0 3px var(--v-100);
}
.input::placeholder { color: var(--t-4); }
.input:disabled { background: var(--s-sunken); color: var(--t-4); }
.input.mono { font-family: var(--mono); }
.select { appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' stroke='%237d7690' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field-row-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }

.affix { display: flex; align-items: stretch; }
.affix .pre {
  display: flex; align-items: center; padding: 0 var(--sp-3);
  background: var(--s-sunken); border: 1px solid var(--line-hard); border-right: none;
  border-radius: var(--r) 0 0 var(--r); color: var(--t-3);
  font-family: var(--mono); font-size: 13px;
}
.affix .input { border-radius: 0 var(--r) var(--r) 0; }

/* Toggle chips — used for weekdays, payment methods, filters */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid var(--line-hard); background: var(--s-card);
  font-size: 12.5px; font-weight: 600; color: var(--t-2);
}
.chip:hover { border-color: var(--t-4); }
.chip.on { background: var(--v-600); border-color: var(--v-600); color: #fff; }

.switch-toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.switch-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%;
                       margin: 0; cursor: pointer; z-index: 1; }
.switch-toggle span {
  position: absolute; inset: 0; background: var(--line-hard);
  border-radius: var(--r-full); transition: background .15s;
}
.switch-toggle span::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  box-shadow: var(--sh-1); transition: transform .15s;
}
.switch-toggle input:checked + span { background: var(--v-600); }
.switch-toggle input:checked + span::after { transform: translateX(16px); }

/* ── TABS & FILTERS ─────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5); overflow-x: auto;
}
.tab {
  padding: 9px var(--sp-3); font-size: 13.5px; font-weight: 600;
  color: var(--t-3); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--t-1); }
.tab.on { color: var(--v-700); border-bottom-color: var(--v-600); }
.tab .count {
  margin-left: 6px; font-family: var(--mono); font-size: 11px;
  background: var(--s-sunken); padding: 1px 5px; border-radius: var(--r-full);
}
.tab.on .count { background: var(--v-100); color: var(--v-700); }

.filters {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-4); align-items: center;
}
.filters .input, .filters .select { width: auto; min-width: 150px; }
.search { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.search .input { padding-left: 34px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
              color: var(--t-4); pointer-events: none; }

/* ── MODAL ──────────────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; background: rgba(22,18,31,.4);
  backdrop-filter: blur(2px); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: var(--sp-4);
}
.scrim.on { display: flex; }
.modal {
  background: var(--s-card); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  width: 100%; max-width: 480px; max-height: 90vh;
  display: flex; flex-direction: column;
}
.modal-lg { max-width: 720px; }
.modal-head {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  display: flex; align-items: flex-start; gap: var(--sp-3);
}
.modal-head .lede { margin-top: 4px; }
.modal-x { margin-left: auto; color: var(--t-3); padding: 4px; border-radius: var(--r-sm); }
.modal-x:hover { background: var(--s-sunken); color: var(--t-1); }
.modal-body { padding: 0 var(--sp-5) var(--sp-4); overflow-y: auto; flex: 1; }
.modal-foot {
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-soft);
  display: flex; gap: var(--sp-2); justify-content: flex-end;
}

/* Drawer — for POS bill and resource detail on narrow screens */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--s-card); border-left: 1px solid var(--line);
  box-shadow: var(--sh-3); z-index: 90;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.drawer.on { transform: none; }

/* ── EMPTY / LOADING ────────────────────────────────────────────────── */
/* An empty screen is an invitation to act, not a shrug. */
.empty { text-align: center; padding: var(--sp-12) var(--sp-5); }
.empty-mark {
  width: 44px; height: 44px; border-radius: var(--r-lg); margin: 0 auto var(--sp-4);
  background: var(--v-50); color: var(--v-600); display: grid; place-items: center;
}
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--t-3); font-size: 13.5px; max-width: 42ch;
           margin: 0 auto var(--sp-4); }

.skel { background: linear-gradient(90deg, var(--s-sunken) 25%, #e8e5ee 37%, var(--s-sunken) 63%);
        background-size: 400% 100%; animation: sk 1.3s ease infinite;
        border-radius: var(--r-sm); }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── ALERTS ─────────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); font-size: 13.5px; margin-bottom: var(--sp-3);
  border: 1px solid;
}
.alert-warn { background: var(--warn-100); border-color: #fde68a; color: #78350f; }
.alert-bad  { background: var(--bad-100);  border-color: #fecaca; color: #7f1d1d; }
.alert-info { background: var(--info-100); border-color: #bae6fd; color: #075985; }
.alert b { display: block; margin-bottom: 2px; }
.alert .btn { margin-left: auto; align-self: center; }

.toast {
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  z-index: 200; padding: var(--sp-3) var(--sp-5); border-radius: var(--r);
  background: var(--s-inverse); color: #fff; font-size: 13.5px; font-weight: 500;
  box-shadow: var(--sh-3); opacity: 0; pointer-events: none; transition: opacity .18s;
  max-width: 90vw; text-align: center;
}
.toast.on { opacity: 1; }
.toast.bad { background: var(--bad-600); }

/* ── UTILITIES ──────────────────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-tight { display: flex; align-items: center; gap: var(--sp-2); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stack > * + * { margin-top: var(--sp-3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--sp-3); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.quiet { color: var(--t-3); }
.strong { color: var(--t-1); font-weight: 600; }
.small { font-size: 12.5px; }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.hide { display: none !important; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
/* Desktop and tablet are the operating surface. Mobile must still work
   for owners checking numbers and staff taking an action. */
@media (max-width: 1024px) {
  .nav { transform: translateX(-100%); box-shadow: var(--sh-3); }
  .nav.on { transform: none; }
  .main { margin-left: 0; }
  .burger { display: grid; place-items: center; }
  .pop { left: var(--sp-4); right: var(--sp-4); width: auto; }
}
@media (max-width: 640px) {
  .page { padding: var(--sp-4) var(--sp-3) var(--sp-10); }
  .bar { padding: 0 var(--sp-3); }
  .switch { min-width: 0; flex: 1; }
  h1 { font-size: 19px; }
  .metrics { grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--sp-2); }
  .metric { padding: var(--sp-3); }
  .metric-value { font-size: 21px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .modal { max-width: none; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
  /* Tables become cards rather than horizontal scroll bars */
  .table-cards thead { display: none; }
  .table-cards tbody tr {
    display: block; background: var(--s-card); border: 1px solid var(--line);
    border-radius: var(--r); margin-bottom: var(--sp-2); padding: var(--sp-3);
  }
  .table-cards tbody td {
    display: flex; justify-content: space-between; gap: var(--sp-3);
    padding: 4px 0; border: none; text-align: right;
  }
  .table-cards tbody td::before {
    content: attr(data-label); font-size: 11px; font-weight: 700;
    color: var(--t-3); text-transform: uppercase; letter-spacing: .07em;
    text-align: left; flex-shrink: 0;
  }
  .table-cards tbody tr:hover td { background: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .nav, .bar, .page-actions, .btn { display: none !important; }
  .main { margin: 0; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}