/* =====================================================================
   Visitor System - shared styles
   Import into Bootstrap Studio: Design panel > right-click Styles >
   Import > choose this file. Leave it linked to every page.
   ===================================================================== */

:root {
  /* Pass geometry. Change these two if you ever move to a different
     badge size - everything else follows. */
  --pass-width: 105mm;
  --pass-height: 70mm;

  /* 1 Melton Way brand, sampled from the logo artwork. */
  --brand-navy: #112250;
  --brand-navy-dark: #0a1636;
  --brand-navy-soft: #24356a;

  --brand-gold: #d9b53b;
  --brand-gold-light: #eed654;
  --brand-gold-deep: #b4871a;

  --brand-dark: #112250;
  --brand-muted: #5f6673;
  --brand-border: #ded9cc;
  --brand-accent: #112250;
  --brand-accent-dark: #0a1636;
}

body {
  min-height: 100vh;
  background: #f6f5f1;
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
}

/* ---------- Page shell ---------------------------------------------- */
.visitor-app {
  /* Wide enough for the full navigation and the booking tables to sit on
     one line each on an ordinary office monitor. */
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 16px;
}

.visitor-app.is-narrow {
  max-width: 980px;
}

.app-card {
  background: #fff;
  border: 1px solid #e7e3d8;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(17, 34, 80, .10);
  overflow: hidden;
}

/* Navy band with the white wordmark, and a gold rule underneath to carry
   the brand through. */
.app-header {
  padding: 22px 24px 20px;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
  color: #fff;
  border-bottom: 3px solid var(--brand-gold);
}

/* Logo and title on the left, who is signed in on the right, with the
   navigation on its own row underneath. With seven or eight nav items
   the user block was being pushed onto a second line. */
.app-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.app-logo {
  height: 46px;
  width: auto;
  display: block;
}

.app-titles {
  border-left: 1px solid rgba(255, 255, 255, .28);
  padding-left: 18px;
}

/* The sign-in page has no navigation, so the stacked logo is centred
   above the title rather than sitting beside it. */
.app-logo-stacked {
  height: 96px;
  margin: 0 auto;
}

.app-logo-stacked + .app-titles {
  border-left: 0;
  padding-left: 0;
  text-align: center;
}

.app-logo-stacked ~ .app-titles,
.app-brand:has(.app-logo-stacked) {
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

@media (max-width: 575.98px) {
  .app-titles {
    border-left: 0;
    padding-left: 0;
  }
}

.app-header h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.app-header p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .76);
  font-size: .95rem;
}

.app-header p a {
  color: var(--brand-gold-light);
}

.app-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

/* Top right of the header, above the navigation. */
.app-nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.app-nav-user .nav-user-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.app-nav-user .btn {
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, .32);
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .08);
}

