/* BOOK panel — IVAC navy design language, top-menu layout. */

:root {
  --navy-900: #0A1733;
  --navy-800: #0F2147;
  --navy-700: #142C5C;
  --navy-600: #1B3A78;
  --navy-500: #234A9A;
  --navy-400: #3D62B0;
  --navy-300: #6B8AC9;
  --navy-200: #A3B6DD;
  --navy-100: #D4DEF0;
  --navy-50:  #EDF1FA;

  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --text: #0A1733;
  --text-muted: rgba(10, 23, 51, 0.62);
  --muted: var(--text-muted);
  --border: #A3B6DD;
  --border-soft: #D4DEF0;

  --primary: #142C5C;
  --primary-hover: #0A1733;
  --primary-text: #FFFFFF;
  --accent: #4F9CFF;
  --accent-hover: #3D62B0;

  --success: #2BB673;
  --warning: #E0A800;
  --danger: #E5484D;

  --row-hover: #EDF1FA;
  --input-bg: #FFFFFF;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(10, 23, 51, 0.08), 0 4px 16px rgba(10, 23, 51, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1226;
    --surface: #0A1733;
    --text: #EDF1FA;
    --text-muted: rgba(237, 241, 250, 0.62);
    --border: #142C5C;
    --border-soft: #0F2147;

    --primary: #234A9A;
    --primary-hover: #1B3A78;
    --accent-hover: #6B8AC9;

    --row-hover: #0F2147;
    --input-bg: #0F2147;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

svg { width: 18px; height: 18px; flex-shrink: 0; }

h1 { font-size: 21px; margin: 0; font-weight: 700; }
.mono, .cell-mono { font-family: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, monospace; font-size: 13.5px; }
.strong, .cell-strong { font-weight: 600; }
.muted { color: var(--text-muted); margin: 4px 0 0; }

/* ---------- layout ---------- */
.wrap { max-width: 1920px; margin: 0 auto; padding: 26px 24px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 26px 24px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px;
  overflow: hidden;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row-center { justify-content: center; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 58px;
  background: linear-gradient(90deg, var(--navy-700) 0%, var(--navy-900) 100%);
  color: #EDF1FA;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(10, 23, 51, 0.18);
}
/* Nothing in the bar is ever allowed to wrap onto a second line. When it stops
   fitting, the breakpoints below drop the optional parts — the "Upcoming"
   pill, then the user's name and role, then the button labels — and the last
   step (760px) moves the tabs onto their own scrolling row. */
.topbar .brand, .topbar nav a, .nav-soon, .topbar-btn, .whoami {
  white-space: nowrap;
}

.topbar .brand { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.topbar nav { display: flex; gap: 6px; margin-right: auto; }
.topbar nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9px;
  color: rgba(237, 241, 250, .78);
  font-weight: 500;
  transition: background .15s, color .15s;
}
.topbar nav a:hover { background: rgba(237, 241, 250, .08); color: #fff; }
.topbar nav a.active { background: var(--navy-500); color: #fff; }

/* A nav item for something that does not exist yet: same shape, dimmed, and
   nothing happens when you click it. */
.nav-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9px;
  color: rgba(237, 241, 250, .42);
  font-weight: 500;
  cursor: default;
  user-select: none;
}
.soon-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(237, 241, 250, .12);
  color: rgba(237, 241, 250, .62);
}

.user-box { display: flex; align-items: center; gap: 12px; }
.user-box { min-width: 0; }
.whoami { display: flex; align-items: center; gap: 9px; min-width: 0; color: rgba(237, 241, 250, .9); font-size: 14px; }
/* The username is the one item in the bar whose length we do not control, so
   it is also the only one allowed to shrink: it gives up exactly the space the
   row is short by and ends in an ellipsis, instead of shoving the buttons off
   the edge. Everything either side of it holds its natural width. */
.user-name { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.topbar .brand, .topbar nav, .avatar, .role-tag, .topbar-btn { flex-shrink: 0; }
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy-500);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.role-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 9px;
  border-radius: 999px;
}
.role-admin { background: #FFD54A; color: #4A3800; }
.role-general { background: rgba(237, 241, 250, .18); color: #fff; }

/* The outlined buttons sitting on the dark bar. `.logout-btn` is the same
   button with a red hover, because that one signs you out. */
.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(237, 241, 250, .25);
  border-radius: 8px;
  background: transparent;
  color: rgba(237, 241, 250, .85);
  font: inherit;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.topbar-btn:hover {
  background: rgba(237, 241, 250, .12);
  border-color: rgba(237, 241, 250, .45);
  color: #fff;
  text-decoration: none;
}
.logout-btn:hover {
  background: rgba(229, 72, 77, .25);
  border-color: rgba(229, 72, 77, .5);
  color: #fff;
}
.topbar-btn svg { width: 15px; height: 15px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--row-hover);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; color: var(--text); background: var(--border-soft); }
.btn svg { width: 15px; height: 15px; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text); }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); color: #fff; }

