/* ============================================================================
   Apple design language layer for the Dinkes Situbondo booking app.

   Built from DESIGN.md: tokens + component grammar only. Bootstrap 5 stays the
   layout engine (grid, utilities, modal, offcanvas). Apple ships no CSS package
   for the web, so this file is an honest approximation, not official Apple CSS.

   Rules kept from DESIGN.md:
   - one accent color (#0066cc), neutral canvas (#ffffff / #f5f5f7)
   - SF Pro Display for headlines, SF Pro Text for body, body at 17px
   - radius grammar: 8 / 11 / 18 / pill, nothing in between
   - no shadow on standing chrome; the only exception is the transient modal
     layer, which needs separation from the page behind the scrim
   ========================================================================= */

:root {
  --ds-primary: #0066cc;
  --ds-primary-focus: #0071e3;
  --ds-primary-on-dark: #2997ff;
  /* Solid fills keep AA contrast with white labels in both themes */
  --ds-primary-fill: #0066cc;
  --ds-primary-fill-hover: #0071e3;
  --ds-primary-tint: rgb(0 102 204 / 0.06);

  --ds-ink: #1d1d1f;
  --ds-ink-80: #333333;
  --ds-ink-48: #7a7a7a;

  --ds-canvas: #ffffff;
  --ds-parchment: #f5f5f7;
  --ds-pearl: #fafafc;
  --ds-tile-1: #272729;
  --ds-black: #000000;

  --ds-hairline: #e0e0e0;
  --ds-divider: #f0f0f0;
  --ds-ring: rgb(0 0 0 / 0.12);
  --ds-danger: #b3261e;
  --ds-danger-fill: #b3261e;
  --ds-danger-fill-hover: #8f1f19;

  /* Surfaces that flip between themes */
  --ds-field-bg: #ffffff;
  --ds-row-hover: rgb(0 0 0 / 0.02);
  --ds-subnav-bg: rgb(245 245 247 / 0.8);
  --ds-nav-border: transparent;
  --ds-today-bg: rgb(0 102 204 / 0.05);
  --ds-event-ring: transparent;
  --ds-status-ok: #2f6b60;
  --ds-status-pending: #8a6a2f;

  --ds-r-sm: 8px;
  --ds-r-md: 11px;
  --ds-r-lg: 18px;
  --ds-r-pill: 9999px;

  --ds-section: 80px;
  --ds-gutter: 24px;

  --ds-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Category encoding for calendar events. Muted so they sit next to the one
     accent color instead of competing with it. All pass AA with white text. */
  --ds-room-bighall: #2f6b60;
  --ds-room-minihall: #5c4a6e;
  --ds-room-dc2t: #2f4a6b;
  --ds-room-rpg: #8a6a2f;
  --ds-room-luar: #5a5350;
  --ds-room-pending: #6e6e73;
  --ds-room-cancelled: #8f2f2a;

  --bs-body-font-family: var(--ds-text);
  --bs-body-color: var(--ds-ink);
  --bs-body-bg: var(--ds-canvas);
  --bs-border-color: var(--ds-hairline);
  --bs-link-color: var(--ds-primary);
  --bs-link-hover-color: #0055aa;
  --bs-emphasis-color: var(--ds-ink);
  --bs-secondary-color: var(--ds-ink-48);
  --bs-focus-ring-color: rgb(0 113 227 / 0.25);
}

/* Dark theme. Same grammar, re-mapped surfaces: the band goes black, cards sit
   on it as #1c1c1e tiles, and the accent brightens so links stay readable. */
