/*
  Site theme: Treforest website brand (Bebas Neue + Barlow, lime on charcoal).
  Only active when <html data-brand="site"> (see theme.js). Remove this file + its <link> to back out.
*/

html[data-brand="site"] {
  --site-bg: #161a22;
  --site-panel: #1e2430;
  --site-elevated: #272e3c;
  --site-sunken: #191e28;
  --site-line: rgba(255, 245, 230, 0.1);
  --site-line-strong: rgba(255, 245, 230, 0.18);
  --site-text: #f2eee6;
  --site-muted: #bdb7ad;
  --site-accent: #8dc63f;
  --site-accent-bright: #a8e053;
  --site-accent-dim: rgba(141, 198, 63, 0.14);
  --site-ink-on-accent: #1a1406;
  --site-danger: #e0604f;
  --site-display: "Bebas Neue", "Impact", sans-serif;
  --site-body: "Barlow", "Avenir Next", "Segoe UI", sans-serif;
  --site-radius: 10px;
  --site-radius-lg: 14px;

  --font: var(--site-body);
  --bg-deep: var(--site-sunken);
  --bg: var(--site-bg);
  --bg-card: var(--site-panel);
  --surface: var(--site-panel);
  --surface-muted: var(--site-elevated);
  --surface-tint: var(--site-elevated);
  --text: var(--site-text);
  --text-muted: var(--site-muted);
  --text-soft: #a19b91;
  --accent: var(--site-accent);
  --accent-bright: var(--site-accent-bright);
  --accent-deep: #6fa52b;
  --accent-glow: rgba(141, 198, 63, 0.3);
  --border: var(--site-line);
  --border-strong: var(--site-line-strong);
  --radius: var(--site-radius-lg);
  --radius-sm: var(--site-radius);
  --shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 12px 36px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
  background: var(--site-bg);
}

html[data-brand="site"] body {
  font-family: var(--site-body);
  background: var(--site-bg);
  color: var(--site-text);
  letter-spacing: 0.005em;
}

html[data-brand="site"] #main-app {
  --ui-ink: var(--site-text);
  --ui-muted: var(--site-muted);
  --ui-line: var(--site-line);
  --ui-soft: var(--site-elevated);
  --ui-green: var(--site-accent);
  --ui-green-deep: #6fa52b;
  --ui-radius: var(--site-radius);
  color: var(--site-text);
  font-family: var(--site-body);
}

html[data-brand="site"] #main-app,
html[data-brand="site"] #main-app button,
html[data-brand="site"] #main-app input,
html[data-brand="site"] #main-app select,
html[data-brand="site"] #main-app textarea {
  font-family: var(--site-body);
}

/* Page backdrop: soft lime glow from the top, like the site */
html[data-brand="site"] .app-bg {
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(141, 198, 63, 0.09), transparent 60%),
    radial-gradient(ellipse 50% 30% at 100% 30%, rgba(180, 120, 60, 0.05), transparent 55%),
    var(--site-bg) !important;
}

/* ---------- Type ---------- */
html[data-brand="site"] #main-app h1,
html[data-brand="site"] #main-app h2,
html[data-brand="site"] #main-app .card-heading,
html[data-brand="site"] #main-app .panel-head h2,
html[data-brand="site"] #main-app .dialog-edit-entry-title,
html[data-brand="site"] .login-title,
html[data-brand="site"] .login-card-title {
  font-family: var(--site-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--site-text);
}

html[data-brand="site"] #main-app .card-heading,
html[data-brand="site"] #main-app .panel-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  line-height: 1;
}

html[data-brand="site"] #main-app h3,
html[data-brand="site"] #main-app h4 {
  color: var(--site-text);
}

html[data-brand="site"] #main-app .hint,
html[data-brand="site"] #main-app .muted,
html[data-brand="site"] #main-app .dialog-eyebrow {
  color: var(--site-muted);
}

html[data-brand="site"] #main-app .dialog-eyebrow {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
}

html[data-brand="site"] #main-app a {
  color: var(--site-accent);
}

/* ---------- Header + nav ---------- */
html[data-brand="site"] #main-app .app-header {
  background: transparent;
}

html[data-brand="site"] #main-app .admin-header-nav-shell,
html[data-brand="site"] #main-app .admin-header-extra {
  background: rgba(30, 36, 48, 0.72) !important;
  border-color: var(--site-line) !important;
  border-radius: var(--site-radius) !important;
}

html[data-brand="site"] #main-app .admin-header-extra .nav-pill {
  color: #cfc9bf;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px;
}

html[data-brand="site"] #main-app .admin-header-extra .nav-pill:hover {
  color: var(--site-text);
  background: rgba(255, 245, 230, 0.06);
}

html[data-brand="site"] #main-app .admin-header-extra .nav-pill.is-active,
html[data-brand="site"] #main-app .admin-header-extra .nav-pill[aria-current="page"] {
  background: var(--site-accent) !important;
  color: var(--site-ink-on-accent) !important;
  box-shadow: none !important;
}

html[data-brand="site"] #main-app .admin-header-extra .nav-pill.is-active svg {
  color: var(--site-ink-on-accent);
}

/* ---------- Surfaces ---------- */
html[data-brand="site"] #main-app .card,
html[data-brand="site"] #main-app .app-card,
html[data-brand="site"] #main-app .app-card-panel,
html[data-brand="site"] #main-app .cfg-section-card,
html[data-brand="site"] #main-app .cfg-ov-tile,
html[data-brand="site"] dialog,
html[data-brand="site"] .dialog-edit-entry {
  background: var(--site-panel) !important;
  color: var(--site-text);
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-brand="site"] dialog::backdrop {
  background: rgba(8, 10, 14, 0.7);
  backdrop-filter: blur(3px);
}

html[data-brand="site"] #main-app #employee-section.app-card-home {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- Buttons ---------- */
html[data-brand="site"] .btn-app-primary,
html[data-brand="site"] #main-app .btn-primary,
html[data-brand="site"] #main-app button[type="submit"].btn-app-primary,
html[data-brand="site"] .login-card button[type="submit"] {
  background: var(--site-accent) !important;
  background-image: none !important;
  color: var(--site-ink-on-accent) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

html[data-brand="site"] .btn-app-primary:hover,
html[data-brand="site"] #main-app .btn-primary:hover {
  background: var(--site-accent-bright) !important;
}

html[data-brand="site"] .btn-app-outline,
html[data-brand="site"] #main-app .btn-secondary,
html[data-brand="site"] #main-app .btn-app-ghost {
  background: transparent !important;
  color: var(--site-text) !important;
  border: 1px solid rgba(242, 238, 230, 0.26) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

html[data-brand="site"] .btn-app-outline:hover,
html[data-brand="site"] #main-app .btn-secondary:hover {
  border-color: var(--site-accent) !important;
  color: var(--site-accent) !important;
}

/* ---------- Forms ---------- */
html[data-brand="site"] #main-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-brand="site"] #main-app select,
html[data-brand="site"] #main-app textarea,
html[data-brand="site"] dialog input:not([type="checkbox"]):not([type="radio"]),
html[data-brand="site"] dialog select,
html[data-brand="site"] dialog textarea,
html[data-brand="site"] .app-input {
  background: var(--site-sunken) !important;
  color: var(--site-text) !important;
  border: 1px solid var(--site-line-strong) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

html[data-brand="site"] #main-app input::placeholder,
html[data-brand="site"] #main-app textarea::placeholder,
html[data-brand="site"] dialog input::placeholder {
  color: #8f897f;
}

html[data-brand="site"] #main-app input:focus,
html[data-brand="site"] #main-app select:focus,
html[data-brand="site"] #main-app textarea:focus,
html[data-brand="site"] dialog input:focus {
  outline: none;
  border-color: var(--site-accent) !important;
  box-shadow: 0 0 0 3px var(--site-accent-dim) !important;
}

html[data-brand="site"] #main-app label,
html[data-brand="site"] dialog label {
  color: #d6d0c6;
}

html[data-brand="site"] #main-app input[type="checkbox"],
html[data-brand="site"] #main-app input[type="radio"] {
  accent-color: var(--site-accent);
}

/* ---------- Tables ---------- */
html[data-brand="site"] #main-app table {
  color: var(--site-text);
  background: transparent;
}

html[data-brand="site"] #main-app th {
  background: var(--site-elevated) !important;
  color: var(--site-muted) !important;
  border-color: var(--site-line) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

html[data-brand="site"] #main-app td {
  border-color: var(--site-line) !important;
  background: transparent;
}

html[data-brand="site"] #main-app tr:hover td {
  background: rgba(255, 245, 230, 0.03);
}

/* ---------- Login ---------- */
html[data-brand="site"] .login-page {
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(141, 198, 63, 0.1), transparent 60%),
    var(--site-bg) !important;
}

html[data-brand="site"] .login-card {
  background: var(--site-panel) !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius-lg) !important;
}

html[data-brand="site"] .login-title {
  font-size: 3rem;
  line-height: 1;
}

/* ---------- Bebas Neue everywhere: single weight, open tracking (never faux-bold / tight) ---------- */
html[data-brand="site"] #main-app #employee-section .ph-hero__name,
html[data-brand="site"] #main-app #employee-section .ph-next__room,
html[data-brand="site"] #main-app #employee-section .ph-block__title,
html[data-brand="site"] #main-app #employee-section .ph-alert__title,
html[data-brand="site"] #main-app #employee-section .ph-empty__title {
  font-family: var(--site-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- Home ---------- */
html[data-brand="site"] #main-app #employee-section {
  --ph-ink: var(--site-text);
  --ph-muted: var(--site-muted);
  --ph-line: var(--site-line);
  --ph-soft: var(--site-elevated);
  --ph-green: var(--site-accent);
  --ph-green-deep: var(--site-accent);
  --ph-amber: #f0b43c;
  --ph-amber-ink: #f0c56a;
  --ph-card-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  font-family: var(--site-body);
}

html[data-brand="site"] #main-app #employee-section .ph-hero {
  border-radius: var(--site-radius-lg);
  border: 1px solid var(--site-line);
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(141, 198, 63, 0.16), transparent 55%),
    radial-gradient(70% 80% at 0% 100%, rgba(180, 120, 60, 0.08), transparent 60%),
    linear-gradient(160deg, #222938 0%, #1a1f2a 100%);
  box-shadow: var(--shadow-card);
}

html[data-brand="site"] #main-app #employee-section .ph-hero::before {
  background: repeating-radial-gradient(circle, rgba(141, 198, 63, 0.08) 0 1px, transparent 1px 22px);
}

html[data-brand="site"] #main-app #employee-section .ph-hero__date {
  color: var(--site-accent);
  letter-spacing: 0.16em;
  font-weight: 600;
}

html[data-brand="site"] #main-app #employee-section .ph-hero__greeting {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--site-muted);
}

html[data-brand="site"] #main-app #employee-section .ph-hero__name {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  color: var(--site-text);
}

html[data-brand="site"] #main-app #employee-section .ph-next {
  border-radius: var(--site-radius);
  background: rgba(18, 21, 28, 0.55);
  border: 1px solid var(--site-line);
}

html[data-brand="site"] #main-app #employee-section .ph-next__eyebrow {
  color: var(--site-accent);
  letter-spacing: 0.16em;
}

html[data-brand="site"] #main-app #employee-section .ph-next__day {
  color: var(--site-text);
}

html[data-brand="site"] #main-app #employee-section .ph-next__time {
  color: var(--site-muted);
}

html[data-brand="site"] #main-app #employee-section .ph-next__room {
  font-size: clamp(2rem, 4vw, 2.5rem);
  color: var(--site-text);
}

html[data-brand="site"] #main-app #employee-section .ph-next__countdown {
  border-radius: 4px;
  background: var(--site-accent-dim);
  color: var(--site-accent-bright);
  letter-spacing: 0.04em;
}

html[data-brand="site"] #main-app #employee-section .ph-chip {
  border-radius: var(--site-radius);
  background: rgba(255, 245, 230, 0.05);
  border-color: var(--site-line);
}

html[data-brand="site"] #main-app #employee-section .ph-chip--mine {
  background: var(--site-accent);
  border-color: var(--site-accent);
  color: var(--site-ink-on-accent);
}

html[data-brand="site"] #main-app #employee-section .ph-chip--mine .ph-chip__room,
html[data-brand="site"] #main-app #employee-section .ph-chip--mine .ph-chip__who {
  color: var(--site-ink-on-accent);
}

/* Pinned notes */
html[data-brand="site"] #main-app #employee-section .ph-pin,
html[data-brand="site"] #main-app #employee-section .ph-pin--warning,
html[data-brand="site"] #main-app #employee-section .ph-pin--reminder,
html[data-brand="site"] #main-app #employee-section .ph-pin--info {
  border-radius: var(--site-radius);
  border: 1px solid var(--site-line);
  background: var(--site-panel);
  box-shadow: var(--shadow-card);
}