.app-nav-user .btn:hover {
  border-color: var(--brand-gold);
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

@media (max-width: 575.98px) {
  .app-topline {
    align-items: flex-start;
  }

  .app-nav-user {
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
}

.app-nav a {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
  font-size: .95rem;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .08);
}

.app-nav a:hover,
.app-nav a:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

/* Gold fill with navy text: about 7:1 contrast, so the current page is
   obvious without being hard to read. */
.app-nav a[aria-current="page"] {
  background: var(--brand-gold);
  color: var(--brand-navy);
  border-color: var(--brand-gold);
}

/* ---------- Controls ------------------------------------------------- */
.form-label {
  font-weight: 700;
  color: #1f2937;
}

.form-control,
.form-select {
  border-radius: 14px;
  padding: 12px 14px;
  border-color: #8a93a0; /* 3.1:1 against white, so the field can be seen */
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 .2rem rgba(217, 181, 59, .35);
}

/* Keep the browser's own date and time pickers on a light scheme so they
   render with their usual border and shadow rather than adapting to a
   dark system theme. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  color-scheme: light;
}

.btn-pass {
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  background: var(--brand-accent);
  color: #fff;
}

.btn-pass:hover,
.btn-pass:focus {
  background: var(--brand-accent-dark);
  color: #fff;
}

.btn-outline-pass {
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  border: 1px solid #cdd6e1;
  color: #1f2937;
  background: #fff;
}

.btn-outline-pass:hover,
.btn-outline-pass:focus {
  border-color: var(--brand-gold);
  color: var(--brand-navy);
  background: #fdfaef;
}

/* Navy on the light page (15:1); gold on the navy header (7.8:1). Both
   well past the 3:1 a focus indicator needs. */
:focus-visible {
  outline: 3px solid var(--brand-navy);
  outline-offset: 2px;
}

.app-header :focus-visible {
  outline-color: var(--brand-gold);
}

/* ---------- Small pieces --------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2ddcf;
  background: #fbfaf7;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  color: #0f172a;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
}

.status-dot.ok { background: #22c55e; }
.status-dot.warn { background: #f59e0b; }
.status-dot.err { background: #ef4444; }

.small-muted { color: var(--brand-muted); }
.is-hidden { display: none !important; }

.badge-pending {
  background: #fef3c7;
  color: #92400e;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: .78rem;
}

.badge-printed {
  background: #dcfce7;
  color: #166534;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: .78rem;
}

.badge-cancelled {
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: .78rem;
}

.badge-expected {
  background: #e8ecf6;
  color: var(--brand-navy);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: .78rem;
}

.badge-mine {
  display: inline-block;
  margin-top: 3px;
  background: #fdf6dd;
  color: #7a5b0c;
  border: 1px solid var(--brand-gold);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 800;
  font-size: .72rem;
}

/* ---------- Home: expected visitors ---------------------------------- */
.mine-switch .form-check-input:checked {
  background-color: var(--brand-navy);
  border-color: var(--brand-navy);
}

.mine-switch .form-check-label {
  font-weight: 700;
}

.day-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-step {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  padding: .3rem .7rem .45rem;
}

.day-strip {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 3px;
}

.day-tab {
  flex: 1 0 92px;
  border: 1px solid #e2ddcf;
  background: #fbfaf7;
  border-radius: 12px;
  padding: 7px 12px;
  text-align: left;
  color: var(--brand-navy);
  font-weight: 800;
  line-height: 1.25;
}

.day-tab:hover {
  border-color: var(--brand-gold);
}

.day-tab:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: 1px;
}

.day-count {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--brand-muted);
  font-variant-numeric: tabular-nums;
}

.day-tab[aria-pressed="true"] {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}

.day-tab[aria-pressed="true"] .day-count {
  color: rgba(255, 255, 255, .8);
}

/* ---------- Events: invite guests ------------------------------------ */
.event-invite-link {
  color: var(--brand-navy);
  text-decoration: underline;
  text-decoration-color: var(--brand-gold);
  text-underline-offset: 3px;
}

.event-invite-link:hover,
.event-invite-link:focus {
  color: var(--brand-navy-soft);
  text-decoration-thickness: 2px;
}

/* ---------- Preview panes -------------------------------------------- */
.preview-wrap {
  background: #eeece5;
  border-radius: 18px;
  padding: 20px;
  overflow: auto;
}

.preview-wrap.is-centred {
  display: grid;
  place-items: center;
}

.preview-card {
  background: #fff;
  border: 1px solid #e7e3d8;
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(17, 34, 80, .06);
  padding: 18px;
}