[data-bs-theme="dark"] {
  --ds-primary: #2997ff;
  --ds-primary-focus: #4aa8ff;
  --ds-primary-on-dark: #2997ff;
  --ds-primary-fill: #0b63c5;
  --ds-primary-fill-hover: #1173d6;
  --ds-primary-tint: rgb(41 151 255 / 0.14);

  --ds-ink: #f5f5f7;
  --ds-ink-80: #d2d2d7;
  --ds-ink-48: #a1a1a6;

  --ds-canvas: #1c1c1e;
  --ds-parchment: #000000;
  --ds-pearl: #2c2c2e;
  --ds-tile-1: #1c1c1e;
  --ds-black: #000000;

  --ds-hairline: #3a3a3c;
  --ds-divider: #2c2c2e;
  --ds-ring: rgb(255 255 255 / 0.18);
  --ds-danger: #ff6b60;
  --ds-danger-fill: #c0392f;
  --ds-danger-fill-hover: #a83228;

  --ds-field-bg: #2c2c2e;
  --ds-row-hover: rgb(255 255 255 / 0.05);
  --ds-subnav-bg: rgb(0 0 0 / 0.72);
  --ds-nav-border: #2c2c2e;
  --ds-today-bg: rgb(41 151 255 / 0.12);
  --ds-event-ring: rgb(255 255 255 / 0.14);
  --ds-status-ok: #5fae9c;
  --ds-status-pending: #c39a4e;

  --bs-body-color: var(--ds-ink);
  --bs-body-bg: var(--ds-canvas);
  --bs-emphasis-color: var(--ds-ink);
  --bs-secondary-color: var(--ds-ink-48);
  --bs-secondary-bg: var(--ds-parchment);
  --bs-tertiary-bg: var(--ds-parchment);
  --bs-border-color: var(--ds-hairline);
  --bs-link-color: var(--ds-primary);
  --bs-link-hover-color: #6cb6ff;
  --bs-focus-ring-color: rgb(41 151 255 / 0.35);
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

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

.ds-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background: var(--ds-canvas);
  color: var(--ds-ink);
  font-family: var(--ds-text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
}

.ds-page h1,
.ds-page h2,
.ds-page h3,
.ds-page p {
  margin: 0;
}

.ds-page a {
  color: var(--ds-primary);
  text-decoration: none;
}

.ds-main {
  flex: 1 0 auto;
}

/* Vertically centres a single card (login) below the 44px nav */
.ds-main--center {
  display: flex;
  align-items: center;
  min-height: calc(100dvh - 44px);
}

/* -------------------------------------------------------------------------- */
/* Typography (DESIGN.md hierarchy)                                           */
/* -------------------------------------------------------------------------- */

.ds-hero {
  font-family: var(--ds-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.28px;
}

.ds-display {
  font-family: var(--ds-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}

.ds-headline {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.374px;
}

.ds-tagline {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: 0.231px;
}

.ds-lead {
  font-family: var(--ds-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.196px;
}

.ds-body {
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
}

.ds-strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.374px;
}

.ds-caption {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: -0.224px;
  color: var(--ds-ink-48);
}

.ds-caption-strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -0.224px;
  color: var(--ds-ink);
}

.ds-fine {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -0.12px;
  color: var(--ds-ink-48);
}

/* -------------------------------------------------------------------------- */
/* Layout                                                                     */
/* -------------------------------------------------------------------------- */

.ds-container {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 24px;
}

.ds-container--wide {
  max-width: 1440px;
}

.ds-section {
  padding-block: var(--ds-section);
}

.ds-band {
  padding-block: 64px;
  background: var(--ds-parchment);
}

.ds-band__header {
  margin-bottom: 32px;
}

.ds-band__header .ds-caption {
  margin-top: 8px;
}

/* -------------------------------------------------------------------------- */
/* Navigation                                                                 */
/* -------------------------------------------------------------------------- */

.ds-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 44px;
  border-bottom: 1px solid var(--ds-nav-border);
  background: var(--ds-black);
  color: #ffffff;
}

.ds-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.ds-nav__brand,
.ds-nav .ds-nav__link {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.12px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.ds-nav__brand {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ds-nav .ds-nav__link {
  opacity: 0.85;
}

.ds-nav .ds-nav__link:is(:hover, :focus-visible, [aria-current="page"]) {
  opacity: 1;
  color: #ffffff;
}

.ds-nav :is(a, button):focus-visible {
  outline: 2px solid var(--ds-primary-on-dark);
  outline-offset: 2px;
  border-radius: var(--ds-r-sm);
}

/* Theme switch. A single icon that shows the mode you would switch to: moon
   while the page is light, sun while it is dark. The icon choice is CSS-only,
   keyed off the html attribute, so it is correct on the very first paint. */
.ds-theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ds-r-pill);
  background: none;
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease;
}

/* Widen the touch target to the full 44px nav height without growing the chip */
.ds-theme-switch::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.ds-theme-switch:is(:hover, :active) {
  background: rgb(255 255 255 / 0.12);
}

/* The generic nav focus ring squares off at 8px; this control is a pill */
.ds-nav .ds-theme-switch:focus-visible {
  border-radius: var(--ds-r-pill);
}

.ds-theme-switch__icon {
  display: block;
}

.ds-theme-switch__icon--sun {
  display: none;
}

[data-bs-theme="dark"] .ds-theme-switch__icon--moon {
  display: none;
}

[data-bs-theme="dark"] .ds-theme-switch__icon--sun {
  display: block;
}

.ds-subnav {
  position: sticky;
  top: 44px;
  z-index: 1020;
  min-height: 52px;
  background: var(--ds-subnav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ds-divider);
}

.ds-subnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding-block: 4px;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--ds-r-pill);
  font-family: var(--ds-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.374px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease,
    border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ds-btn:active {
  transform: scale(0.95);
}

.ds-btn:focus-visible {
  outline: 2px solid var(--ds-primary-focus);
  outline-offset: 2px;
}

.ds-btn--primary {
  background: var(--ds-primary-fill);
  border-color: var(--ds-primary-fill);
  color: #ffffff;
}

.ds-btn--primary:hover {
  background: var(--ds-primary-fill-hover);
  border-color: var(--ds-primary-fill-hover);
  color: #ffffff;
}

.ds-btn--secondary {
  background: transparent;
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.ds-btn--secondary:hover {
  background: var(--ds-primary-tint);
  color: var(--ds-primary);
}

.ds-btn--ghost {
  background: transparent;
  border-color: var(--ds-hairline);
  color: var(--ds-ink);
}

.ds-btn--ghost:hover {
  background: var(--ds-parchment);
  color: var(--ds-ink);
}

.ds-btn--dark {
  min-height: 40px;
  padding: 8px 15px;
  border-radius: var(--ds-r-sm);
  background: var(--ds-ink);
  color: var(--ds-canvas);
  font-size: 14px;
  letter-spacing: -0.224px;
}

.ds-btn--dark:hover {
  background: var(--ds-ink-80);
  color: var(--ds-canvas);
}

.ds-btn--pearl {
  min-height: 40px;
  padding: 8px 14px;
  border: 3px solid var(--ds-divider);
  border-radius: var(--ds-r-md);
  background: var(--ds-pearl);
  color: var(--ds-ink-80);
  font-size: 14px;
  letter-spacing: -0.224px;
}

.ds-btn--pearl:hover {
  background: var(--ds-canvas);
  color: var(--ds-ink);
}

.ds-btn--hero {
  min-height: 52px;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0;
}

.ds-btn--danger {
  background: var(--ds-danger-fill);
  border-color: var(--ds-danger-fill);
  color: #ffffff;
}

.ds-btn--danger:hover {
  background: var(--ds-danger-fill-hover);
  border-color: var(--ds-danger-fill-hover);
  color: #ffffff;
}

.ds-btn--sm {
  min-height: 36px;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: -0.224px;
}

.ds-btn[disabled],
.ds-btn.is-busy {
  cursor: progress;
  opacity: 0.6;
}

/* -------------------------------------------------------------------------- */
/* Surfaces                                                                   */
/* -------------------------------------------------------------------------- */

.ds-card {
  padding: var(--ds-gutter);
  border: 1px solid var(--ds-hairline);
  border-radius: var(--ds-r-lg);
  background: var(--ds-canvas);
}

.ds-card--flush {
  padding: 0;
  overflow: hidden;
}

.ds-tile-dark {
  border-radius: var(--ds-r-lg);
  background: var(--ds-tile-1);
  color: #ffffff;
  padding: 40px;
}

/* Centered card used by the admin login page */
.ds-login {
  max-width: 420px;
  margin-inline: auto;
  padding: 32px;
}

/* -------------------------------------------------------------------------- */
/* Links                                                                      */
/* -------------------------------------------------------------------------- */

.ds-link {
  color: var(--ds-primary);
  font-size: 14px;
  letter-spacing: -0.224px;
  text-decoration: none;
}

.ds-link:hover {
  text-decoration: underline;
}

.ds-link--danger {
  color: var(--ds-danger);
}

.ds-link:focus-visible {
  outline: 2px solid var(--ds-primary-focus);
  outline-offset: 2px;
}

button.ds-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */

.ds-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -0.224px;
  color: var(--ds-ink);
}

.ds-label .ds-required {
  color: var(--ds-ink-48);
  font-weight: 400;
}

.ds-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.12px;
  color: var(--ds-ink-48);
}