html[data-brand="site"] #main-app #employee-section .ph-pin--warning {
  --ph-pin-accent: var(--site-danger);
  --ph-pin-tag: #f08a7c;
}

html[data-brand="site"] #main-app #employee-section .ph-pin--reminder {
  --ph-pin-accent: #f0b43c;
  --ph-pin-tag: #f0c56a;
}

html[data-brand="site"] #main-app #employee-section .ph-pin--info {
  --ph-pin-accent: var(--site-accent);
  --ph-pin-tag: var(--site-accent);
}

html[data-brand="site"] #main-app #employee-section .ph-pin__tag {
  letter-spacing: 0.16em;
}

html[data-brand="site"] #main-app #employee-section .ph-post__title {
  color: var(--site-text);
}

html[data-brand="site"] #main-app #employee-section .ph-post__body .ql-editor {
  color: #cfc9bf;
}

/* Alert: games still open */
html[data-brand="site"] #main-app #employee-section .ph-alert {
  border-radius: var(--site-radius);
  border: 1px solid rgba(240, 180, 60, 0.35);
  background: linear-gradient(180deg, rgba(240, 180, 60, 0.1) 0%, var(--site-panel) 100%);
}

html[data-brand="site"] #main-app #employee-section .ph-alert__icon {
  background: rgba(240, 180, 60, 0.16);
  color: #f0c56a;
}

html[data-brand="site"] #main-app #employee-section .ph-alert__row {
  background: var(--site-elevated);
  border-color: var(--site-line);
}

/* Blocks + shift rows */
html[data-brand="site"] #main-app #employee-section .ph-block {
  border-radius: var(--site-radius-lg);
  border: 1px solid var(--site-line);
  background: var(--site-panel);
  box-shadow: var(--shadow-card);
}

html[data-brand="site"] #main-app #employee-section .ph-block__title {
  font-size: 1.75rem;
  color: var(--site-text);
}

html[data-brand="site"] #main-app #employee-section .ph-day {
  color: var(--site-muted);
  letter-spacing: 0.16em;
}

html[data-brand="site"] #main-app #employee-section .ph-shift__room {
  color: var(--site-text);
  font-weight: 600;
  letter-spacing: 0.01em;
}

html[data-brand="site"] #main-app #employee-section .ph-shift__time strong {
  color: var(--site-text);
}

html[data-brand="site"] #main-app #employee-section .ph-shift--mine .ph-shift__time {
  --ph-time-accent: var(--site-accent);
}

html[data-brand="site"] #main-app #employee-section .ph-shift--open .ph-shift__time {
  --ph-time-accent: #f0b43c;
}

html[data-brand="site"] #main-app #employee-section .ph-shift__live {
  border-radius: 4px;
  background: rgba(240, 180, 60, 0.14);
  color: #f0c56a;
  letter-spacing: 0.04em;
}

html[data-brand="site"] #main-app #employee-section .ph-shift--flash {
  animation: none;
}

html[data-brand="site"] #main-app #employee-section .ph-empty {
  background: var(--site-elevated);
  border-radius: var(--site-radius);
}

html[data-brand="site"] #main-app #employee-section .ph-empty__icon {
  background: var(--site-accent-dim);
  color: var(--site-accent);
}

/* Buttons */
html[data-brand="site"] #main-app #employee-section .ph-btn {
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

html[data-brand="site"] #main-app #employee-section .ph-btn--claim,
html[data-brand="site"] #main-app #employee-section .ph-btn--primary,
html[data-brand="site"] #main-app #employee-section .ph-hero .ph-btn--primary {
  background: var(--site-accent);
  color: var(--site-ink-on-accent);
  box-shadow: none;
}

html[data-brand="site"] #main-app #employee-section .ph-btn--claim:hover,
html[data-brand="site"] #main-app #employee-section .ph-btn--primary:hover {
  background: var(--site-accent-bright);
}

html[data-brand="site"] #main-app #employee-section .ph-btn--quiet,
html[data-brand="site"] #main-app #employee-section .ph-btn--light,
html[data-brand="site"] #main-app #employee-section .ph-btn--ghost-light {
  background: transparent;
  color: var(--site-text);
  border: 1px solid rgba(242, 238, 230, 0.26);
}

html[data-brand="site"] #main-app #employee-section .ph-btn--quiet:hover,
html[data-brand="site"] #main-app #employee-section .ph-btn--light:hover {
  background: transparent;
  border-color: var(--site-accent);
  color: var(--site-accent);
}

html[data-brand="site"] #main-app #employee-section .ph-icon-btn {
  background: transparent;
  border-color: var(--site-line-strong);
  color: var(--site-muted);
  border-radius: 6px;
}

html[data-brand="site"] #main-app #employee-section .ph-icon-btn:hover {
  color: var(--site-accent);
  border-color: var(--site-accent);
}

html[data-brand="site"] #main-app #employee-section .ph-pin__body,
html[data-brand="site"] #main-app #employee-section .ph-pin__body * {
  color: #cfc9bf !important;
}

/* ---------- Schedule ---------- */
html[data-brand="site"] #main-app .shifts-rooms-calendar--modern {
  background: var(--site-panel);
  border-color: var(--site-line);
  box-shadow: var(--shadow-card);
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-day,
html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-day.is-today,
html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-time-col,
html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-game-body {
  background: var(--site-panel);
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-time-col {
  border-right-color: var(--site-line);
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-game-head {
  background: var(--site-elevated);
  border-bottom-color: var(--site-line);
  color: var(--site-text);
  font-weight: 600;
  letter-spacing: 0.01em;
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-game-head.shifts-rooms-game-head--time-gutter {
  border-bottom-color: var(--site-line);
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-game-col {
  border-right-color: var(--site-line);
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-hour-line.is-hour {
  border-top-color: rgba(255, 245, 230, 0.08);
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-hour-line.is-half {
  border-top-color: rgba(255, 245, 230, 0.035);
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-time-label,
html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-time-label.is-hour {
  color: var(--site-muted);
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-now-bubble {
  box-shadow: 0 0 0 3px var(--site-panel);
}

html[data-brand="site"] #main-app .shifts-rooms-calendar--modern .shifts-rooms-game-body .shift-block.shift-block--compact.is-open,
html[data-brand="site"] #main-app .shift-agenda-item.is-open {
  background: var(--site-elevated) !important;
  border-color: rgba(242, 238, 230, 0.28) !important;
  color: var(--site-muted) !important;
}

html[data-brand="site"] #main-app .shift-block--compact.is-open .shift-block-time-row,
html[data-brand="site"] #main-app .shift-block--compact.is-open .shift-block-gm,
html[data-brand="site"] #main-app .shift-agenda-item.is-open .shift-agenda-time,
html[data-brand="site"] #main-app .shift-agenda-item.is-open .shift-agenda-room {
  color: var(--site-text) !important;
}

html[data-brand="site"] #main-app .schedule-icon-btn:hover,
html[data-brand="site"] #main-app .schedule-today-btn:hover {
  background: rgba(255, 245, 230, 0.08);
  color: var(--site-accent);
}

html[data-brand="site"] #main-app .schedule-date-btn {
  background: var(--site-sunken);
  border-color: var(--site-line-strong);
  color: var(--site-text);
  border-radius: 8px;
  box-shadow: none;
}

html[data-brand="site"] #main-app .schedule-date-btn:hover {
  border-color: var(--site-accent);
  box-shadow: none;
}

html[data-brand="site"] #main-app .schedule-date-btn svg {
  color: var(--site-accent);
}

html[data-brand="site"] #main-app .schedule-date-btn .shifts-period-label {
  color: var(--site-text);
  letter-spacing: 0.01em;
  font-weight: 600;
}

html[data-brand="site"] #main-app .schedule-stat {
  background: rgba(255, 245, 230, 0.05);
  border-color: var(--site-line);
  color: var(--site-muted);
}

html[data-brand="site"] #main-app .schedule-stat strong {
  color: var(--site-text);
}

html[data-brand="site"] #main-app .schedule-stat--open {
  background: rgba(229, 72, 77, 0.14);
  border-color: rgba(229, 72, 77, 0.5);
  color: #f08a7c;
}

html[data-brand="site"] #main-app .schedule-stat--open strong {
  color: #ffb3a8;
}

html[data-brand="site"] #main-app .schedule-stat--claimed {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.4);
  color: var(--site-accent);
}

html[data-brand="site"] #main-app .schedule-stat--claimed strong {
  color: var(--site-accent-bright);
}

html[data-brand="site"] #main-app .schedule-legend-item {
  background: rgba(255, 245, 230, 0.05);
  border-color: var(--site-line);
  color: #d6d0c6;
}

html[data-brand="site"] #main-app .schedule-legend-item--mine {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.4);
  color: var(--site-accent);
}

html[data-brand="site"] #main-app .create-shift-form:not(.hidden) {
  background: var(--site-elevated);
  border-color: var(--site-line);
}

html[data-brand="site"] #main-app .shift-block--compact.is-open .shift-block-party,
html[data-brand="site"] #main-app .shift-agenda-item.is-open .shift-block-party {
  background: rgba(255, 245, 230, 0.1) !important;
  color: var(--site-muted) !important;
}

/* ---------- Requests (pay) ---------- */
html[data-brand="site"] #admin-pay-requests-section .pay-request-form-shell,
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-wrap {
  background: var(--site-panel);
  border-color: var(--site-line);
  box-shadow: var(--shadow-card);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form-shell::before {
  background: var(--site-accent);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-heading {
  color: var(--site-accent);
  border-bottom-color: var(--site-line);
  letter-spacing: 0.16em;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-filter {
  background: transparent;
  border-color: var(--site-line-strong);
  color: var(--site-muted);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-filter:hover {
  color: var(--site-text);
  border-color: var(--site-accent);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-filter.is-active {
  background: var(--site-accent);
  border-color: var(--site-accent);
  color: var(--site-ink-on-accent);
  box-shadow: none;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item {
  background: var(--site-elevated);
  border-color: var(--site-line);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item--empty {
  background: transparent;
  border-color: var(--site-line-strong);
  color: var(--site-muted);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__type,
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__date-row time {
  color: var(--site-text);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__detail {
  color: #d6d0c6;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__date-row,
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__meta,
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-range {
  color: var(--site-muted);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__dates,
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__meta {
  border-color: var(--site-line);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__status.is-pending { color: #f0c56a; }
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__status.is-approved { color: var(--site-accent-bright); }
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__status.is-rejected { color: #f08a7c; background: rgba(224, 96, 79, 0.16); }

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__rejection {
  background: rgba(224, 96, 79, 0.12);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__rejection-label { color: #f08a7c; }
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item__rejection-text { color: #f4d6d1; }

/* ---------- Shared panels across screens ---------- */
html[data-brand="site"] #main-app .shift-home-panel,
html[data-brand="site"] #main-app .availability-controls-card,
html[data-brand="site"] #main-app .availability-board,
html[data-brand="site"] #main-app .table-wrap.table-elevated,
html[data-brand="site"] #main-app .app-table-wrap,
html[data-brand="site"] #main-app .notice-editor-panel,
html[data-brand="site"] #main-app .floor-card,
html[data-brand="site"] #main-app .cash-up-start-panel {
  background: var(--site-panel) !important;
  background-image: none !important;
  border-color: var(--site-line) !important;
  color: var(--site-text);
  box-shadow: var(--shadow-card) !important;
}

html[data-brand="site"] #main-app .availability-controls-card__block,
html[data-brand="site"] #main-app .availability-admin-grid,
html[data-brand="site"] #main-app .notice-admin-row,
html[data-brand="site"] #main-app .checklist-step-row,
html[data-brand="site"] #main-app .cash-up-flow-choice,
html[data-brand="site"] #main-app .cash-up-flow-datetime,
html[data-brand="site"] #main-app .availability-period-label {
  background: var(--site-elevated) !important;
  background-image: none !important;
  border-color: var(--site-line) !important;
  color: var(--site-text) !important;
  box-shadow: none !important;
}

html[data-brand="site"] #main-app .cash-up-flow-choice:hover {
  border-color: var(--site-accent) !important;
}

html[data-brand="site"] #main-app .notice-badge {
  background: rgba(255, 245, 230, 0.08) !important;
  border-color: var(--site-line) !important;
  color: #d6d0c6 !important;
}

html[data-brand="site"] #main-app .notice-badge--owner {
  background: var(--site-accent-dim) !important;
  color: var(--site-accent) !important;
}

/* Availability cells */
html[data-brand="site"] #main-app .availability-admin-cell:not(.is-available):not(.is-blocked):not(.is-maybe) {
  background: var(--site-sunken);
}

html[data-brand="site"] #main-app .availability-admin-cell {
  border-color: var(--site-line) !important;
  color: var(--site-text);
}

/* Escape room floor */
html[data-brand="site"] #main-app .floor-trial-btn {
  background: transparent !important;
  border: 1px solid var(--site-line-strong) !important;
  color: var(--site-text) !important;
}

html[data-brand="site"] #main-app .floor-pipeline__node:not(.is-done):not(.is-current) .floor-pipeline__dot {
  background: var(--site-elevated) !important;
  border-color: var(--site-line-strong) !important;
}

html[data-brand="site"] #main-app .floor-pipeline__node.is-current .floor-pipeline__dot {
  background: var(--site-accent) !important;
  color: var(--site-ink-on-accent) !important;
  box-shadow: 0 0 0 2px var(--site-accent), 0 0 0 6px var(--site-accent-dim) !important;
}

html[data-brand="site"] #main-app .floor-pipeline__node.is-done .floor-pipeline__dot {
  background: #5f8f2a !important;
  color: var(--site-text) !important;
  box-shadow: 0 0 0 2px #5f8f2a !important;
}

html[data-brand="site"] #main-app .floor-pipeline__node.is-current .floor-pipeline__label {
  color: var(--site-accent) !important;
}

html[data-brand="site"] #main-app .floor-pipeline__node.is-done .floor-pipeline__label {
  color: #b9d98f !important;
}

/* App config */
html[data-brand="site"] #main-app .cfg-nav-item {
  color: #cfc9bf !important;
  background: transparent !important;
}

html[data-brand="site"] #main-app .cfg-nav-item:hover {
  background: rgba(255, 245, 230, 0.06) !important;
  color: var(--site-text) !important;
}

html[data-brand="site"] #main-app .cfg-nav-item.is-active {
  background: var(--site-accent-dim) !important;
  color: var(--site-accent) !important;
}

html[data-brand="site"] #main-app .cfg-health-badge {
  background: rgba(255, 245, 230, 0.08) !important;
  color: var(--site-muted) !important;
  border-color: var(--site-line) !important;
}