.preview-title {
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.preview-sub {
  color: var(--brand-muted);
  margin: 0;
}

.preview-note {
  color: var(--brand-muted);
  font-size: .92rem;
  margin-top: 12px;
  text-align: center;
}

.pass-preview-scale {
  transform-origin: top center;
  max-width: 100%;
}

/* ---------- Employee picker ------------------------------------------ */
.picker-wrap { position: relative; }

.picker-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #e5eaf1;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}

.picker-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.picker-item:hover,
.picker-item.is-active {
  background: #f3f7fb;
}

.picker-name {
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.picker-meta {
  font-size: .86rem;
  color: var(--brand-muted);
  line-height: 1.1;
}

/* ---------- Pending table -------------------------------------------- */
.table-wrap {
  border: 1px solid #e5eaf1;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.table-wrap .table {
  margin: 0;
}

.table-wrap thead th {
  background: #f8fafc;
  font-weight: 800;
  color: #334155;
  white-space: nowrap;
  border-bottom: 2px solid var(--brand-gold);
}

.table-wrap td {
  vertical-align: middle;
}

.row-actions {
  display: flex;
  gap: 8px;
  /* Four icons on one line: wrapping put the delete button underneath
     the others, which made it look like it belonged to the next row. */
  flex-wrap: nowrap;
}

.table-wrap td:last-child,
.table-wrap th:last-child {
  width: 1%;
  white-space: nowrap;
}

.row-actions .btn {
  border-radius: 10px;
  font-weight: 700;
  padding: 6px 12px;
  font-size: .875rem;
}

/* ---------- The pass itself ------------------------------------------- */
.visitor-pass {
  width: var(--pass-width);
  height: var(--pass-height);
  background: #fff;
  border: 1.2mm solid var(--brand-dark);
  border-radius: 5mm;
  box-sizing: border-box;
  padding: 6mm;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--brand-dark);
  position: relative;
  overflow: hidden;
}

.visitor-pass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(19, 91, 101, .08), transparent 45%);
  pointer-events: none;
}

.pass-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8mm;
  border-bottom: .45mm solid var(--brand-border);
  padding-bottom: 3.5mm;
}

.pass-title {
  font-size: 8mm;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.pass-date {
  font-size: 3.2mm;
  line-height: 1.25;
  text-align: right;
  color: #475569;
  white-space: nowrap;
  font-weight: 700;
}

.pass-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 3mm 0;
}

.visitor-name {
  font-size: 10mm;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -.03em;
  word-break: break-word;
}

.business-name {
  margin-top: 3mm;
  font-size: 5.7mm;
  line-height: 1.1;
  font-weight: 700;
  color: #334155;
  word-break: break-word;
}

.company-logo-wrap {
  margin-top: 3mm;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 14mm;
  max-height: 18mm;
}

.company-logo {
  display: block;
  max-width: 58mm;
  max-height: 18mm;
  object-fit: contain;
}

.logo-helper {
  color: var(--brand-muted);
  font-size: .88rem;
  margin-top: 6px;
}

.pass-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6mm;
  border-top: .45mm solid var(--brand-border);
  padding-top: 3mm;
  color: #475569;
  font-size: 3mm;
  font-weight: 700;
}

.pass-footer-right { text-align: right; }

/* The visitor's code, as printed: large enough to read at arm's length. */
.pass-footer-right.is-code {
  font-size: 6mm;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  color: #0f172a;
}

/* ---------- UniFi reminder modal -------------------------------------- */
.unifi-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .68);
  backdrop-filter: blur(4px);
}

.unifi-modal-backdrop.is-active { display: flex; }

.unifi-modal-box {
  width: min(100%, 520px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
  overflow: hidden;
}

.unifi-modal-header {
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--brand-navy-dark), var(--brand-navy-soft));
  color: #fff;
}

.unifi-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.unifi-modal-body { padding: 22px; }

.unifi-modal-body p {
  margin: 0 0 14px;
  color: #334155;
  line-height: 1.45;
}

.unifi-modal-actions {
  display: grid;
  gap: 10px;
}

@media (min-width: 576px) {
  .unifi-modal-actions { grid-template-columns: 1fr 1fr; }
  .unifi-modal-actions .full-width { grid-column: 1 / -1; }
}

/* ---------- Print ------------------------------------------------------
   Paper is a 70mm x 210mm strip. The pass is rotated onto the first
   105mm, the return instructions onto the second 105mm.
   ---------------------------------------------------------------------- */
.print-area { display: none; }