.ds-page .form-control,
.ds-page .form-select {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--ds-ring);
  border-radius: var(--ds-r-md);
  background-color: var(--ds-field-bg);
  color: var(--ds-ink);
  font-family: var(--ds-text);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.374px;
  box-shadow: none;
}

.ds-page textarea.form-control {
  min-height: 108px;
  padding: 12px 16px;
}

.ds-page .form-control::placeholder {
  color: var(--ds-ink-48);
  opacity: 1;
}

.ds-page .form-control:focus,
.ds-page .form-select:focus {
  border-color: var(--ds-primary-focus);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
  outline: none;
}

.ds-page .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 0;
  border-color: var(--ds-ring);
  border-radius: 4px;
}

.ds-page .form-check-input:checked {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
}

.ds-page .form-check-input:focus {
  border-color: var(--ds-primary-focus);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

/* Inline filter toolbar (admin queue page) */
.ds-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 24px;
}

.ds-filter__field {
  flex: 0 1 240px;
  min-width: 0;
}

.ds-filter .ds-btn {
  flex: 0 0 auto;
}

@media (max-width: 575px) {
  .ds-filter__field {
    flex: 1 1 100%;
  }

  .ds-filter .ds-btn {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Tables                                                                     */
/* -------------------------------------------------------------------------- */

.ds-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--ds-ink);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
}

.ds-table > :not(caption) > * > * {
  padding: 16px 12px;
  border-bottom: 1px solid var(--ds-divider);
  background-color: transparent;
  box-shadow: none;
  vertical-align: middle;
}