/* Text that was coloured for light panels */
html[data-brand="site"] #main-app .availability-controls-card__kicker,
html[data-brand="site"] #main-app .availability-admin-time-head,
html[data-brand="site"] #main-app .availability-admin-staff-head,
html[data-brand="site"] #main-app .notice-admin-row__meta,
html[data-brand="site"] #main-app .issue-actions__title,
html[data-brand="site"] #main-app .floor-card__meta-when,
html[data-brand="site"] #main-app .floor-card__meta-piece,
html[data-brand="site"] #main-app .floor-pipeline__label,
html[data-brand="site"] #main-app .pay-request-submitted-by {
  color: var(--site-muted) !important;
}

html[data-brand="site"] #main-app .availability-block-time-start,
html[data-brand="site"] #main-app .availability-block-time-end,
html[data-brand="site"] #main-app .issue-description,
html[data-brand="site"] #main-app .cash-up-flow-datetime *,
html[data-brand="site"] #main-app .cash-up-flow-choice *,
html[data-brand="site"] #main-app td,
html[data-brand="site"] #main-app .cell-strong,
html[data-brand="site"] #main-app .pay-approval-notes-body,
html[data-brand="site"] #main-app .checklist-step-row__title {
  color: var(--site-text) !important;
}

html[data-brand="site"] #main-app .cash-up-flow-choice svg {
  color: var(--site-accent) !important;
}

html[data-brand="site"] #main-app .cfg-subsection-title {
  color: var(--site-accent) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Dialogs (live outside #main-app) ---------- */
html[data-brand="site"] dialog {
  color: var(--site-text);
  font-family: var(--site-body);
}

html[data-brand="site"] dialog .dialog-edit-entry-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 1.35rem;
}

html[data-brand="site"] dialog .dialog-eyebrow {
  margin: 0;
  color: var(--site-accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
}

html[data-brand="site"] dialog .dialog-edit-entry-title,
html[data-brand="site"] dialog h2 {
  margin: 0;
  font-family: var(--site-display);
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--site-text);
}

html[data-brand="site"] dialog .hint {
  margin: 0;
  color: var(--site-muted);
  line-height: 1.5;
}

html[data-brand="site"] dialog .field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

html[data-brand="site"] dialog .field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-muted);
}

html[data-brand="site"] dialog .field .app-input,
html[data-brand="site"] dialog .field input,
html[data-brand="site"] dialog .field select,
html[data-brand="site"] dialog .field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: 1rem;
}

html[data-brand="site"] dialog .dialog-edit-entry-error {
  margin: 0;
  color: #f08a7c;
}

html[data-brand="site"] dialog .dialog-edit-entry-error:empty {
  display: none;
}

html[data-brand="site"] dialog .dialog-edit-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

html[data-brand="site"] dialog .btn-app-primary,
html[data-brand="site"] dialog .btn-app-outline {
  min-height: 2.75rem;
  padding: 0 1.2rem;
  cursor: pointer;
}

html[data-brand="site"] dialog .payroll-unlock-or {
  margin: 0;
  text-align: center;
  color: var(--site-muted);
  font-size: 0.8rem;
}

html[data-brand="site"] dialog dt {
  color: var(--site-muted) !important;
}

html[data-brand="site"] dialog dd {
  color: var(--site-text) !important;
}

html[data-brand="site"] dialog pre.notification-detail-body {
  background: var(--site-sunken) !important;
  color: var(--site-text) !important;
  border-color: var(--site-line) !important;
}

html[data-brand="site"] dialog #payroll-unlock-or {
  color: var(--site-muted);
}

html[data-brand="site"] #main-app .availability-admin-grid-head {
  background: var(--site-elevated) !important;
  border-color: var(--site-line) !important;
}

html[data-brand="site"] #main-app .availability-admin-staff-head {
  border-right-color: var(--site-line) !important;
}

html[data-brand="site"] #main-app .availability-admin-time-cell,
html[data-brand="site"] #main-app .availability-admin-time-cell.availability-block-row {
  background: var(--site-elevated) !important;
  color: var(--site-muted) !important;
  border-color: var(--site-line) !important;
}

html[data-brand="site"] #main-app .availability-admin-cell {
  border-right-color: var(--site-line) !important;
}

html[data-brand="site"] #main-app .availability-admin-cell.is-hour,
html[data-brand="site"] #main-app .availability-admin-time-cell.is-hour {
  border-bottom-color: var(--site-line-strong) !important;
}

html[data-brand="site"] #main-app .issue-actions,
html[data-brand="site"] #main-app thead {
  background: var(--site-elevated) !important;
  border-color: var(--site-line) !important;
}

/* Phone agenda: solid colour cards like the grid */
html[data-brand="site"] #main-app .shifts-agenda .shift-block.shift-agenda-item:not(.is-open) {
  background: linear-gradient(120deg, var(--card-deep, var(--card-accent)) 0%, var(--card-accent) 100%) !important;
  border-color: transparent !important;
  color: var(--card-ink, #fff) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

html[data-brand="site"] #main-app .shifts-agenda .shift-block.shift-agenda-item:not(.is-open)::before {
  background: color-mix(in srgb, var(--card-ink, #fff) 55%, transparent);
}

html[data-brand="site"] #main-app .shifts-agenda .shift-agenda-item:not(.is-open) .shift-agenda-room,
html[data-brand="site"] #main-app .shifts-agenda .shift-agenda-item:not(.is-open) .shift-agenda-who {
  color: var(--card-ink, #fff) !important;
}

html[data-brand="site"] #main-app .shifts-agenda .shift-agenda-item:not(.is-open) .shift-agenda-avatar {
  background: var(--card-ink, #fff);
  color: var(--card-deep, var(--card-accent)) !important;
  text-shadow: none;
}

html[data-brand="site"] #main-app .shifts-agenda .shift-agenda-item:not(.is-open) .shift-agenda-party,
html[data-brand="site"] #main-app .shifts-agenda .shift-agenda-item:not(.is-open) .shift-agenda-dgb {
  background: color-mix(in srgb, var(--card-ink, #fff) 22%, transparent);
  color: var(--card-ink, #fff);
  box-shadow: none;
}

html[data-brand="site"] #main-app {
  --mine-ring: var(--site-bg);
}

html[data-brand="site"] #main-app .shifts-agenda .shift-agenda-item.is-open .shift-agenda-who--open {
  color: var(--site-muted) !important;
}

html[data-brand="site"] #main-app .shifts-agenda .shift-agenda-item.is-open .shift-agenda-party {
  background: rgba(255, 245, 230, 0.1);
  color: var(--site-muted);
  box-shadow: none;
}

html[data-brand="site"] #main-app .shift-agenda-time span {
  color: var(--site-muted);
}

html[data-brand="site"] #main-app .shift-agenda-now-time {
  box-shadow: 0 0 0 3px var(--site-bg);
}

html[data-brand="site"] .login-backdrop {
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(141, 198, 63, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 50%, rgba(180, 120, 60, 0.06), transparent 50%);
}

html[data-brand="site"] .login-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.6) !important;
}

html[data-brand="site"] .login-card-title {
  font-size: 2rem;
  line-height: 1;
}

html[data-brand="site"] .login-form .field label {
  color: var(--site-muted);
  letter-spacing: 0.14em;
  font-weight: 600;
}

html[data-brand="site"] .login-form input {
  background: var(--site-sunken);
  border-color: var(--site-line-strong);
  border-radius: 6px;
  color: var(--site-text);
}

html[data-brand="site"] .login-form input:focus {
  border-color: var(--site-accent);
  box-shadow: 0 0 0 3px var(--site-accent-dim);
}

html[data-brand="site"] .login-deploy-stamp {
  color: #6f6a62;
}

/* ---------- Totals ---------- */
html[data-brand="site"] #main-app .report-payroll-signoff,
html[data-brand="site"] #main-app .report-employee-calendar,
html[data-brand="site"] #main-app .report-quick-pay {
  background: var(--site-panel) !important;
  background-image: none !important;
  border-color: var(--site-line) !important;
  color: var(--site-text) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-brand="site"] #main-app .report-payroll-signoff {
  border-left: 4px solid var(--site-accent) !important;
}

html[data-brand="site"] #main-app .report-payroll-signoff *,
html[data-brand="site"] #main-app .report-employee-calendar h2,
html[data-brand="site"] #main-app .report-employee-calendar h3 {
  color: inherit;
}

html[data-brand="site"] #main-app .report-payroll-signoff p,
html[data-brand="site"] #main-app .report-employee-calendar p,
html[data-brand="site"] #main-app .report-field-label {
  color: var(--site-muted) !important;
}

html[data-brand="site"] #main-app .report-month-chip {
  background: var(--site-elevated) !important;
  border-color: var(--site-line-strong) !important;
  color: var(--site-text) !important;
}

html[data-brand="site"] #main-app .report-month-chip * {
  color: inherit !important;
}

html[data-brand="site"] #main-app .report-month-chip.is-open {
  border-color: rgba(141, 198, 63, 0.55) !important;
  background: var(--site-accent-dim) !important;
}

html[data-brand="site"] #main-app .report-month-chip.is-closed {
  border-color: rgba(224, 96, 79, 0.5) !important;
  background: rgba(224, 96, 79, 0.1) !important;
}

html[data-brand="site"] #main-app .report-month-chip.is-selected {
  border-color: var(--site-accent) !important;
  box-shadow: 0 0 0 2px var(--site-accent) !important;
}

html[data-brand="site"] #main-app .hours-value {
  color: var(--site-accent-bright) !important;
}

/* Shared availability-style calendar (staff availability + Totals shift overview) */
html[data-brand="site"] #main-app .availability-calendar {
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
}

html[data-brand="site"] #main-app .availability-cell:not(.is-available):not(.is-blocked):not(.is-maybe):not(.is-game):not(.is-training):not(.is-overtime) {
  background: var(--site-sunken);
}

html[data-brand="site"] #main-app .availability-cell {
  border-color: var(--site-line) !important;
}

html[data-brand="site"] #main-app .availability-cell.is-hour {
  border-bottom-color: var(--site-line-strong) !important;
}

html[data-brand="site"] #main-app .availability-cell:not(.is-available):not(.is-blocked):not(.is-maybe):hover {
  background: rgba(255, 245, 230, 0.05);
}

html[data-brand="site"] #main-app .report-employee-legend,
html[data-brand="site"] #main-app .availability-grid-head,
html[data-brand="site"] #main-app .availability-time-head,
html[data-brand="site"] #main-app .availability-time-label {
  background: var(--site-elevated) !important;
  border-color: var(--site-line) !important;
  color: var(--site-muted) !important;
}

html[data-brand="site"] #main-app .availability-time-label.is-hour {
  color: #d6d0c6 !important;
}