@media print {
  @page { size: 70mm 210mm; margin: 0; }

  html, body {
    width: 70mm !important;
    height: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .visitor-app,
  .unifi-modal-backdrop { display: none !important; }

  .print-area {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 70mm !important;
    height: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .print-rotator {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 105mm !important;
    height: 70mm !important;
    transform-origin: top left !important;
    transform: rotate(-90deg) translateX(-105mm) !important;
  }

  .print-area .visitor-pass {
    width: 105mm !important;
    height: 70mm !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-width: 1mm !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-instructions-area {
    position: absolute !important;
    left: 0 !important;
    top: 105mm !important;
    width: 70mm !important;
    height: 105mm !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .print-instructions-rotator {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 105mm !important;
    height: 70mm !important;
    transform-origin: top left !important;
    transform: rotate(-90deg) translateX(-105mm) !important;
  }

  .print-instructions-pass {
    width: 105mm !important;
    height: 70mm !important;
    position: relative !important;
    background: #fff !important;
  }

  .print-instructions-frame {
    position: absolute !important;
    left: 4mm !important;
    top: 4mm !important;
    right: 4mm !important;
    bottom: 4mm !important;
    border: 1.2mm solid #101827 !important;
    border-radius: 2mm !important;
    box-sizing: border-box !important;
    background: #fff !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .print-instructions-text {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8mm 6mm 0 6mm !important;
    text-align: center !important;
    color: #101827 !important;
    font-size: 3.6mm !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
  }

  .print-instructions-phone {
    display: inline-block !important;
    margin-top: 2mm !important;
    font-size: 4.0mm !important;
    font-weight: 900 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Date and time picker ---------------------------------------
   The browser's native picker is drawn by the browser and cannot be given
   a border by us, which is why it vanished against the page. This panel
   is ours, so it can carry the same card treatment as everything else.
   ---------------------------------------------------------------------- */
.dtp-wrap {
  position: relative;
}

.picker-input {
  cursor: pointer;
  background: #fff;
}

.dtp-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1050;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 2px solid var(--brand-navy);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(17, 34, 80, .28);
  padding: 14px;
}

.dtp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dtp-month {
  font-weight: 800;
  color: var(--brand-navy);
}

.dtp-nav {
  border: 1px solid #dcd7c8;
  background: #fbfaf7;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 800;
  color: var(--brand-navy);
  cursor: pointer;
}

.dtp-nav:hover {
  background: var(--brand-gold-light);
  border-color: var(--brand-gold);
}

.dtp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.dtp-dow {
  font-size: .75rem;
  font-weight: 800;
  color: var(--brand-muted);
  padding-bottom: 4px;
}

.dtp-day {
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 7px 0;
  font-weight: 700;
  color: var(--brand-navy);
  cursor: pointer;
}

.dtp-day:hover {
  background: var(--brand-gold-light);
}

.dtp-day.is-today {
  box-shadow: inset 0 0 0 1px var(--brand-gold);
}

.dtp-day.is-selected {
  background: var(--brand-navy);
  color: #fff;
}

.dtp-time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ece8dc;
}

.dtp-time label {
  font-weight: 800;
  color: var(--brand-navy);
  margin-right: 2px;
}

.dtp-time select {
  border: 1px solid #cdc7b6;
  border-radius: 10px;
  padding: 6px 8px;
  font-weight: 700;
  color: var(--brand-navy);
  background: #fff;
}

.dtp-colon {
  font-weight: 800;
}

.dtp-done {
  margin-left: auto;
  border: 0;
  border-radius: 10px;
  background: var(--brand-navy);
  color: #fff;
  font-weight: 800;
  padding: 7px 14px;
  cursor: pointer;
}

.dtp-done:hover {
  background: var(--brand-navy-dark);
}

/* ---------- Front desk kiosk --------------------------------------------
   Sized for a landscape tablet used standing up: large targets, high
   contrast, nothing that needs precision.
   ------------------------------------------------------------------------ */
.kiosk-body {
  background: var(--brand-navy);
  overflow: hidden;
}

.kiosk {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px clamp(24px, 5vw, 64px) 16px;
  background: linear-gradient(160deg, #ffffff 0%, #f6f5f1 100%);
  border-radius: 0;
}

.kiosk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--brand-gold);
}

.kiosk-logo { height: 52px; width: auto; }

.kiosk-clock {
  font-weight: 700;
  color: var(--brand-muted);
  font-size: 1.05rem;
  text-align: right;
}

.kiosk-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 0;
}

.kiosk-screen.is-hidden { display: none; }

.kiosk-title {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--brand-navy);
  margin: 0 0 10px;
}

.kiosk-sub {
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  color: var(--brand-muted);
  margin: 0 0 26px;
}

.kiosk-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: min(100%, 860px);
}