.ds-table thead th {
  padding-top: 0;
  border-bottom: 1px solid var(--ds-hairline);
  color: var(--ds-ink-48);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.224px;
  text-align: left;
  white-space: nowrap;
}

.ds-table tbody tr:last-child > * {
  border-bottom: 0;
}

.ds-table tbody tr:hover > * {
  background-color: var(--ds-row-hover);
}

.ds-table .ds-table__num {
  width: 56px;
  text-align: center;
  color: var(--ds-ink-48);
}

.ds-table .ds-table__actions {
  width: 120px;
  text-align: right;
  white-space: nowrap;
}

.ds-table .ds-table__actions .ds-link + .ds-link {
  margin-left: 16px;
}

/* Date group row injected by upcoming-events.js */
.ds-table tr.upcoming-date-row > td {
  padding-top: 32px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ds-hairline);
  color: var(--ds-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.224px;
}

.ds-table tr.ds-empty > td {
  padding-block: 48px;
  text-align: center;
  color: var(--ds-ink-48);
}

/* Compact empty state inside the booking form summary table */
.ds-table.selected-peserta-table tr.ds-empty > td {
  padding-block: 24px;
}

.ds-table .ds-cell-nowrap {
  white-space: nowrap;
}

/* Scroll container with a sticky header (admin queue) */
.ds-table-scroll {
  max-height: 70vh;
  overflow: auto;
  border-top: 1px solid var(--ds-hairline);
}

.ds-table-scroll .ds-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 12px;
  background: var(--ds-canvas);
}

.ds-table-scroll .ds-table thead th.table-sort-header:hover {
  color: var(--ds-ink);
}

/* Sort indicators added by template/js/sortable.js */
.ds-table th.table-sort-header {
  cursor: pointer;
  user-select: none;
}

.ds-table th.table-sort-asc::after,
.ds-table th.table-sort-desc::after {
  margin-left: 6px;
  color: var(--ds-ink-48);
  font-size: 12px;
}

.ds-table th.table-sort-asc::after {
  content: "\2191";
}

.ds-table th.table-sort-desc::after {
  content: "\2193";
}

/* Status with a muted dot, used instead of saturated badges */
.ds-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: -0.224px;
  color: var(--ds-ink-80);
  white-space: nowrap;
}

.ds-status__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--ds-r-pill);
  background: var(--ds-ink-48);
}

.ds-status--ok .ds-status__dot {
  background: var(--ds-status-ok);
}

.ds-status--pending .ds-status__dot {
  background: var(--ds-status-pending);
}

/* Admin queue table */
.ds-table--admin .adm-date {
  width: 17%;
  white-space: nowrap;
  color: var(--ds-ink-80);
}

.ds-table--admin .adm-date time {
  color: inherit;
}

.ds-table--admin .adm-time {
  display: block;
  color: var(--ds-ink-48);
  font-size: 12px;
}

.ds-table--admin .adm-title {
  width: 35%;
}

.ds-table--admin .adm-room {
  width: 13%;
  white-space: nowrap;
}

.ds-table--admin .adm-user {
  width: 15%;
}

.ds-table--admin .adm-status {
  width: 12%;
}

.ds-table--admin .adm-actions {
  width: 10%;
  text-align: right;
  white-space: nowrap;
}

.ds-table--admin .adm-actions form {
  display: inline-block;
  margin: 0;
}

.ds-table--admin .adm-actions .ds-link + .ds-link,
.ds-table--admin .adm-actions .ds-link + form,
.ds-table--admin .adm-actions form + .ds-link,
.ds-table--admin .adm-actions form + form {
  margin-left: 16px;
}

/* -------------------------------------------------------------------------- */
/* Calendar                                                                   */
/* -------------------------------------------------------------------------- */

.ds-calendar-frame {
  position: relative;
  height: 640px;
}

.ds-calendar-frame #calendar {
  position: absolute;
  inset: 0;
}

.ds-calendar-frame .fc-header-toolbar {
  padding: 16px 20px 0;
  margin-bottom: 8px;
}

.ds-calendar-frame .fc-header-toolbar h2 {
  margin: 0;
  font-family: var(--ds-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.231px;
  color: var(--ds-ink);
}

.ds-calendar-frame .fc-button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ds-ring);
  border-radius: var(--ds-r-pill);
  background: var(--ds-canvas);
  background-image: none;
  color: var(--ds-ink);
  font-family: var(--ds-text);
  font-size: 14px;
  letter-spacing: -0.224px;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
}

.ds-calendar-frame .fc-button:is(:hover, :focus) {
  background: var(--ds-parchment);
  color: var(--ds-ink);
  border-color: var(--ds-ring);
  box-shadow: none;
}

.ds-calendar-frame .fc-button:focus-visible {
  outline: 2px solid var(--ds-primary-focus);
  outline-offset: 2px;
}