.btn-danger { background: rgba(229, 72, 77, .12); color: var(--danger); border-color: rgba(229, 72, 77, .35); }
.btn-danger:hover { background: rgba(229, 72, 77, .2); color: var(--danger); }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--row-hover); color: var(--text); }

.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 7px; }
.btn-block { width: 100%; justify-content: center; }

.btn:disabled, button.btn[disabled] {
  background: var(--border-soft);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: .75;
}

/* Square icon-only button — the row actions in the table. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--row-hover); color: var(--text); }
.icon-btn-danger:hover { background: rgba(229, 72, 77, .12); color: var(--danger); }
.icon-btn svg { width: 17px; height: 17px; }

/* Stands where Edit and Delete would be on a finished row. Sized to the
   icon-btn it replaces so the Actions column does not shift width between a
   locked row and an open one. */
.lock-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--text-muted);
  opacity: .75;
}
.lock-mark svg { width: 16px; height: 16px; }

/* ---------- forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 7px; }
.req { color: var(--danger); }

.input, .select,
input[type="text"], input[type="password"], input[type="search"], textarea, select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; }
.input:focus, .select:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 156, 255, .22);
}
.help { color: var(--text-muted); font-size: 12px; margin: 6px 0 0; }
/* Django hands the password rules over as a list. */
.help ul { margin: 0; padding-left: 17px; }
.error { color: var(--danger); font-size: 13px; margin: 6px 0 0; }
.field-error .input, .field-error .select, .field-error textarea, .field-error input {
  border-color: var(--danger);
}

.form-card { padding: 28px; }
.form-foot { text-align: center; color: var(--text-muted); font-size: 13px; margin: 14px 0 0; }