@media (max-width: 700px) {
  .kiosk-choices { grid-template-columns: 1fr; }
}

.kiosk-choice {
  border: 0;
  border-radius: 22px;
  padding: 38px 24px;
  background: var(--brand-navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(17, 34, 80, .22);
}

.kiosk-choice.is-secondary {
  background: #fff;
  color: var(--brand-navy);
  border: 3px solid var(--brand-navy);
  box-shadow: 0 16px 36px rgba(17, 34, 80, .10);
}

.kiosk-choice:active { transform: translateY(2px); }

.kiosk-choice-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 900;
  letter-spacing: -.02em;
}

.kiosk-choice-sub {
  font-size: 1rem;
  opacity: .82;
}

.kiosk-input {
  width: min(100%, 620px);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: .06em;
  padding: 18px 20px;
  border: 3px solid var(--brand-navy);
  border-radius: 18px;
  background: #fff;
  color: var(--brand-navy);
}

.kiosk-input:focus {
  outline: 4px solid var(--brand-gold);
  outline-offset: 3px;
}

.kiosk-form {
  width: min(100%, 720px);
  text-align: left;
  display: grid;
  gap: 6px;
}

.kiosk-form .kiosk-input {
  width: 100%;
  text-align: left;
  letter-spacing: normal;
  font-size: 1.35rem;
  padding: 13px 16px;
  margin-bottom: 8px;
}

.kiosk-label {
  font-weight: 800;
  color: var(--brand-navy);
  font-size: 1.05rem;
}

.kiosk-optional {
  font-weight: 600;
  color: var(--brand-muted);
  font-size: .9rem;
}

.kiosk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 26px;
}

.kiosk-btn {
  border: 0;
  border-radius: 16px;
  padding: 17px 34px;
  font-size: 1.2rem;
  font-weight: 800;
  background: var(--brand-navy);
  color: #fff;
  cursor: pointer;
  min-width: 190px;
}

.kiosk-btn.is-ghost {
  background: #fff;
  color: var(--brand-navy);
  border: 2px solid #d9d4c5;
}

.kiosk-btn:active { transform: translateY(2px); }

.kiosk-card {
  background: #fff;
  border: 3px solid var(--brand-navy);
  border-radius: 20px;
  padding: 26px 34px;
  min-width: min(100%, 520px);
}

.kiosk-card-name {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 900;
  color: var(--brand-navy);
  letter-spacing: -.02em;
}

.kiosk-card-line {
  font-size: 1.15rem;
  color: #444c63;
  margin-top: 6px;
}

.kiosk-match {
  display: block;
  width: min(100%, 620px);
  margin: 10px auto 0;
  text-align: left;
  border: 2px solid #d9d4c5;
  border-radius: 16px;
  background: #fff;
  padding: 16px 20px;
  cursor: pointer;
}

.kiosk-match:active { transform: translateY(2px); }

.kiosk-match-name {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--brand-navy);
}

.kiosk-match-sub {
  display: block;
  color: var(--brand-muted);
}

.kiosk-msg {
  margin-top: 18px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 14px;
  padding: 12px 18px;
  max-width: 620px;
}

.kiosk-msg.is-error {
  background: #fdecec;
  color: #8f1d1d;
  border: 1px solid #f3c6c6;
}