.ds-calendar-frame .fc-button.fc-state-active,
.ds-calendar-frame .fc-button:active {
  background: var(--ds-ink);
  border-color: var(--ds-ink);
  color: var(--ds-canvas);
  box-shadow: none;
}

.ds-calendar-frame .fc-button-group > .fc-button {
  border-radius: 0;
}

.ds-calendar-frame .fc-button-group > .fc-button:first-child {
  border-radius: var(--ds-r-pill) 0 0 var(--ds-r-pill);
}

.ds-calendar-frame .fc-button-group > .fc-button:last-child {
  border-radius: 0 var(--ds-r-pill) var(--ds-r-pill) 0;
}

.ds-calendar-frame .fc-head td,
.ds-calendar-frame .fc-day-header {
  padding: 12px 8px;
  border-color: var(--ds-hairline);
  color: var(--ds-ink-48);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.12px;
  text-transform: uppercase;
}

.ds-calendar-frame .fc-day {
  border-color: var(--ds-divider);
}

.ds-calendar-frame .fc-day-number {
  padding: 6px 8px;
  color: var(--ds-ink-48);
  font-size: 14px;
}

.ds-calendar-frame .fc-day.fc-today {
  background: var(--ds-today-bg);
}

.ds-calendar-frame .fc-day.fc-today .fc-day-number {
  color: var(--ds-primary);
  font-weight: 600;
}

.ds-calendar-frame .fc-event {
  padding: 2px 6px;
  border: 0;
  border-radius: var(--ds-r-sm);
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.ds-calendar-frame .fc-event:focus-visible {
  outline: 2px solid var(--ds-primary-focus);
  outline-offset: 1px;
}

.ds-calendar-frame .fc-more {
  color: var(--ds-primary);
  font-size: 12px;
}

.ds-calendar-frame .fc-list-heading td {
  padding: 10px 12px;
  border-color: var(--ds-divider);
  background: var(--ds-parchment);
  color: var(--ds-ink-48);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.12px;
  text-transform: uppercase;
}

.ds-calendar-frame .fc-list-heading td a {
  color: inherit;
  text-decoration: none;
}

.ds-calendar-frame .fc-list-heading td a:hover {
  color: var(--ds-ink);
}

.ds-calendar-frame .fc-list-item td {
  padding: 12px;
  border-color: var(--ds-divider);
}

.ds-calendar-frame .fc-list-item-title {
  font-size: 14px;
}

.ds-calendar-frame .fc-list-item-time {
  font-size: 12px;
  color: var(--ds-ink-48);
}

.ds-calendar-frame .fc-list-empty {
  background: transparent;
  color: var(--ds-ink-48);
  font-size: 14px;
}

/* -------------------------------------------------------------------------- */
/* Legend                                                                     */
/* -------------------------------------------------------------------------- */

.ds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 17px;
}

.ds-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: -0.224px;
  color: var(--ds-ink-80);
}

.ds-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-room-pending);
  flex: 0 0 auto;
}

.ds-legend__dot--bighall { background: var(--ds-room-bighall); }
.ds-legend__dot--minihall { background: var(--ds-room-minihall); }
.ds-legend__dot--dc2t { background: var(--ds-room-dc2t); }
.ds-legend__dot--rpg { background: var(--ds-room-rpg); }
.ds-legend__dot--luar { background: var(--ds-room-luar); }
.ds-legend__dot--pending { background: var(--ds-room-pending); }
.ds-legend__dot--cancelled { background: var(--ds-room-cancelled); }

/* -------------------------------------------------------------------------- */
/* Modal                                                                      */
/* -------------------------------------------------------------------------- */

.ds-modal .modal-content {
  border: 0;
  background: var(--ds-canvas);
  border-radius: var(--ds-r-lg);
  /* Transient overlay layer only. Standing chrome stays shadow-free. */
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.18);
}

.ds-modal .modal-header {
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ds-divider);
}

.ds-modal .modal-title {
  font-family: var(--ds-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: 0.231px;
  color: var(--ds-ink);
}

.ds-modal .modal-body {
  padding: 24px;
}

.ds-modal .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--ds-divider);
  gap: 12px;
}

.ds-modal .modal-footer > * {
  margin: 0;
}

.ds-modal .btn-close {
  padding: 8px;
  border-radius: var(--ds-r-pill);
  box-shadow: none;
  opacity: 0.5;
}

.ds-modal .btn-close:hover {
  opacity: 1;
}

.ds-modal .btn-close:focus-visible {
  outline: 2px solid var(--ds-primary-focus);
  outline-offset: 2px;
}

.ds-modal .modal-body {
  max-height: calc(100dvh - 220px);
  overflow-y: auto;
}

@media (max-width: 767px) {
  .ds-modal .modal-body {
    max-height: calc(100dvh - 180px);
  }
}

/* Event detail rendered by the controller as a two-column list */
.ds-detail {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 10px 24px;
  margin: 0;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
}