/* The New Booking-only block: candidate details and card information. */
.form-section {
  margin: 22px 0 4px;
  padding: 20px 20px 4px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
}
.form-section[hidden] { display: none; }
/* Booking ref and Current time, hidden in place while Action is New Booking. */
.conditional-field[hidden] { display: none; }
.section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  padding-top: 4px;
}
.form-section .section-title:not(:first-child) {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.section-desc { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.optional { color: var(--text-muted); font-weight: 400; }

/* Expiry and CVV are short — they read better side by side. */
.field-row { display: flex; gap: 14px; }
.field-row > .field { flex: 1; min-width: 0; }
.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.notice {
  background: rgba(224, 168, 0, .1);
  border: 1px solid rgba(224, 168, 0, .4);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 4px;
}

.filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.filters .input { flex: 1 1 280px; width: auto; }
.filters .select { flex: 0 1 180px; width: auto; }

/* ---------- messages ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.msg {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 14px;
  font-weight: 500;
}
.msg-success { background: rgba(43, 182, 115, .1); border-color: rgba(43, 182, 115, .4); color: var(--success); }
.msg-error { background: rgba(229, 72, 77, .1); border-color: rgba(229, 72, 77, .4); color: var(--danger); }
.msg-info { background: rgba(79, 156, 255, .1); border-color: rgba(79, 156, 255, .4); color: var(--accent); }
.msg-warning { background: rgba(224, 168, 0, .1); border-color: rgba(224, 168, 0, .4); color: var(--warning); }

/* ---------- table ----------
   Nothing here ever breaks a word. Free text wraps at spaces, but a DL number,
   a booking ref or a pill label stays in one piece and holds its column open —
   the table grows past the card and `.table-scroll` scrolls it sideways. The
   column percentages are what the browser aims for when there is room to
   spare; auto layout lets a column take more when its content needs it.
   Below ~760px each row becomes a stacked card instead. */
.table-scroll { overflow-x: auto; padding: 0; }
.grid { width: 100%; border-collapse: collapse; table-layout: auto; }
.grid th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.grid td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  font-size: 13px;
}
/* An identifier split across two lines is unreadable, so these never wrap. */
.grid .cell-mono { font-size: 12.5px; white-space: nowrap; }
.grid tbody tr:last-child td { border-bottom: none; }
.grid tbody tr:hover td { background: var(--row-hover); }
.grid .empty { text-align: center; color: var(--text-muted); padding: 36px 12px; }

.row-link { color: var(--text); font-weight: 600; }
.row-link:hover { color: var(--accent); }

/* Column widths — they add up to 100% so nothing spills past the card.
   The admin table carries an extra column and a superuser's a further one
   (Created by), hence the second and third sets. */
.grid .col-name { width: 12%; }
.grid .col-dl { width: 13%; }
.grid .col-ref { width: 9%; }
.grid .col-time { width: 17%; }
.grid .col-center { width: 12%; }
.grid .col-action { width: 9%; }
.grid .col-status { width: 9%; }
.grid .col-notes { width: 15%; }
.grid .col-actions { width: 92px; }

/* Floors for the free-text columns. Once the table is scrolling anyway, a
   column one word wide is worse than a little more scrolling. */
.grid .col-name { min-width: 110px; }
.grid .col-time { min-width: 200px; }
.grid .col-center { min-width: 130px; }
.grid .col-notes { min-width: 160px; }

.grid.grid-admin .col-name { width: 12%; }
.grid.grid-admin .col-dl { width: 12%; }
.grid.grid-admin .col-ref { width: 8%; }
.grid.grid-admin .col-time { width: 15%; }
.grid.grid-admin .col-center { width: 11%; }
.grid.grid-admin .col-action { width: 8%; }
.grid.grid-admin .col-status { width: 8%; }
.grid.grid-admin .col-notes { width: 14%; }
.grid.grid-admin .col-ip { width: 9%; }

/* A superuser sees everyone's rows, so their table alone carries Created by.
   Always on top of grid-admin — a superuser always counts as a panel admin
   (accounts.User.is_panel_admin), so this set never has to stand on its own. */
.grid.grid-super .col-name { width: 11%; }
.grid.grid-super .col-dl { width: 11%; }
.grid.grid-super .col-ref { width: 7%; }
.grid.grid-super .col-time { width: 14%; }
.grid.grid-super .col-center { width: 10%; }
.grid.grid-super .col-action { width: 7%; }
.grid.grid-super .col-status { width: 7%; }
.grid.grid-super .col-notes { width: 13%; }
.grid.grid-super .col-ip { width: 8%; }
.grid.grid-super .col-owner { width: 8%; min-width: 90px; }

/* The card-mode heading fallback — see booking_list.html. */
.title-fallback { display: none; }

.grid .col-actions { white-space: nowrap; text-align: right; padding-left: 4px; }
.grid td.col-actions .icon-btn + .icon-btn { margin-left: 2px; }

/* Slightly tighter than a standalone pill, but still one unbroken line. */
.grid .pill { padding: 3px 9px; font-size: 11.5px; }

/* ---------- status / action pills ----------
   Solid fills with white text. Every colour below is dark enough to carry
   white at this size, so the pills read the same in light and dark mode and
   need no per-theme overrides. */
.pill, .badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: #FFFFFF;
}

/* Green belongs to Completed alone — it is the one "this worked" state.
   Action never uses red: nothing about "Change Booking" is an error. */