html[data-brand="site"] #main-app .report-employee-legend__title,
html[data-brand="site"] #main-app .report-employee-legend__item,
html[data-brand="site"] #main-app .availability-day-head__label {
  color: #cfc9bf !important;
}

html[data-brand="site"] #main-app .report-employee-export-row {
  background: var(--site-elevated) !important;
  background-image: none !important;
  border-color: var(--site-line) !important;
  box-shadow: none !important;
}

html[data-brand="site"] #main-app .report-employee-export-row__title {
  color: var(--site-text) !important;
}

html[data-brand="site"] #main-app .report-employee-export-row__body,
html[data-brand="site"] #main-app .report-employee-export-row__cards > * {
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  color: var(--site-text);
}

/* ---------- Requests layout ---------- */
html[data-brand="site"] #admin-pay-requests-section #employee-pay-request-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-panel-title {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-accent);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-panel-lead {
  font-size: 0.95rem;
  color: var(--site-muted);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-panel-lead strong {
  color: var(--site-text);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-layout {
  margin-top: 1.25rem;
  gap: 1.25rem;
}

@media (min-width: 960px) {
  html[data-brand="site"] #admin-pay-requests-section .pay-request-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-wrap {
    position: sticky;
    top: 1rem;
  }
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form-shell,
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-wrap {
  border-radius: var(--site-radius-lg);
  padding: 1.35rem 1.4rem 1.4rem;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form-shell::before {
  display: none;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form-title,
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-heading {
  grid-column: 1 / -1;
  margin: 0 0 0.25rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--site-line);
  font-family: var(--site-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--site-text) !important;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form {
  gap: 1rem 1rem;
}

@media (min-width: 640px) {
  html[data-brand="site"] #admin-pay-requests-section .pay-request-form {
    grid-template-columns: 1fr 1fr;
  }

  html[data-brand="site"] #admin-pay-requests-section .pay-request-form > * {
    grid-column: 1 / -1;
  }

  html[data-brand="site"] #admin-pay-requests-section .pay-request-form:has(#pay-request-staff-wrap:not(.hidden)) > .pay-request-field:nth-of-type(1),
  html[data-brand="site"] #admin-pay-requests-section .pay-request-form > #pay-request-staff-wrap {
    grid-column: auto;
  }
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form .inline-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-muted);
}

html[data-brand="site"] #admin-pay-requests-section .label-opt {
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  color: #7d776f;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form .hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #8b857c;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form .hint strong {
  color: #cfc9bf;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form .app-input,
html[data-brand="site"] #admin-pay-requests-section .pay-request-form .app-select {
  min-height: 2.8rem;
  border-radius: 6px !important;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-form input[type="datetime-local"] {
  color-scheme: dark;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-submit {
  justify-self: stretch;
  width: 100%;
  min-height: 3rem;
  margin-top: 0.25rem;
  border-radius: 4px !important;
}

/* My requests */
html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-toolbar {
  margin: 0.75rem 0 1rem;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 3px;
  border-radius: 8px;
  background: var(--site-sunken);
  border: 1px solid var(--site-line);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-filter {
  justify-content: center;
  padding: 0.5rem 0.4rem;
  border: 0 !important;
  border-radius: 6px;
  background: transparent;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-filter.is-active {
  background: var(--site-accent);
  color: var(--site-ink-on-accent);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item--empty {
  padding: 2.25rem 1rem 2rem;
  border-radius: var(--site-radius);
  font-size: 0.9rem;
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-item--empty::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238dc63f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E") center / 1.2rem no-repeat,
    var(--site-accent-dim);
}

html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-footer:has(.pay-request-mine-range:empty):has(.pay-request-mine-pager.hidden) {
  display: none;
}

/* ---------- Escape room: run stage, GM deck, puzzles, photo wizard ---------- */
html[data-brand="site"] #main-app #admin-escape-room-section.app-screen-escape-room.app-card-panel {
  background: var(--site-panel);
  border-color: var(--site-line);
  box-shadow: none;
}
html[data-brand="site"] #main-app .floor-run-stage {
  background: var(--site-panel);
  border-color: var(--site-line-strong);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .floor-run-stage__title {
  font-family: var(--site-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--site-text);
}
html[data-brand="site"] #main-app .floor-run-stage__meta,
html[data-brand="site"] #main-app .floor-run-stage .hint,
html[data-brand="site"] #main-app .floor-checkin-form__hint,
html[data-brand="site"] #main-app .er-gp-step-hint,
html[data-brand="site"] #main-app .er-gp-run-meta {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .floor-run-stage__meta strong,
html[data-brand="site"] #main-app .floor-run-stage__meta b {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .floor-checkin-form__title,
html[data-brand="site"] #main-app .er-gp-step-title {
  font-family: var(--site-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 1.35rem;
  color: var(--site-text);
}
html[data-brand="site"] #main-app .floor-checkin-form label,
html[data-brand="site"] #main-app .floor-checkin-form__field > span,
html[data-brand="site"] #main-app .er-gp-progress-label {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .floor-run-stage__puzzle-progress,
html[data-brand="site"] #main-app .floor-card__puzzle-progress,
html[data-brand="site"] #main-app .floor-puzzle-progress-badge,
html[data-brand="site"] #main-app .escape-room-gm-puzzle-progress {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.4);
  color: var(--site-accent-bright);
}
html[data-brand="site"] #main-app .floor-pipeline__track,
html[data-brand="site"] #main-app .er-gp-progress-track {
  background: var(--site-line-strong);
}
html[data-brand="site"] #main-app .er-gp-progress-fill {
  background: var(--site-accent);
}

/* GM control deck */
html[data-brand="site"] #main-app .escape-room-gm-control-deck {
  background: var(--site-sunken);
  border-color: var(--site-line);
  box-shadow: none;
}
html[data-brand="site"] #main-app .escape-room-gm-card,
html[data-brand="site"] #admin-floor-section .escape-room-gm-control-deck .escape-room-gm-card,
html[data-brand="site"] #admin-escape-room-section .escape-room-gm-control-deck .escape-room-gm-card {
  background: var(--site-panel);
  border-color: var(--site-line);
  box-shadow: none;
  color: var(--site-text);
}
html[data-brand="site"] #admin-floor-section .escape-room-gm-rail-card--timer,
html[data-brand="site"] #admin-escape-room-section .escape-room-gm-rail-card--timer {
  border-top: 3px solid var(--site-accent);
}
html[data-brand="site"] #main-app .escape-room-gm-card h3,
html[data-brand="site"] #main-app .escape-room-gm-card.escape-room-gm-rail-card > h3,
html[data-brand="site"] #main-app .escape-room-gm-rail-card--clue > h3 {
  color: var(--site-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-brand="site"] #main-app .escape-room-gm-timer-readout,
html[data-brand="site"] #main-app #escape-room-gm-timer {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-hints-sent,
html[data-brand="site"] #main-app .escape-room-gm-idle-note,
html[data-brand="site"] #main-app .escape-room-gm-url,
html[data-brand="site"] #main-app .escape-room-gm-active-session-meta,
html[data-brand="site"] #main-app .escape-room-gm-toolbar-hint {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .escape-room-gm-card [id*="status"],
html[data-brand="site"] #main-app .escape-room-gm-timer-stack p {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .escape-room-gm-timer-icon-btn,
html[data-brand="site"] #main-app .escape-room-gm-start-plain,
html[data-brand="site"] #main-app .escape-room-gm-replay-btn,
html[data-brand="site"] #main-app .escape-room-gm-scene-btn,
html[data-brand="site"] #main-app .escape-room-gm-intro-btn {
  background: var(--site-elevated);
  border-color: var(--site-line-strong);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-timer-icon-btn:hover,
html[data-brand="site"] #main-app .escape-room-gm-start-plain:hover:not(:disabled),
html[data-brand="site"] #main-app .escape-room-gm-replay-btn:hover:not(:disabled),
html[data-brand="site"] #main-app .escape-room-gm-scene-btn:hover:not(:disabled),
html[data-brand="site"] #main-app .escape-room-gm-intro-btn:hover:not(:disabled) {
  background: #313949;
  border-color: rgba(141, 198, 63, 0.5);
}
html[data-brand="site"] #main-app .escape-room-gm-active-session-row {
  border-color: var(--site-line);
}
html[data-brand="site"] #main-app .escape-room-gm-active-session-title {
  color: var(--site-text);
}

/* Puzzle / objective cards */
html[data-brand="site"] #main-app .escape-room-gm-obj {
  background: var(--site-elevated);
  border-color: var(--site-line-strong);
  box-shadow: none;
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-obj--skipped {
  background: var(--site-panel);
  opacity: 0.75;
}
html[data-brand="site"] #main-app .escape-room-gm-obj-top {
  background: transparent;
  border-color: var(--site-line);
}
html[data-brand="site"] #main-app .escape-room-gm-obj-num {
  background: var(--site-accent);
  color: var(--site-ink-on-accent);
  box-shadow: none;
}
html[data-brand="site"] #main-app .escape-room-gm-obj-title {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-obj-desc,
html[data-brand="site"] #main-app .escape-room-gm-obj-goal-block,
html[data-brand="site"] #main-app .escape-room-gm-obj-issue-panel,
html[data-brand="site"] #main-app .escape-room-gm-obj-hints-details,
html[data-brand="site"] #main-app .escape-room-gm-interactions {
  background: var(--site-sunken);
  border-color: var(--site-line);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-obj-goal-head,
html[data-brand="site"] #main-app .escape-room-gm-hints-summary-layout {
  background: transparent;
  border-color: var(--site-line);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-obj-hints-summary:hover .escape-room-gm-hints-summary-layout {
  background: rgba(255, 255, 255, 0.04);
}
html[data-brand="site"] #main-app .escape-room-gm-obj-goal-block .escape-room-gm-obj-goal-text,
html[data-brand="site"] #main-app .escape-room-gm-goal-head-label,
html[data-brand="site"] #main-app .escape-room-gm-issue-text {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-goal-head-icon {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.45);
  color: var(--site-accent-bright);
}
html[data-brand="site"] #main-app .escape-room-gm-issue-label,
html[data-brand="site"] #main-app .escape-room-gm-interactions-head {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .escape-room-gm-obj-toolbar {
  background: var(--site-sunken);
  border-color: var(--site-line);
  box-shadow: none;
}
html[data-brand="site"] #main-app .escape-room-gm-obj-toolbar .escape-room-gm-btn-skip,
html[data-brand="site"] #main-app .escape-room-gm-obj-toolbar .btn-app-outline.escape-room-gm-btn-sm[data-er-report-issue] {
  background: var(--site-elevated);
  border-color: var(--site-line-strong);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-interaction-row {
  background: var(--site-panel);
  border-color: var(--site-line);
  box-shadow: none;
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-obj-badge--pending {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fbbf24;
}
html[data-brand="site"] #main-app .escape-room-gm-obj-badge--not-started {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--site-line-strong);
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .escape-room-gm-obj-badge--done {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.45);
  color: var(--site-accent-bright);
}
html[data-brand="site"] #main-app .escape-room-gm-obj-badge--skip {
  background: rgba(229, 72, 77, 0.14);
  border-color: rgba(229, 72, 77, 0.45);
  color: #f08a7c;
}

/* Guest photo wizard */
html[data-brand="site"] #main-app .er-gp-photo-btn.btn-app-outline {
  background: var(--site-elevated);
  border: 1px solid var(--site-line-strong);
}
html[data-brand="site"] #main-app .er-gp-photo-btn.btn-app-outline:hover {
  border-color: rgba(141, 198, 63, 0.55);
}
html[data-brand="site"] #main-app .er-gp-photo-btn.btn-app-outline .er-gp-photo-btn__title {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .er-gp-photo-btn.btn-app-outline .er-gp-photo-btn__sub {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .er-gp-photo-btn.btn-app-primary .er-gp-photo-btn__sub {
  color: rgba(26, 20, 6, 0.7);
}
html[data-brand="site"] #main-app .er-gp-wizard-footer {
  border-top-color: var(--site-line);
  background: transparent;
}
html[data-brand="site"] #main-app .er-gp-wizard-footer .btn-app-outline,
html[data-brand="site"] #main-app .er-gp-wizard-btn.btn-app-outline {
  background: transparent;
  border-color: var(--site-line-strong);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .er-gp-marketing-option {
  background: var(--site-sunken);
  border-color: var(--site-line);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .er-gp-marketing-option:has(.er-gp-marketing-radio:checked) {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.55);
}
html[data-brand="site"] #main-app .er-gp-marketing-legend,
html[data-brand="site"] #main-app .er-gp-marketing-option__text {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .er-gp-marketing-option__sub {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .er-closeout--na {
  background: var(--site-sunken);
  border-color: var(--site-line);
  color: var(--site-muted);
}