.kiosk-msg.is-hidden { display: none; }

.kiosk-tick {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: var(--brand-gold-light);
  font-size: 3rem;
  line-height: 92px;
  margin-bottom: 18px;
}

.kiosk-foot {
  text-align: center;
  color: var(--brand-muted);
  font-size: .9rem;
  padding-top: 10px;
  border-top: 1px solid #e8e4d8;
}

.is-unregistered .kiosk-foot {
  color: #8f1d1d;
  font-weight: 700;
}

/* A destructive action needs to look different from the reversible ones
   sitting beside it, without shouting from across the room. */
.btn-danger-soft {
  border: 1px solid #f0c9c9;
  background: #fff5f5;
  color: #9b1c1c;
  font-weight: 700;
}

.btn-danger-soft:hover,
.btn-danger-soft:focus {
  background: #fde8e8;
  border-color: #e2a8a8;
  color: #7f1616;
}

/* ---------- Icon buttons ------------------------------------------------
   Row actions are icons to keep a seven-column table readable. Each one
   still carries a real accessible name, and shows a label on hover or
   keyboard focus so nobody has to guess what a glyph means.
   ------------------------------------------------------------------------ */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid #d8d3c4;
  background: #fff;
  color: var(--brand-navy);
  cursor: pointer;
}

.icon-btn svg {
  width: 19px;
  height: 19px;
  display: block;
  pointer-events: none;
}

.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--brand-gold-light);
  border-color: var(--brand-gold);
}

.icon-btn[disabled] { opacity: .5; cursor: default; }

.icon-btn.is-primary {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}

.icon-btn.is-primary:hover,
.icon-btn.is-primary:focus-visible {
  background: var(--brand-navy-dark);
  border-color: var(--brand-navy-dark);
  color: #fff;
}

.icon-btn.is-danger {
  border-color: #f0c9c9;
  background: #fff5f5;
  color: #9b1c1c;
}

.icon-btn.is-danger:hover,
.icon-btn.is-danger:focus-visible {
  background: #fde8e8;
  border-color: #e2a8a8;
}

/* The hover label. Rendered from data-tip so the button itself stays a
   plain icon, and shown on focus too for keyboard users. */
.icon-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-navy);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
  z-index: 30;
}

.icon-btn:hover::after,
.icon-btn:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Near the right edge of a table the label would be clipped, so the last
   column tucks it inward. */
td:last-child .row-actions .icon-btn:last-child::after {
  left: auto;
  right: 0;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn::after { transition: none; }
}

/* Logo preview beside the upload field, so the person booking can see
   what will actually print. */
.logo-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #e2ddcf;
  border-radius: 12px;
  background: #fbfaf7;
}

.logo-chip img {
  max-height: 42px;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

/* ---------- Settings page ------------------------------------------------ */
.room-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.colour-row {
  display: flex;
  gap: 8px;
}

.colour-row .form-control-color {
  width: 52px;
  flex: 0 0 52px;
  padding: 4px;
}

.brand-preview {
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--brand-navy);
}

.brand-preview-name {
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}

.brand-preview-pill {
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 800;
  font-size: .85rem;
  color: var(--brand-navy);
  background: var(--brand-gold);
}

/* Email log summary strip */
.mail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 12px 16px;
  border: 1px solid #e7e3d8;
  border-radius: 14px;
  background: #fbfaf7;
}

.mail-stat { font-weight: 600; }
.mail-stat strong { font-weight: 800; font-size: 1.1rem; }

/* ---------- Booking confirmation ---------------------------------------- */
.booked-code {
  text-align: center;
  border: 2px solid var(--brand-gold);
  background: #fdf6dd;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 18px;
}

.booked-code-label {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--brand-muted);
}

.booked-code-value {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--brand-navy);
  line-height: 1.1;
  margin-top: 4px;
}

.booked-lines { border-top: 1px solid #ece8dc; }

.booked-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #ece8dc;
  font-size: 1rem;
}