.action-new-booking { background: #C2185B; }
.action-change-booking { background: #6A3FB5; }
.action-others { background: #55606F; }

/* Pending keeps the old grey: it is the "nothing has happened yet" state and
   should sit back rather than compete with the colours that mean progress. */
.status-pending { background: #E0E4EA; color: #495563; }
.status-processing { background: #1A56B8; }
/* Teal is the one hue Status has left: On Hold is a pause, not progress and
   not a failure, so it must not read as either. */
.status-on-hold { background: #0F6C7D; }
.status-slot-found { background: #C25E00; }
.status-completed { background: #157347; }
/* Graphite, and the only Status pill that is not a hue: Finished is not a
   further degree of progress, it is the record being closed. It has to read as
   distinct from Completed at a glance, since those two share the archive tab
   and the difference between them is whether the row can still be touched. */
.status-finished { background: #3A4552; }
/* Red is free for Status — Cancelled is the one state that means "this stopped". */
.status-cancelled { background: #B02A37; }

.badge-none { background: var(--border-soft); color: var(--text-muted); }

@media (prefers-color-scheme: dark) {
  .status-pending { background: #2A3648; color: #C2CBD8; }
}

/* Says why the detail page has no Edit and no Delete. Muted rather than red:
   a finished booking is a normal end state, not an error. */
.locked-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--border-soft);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.locked-banner svg { width: 18px; height: 18px; flex: none; }

/* ---------- empty state ---------- */
.empty-state { text-align: center; padding: 56px 24px; }
.empty-state svg { width: 44px; height: 44px; color: var(--navy-300); margin-bottom: 14px; }
.empty-state h2 { font-size: 17px; margin: 0 0 6px; }
.empty-state p { color: var(--text-muted); margin: 0 0 20px; }

/* ---------- pager ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.pager .muted { margin: 0; font-size: 13.5px; }

/* ---------- detail ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 16px;
}
.back-link svg { width: 15px; height: 15px; }

.detail { display: grid; grid-template-columns: 170px 1fr; gap: 14px 24px; margin: 0; padding: 24px; }
.detail dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  align-self: center;
}
.detail dd { margin: 0; }

/* ---------- slot found history ----------
   A list of what the bot reported and what happened to each report. Rows
   rather than a table: the interesting part is the answered/unanswered badge,
   and that reads better beside the slot than in a column of its own. */
.history { list-style: none; margin: 0; padding: 0; }
.history-item { padding: 16px 24px; border-bottom: 1px solid var(--border-soft); }
.history-item:last-child { border-bottom: none; }

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.history-slot { font-weight: 600; }
.history-centre { color: var(--text-muted); font-size: 13.5px; margin: 3px 0 0; }

.history-meta {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px 14px;
  margin: 10px 0 0;
  font-size: 12.5px;
}
.history-meta dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.history-meta dd { margin: 0; color: var(--text-muted); }
/* A slot found that reached nobody is the one line on this page worth
   colouring — it is the failure that is otherwise invisible. */
.history-warn { color: var(--danger); font-weight: 600; }

/* Green for answered, the same amber Slot Found carries for still open —
   this badge is the state of the alert, not of the booking. */
.badge-ack { background: #157347; }
.badge-open { background: #C25E00; }

.history-empty { padding: 20px 24px; margin: 0; color: var(--text-muted); font-size: 13.5px; }
.history + .muted { margin-top: 10px; font-size: 12.5px; }

/* ---------- login ---------- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(79, 156, 255, .14), transparent 60%),
    radial-gradient(700px 450px at 0% 110%, rgba(35, 74, 154, .16), transparent 55%),
    var(--bg);
}
.login-wrap { width: 100%; max-width: 400px; padding: 24px; }
.login-card { padding: 34px 30px 30px; border-radius: 16px; }
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand h1 { font-size: 21px; margin: 0; }
.login-card .msg { margin-bottom: 16px; }
.login-foot { text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 18px; }

.login-mark {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin: 0 auto 14px;
  background: linear-gradient(160deg, var(--navy-500), var(--navy-900));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-mark svg { width: 26px; height: 26px; }

/* ---------- responsive ---------- */

/* No floor width is needed: auto layout already grows the table to whatever
   its unbreakable content needs, and `.table-scroll` scrolls the overflow. */

/* Step 1: the "Upcoming" pill is decoration, so it goes first. */
@media (max-width: 1180px) {
  .topbar { gap: 18px; padding: 0 18px; }
  .nav-soon .soon-tag { display: none; }
}

/* Step 2: the avatar still says who is signed in, so the name and role tag
   can go before anything you click on does. */
@media (max-width: 1060px) {
  .topbar { gap: 14px; padding: 0 16px; }
  .topbar nav a, .nav-soon { padding: 8px 11px; }
  .whoami .role-tag, .whoami .user-name { display: none; }
}

/* Step 3: the two account buttons drop to their icons. */
@media (max-width: 900px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .topbar nav a, .nav-soon { padding: 8px 10px; }
  .topbar-btn .logout-text, .topbar-btn .topbar-btn-text { display: none; }
  .wrap, .wrap-narrow { padding: 18px 14px; }
}

/* Phones: the bar becomes two rows. Brand and account controls share the top
   row, the tabs get the full width underneath and scroll sideways rather than
   pushing the account controls off the screen. */
@media (max-width: 760px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 9px 12px;
  }
  .topbar .brand { white-space: nowrap; }

  .topbar nav {
    order: 3;
    width: 100%;
    margin-right: 0;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a, .nav-soon {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13.5px;
    padding: 7px 11px;
  }
  .topbar nav svg { width: 16px; height: 16px; }

  .user-box { margin-left: auto; gap: 8px; }
  .topbar-btn { padding: 7px 10px; }
}

/* Phones: one card per booking, label on the left, value on the right. */
@media (max-width: 760px) {
  .table-scroll {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .grid, .grid tbody, .grid tr, .grid td { display: block; }
  .grid, .grid.grid-admin { width: 100%; }
  /* Card mode has no columns to hold open, so identifiers may wrap again. */
  .grid .cell-mono { white-space: normal; }

  /* Kept in the accessibility tree — the labels come from data-label instead. */
  .grid thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .grid tr {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .grid tbody tr:hover td { background: transparent; }

  .grid td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: auto;
    padding: 9px 14px;
    text-align: right;
    border-bottom: 1px solid var(--border-soft);
  }
  .grid td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
  }
  /* Inside a card every cell keeps its divider, including the last row's. */
  .grid tbody tr:last-child td { border-bottom: 1px solid var(--border-soft); }
  .grid tbody tr td:last-child { border-bottom: 0; }

  /* The DL number heads the card, so it gets the full width and no label. */
  .grid td.cell-title {
    background: color-mix(in srgb, var(--bg) 55%, var(--surface));
    font-size: 14.5px;
    padding: 12px 14px;
    text-align: left;
  }
  .grid td.cell-title::before { display: none; }
  .grid td.cell-title .title-dash { display: none; }
  .grid td.cell-title .title-fallback { display: inline; }

  .grid td.col-actions {
    width: auto; /* beats the 92px desktop column width, which is set on the same class */
    justify-content: flex-end;
    padding: 8px 10px 8px 14px;
    text-align: right;
  }
  .grid td.col-actions::before { display: none; }

  .filters { padding: 12px; gap: 8px; }
  .filters .input { flex: 1 1 100%; }
  .filters .select { flex: 1 1 calc(50% - 4px); }
  .filters .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

@media (max-width: 640px) {
  .detail { grid-template-columns: 1fr; gap: 4px 0; padding: 18px 16px; }
  .detail dd { margin-bottom: 12px; }

  .history-item { padding: 14px 16px; }
  .history-empty { padding: 16px; }
  .history-meta { grid-template-columns: 80px 1fr; }
}

@media (max-width: 560px) {
  h1 { font-size: 19px; }
  .page-head { gap: 12px; }
  /* The action drops to its own full-width row under the heading. */
  .page-head > .btn, .page-head .btn-row { flex: 1 0 100%; width: 100%; }
  .page-head > .btn, .page-head .btn-row .btn { justify-content: center; }
  .page-head .btn-row .btn { flex: 1; }

  .form-card { padding: 20px 16px; }
  .form-section { padding: 16px 14px 4px; }
  .field-row { flex-direction: column; gap: 0; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn { flex: 1 1 auto; justify-content: center; }

  .pager { gap: 10px; }
  .grid td::before { flex-basis: 42%; }
}