/* Shared confirm / input modal (appended to <body>) */
html[data-brand="site"] .issue-input-modal__backdrop {
  background: rgba(8, 10, 14, 0.7);
  backdrop-filter: blur(3px);
}
html[data-brand="site"] .issue-input-modal__card {
  background: var(--site-panel);
  border: 1px solid var(--site-line-strong);
  color: var(--site-text);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75);
  border-radius: var(--site-radius-lg);
  padding: 1.35rem 1.4rem 1.2rem;
}
html[data-brand="site"] .issue-input-modal__title {
  font-family: var(--site-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--site-text);
}
html[data-brand="site"] .issue-input-modal__message,
html[data-brand="site"] .issue-input-modal__card label {
  color: var(--site-muted);
}
html[data-brand="site"] .issue-input-modal__card input,
html[data-brand="site"] .issue-input-modal__card textarea,
html[data-brand="site"] .issue-input-modal__card select {
  background: var(--site-sunken);
  border-color: var(--site-line-strong);
  color: var(--site-text);
}
html[data-brand="site"] .issue-input-modal__actions {
  gap: 0.6rem;
  margin-top: 1.1rem;
}
html[data-brand="site"] .issue-input-modal__actions .btn-app-outline,
html[data-brand="site"] .issue-input-modal__actions .btn-app-primary {
  min-height: 2.6rem;
  padding: 0.55rem 1.1rem;
}
html[data-brand="site"] .issue-input-modal__actions .btn-app-outline {
  background: transparent;
  border: 1px solid var(--site-line-strong);
  color: var(--site-text);
}
html[data-brand="site"] .issue-input-modal__actions .btn-app-outline:hover {
  border-color: var(--site-text);
}

/* Issues: no rule above submit */
html[data-brand="site"] #admin-issues-section .issue-report-form .issues-form-actions {
  border-top: 0;
  padding-top: 0.25rem;
}

/* Availability painter (dark) */
html[data-brand="site"] #main-app .availability-paint-seg {
  background: var(--site-sunken);
  border-color: var(--site-line);
  box-shadow: none;
}
html[data-brand="site"] #main-app .availability-paint-seg button,
html[data-brand="site"] #main-app .availability-paint-seg__btn {
  background: transparent;
  border-color: transparent;
  color: var(--site-muted);
  box-shadow: none;
}
html[data-brand="site"] #main-app .availability-paint-seg button:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .availability-paint-seg button.is-active {
  background: var(--site-elevated);
  color: var(--site-text);
  box-shadow: inset 0 0 0 1px var(--site-line-strong);
}
html[data-brand="site"] #main-app .availability-paint-seg button.is-active[data-paint="available"],
html[data-brand="site"] #main-app .availability-paint-seg button.is-active[data-paint-state="available"] {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.5);
}
html[data-brand="site"] #main-app .availability-paint-seg button.is-active[data-paint="maybe"],
html[data-brand="site"] #main-app .availability-paint-seg button.is-active[data-paint-state="maybe"] {
  background: rgba(249, 115, 22, 0.18);
  color: #fdba74;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.5);
}
html[data-brand="site"] #main-app .availability-paint-seg button.is-active[data-paint="unavailable"],
html[data-brand="site"] #main-app .availability-paint-seg button.is-active[data-paint-state="unavailable"],
html[data-brand="site"] #main-app .availability-paint-seg button.is-active[data-paint="blocked"] {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.5);
}
html[data-brand="site"] #main-app .availability-paint-seg__btn--available.is-active {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.5);
}
html[data-brand="site"] #main-app .availability-paint-seg__btn--maybe.is-active {
  background: rgba(249, 115, 22, 0.18);
  color: #fdba74;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.5);
}
html[data-brand="site"] #main-app .availability-paint-seg__btn--unavailable.is-active {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.5);
}
html[data-brand="site"] #main-app .availability-paint-seg__btn--clear .availability-paint-seg__dot {
  background: transparent;
  border-color: var(--site-muted);
}
html[data-brand="site"] #main-app .floor-pipeline__fill {
  background: linear-gradient(90deg, #5f8f2a, var(--site-accent));
}
html[data-brand="site"] #main-app .escape-room-gm-obj-goal-block .escape-room-gm-obj-goal-text,
html[data-brand="site"] #main-app p.escape-room-gm-obj-goal-text {
  background: transparent;
  color: var(--site-text);
  border-color: var(--site-line);
}
html[data-brand="site"] #main-app .escape-room-gm-hints-summary-icon {
  background: var(--site-elevated);
  border-color: var(--site-line-strong);
  color: var(--site-accent-bright);
}
html[data-brand="site"] #main-app .escape-room-gm-hints-summary-label {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .escape-room-gm-interaction-text {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .escape-room-gm-timer-readout,
html[data-brand="site"] #main-app #escape-room-gm-timer {
  text-shadow: none;
}
html[data-brand="site"] #main-app .escape-room-gm-send {
  background: var(--site-accent-dim);
  border: 1px solid rgba(141, 198, 63, 0.5);
  color: var(--site-accent-bright);
  box-shadow: none;
}
html[data-brand="site"] #main-app .escape-room-gm-send:hover:not(:disabled) {
  background: var(--site-accent);
  color: var(--site-ink-on-accent);
}

/* ---------- Requests: type toggle, duration chip, balanced columns ---------- */
html[data-brand="site"] #admin-pay-requests-section .pay-request-type-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-field:has(.pay-request-type-toggle) {
  position: relative;
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--site-sunken);
  border: 1px solid var(--site-line);
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-type-btn {
  appearance: none;
  border: 0;
  border-radius: 9px;
  min-height: 2.6rem;
  background: transparent;
  color: var(--site-muted);
  font: 700 0.82rem/1 var(--site-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-type-btn:hover:not(.is-active) {
  color: var(--site-text);
  background: rgba(255, 255, 255, 0.04);
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-type-btn.is-active {
  background: var(--site-accent);
  color: var(--site-ink-on-accent);
  box-shadow: 0 6px 16px -8px rgba(141, 198, 63, 0.7);
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-type-btn:focus-visible {
  outline: 2px solid var(--site-accent-bright);
  outline-offset: 2px;
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-range-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-range-foot .pay-request-range-hint {
  margin: 0;
  color: var(--site-muted);
  font-size: 0.8rem;
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-duration {
  flex: 0 0 auto;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--site-accent-dim);
  border: 1px solid rgba(141, 198, 63, 0.45);
  color: var(--site-accent-bright);
  font-weight: 700;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-duration.hidden {
  display: none;
}
@media (min-width: 960px) {
  html[data-brand="site"] #admin-pay-requests-section .pay-request-layout {
    align-items: stretch;
  }
  html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-wrap {
    position: static;
    display: flex;
    flex-direction: column;
  }
  html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-list:has(> .pay-request-mine-empty:only-child),
  html[data-brand="site"] #admin-pay-requests-section .pay-request-mine-list:has(> .empty-state:only-child) {
    justify-content: center;
  }
}

/* ---------- Till / POS ---------- */
html[data-brand="site"] #main-app .till-day-label,
html[data-brand="site"] #main-app .till-ticket-label,
html[data-brand="site"] #main-app .till-guest-summary__sub,
html[data-brand="site"] #main-app .till-guest-summary__caret,
html[data-brand="site"] #main-app .till-guest-popover__close,
html[data-brand="site"] #main-app .till-booking-btn span,
html[data-brand="site"] #main-app .till-recent-wrap summary,
html[data-brand="site"] #main-app .till-cart-line--custom .till-cart-line__name::after {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .cash-up-till-panel.till-pos {
  background: var(--site-sunken);
  border-color: var(--site-line);
}
html[data-brand="site"] #main-app .till-pos-menu,
html[data-brand="site"] #main-app .till-pos-ticket {
  background: var(--site-panel);
  border-color: var(--site-line);
  color: var(--site-text);
  box-shadow: none;
}
html[data-brand="site"] #main-app .till-product-btn {
  background: var(--site-elevated);
  border: 1px solid var(--site-line-strong);
  color: var(--site-text);
  box-shadow: none;
}
html[data-brand="site"] #main-app .till-product-btn:hover {
  background: #313949;
  border-color: rgba(141, 198, 63, 0.55);
}
html[data-brand="site"] #main-app .till-product-btn.is-in-cart {
  background: var(--site-accent-dim);
  border-color: var(--site-accent);
}
html[data-brand="site"] #main-app .till-product-btn small,
html[data-brand="site"] #main-app .till-cart-line__qty,
html[data-brand="site"] #main-app .till-cart-line--deal .till-cart-line__qty,
html[data-brand="site"] #main-app .till-change,
html[data-brand="site"] #main-app .till-total-row--grand strong,
html[data-brand="site"] #main-app #till-total,
html[data-brand="site"] #main-app .till-sale-done__amount {
  color: var(--site-accent-bright);
}
html[data-brand="site"] #main-app .till-product-qty {
  background: var(--site-accent);
  color: var(--site-ink-on-accent);
}
html[data-brand="site"] #main-app #till-sales-panel-btn.is-active {
  background: var(--site-accent-dim);
  border-color: var(--site-accent);
  color: var(--site-accent-bright);
}
html[data-brand="site"] #main-app .till-guest-block,
html[data-brand="site"] #main-app .till-totals,
html[data-brand="site"] #main-app .till-discount-row,
html[data-brand="site"] #main-app .till-pay,
html[data-brand="site"] #main-app .till-recent-wrap {
  border-color: var(--site-line);
}
html[data-brand="site"] #main-app .till-discount-row,
html[data-brand="site"] #main-app .till-recent-wrap {
  background: transparent;
}
html[data-brand="site"] #main-app .till-pay {
  background: var(--site-sunken);
}
html[data-brand="site"] #main-app .till-guest-summary,
html[data-brand="site"] #main-app .till-booking-btn,
html[data-brand="site"] #main-app .till-booking-btn--none,
html[data-brand="site"] #main-app .till-recent-row,
html[data-brand="site"] #main-app .till-catalog-deal-row {
  background: var(--site-sunken);
  border-color: var(--site-line-strong);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .till-guest-summary:hover,
html[data-brand="site"] #main-app .till-booking-btn:hover {
  border-color: rgba(141, 198, 63, 0.55);
}
html[data-brand="site"] #main-app .till-guest-summary.is-attached,
html[data-brand="site"] #main-app .till-booking-btn.is-selected,
html[data-brand="site"] #main-app .till-booking-btn--none.is-selected {
  background: var(--site-accent-dim);
  border-color: var(--site-accent);
}
html[data-brand="site"] #main-app .till-guest-summary__text,
html[data-brand="site"] #main-app .till-cart-line__name,
html[data-brand="site"] #main-app .till-cart-line__price,
html[data-brand="site"] #main-app .till-total-row,
html[data-brand="site"] #main-app .till-tender-grid label,
html[data-brand="site"] #main-app .till-sale-done__msg {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .till-guest-popover {
  background: var(--site-panel);
  border-color: var(--site-line-strong);
  color: var(--site-text);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.7);
}
html[data-brand="site"] #main-app .till-guest-popover__head {
  border-color: var(--site-line);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .till-cart-line + .till-cart-line {
  border-top-color: var(--site-line);
}
html[data-brand="site"] #main-app .till-cart-line__leader {
  border-bottom-color: var(--site-line-strong);
}
html[data-brand="site"] #main-app .till-cart-line__note,
html[data-brand="site"] #main-app .till-cart-line--discount .till-cart-line__price {
  color: #fbbf24;
}
html[data-brand="site"] #main-app .till-cart-line__remove,
html[data-brand="site"] #main-app .till-discount-row__status {
  color: #f08a7c;
}
html[data-brand="site"] #main-app .till-cart-empty {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .till-discount-btn,
html[data-brand="site"] #main-app .till-custom-item-btn {
  background: var(--site-elevated);
  border-color: var(--site-line-strong);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .till-sale-done {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.45);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .till-sales-panel,
html[data-brand="site"] #main-app .till-recent-sales {
  background: var(--site-panel);
  border-color: var(--site-line);
  color: var(--site-text);
}

/* Cash up: status + transfer */
html[data-brand="site"] #main-app .cash-up-inline-status {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.45);
  color: var(--site-accent-bright);
}
html[data-brand="site"] #main-app .cash-up-inline-status.is-error {
  background: rgba(229, 72, 77, 0.14);
  border-color: rgba(229, 72, 77, 0.45);
  color: #f08a7c;
}
html[data-brand="site"] #admin-cash-up-section .cash-up-transfer-panel {
  background: var(--site-panel);
  border-color: var(--site-line);
}
html[data-brand="site"] #main-app .cash-up-transfer-amount-input,
html[data-brand="site"] #main-app .cash-up-transfer-money {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .cash-up-flow-datetime__sep {
  background: var(--site-muted);
}