.ds-detail dt {
  color: var(--ds-ink-48);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  padding-top: 2px;
}

.ds-detail dd {
  margin: 0;
  color: var(--ds-ink);
}

/* -------------------------------------------------------------------------- */
/* Alerts                                                                     */
/* -------------------------------------------------------------------------- */

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 24px;
  border: 1px solid var(--ds-hairline);
  border-radius: var(--ds-r-md);
  background: var(--ds-pearl);
  color: var(--ds-ink);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
}

.ds-alert .bi {
  color: var(--ds-primary);
  font-size: 17px;
  line-height: 1.43;
}

.ds-alert--danger .bi {
  color: var(--ds-danger);
}

/* -------------------------------------------------------------------------- */
/* SweetAlert (vendor 1.x), restyled to the design tokens                     */
/* -------------------------------------------------------------------------- */

.sweet-alert {
  padding: 32px 24px 24px;
  border-radius: var(--ds-r-lg);
  background: var(--ds-canvas);
  font-family: var(--ds-text);
  color: var(--ds-ink);
}

.sweet-alert h2 {
  margin: 20px 0 8px;
  font-family: var(--ds-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: 0.231px;
  color: var(--ds-ink);
}

.sweet-alert p {
  font-size: 15px;
  line-height: 1.47;
  letter-spacing: -0.224px;
  color: var(--ds-ink-48);
}

.sweet-alert button {
  min-height: 40px;
  margin: 24px 4px 0;
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: var(--ds-r-pill);
  font-family: var(--ds-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  box-shadow: none;
}

.sweet-alert button.confirm {
  background-color: var(--ds-primary-fill);
}

.sweet-alert button.confirm:hover {
  background-color: var(--ds-primary-fill-hover);
}

.sweet-alert button.cancel {
  border-color: var(--ds-hairline);
  background-color: var(--ds-pearl);
  color: var(--ds-ink-80);
}

.sweet-alert button.cancel:hover {
  background-color: var(--ds-hairline);
}

.sweet-alert button:focus-visible {
  outline: 2px solid var(--ds-primary-focus);
  outline-offset: 2px;
}

.sweet-alert .sa-icon.sa-info {
  border-color: var(--ds-primary);
}

.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after {
  background-color: var(--ds-primary);
}

.sweet-alert .sa-icon.sa-warning {
  border-color: var(--ds-status-pending);
}

.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot {
  background-color: var(--ds-status-pending);
}

.sweet-alert .sa-icon.sa-success {
  border-color: var(--ds-status-ok);
}

.sweet-alert .sa-icon.sa-success .sa-line {
  background-color: var(--ds-status-ok);
}

/* SweetAlert 1.x masks the success check with opaque white shapes; map them
   to the dialog surface so they do not glow white in dark mode. */
.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after,
.sweet-alert .sa-icon.sa-success .sa-fix {
  background: var(--ds-canvas);
}

.sweet-alert .sa-icon.sa-error {
  border-color: var(--ds-danger);
}

.sweet-alert .sa-icon.sa-error .sa-line {
  background-color: var(--ds-danger);
}

/* -------------------------------------------------------------------------- */
/* DataTables chrome                                                          */
/* -------------------------------------------------------------------------- */

.ds-dt .dataTables_wrapper {
  color: var(--ds-ink-48);
  font-size: 14px;
  letter-spacing: -0.224px;
}

.ds-dt .dataTables_wrapper .dataTables_filter input,
.ds-dt .dataTables_wrapper .dataTables_length select {
  min-height: 44px;
  margin-left: 8px;
  padding: 0 20px;
  border: 1px solid var(--ds-ring);
  border-radius: var(--ds-r-pill);
  background-color: var(--ds-field-bg);
  color: var(--ds-ink);
  font-size: 14px;
  box-shadow: none;
}

.ds-dt .dataTables_wrapper .dataTables_filter input:focus,
.ds-dt .dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--ds-primary-focus);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
  outline: none;
}

.ds-dt .dataTables_wrapper .dataTables_filter,
.ds-dt .dataTables_wrapper .dataTables_length {
  margin-bottom: 17px;
}

/* Vendor CSS paints these labels #333, which vanishes on the dark canvas */
.ds-dt .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_processing, .dataTables_paginate) {
  color: var(--ds-ink-48);
}

.ds-dt .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 36px;
  height: 36px;
  margin-left: 4px;
  padding: 8px 12px;
  border: 1px solid transparent !important;
  border-radius: var(--ds-r-pill) !important;
  background: transparent !important;
  color: var(--ds-primary) !important;
  font-size: 14px;
}

.ds-dt .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ds-parchment) !important;
  border-color: var(--ds-hairline) !important;
  color: var(--ds-primary) !important;
}

.ds-dt .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.ds-dt .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ds-primary-fill) !important;
  border-color: var(--ds-primary-fill) !important;
  color: #ffffff !important;
}