.booked-line span { color: var(--brand-muted); }
.booked-line strong { font-weight: 800; text-align: right; }

/* A visitor still on site after their leaving time - usually somebody who
   forgot to sign out, which matters for a fire register. */
.table-wrap tr.is-overdue td {
  background: #fffbeb;
}

.table-wrap tr.is-overdue td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-gold);
}

/* An uploaded logo is flattened onto white when stored, because it has to
   print on white paper and appear on a white email background. On the
   coloured header that would look like a stray white rectangle, so it is
   given a panel and made to look intentional. */
.app-logo.is-uploaded-logo,
.kiosk-logo.is-uploaded-logo {
  background: #fff;
  padding: 7px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  max-height: 52px;
}

/* ---------- Quick book ---------------------------------------------- */
.quick-book-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-guest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 100%;
  padding: 7px 13px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-dark);
  font: inherit;
  line-height: 1.25;
  text-align: left;
}

.quick-guest:hover,
.quick-guest:focus-visible {
  border-color: var(--brand-gold);
  background: #fdf9ec;
}

.quick-guest-name {
  font-weight: 700;
  font-size: .92rem;
}

.quick-guest-meta {
  font-size: .78rem;
  color: #6b7280;
}

/* ---------- Your name in the header opens My details ----------------- */
a.nav-user-name {
  text-decoration: none;
}

a.nav-user-name:hover [data-user-name],
a.nav-user-name:focus-visible [data-user-name] {
  text-decoration: underline;
}

/* ---------- Calls page ------------------------------------------------ */
.badge-ringing {
  background: #dbeafe;
  color: #1e40af;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: .78rem;
}

.badge-failed {
  background: #fee2e2;
  color: #991b1b;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: .78rem;
}

/* A call still waiting or ringing stands out from finished ones. */
.table-wrap tr.is-live-call td { background: #f5f9ff; }

/* ---------- Paging under long tables --------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-top: 12px;
  font-size: .9rem;
}

.pager-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--brand-muted);
}

.pager-size .form-select { width: auto; }

.pager-info {
  color: var(--brand-muted);
  font-variant-numeric: tabular-nums;
}

.pager-nav {
  display: inline-flex;
  gap: 8px;
}

/* ---------- System status strip (Home, Technical Services) ------------- */
.health-strip { margin-bottom: 1rem; }
.health-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .5rem;
}
.health-part {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .6rem .75rem;
  border: 1px solid #ded9cc;
  border-radius: 12px;
  background: #fff;
}
.health-dot {
  flex: 0 0 auto;
  width: .7rem;
  height: .7rem;
  margin-top: .3rem;
  border-radius: 50%;
  background: #9aa0ab;
}
.health-part.is-ok .health-dot { background: #1f9d55; }
.health-part.is-warn .health-dot { background: #d9a400; }
.health-part.is-bad .health-dot { background: #c62828; }
.health-part.is-bad { border-color: #f0b7b7; background: #fff6f6; }
.health-label { font-weight: 700; font-size: .9rem; }
.health-detail { font-size: .8rem; color: #6b7280; }

/* ---------- Accessibility ----------------------------------------------- */

/* Tick boxes and radio buttons need a visible edge too. */
.form-check-input { border-color: #8a93a0; }

/* Section titles are real headings, so screen reader users can jump
   between them, but they keep their compact look. */
h2.preview-title,
h3.preview-title {
  font-size: inherit;
  line-height: 1.3;
  margin-top: 0;
}

/* "Skip to main content": hidden until it has keyboard focus. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
  color: var(--brand-navy);
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.skip-link:focus { top: 12px; }
#content:focus { outline: none; }

/* Escape hides the button labels until the pointer or focus moves on. */
.tips-off .icon-btn::after { display: none; }

/* ---------- Settings: card headers match the table headers ----------- */
#adminPage .preview-card > .preview-title:first-child {
  margin: -18px -18px 16px;
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 2px solid var(--brand-gold);
  border-radius: 17px 17px 0 0;
  color: #334155;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
}