/* ---------- Till / POS layout (site theme) ---------- */
html[data-brand="site"] #main-app .cash-up-till-panel.till-pos {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  flex-direction: column;
  gap: 1rem;
}
html[data-brand="site"] #main-app .till-pos-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0 0 1rem;
  margin: 0;
  border-bottom: 1px solid var(--site-line);
}
html[data-brand="site"] #main-app .till-pos-bar-left,
html[data-brand="site"] #main-app .till-pos-bar-right {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
html[data-brand="site"] #main-app .till-day-label {
  margin: 0 0.15rem 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-brand="site"] #main-app .till-day-input {
  height: 2.5rem;
  min-height: 2.5rem;
  width: 10.5rem;
  padding-block: 0;
}
html[data-brand="site"] #main-app .till-pos-bar .btn-app-outline {
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.95rem;
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  border-color: var(--site-line-strong);
  background: transparent;
  color: var(--site-text);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}
html[data-brand="site"] #main-app .till-pos-bar .btn-app-outline:hover {
  border-color: var(--site-text);
}

html[data-brand="site"] #main-app .till-pos-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 1.25rem;
  align-items: start;
}

/* Menu card */
html[data-brand="site"] #main-app .till-pos-menu {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem;
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius-lg);
  background: var(--site-panel);
  height: auto;
}
html[data-brand="site"] #main-app .till-ticket-label {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .till-menu-label {
  margin: 0;
}
html[data-brand="site"] #main-app .till-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  gap: 0.65rem;
  min-height: 0;
  height: auto;
}
html[data-brand="site"] #main-app .till-product-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 96px;
  padding: 0.9rem 0.95rem;
  border-radius: 12px;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}
html[data-brand="site"] #main-app .till-product-btn small {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html[data-brand="site"] #main-app .till-custom-item-btn {
  min-height: 2.75rem;
  border: 1px dashed var(--site-line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--site-muted);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}
html[data-brand="site"] #main-app .till-custom-item-btn:hover {
  border-color: var(--site-accent);
  color: var(--site-accent-bright);
  background: var(--site-accent-dim);
}

/* Ticket card */
html[data-brand="site"] #main-app .till-pos-ticket {
  padding: 0;
  border: 1px solid var(--site-line-strong);
  border-radius: var(--site-radius-lg);
  background: var(--site-panel);
  overflow: hidden;
  height: auto;
}
html[data-brand="site"] #main-app .till-ticket-main {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
}
html[data-brand="site"] #main-app .till-guest-block,
html[data-brand="site"] #main-app .till-items,
html[data-brand="site"] #main-app .till-discount-row,
html[data-brand="site"] #main-app .till-totals {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 0;
  border-bottom: 1px solid var(--site-line);
  background: transparent;
}
html[data-brand="site"] #main-app .till-items {
  min-height: 0;
}
html[data-brand="site"] #main-app .till-cart-lines {
  min-height: 2.5rem;
  gap: 0.45rem;
}
html[data-brand="site"] #main-app .till-cart-empty {
  margin: 0;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  text-align: center;
  border: 1px dashed var(--site-line);
  border-radius: 10px;
}
html[data-brand="site"] #main-app .till-discount-btns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
html[data-brand="site"] #main-app .till-discount-btns > button {
  min-height: 2.2rem;
  padding: 0 0.35rem;
  border-radius: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: var(--site-elevated);
  border: 1px solid var(--site-line-strong);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .till-discount-btns > button:hover {
  border-color: var(--site-accent);
}
html[data-brand="site"] #main-app .till-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.15rem 0;
  color: var(--site-muted);
  font-size: 0.88rem;
}
html[data-brand="site"] #main-app .till-total-row strong {
  color: var(--site-text);
  font-variant-numeric: tabular-nums;
}
html[data-brand="site"] #main-app .till-total-row--grand {
  margin-top: 0.55rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--site-line-strong);
  color: var(--site-text);
  font-family: var(--site-display);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}
html[data-brand="site"] #main-app .till-total-row--grand strong,
html[data-brand="site"] #main-app #till-total {
  font-family: var(--site-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--site-accent-bright);
}

/* Pay */
html[data-brand="site"] #main-app .till-pay {
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 0;
  background: var(--site-sunken);
}
html[data-brand="site"] #main-app .till-tender-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem 0.85rem;
}
html[data-brand="site"] #main-app .till-tender-grid label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .till-tender-grid input {
  height: 2.75rem;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
html[data-brand="site"] #main-app .till-change {
  margin: 0.7rem 0 0;
  min-height: 1.2rem;
  font-size: 0.88rem;
  font-weight: 700;
}
html[data-brand="site"] #main-app .till-change:empty {
  display: none;
}
html[data-brand="site"] #main-app .till-complete-btn {
  display: block;
  width: 100%;
  margin-top: 0.85rem;
  min-height: 3.1rem;
  border-radius: 10px;
  font-family: var(--site-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
}
html[data-brand="site"] #main-app .till-complete-btn:disabled {
  opacity: 0.45;
}

@media (max-width: 860px) {
  html[data-brand="site"] #main-app .till-pos-body {
    grid-template-columns: 1fr;
  }
  html[data-brand="site"] #main-app .till-pos-bar-left,
  html[data-brand="site"] #main-app .till-pos-bar-right {
    flex-wrap: wrap;
  }
  html[data-brand="site"] #main-app .till-pos-bar-right {
    width: 100%;
  }
  html[data-brand="site"] #main-app .till-pos-bar-right .btn-app-outline {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ---------- Cash up: cashbag denominations + money inputs ---------- */
html[data-brand="site"] #admin-cash-up-section .cash-up-bag-panel {
  background: var(--site-panel);
  border-color: var(--site-line);
}
html[data-brand="site"] #main-app .cash-up-denom-section-title,
html[data-brand="site"] #main-app .cash-up-denom-pieces,
html[data-brand="site"] #main-app .cash-up-bag-serial-line {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .cash-up-denom-pieces.is-filled {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .cash-up-denom-pieces.is-invalid {
  color: #fbbf24;
}
html[data-brand="site"] #main-app .cash-up-denom-cell {
  background: var(--site-elevated);
  border: 1px solid var(--site-line-strong);
  border-radius: 12px;
  padding: 0.55rem;
  box-shadow: none;
}
html[data-brand="site"] #main-app .cash-up-denom-cell:hover {
  background: var(--site-elevated);
  border-color: rgba(141, 198, 63, 0.45);
}
html[data-brand="site"] #main-app .cash-up-denom-cell.is-filled {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.6);
}
html[data-brand="site"] #main-app .cash-up-denom-cell.is-invalid {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.6);
}
html[data-brand="site"] #main-app .cash-up-denom-badge {
  background: transparent;
  color: var(--site-text);
  box-shadow: none;
  border: 0;
  font-family: var(--site-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  padding: 0.1rem 0 0.35rem;
}
html[data-brand="site"] #main-app .cash-up-denom-cell.is-filled .cash-up-denom-badge {
  color: var(--site-accent-bright);
}
html[data-brand="site"] #main-app .cash-up-money {
  background: var(--site-sunken);
  border: 1px solid var(--site-line-strong);
  border-radius: 9px;
  box-shadow: none;
  overflow: hidden;
}
html[data-brand="site"] #main-app .cash-up-denom-cell.is-filled .cash-up-money {
  border-color: rgba(141, 198, 63, 0.6);
}
html[data-brand="site"] #main-app .cash-up-denom-cell.is-invalid .cash-up-money {
  border-color: rgba(245, 158, 11, 0.7);
}
html[data-brand="site"] #main-app .cash-up-money:focus-within {
  border-color: var(--site-accent);
  box-shadow: 0 0 0 3px var(--site-accent-dim);
}
html[data-brand="site"] #main-app .cash-up-money-prefix {
  background: transparent;
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .cash-up-money input,
html[data-brand="site"] #main-app .cash-up-bag-denom-input,
html[data-brand="site"] #main-app .cash-up-transfer-amount-input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--site-text);
  font-variant-numeric: tabular-nums;
}
html[data-brand="site"] #main-app .cash-up-money input::placeholder,
html[data-brand="site"] #main-app .cash-up-bag-denom-input::placeholder {
  color: #6b665f;
}

/* ---------- Escape room: session cards ---------- */
html[data-brand="site"] #main-app .floor-card {
  gap: 0.9rem;
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: var(--site-radius-lg);
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}
html[data-brand="site"] #main-app .floor-card:hover {
  border-color: var(--site-line-strong) !important;
}
html[data-brand="site"] #main-app .floor-card__title {
  font-family: var(--site-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--site-text);
}
html[data-brand="site"] #main-app .floor-card__meta {
  margin-top: 0.4rem;
  gap: 0.2rem;
}
html[data-brand="site"] #main-app .floor-card__meta-when {
  font-size: 0.7rem !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-muted) !important;
}
html[data-brand="site"] #main-app .floor-card__meta-detail {
  color: var(--site-text);
  font-size: 0.85rem;
  font-weight: 500;
}
html[data-brand="site"] #main-app .floor-card__meta-piece {
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app .floor-card__meta-sep {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .floor-card__meta-piece--gm,
html[data-brand="site"] #main-app .floor-card__title-gm {
  color: var(--site-accent-bright) !important;
  font-weight: 600;
}

/* Compact pipeline on cards */
html[data-brand="site"] #main-app .floor-card__pipeline {
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--site-line);
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline {
  padding: 0;
  margin: 0;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__track {
  top: 12px;
  left: 10%;
  right: 10%;
  height: 2px;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__node {
  gap: 0.4rem;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__dot {
  width: 26px;
  height: 26px;
  border: 0 !important;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__dot svg {
  width: 12px;
  height: 12px;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__node:not(.is-done):not(.is-current) .floor-pipeline__dot {
  background: var(--site-panel) !important;
  color: #6b665f;
  box-shadow: inset 0 0 0 1.5px var(--site-line-strong) !important;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__node.is-done .floor-pipeline__dot {
  background: #4d7424 !important;
  color: #e6f4d2 !important;
  box-shadow: none !important;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__node.is-current .floor-pipeline__dot {
  box-shadow: 0 0 0 4px var(--site-accent-dim) !important;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7d776e !important;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__node.is-done .floor-pipeline__label {
  color: var(--site-muted) !important;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__node.is-current .floor-pipeline__label {
  color: var(--site-accent-bright) !important;
  font-weight: 700;
}
html[data-brand="site"] #main-app .floor-card__pipeline .floor-pipeline__fill {
  background: #4d7424;
}

/* Card actions pinned to the bottom, full width */
html[data-brand="site"] #main-app .floor-card__actions {
  margin-top: auto;
}
html[data-brand="site"] #main-app .floor-card__actions > button,
html[data-brand="site"] #main-app .floor-card__actions > a {
  flex: 1 1 100%;
  justify-content: center;
  min-height: 2.6rem;
  border-radius: 9px;
}
html[data-brand="site"] #main-app .floor-card__actions > :not(button):not(a) {
  flex: 1 1 100%;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--site-line-strong);
  border-radius: 9px;
  color: var(--site-muted);
  font-size: 0.8rem;
  text-align: center;
}
html[data-brand="site"] #main-app .floor-card__note {
  color: var(--site-muted);
}

/* ---------- Cash up: full-width panels ---------- */
html[data-brand="site"] #main-app .cash-up-start-panel,
html[data-brand="site"] #admin-cash-up-section .cash-up-transfer-panel {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 760px) {
  html[data-brand="site"] #main-app .cash-up-flow-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
  html[data-brand="site"] #main-app .cash-up-flow-choice {
    min-height: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.1rem 1.15rem;
  }
}

/* ---------- Audit log + security activity ---------- */
html[data-brand="site"] #main-app .audit-feed-empty {
  background: transparent;
  border-color: var(--site-line-strong);
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .audit-event-card {
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  box-shadow: none !important;
  color: var(--site-text);
}
html[data-brand="site"] #main-app .audit-event-title {
  color: var(--site-text) !important;
  font-weight: 700;
}
html[data-brand="site"] #main-app .audit-event-time {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .audit-event-category {
  background: var(--site-accent-dim);
  border-color: rgba(141, 198, 63, 0.45);
  color: var(--site-accent-bright);
}
html[data-brand="site"] #main-app .audit-event-pill {
  background: var(--site-sunken);
  border-color: var(--site-line);
  color: var(--site-text);
}
html[data-brand="site"] #main-app .audit-event-pill strong {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .audit-change-block,
html[data-brand="site"] #main-app .audit-extra-details {
  background: var(--site-sunken) !important;
  border-color: var(--site-line) !important;
}
html[data-brand="site"] #main-app .audit-extra-details dt {
  color: var(--site-muted) !important;
}
html[data-brand="site"] #main-app .audit-extra-details dd,
html[data-brand="site"] #main-app .audit-value,
html[data-brand="site"] #main-app .audit-changes-cell,
html[data-brand="site"] #main-app .audit-event-card .audit-changes-cell,
html[data-brand="site"] #main-app .audit-delete-line {
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app .audit-delete-notice {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html[data-brand="site"] #main-app .audit-delete-title {
  color: #fbbf24 !important;
}
html[data-brand="site"] #main-app .audit-delete-notice.audit-detail-summary-line {
  background: var(--site-sunken) !important;
  border: 1px solid var(--site-line) !important;
  border-left: 3px solid var(--site-accent) !important;
}
html[data-brand="site"] #main-app .audit-change-row {
  background: var(--site-sunken);
  border-color: var(--site-line);
}
html[data-brand="site"] #main-app .audit-change-title {
  color: var(--site-muted);
}