.ds-dt .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.ds-dt .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: transparent !important;
  color: var(--ds-ink-48) !important;
  opacity: 0.6;
}

.ds-dt .dataTables_wrapper .dataTables_info {
  padding-top: 12px;
}

.ds-dt table.dataTable {
  border-collapse: collapse !important;
  border-bottom: 0;
}

/* Vendor CSS paints rows white; keep them on the card surface instead */
.ds-dt table.dataTable tbody tr,
.ds-dt table.dataTable.stripe tbody tr.odd,
.ds-dt table.dataTable.stripe tbody tr.even,
.ds-dt table.dataTable.display tbody tr.odd,
.ds-dt table.dataTable.display tbody tr.even {
  background-color: transparent;
}

.ds-dt table.dataTable tbody tr.selected,
.ds-dt table.dataTable tbody tr.selected > * {
  background-color: var(--ds-primary-tint);
  color: var(--ds-ink);
}

.ds-dt table.dataTable thead th,
.ds-dt table.dataTable tfoot th {
  border-top: 0;
  border-bottom: 1px solid var(--ds-hairline) !important;
}

.ds-dt table.dataTable.no-footer {
  border-bottom: 0;
}

.ds-dt table.dataTable tbody tr:last-child > td {
  border-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* -------------------------------------------------------------------------- */

.ds-stack {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ds-muted {
  color: var(--ds-ink-48);
}

.ds-divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--ds-divider);
}

/* Off-screen anti-bot field, never focusable */
.booking-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden-focusable:focus-visible {
  outline: 2px solid var(--ds-primary-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .ds-section {
    padding-block: 64px;
  }

  .ds-band {
    padding-block: 48px;
  }

  .ds-calendar-frame {
    height: 560px;
  }
}

@media (max-width: 767px) {
  .ds-container {
    padding-inline: 17px;
  }

  .ds-section {
    padding-block: 48px;
  }

  .ds-display {
    font-size: 34px;
    letter-spacing: -0.374px;
  }

  .ds-headline {
    font-size: 28px;
  }

  .ds-lead {
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 0.231px;
  }

  .ds-tagline {
    font-size: 17px;
    letter-spacing: -0.374px;
  }

  .ds-card {
    padding: 17px;
  }

  .ds-card--flush {
    padding: 0;
  }

  .ds-calendar-frame {
    height: 480px;
  }

  .ds-calendar-frame .fc-header-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 12px 0;
  }

  .ds-calendar-frame .fc-center {
    flex: 1 1 100%;
    order: -1;
    text-align: center;
  }

  .ds-calendar-frame .fc-right {
    margin-left: auto;
  }

  .ds-calendar-frame .fc-button {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ds-calendar-frame .fc-header-toolbar h2 {
    font-size: 17px;
  }

  .ds-calendar-frame .fc-head td,
  .ds-calendar-frame .fc-day-header {
    font-size: 11px;
  }

  .ds-btn--hero {
    width: 100%;
  }

  .ds-nav__brand {
    max-width: 55vw;
  }

  .ds-detail {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .ds-detail dt {
    padding-top: 12px;
  }
}

@media (max-width: 767px) {
  .ds-table--stack thead {
    display: none;
  }

  .ds-table--stack,
  .ds-table--stack tbody {
    display: block;
    width: 100%;
  }

  .ds-table--stack tbody tr {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--ds-divider);
  }

  .ds-table--stack tbody tr:last-child {
    border-bottom: 0;
  }

  .ds-table--stack tbody td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .ds-table--stack tbody tr > td.text-center,
  .ds-table--stack tbody tr > td.ds-table__num {
    text-align: left !important;
  }

  .ds-table--stack tbody tr.upcoming-date-row {
    padding: 24px 0 8px;
    border-bottom: 1px solid var(--ds-hairline);
  }

  .ds-table--stack tbody tr.upcoming-date-row > td {
    padding: 0;
    border: 0;
    font-weight: 600;
    color: var(--ds-ink);
  }

  .ds-table--stack tbody tr.ds-empty {
    padding: 32px 0;
  }

  .ds-table--stack tbody tr.ds-empty > td {
    text-align: center;
    color: var(--ds-ink-48);
  }

  .ds-table--stack tbody tr:not(.upcoming-date-row):not(.ds-empty) {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
  }

  .ds-table--stack tbody tr:not(.upcoming-date-row):not(.ds-empty) > td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 3;
    color: var(--ds-ink-48);
  }

  .ds-table--stack tbody tr:not(.upcoming-date-row):not(.ds-empty) > td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    color: var(--ds-ink);
    font-weight: 600;
  }

  .ds-table--stack tbody tr:not(.upcoming-date-row):not(.ds-empty) > td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    color: var(--ds-ink-48);
  }

  .ds-table--stack tbody tr:not(.upcoming-date-row):not(.ds-empty) > td:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
    color: var(--ds-ink-48);
  }

  .ds-table--stack tbody tr:not(.upcoming-date-row):not(.ds-empty) > td:nth-child(4).ds-table__actions {
    text-align: left;
    padding-top: 6px;
  }

  .ds-table--stack tbody tr:not(.upcoming-date-row):not(.ds-empty) > td.ds-table__actions .ds-link + .ds-link {
    margin-left: 20px;
  }

  .ds-dt .dataTables_wrapper .dataTables_filter,
  .ds-dt .dataTables_wrapper .dataTables_length {
    float: none;
    width: 100%;
    margin-bottom: 12px;
    text-align: left;
  }

  .ds-dt .dataTables_wrapper .dataTables_filter input,
  .ds-dt .dataTables_wrapper .dataTables_length select {
    margin: 8px 0 0;
  }

  /* The label is inline-block, so a percentage width on the input resolves
     against the shrink-to-fit label instead of the row. Make it a block. */
  .ds-dt .dataTables_wrapper .dataTables_filter label,
  .ds-dt .dataTables_wrapper .dataTables_length label {
    display: block;
    width: 100%;
    margin: 0;
  }

  .ds-dt .dataTables_wrapper .dataTables_filter input {
    width: 100%;
  }

  .ds-dt .dataTables_wrapper .dataTables_paginate {
    float: none;
    margin-top: 16px;
    text-align: left;
  }

  .ds-dt .dataTables_wrapper .dataTables_info {
    float: none;
    padding-top: 16px;
  }

  .ds-login {
    padding: 24px;
  }
}