/* ---------- Readability: small labels, hints, grid heads ---------- */
html[data-brand="site"] #main-app .inline-label,
html[data-brand="site"] dialog .inline-label {
  font-size: 0.74rem;
  color: #d6d0c6;
}
html[data-brand="site"] #main-app .label-opt {
  font-size: 0.72rem;
  color: var(--site-muted);
  text-transform: none;
  letter-spacing: 0.02em;
}
html[data-brand="site"] #main-app .hint,
html[data-brand="site"] #admin-pay-requests-section .pay-request-range-foot .pay-request-range-hint {
  font-size: 0.84rem;
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .availability-admin-staff-head,
html[data-brand="site"] #main-app .availability-admin-time-head {
  font-size: 0.76rem !important;
  color: #d6d0c6 !important;
  letter-spacing: 0.08em;
}
html[data-brand="site"] #main-app .availability-admin-cell:not(.is-available):not(.is-blocked):not(.is-maybe) {
  background: var(--site-sunken);
}

/* ---------- Nav dropdowns + notifications (dark) ---------- */
html[data-brand="site"] #main-app .nav-dropdown,
html[data-brand="site"] .nav-dropdown {
  background: var(--site-panel) !important;
  border: 1px solid var(--site-line-strong) !important;
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.75) !important;
  color: var(--site-text);
}
html[data-brand="site"] #main-app .nav-dropdown__item,
html[data-brand="site"] .nav-dropdown__item {
  color: #d6d0c6 !important;
  background: transparent;
  border-radius: 8px;
}
html[data-brand="site"] #main-app .nav-dropdown__item:hover,
html[data-brand="site"] #main-app .nav-dropdown__item:focus-visible {
  background: rgba(255, 245, 230, 0.06) !important;
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app .nav-dropdown__item.is-active,
html[data-brand="site"] #main-app .nav-dropdown__item[aria-current="page"] {
  background: var(--site-accent-dim) !important;
  color: var(--site-accent-bright) !important;
}
html[data-brand="site"] #main-app .nav-dropdown hr,
html[data-brand="site"] #main-app .nav-dropdown [role="separator"] {
  border-color: var(--site-line);
  background: var(--site-line);
}
html[data-brand="site"] #main-app .notifications-title,
html[data-brand="site"] #main-app .notifications-section-title--muted,
html[data-brand="site"] #main-app .notifications-section-caret,
html[data-brand="site"] #main-app .notifications-item-detail {
  color: var(--site-muted) !important;
}
html[data-brand="site"] #main-app .notifications-section-title,
html[data-brand="site"] #main-app .notifications-item-title {
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app .notifications-item,
html[data-brand="site"] #main-app .notifications-menu-footer {
  border-color: var(--site-line) !important;
}
html[data-brand="site"] #main-app .notifications-item:hover {
  background: rgba(255, 245, 230, 0.05) !important;
}
html[data-brand="site"] #main-app .notifications-item--unread .notifications-item-title::before {
  background: var(--site-accent);
}
html[data-brand="site"] #main-app .notifications-item--uncovered {
  background: rgba(239, 68, 68, 0.12) !important;
  border-left-color: #ef4444 !important;
}
html[data-brand="site"] #main-app .notifications-item--uncovered:hover {
  background: rgba(239, 68, 68, 0.2) !important;
}
html[data-brand="site"] #main-app .notifications-item--uncovered .notifications-item-title {
  color: #fca5a5 !important;
}
html[data-brand="site"] #main-app .notifications-item--covered .notifications-item-title {
  color: var(--site-muted) !important;
}
html[data-brand="site"] #main-app .btn-notifications-mark-read {
  color: var(--site-accent-bright) !important;
}
html[data-brand="site"] #main-app .btn-notifications-mark-read:hover {
  color: var(--site-text) !important;
}

/* Cash up choice tiles: consistent top alignment */
@media (min-width: 760px) {
  html[data-brand="site"] #main-app .cash-up-flow-choice {
    justify-content: flex-start;
    gap: 0.35rem;
  }
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-range-foot {
  justify-content: flex-end;
}
html[data-brand="site"] #admin-pay-requests-section .pay-request-range-foot:not(:has(.pay-request-duration:not(.hidden))) {
  display: none;
}

/* ---------- Team availability: phone layout ---------- */
@media (max-width: 768px) {
  html[data-brand="site"] #main-app .availability-admin-grid {
    width: 100%;
    min-width: max-content;
  }
  html[data-brand="site"] #main-app #admin-availability-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 12px;
  }
  html[data-brand="site"] #main-app .availability-admin-staff-head {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.55rem 0.3rem;
    font-size: 0.68rem !important;
    letter-spacing: 0.04em;
  }
  html[data-brand="site"] #main-app .availability-admin-time-head,
  html[data-brand="site"] #main-app .availability-admin-time-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--site-elevated) !important;
    box-shadow: 1px 0 0 var(--site-line-strong);
  }
  html[data-brand="site"] #main-app .availability-admin-time-head {
    z-index: 3;
    padding: 0.55rem 0.35rem;
  }
  html[data-brand="site"] #main-app .availability-admin-time-cell {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    padding: 0.2rem 0.35rem;
  }
  html[data-brand="site"] #main-app .availability-admin-cell,
  html[data-brand="site"] #main-app .availability-admin-time-cell {
    min-height: 1.9rem;
  }
}

@media (max-width: 640px) {
  html[data-brand="site"] #main-app .availability-toolbar--staff {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  html[data-brand="site"] #main-app .availability-toolbar--staff .availability-nav-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
  }
  html[data-brand="site"] #main-app .availability-toolbar--staff .availability-nav-group .btn-app-outline {
    min-height: 2.5rem;
    padding: 0 0.4rem;
    font-size: 0.74rem;
    border-radius: 9px;
  }
  html[data-brand="site"] #main-app .availability-toolbar--staff .availability-toolbar__week-meta {
    display: flex;
    gap: 0.4rem;
    width: 100%;
  }
  html[data-brand="site"] #main-app .availability-toolbar--staff .availability-period-label {
    flex: 1 1 auto;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html[data-brand="site"] #main-app .availability-toolbar--staff .availability-date-picker-btn {
    width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border-radius: 9px;
  }
  html[data-brand="site"] #main-app .availability-controls-card--team {
    padding: 0.5rem;
  }
  html[data-brand="site"] #main-app #admin-availability-override-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
  }
  html[data-brand="site"] #main-app #admin-availability-override-block .availability-controls-card__kicker {
    flex: 0 0 auto;
    margin: 0;
    padding-left: 0.25rem;
  }
  html[data-brand="site"] #main-app #admin-availability-override-block .availability-override-toggle {
    flex: 1 1 auto;
    min-height: 2.5rem;
    font-size: 0.72rem;
    border-radius: 9px;
  }
}
@media (max-width: 768px) {
  html[data-brand="site"] #main-app .availability-admin-grid {
    min-width: 0;
    width: 100%;
  }
  html[data-brand="site"] #main-app .availability-admin-grid-head,
  html[data-brand="site"] #main-app .availability-admin-grid .availability-admin-row {
    width: max(100%, calc(3.1rem + var(--avail-staff-count, 0) * 4.5rem));
  }
}
@media (max-width: 640px) {
  html[data-brand="site"] #main-app .availability-admin-shell {
    padding: 0.85rem 0.75rem 1rem;
  }
}
@media (max-width: 768px) {
  html[data-brand="site"] #main-app .availability-admin-grid-head,
  html[data-brand="site"] #main-app .availability-admin-grid .availability-admin-row {
    width: calc(3.1rem + max(var(--avail-staff-count, 0), 4) * ((100% - 3.1rem) / 4));
  }
  html[data-brand="site"] #main-app .availability-admin-staff-head {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    text-overflow: clip;
  }
}

/* Schedule date nav: arrows either side of the date, calendar dropdown */
html[data-brand="site"] #main-app .schedule-toolbar-nav {
  background: var(--site-sunken);
  border-color: var(--site-line-strong);
  border-radius: 10px;
}
html[data-brand="site"] #main-app .schedule-toolbar-nav .schedule-date-btn {
  height: 2.2rem;
  border: 0;
  background: transparent;
  padding: 0 0.6rem;
}
html[data-brand="site"] #main-app .schedule-toolbar-nav .schedule-date-btn:hover {
  background: rgba(255, 245, 230, 0.06);
}
html[data-brand="site"] #main-app .schedule-icon-btn {
  color: var(--site-text);
}
html[data-brand="site"] #main-app .schedule-date-pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: 17.5rem;
  padding: 0.75rem;
  background: var(--site-elevated);
  border: 1px solid var(--site-line-strong);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
html[data-brand="site"] #main-app .schedule-date-pop.hidden {
  display: none;
}
html[data-brand="site"] #main-app .schedule-date-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
html[data-brand="site"] #main-app .schedule-date-pop__month {
  font-weight: 700;
  color: var(--site-text);
}
html[data-brand="site"] #main-app .schedule-date-pop__dow,
html[data-brand="site"] #main-app .schedule-date-pop__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
html[data-brand="site"] #main-app .schedule-date-pop__dow span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--site-muted);
  padding: 0.2rem 0;
}
html[data-brand="site"] #main-app .schedule-date-pop__day {
  height: 2.1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--site-text);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
html[data-brand="site"] #main-app .schedule-date-pop__day:hover {
  background: rgba(255, 245, 230, 0.08);
}
html[data-brand="site"] #main-app .schedule-date-pop__day.is-today {
  border-color: var(--site-accent);
  color: var(--site-accent-bright);
  font-weight: 700;
}
html[data-brand="site"] #main-app .schedule-date-pop__day.is-selected {
  background: var(--site-accent);
  border-color: var(--site-accent);
  color: var(--site-ink-on-accent);
  font-weight: 700;
}
html[data-brand="site"] #main-app .schedule-date-pop__today {
  width: 100%;
  margin-top: 0.6rem;
  height: 2.4rem;
  border: 1px solid var(--site-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--site-accent-bright);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-brand="site"] #main-app .schedule-date-pop__today:hover {
  background: var(--site-accent);
  color: var(--site-ink-on-accent);
}
@media (max-width: 768px) {
  html[data-brand="site"] #main-app .schedule-toolbar-nav {
    order: 0;
    flex: 1 1 100%;
    display: flex;
  }
  html[data-brand="site"] #main-app .schedule-toolbar-nav .schedule-date-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }
  html[data-brand="site"] #main-app .schedule-toolbar-nav .schedule-date-btn {
    width: 100%;
    justify-content: center;
  }
  html[data-brand="site"] #main-app .schedule-toolbar-nav .schedule-date-btn .shifts-period-label {
    flex: 0 1 auto;
    text-align: center;
  }
}

/* Approvals: stacked cards on phones */
html[data-brand="site"] #main-app #admin-pay-approvals-section .pay-approval-notes-label {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--site-muted);
}
@media (max-width: 768px) {
  html[data-brand="site"] #main-app #admin-pay-approvals-section .table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table,
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table tbody,
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table tr,
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table thead {
    display: none;
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table tr {
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--site-panel);
    border: 1px solid var(--site-line);
    border-radius: 10px;
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table td {
    display: grid;
    max-width: none;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.35rem 0;
    border: 0;
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--site-text);
    text-align: left;
    white-space: normal;
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table td[colspan] {
    display: block;
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table td[data-label]::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--site-muted);
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table td + td {
    border-top: 1px solid var(--site-line);
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .pay-approval-notes-body {
    font-size: 0.92rem;
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table td.cell-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding-top: 0.7rem;
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table td.cell-actions button {
    width: 100%;
    min-height: 2.6rem;
    margin: 0;
  }
  html[data-brand="site"] #main-app #admin-pay-approvals-section .app-table td.cell-actions button:first-child {
    background: var(--site-accent);
    border-color: var(--site-accent);
    color: var(--site-ink-on-accent);
  }
}

/* Phone agenda: empty time slots */
html[data-brand="site"] #main-app .shift-agenda-gap {
  display: flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0 0.85rem;
  border: 1px dashed var(--site-line-strong);
  border-radius: 10px;
  background: rgba(255, 245, 230, 0.02);
  color: var(--site-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
html[data-brand="site"] #main-app .shift-agenda-group--gap .shift-agenda-time strong {
  color: var(--site-muted);
}
html[data-brand="site"] #main-app .shift-agenda-group--gap.is-past {
  opacity: 0.45;
}

/* Schedule: phone List / Grid switch */
#main-app .schedule-mobile-view {
  display: none;
}
@media (max-width: 720px) {
  #main-app .schedule-mobile-view {
    display: inline-flex;
    order: 2;
    flex: none;
    padding: 3px;
    gap: 2px;
    border-radius: 10px;
    background: var(--site-sunken, #f1f5f3);
    border: 1px solid var(--site-line-strong, #dbe3de);
  }
  #main-app .schedule-mobile-view__btn {
    min-width: 3.4rem;
    height: 2rem;
    padding: 0 0.7rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--site-muted, #52605a);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }
  #main-app .schedule-mobile-view__btn[aria-pressed="true"] {
    background: var(--site-accent, #16a34a);
    color: var(--site-ink-on-accent, #fff);
  }
  #main-app .schedule-toolbar .schedule-stats {
    order: 3;
  }
}

/* Schedule: phone grid view */
@media (max-width: 720px) {
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-calendar {
    --mobile-room-w: 7.25rem;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-scroll {
    max-height: calc(100dvh - 10rem);
    overflow: auto;
    overscroll-behavior: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2.75rem;
    -webkit-overflow-scrolling: touch;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-days,
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-day,
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-game-strip {
    min-width: calc(var(--room-count, 1) * var(--mobile-room-w));
    overflow: visible;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-game-col {
    flex: 0 0 var(--mobile-room-w);
    min-width: var(--mobile-room-w);
    overflow: visible;
    scroll-snap-align: start;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-time-col {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    z-index: 6;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-game-head {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-game-head--time-gutter {
    z-index: 7;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-game-head-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-time-label {
    font-size: 0.66rem;
  }
}
html[data-brand="site"] #main-app .schedule-shell.is-mobile-grid .shifts-rooms-game-head,
html[data-brand="site"] #main-app .schedule-shell.is-mobile-grid .shifts-rooms-time-col {
  background: var(--site-panel);
}

/* Schedule: phone grid cards show full details */
@media (max-width: 720px) {
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-time-col {
    z-index: 45;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-game-head {
    z-index: 50;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-game-head--time-gutter {
    z-index: 55;
  }
  #main-app .schedule-shell.is-mobile-grid .shifts-rooms-game-body .shift-block.shift-block--compact {
    gap: 0.15rem !important;
    padding: 0.35rem 0.4rem 0.35rem 0.7rem !important;
  }
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-time-row {
    font-size: 0.74rem !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-time-end,
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-gm-rest {
    display: inline !important;
  }
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-gm {
    font-size: 0.74rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-gm--needs-cover {
    display: inline-flex !important;
  }
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-foot {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-party,
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-dgb {
    display: inline-flex !important;
    position: static !important;
    font-size: 0.66rem !important;
    padding: 0.05rem 0.35rem !important;
  }
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-claim {
    height: 1.5rem !important;
    min-height: 1.5rem !important;
    font-size: 0.68rem !important;
  }
}
@media (max-width: 720px) {
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-top {
    display: flex !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    line-height: 1.2 !important;
    font-size: inherit !important;
    opacity: 1 !important;
  }
}
@media (max-width: 720px) {
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact > * {
    flex-shrink: 0 !important;
  }
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-foot {
    flex-wrap: nowrap !important;
  }
  #main-app .schedule-shell.is-mobile-grid .shift-block--compact .shift-block-foot .shift-block-claim {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Login MFA step */
#login-section .login-card-title {
  text-align: center;
}
#login-section .login-mfa-hint:empty,
#login-section .login-mfa-meta:empty {
  display: none;
}

/* Remaining light panels: Settings, analytics, reports, schedule form */
html[data-brand="site"] #main-app :is(
  .analytics-card,
  .create-shift-form,
  .cfg-sync-history-panel
) {
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  color: var(--site-text) !important;
  box-shadow: none !important;
}
html[data-brand="site"] :is(#main-app, dialog) :is(
  .form-panel,
  .cfg-permission-group,
  .cfg-notif-card,
  .cfg-er-objective,
  .cfg-er-obj-panel,
  .cfg-er-hint-row,
  .cfg-audience-picker,
  .cfg-er-hints-details,
  .cfg-notif-tokens,
  .cfg-admin-health-widget,
  .cfg-resend-status,
  .users-directory-toolbar,
  .checklist-step-preview-wrap,
  .report-pay-reveal-wrap,
  .report-export-bar,
  .escape-room-runs-ctx-menu
) {
  background: var(--site-elevated) !important;
  border-color: var(--site-line) !important;
  color: var(--site-text) !important;
  box-shadow: none !important;
}
html[data-brand="site"] #main-app :is(.cfg-test-email-log, .cfg-sync-history-scroll, .notice-quill-editor) {
  background: var(--site-sunken) !important;
  border-color: var(--site-line-strong) !important;
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app :is(.form-panel, .cfg-permission-group, .cfg-notif-card, .cfg-er-obj-panel, .analytics-card) :is(h3, h4, h5, .section-title, .cfg-permission-group-head h5) {
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app :is(.form-panel, .cfg-permission-group, .cfg-notif-card, .cfg-er-obj-panel, .analytics-card) .hint {
  color: var(--site-muted) !important;
}
html[data-brand="site"] #main-app .cfg-permission-options .checkbox-row span {
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app .cfg-er-hint-order {
  background: rgba(255, 245, 230, 0.08) !important;
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app .cfg-ov-meter {
  background: rgba(255, 245, 230, 0.1) !important;
}
html[data-brand="site"] #main-app .role-pill {
  background: rgba(255, 245, 230, 0.08) !important;
  border-color: var(--site-line) !important;
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app .cfg-sync-history__pill--success {
  background: rgba(141, 198, 63, 0.16) !important;
  color: var(--site-accent-bright) !important;
  border-color: transparent !important;
}
html[data-brand="site"] #main-app .cfg-sync-history__pill--partial {
  background: rgba(240, 180, 60, 0.16) !important;
  color: #f0c56a !important;
  border-color: transparent !important;
}
html[data-brand="site"] #main-app .cfg-sync-history__pill--failed {
  background: rgba(240, 138, 124, 0.16) !important;
  color: #f08a7c !important;
  border-color: transparent !important;
}
html[data-brand="site"] #main-app .analytics-view-tab {
  background: transparent !important;
  color: var(--site-muted) !important;
  border-color: var(--site-line-strong) !important;
}
html[data-brand="site"] #main-app .analytics-view-tab:is(.is-active, [aria-selected="true"], [aria-pressed="true"]) {
  background: var(--site-accent) !important;
  border-color: var(--site-accent) !important;
  color: var(--site-ink-on-accent) !important;
}
html[data-brand="site"] .app-config-toast {
  background: var(--site-elevated) !important;
  border-color: var(--site-line-strong) !important;
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app .escape-room-runs-chart-card {
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  color: var(--site-text) !important;
  box-shadow: none !important;
}
html[data-brand="site"] #main-app :is(.escape-room-runs-outcome-pill, .er-closeout) {
  border-color: transparent !important;
  background: rgba(255, 245, 230, 0.08) !important;
  color: var(--site-muted) !important;
}
html[data-brand="site"] #main-app :is(.escape-room-runs-outcome-pill--escaped, .er-closeout--done) {
  background: rgba(141, 198, 63, 0.16) !important;
  color: var(--site-accent-bright) !important;
}
html[data-brand="site"] #main-app :is(.escape-room-runs-outcome-pill--dnf, .er-closeout--miss) {
  background: rgba(240, 138, 124, 0.16) !important;
  color: #f08a7c !important;
}
html[data-brand="site"] #main-app :is(.escape-room-runs-outcome-pill--expired, .er-closeout--pending) {
  background: rgba(240, 180, 60, 0.16) !important;
  color: #f0c56a !important;
}

/* Checklists card */
html[data-brand="site"] #main-app .checklists-layout > div {
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  box-shadow: none !important;
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app .checklists-layout .section-title {
  color: var(--site-text) !important;
}

/* Totals: employee week view matches Schedule cards */
html[data-brand="site"] #main-app #report-employee-calendar-grid {
  --rep-game-1: #60a5fa; --rep-game-2: #2563eb;
  --rep-training-1: #34d399; --rep-training-2: #059669;
  --rep-overtime-1: #fb923c; --rep-overtime-2: #ea580c;
  --rep-dgb-1: #a78bfa; --rep-dgb-2: #7c3aed;
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-block {
  --c1: var(--rep-game-1);
  --c2: var(--rep-game-2);
  position: relative;
  margin: 2px 4px;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem !important;
  border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent) !important;
  border-radius: 10px !important;
  background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%) !important;
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--c2) 80%, transparent) !important;
  overflow: hidden;
  z-index: 1;
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-block::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.6);
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-block.is-training { --c1: var(--rep-training-1); --c2: var(--rep-training-2); }
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-block.is-overtime { --c1: var(--rep-overtime-1); --c2: var(--rep-overtime-2); }
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-block.is-double-game-bonus { --c1: var(--rep-dgb-1); --c2: var(--rep-dgb-2); }
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-block__text {
  color: #fff !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  white-space: normal;
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-legend__swatch {
  border: 0 !important;
  border-radius: 4px !important;
  background: linear-gradient(160deg, var(--rep-game-1), var(--rep-game-2)) !important;
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-legend__swatch.is-training { background: linear-gradient(160deg, var(--rep-training-1), var(--rep-training-2)) !important; }
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-legend__swatch.is-overtime { background: linear-gradient(160deg, var(--rep-overtime-1), var(--rep-overtime-2)) !important; }
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-legend__swatch.is-double-game-bonus { background: linear-gradient(160deg, var(--rep-dgb-1), var(--rep-dgb-2)) !important; }
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-grid .availability-cell:not(.report-employee-block) {
  background: transparent !important;
  border-color: transparent !important;
  border-right: 1px solid var(--site-line) !important;
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-grid .availability-cell.is-hour:not(.report-employee-block) {
  border-top: 1px solid rgba(255, 245, 230, 0.08) !important;
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-grid .availability-time-label {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-soft) !important;
  font-size: 0.66rem !important;
  font-variant-numeric: tabular-nums;
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .report-employee-grid .availability-time-label.is-quarter {
  color: transparent !important;
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .availability-day-head {
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  color: var(--site-text) !important;
}
html[data-brand="site"] #main-app #report-employee-calendar-grid .availability-day-head.is-today .availability-day-head__label {
  color: var(--site-accent-bright) !important;
}

/* Schedule card right-click / long-press menu */
html[data-brand="site"] .shift-context-menu {
  max-width: calc(100vw - 16px);
  background: var(--site-elevated);
  border: 1px solid var(--site-line-strong);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
html[data-brand="site"] .shift-context-menu__item {
  color: var(--site-text);
  background: transparent;
}
html[data-brand="site"] .shift-context-menu__item:hover,
html[data-brand="site"] .shift-context-menu__item:focus-visible {
  background: rgba(255, 245, 230, 0.08);
}
html[data-brand="site"] .shift-context-menu__item--danger {
  color: #f08a7c;
}

/* iOS Safari: native date/time inputs ignore width and widen dialogs */
dialog input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
dialog input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])::-webkit-date-and-time-value {
  text-align: left;
}
dialog.dialog-edit-entry {
  max-width: min(440px, calc(100vw - 1.5rem));
  box-sizing: border-box;
  overflow-x: hidden;
}
dialog.dialog-edit-entry :is(select, textarea, input) {
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  dialog.dialog-edit-entry :is(.dialog-edit-entry-actions, .dialog-actions, menu) {
    flex-wrap: wrap;
  }
}

/* Phone nav dropdowns open under the tapped button, not as a bottom sheet */
@media (max-width: 720px) {
  #main-app .nav-dropdown:not(.hidden) {
    top: var(--dd-top, 8rem) !important;
    bottom: auto !important;
    left: 0.6rem !important;
    right: 0.6rem !important;
    max-height: calc(100dvh - var(--dd-top, 8rem) - 0.75rem) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6) !important;
  }
}

/* Wordmark — match the Treforest logo lettering. text-stroke shows Montserrat's
   overlapping glyph contours, so the outline comes from an SVG filter instead. */
html[data-brand="site"] #main-app .app-title,
html[data-brand="site"] #login-brand-title {
  font-family: "Montserrat", "Avenir Next", "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  color: #f8fafc !important;
  filter: url(#wordmark-outline);
}

html[data-brand="site"] #main-app .app-title {
  font-size: 1.35rem !important;
}