/* Admin queue on tablets and phones: rows become cards, header hidden */
@media (max-width: 991px) {
  .ds-table--admin thead {
    display: none;
  }

  .ds-table--admin,
  .ds-table--admin tbody {
    display: block;
    width: 100%;
  }

  .ds-table--admin tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ds-divider);
  }

  .ds-table--admin tbody tr:last-child {
    border-bottom: 0;
  }

  .ds-table--admin tbody td {
    display: block;
    width: auto !important;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .ds-table--admin .adm-title {
    grid-column: 1 / -1;
    grid-row: 1;
    color: var(--ds-ink);
    font-weight: 600;
  }

  .ds-table--admin .adm-date {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
  }

  .ds-table--admin .adm-time {
    display: inline;
    margin-left: 6px;
  }

  .ds-table--admin .adm-status {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    font-size: 12px;
  }

  .ds-table--admin .adm-room {
    grid-column: 1;
    grid-row: 3;
    padding-top: 6px;
    font-size: 14px;
  }

  .ds-table--admin .adm-user {
    grid-column: 2;
    grid-row: 3;
    padding-top: 6px;
    justify-self: end;
    font-size: 14px;
    color: var(--ds-ink-48);
    text-align: right;
  }

  .ds-table--admin .adm-actions {
    grid-column: 1 / -1;
    grid-row: 4;
    padding-top: 10px;
    text-align: left;
  }

  .ds-table--admin .adm-actions .ds-link {
    font-size: 14px;
  }

  .ds-table-scroll {
    max-height: none;
    overflow: visible;
    border-top: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Dark theme: vendor surfaces                                                */
/* -------------------------------------------------------------------------- */

[data-bs-theme="dark"] .sweet-alert button.cancel {
  border-color: var(--ds-hairline);
}

[data-bs-theme="dark"] .ds-dt table.dataTable tbody td.select-checkbox::before {
  border-color: var(--ds-ink-48);
}

[data-bs-theme="dark"] .ds-dt .dataTables_wrapper .dataTables_processing {
  background: var(--ds-canvas);
  color: var(--ds-ink-48);
  box-shadow: 0 0 0 1px var(--ds-hairline);
}

/* FullCalendar 3.9 draws its grid with fixed light colours */
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed th,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed td,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed thead,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed tbody,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-row,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-content,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-divider,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-list-heading td {
  border-color: var(--ds-hairline);
}

[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-popover,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-divider,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-list-view {
  background: var(--ds-canvas);
}

[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-list-heading td {
  background: var(--ds-parchment);
}

[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-list-item:hover td {
  background: var(--ds-pearl);
}

[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-time-grid .fc-slats td,
[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-time-grid .fc-bg {
  background: var(--ds-canvas);
}

[data-bs-theme="dark"] .ds-calendar-frame .fc-unthemed .fc-time-grid .fc-slats .fc-minor td {
  border-top-color: var(--ds-divider);
}

/* Muted category chips need a hairline so they do not melt into the black band */
[data-bs-theme="dark"] .ds-calendar-frame .fc-event {
  box-shadow: 0 0 0 1px var(--ds-event-ring);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ds-btn,
  .ds-link {
    transition: none;
  }

  .ds-btn:active {
    transform: none;
  }

  .ds-theme-switch {
    transition: none;
  }
}