/* ==========================================================================
   Tenant dashboard — dark mode (step 2 of docs/DASHBOARD_LOOK_PLAN.md)
   Loaded ONLY by templates/dashboard/base.html, after every page sheet.
   Every rule sits under html[data-theme="dark"], which the head script
   (templates/dashboard/_theme_head.html) sets from the person's choice in
   the user menu (Light / Dark / Auto). Light mode is untouched.

   This file = the shared colour names + the menu, top bar, buttons, forms
   and the demo guide. Colours written out in full inside the page sheets
   are turned dark by scripts/brand/make_dark_css.py →
   dashboard-dark.generated.css (loaded after this file).
   ========================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  /* Dark palette (cards sit a step above the page). */
  --dk-page: #0f1115;
  --dk-surface: #17191e;
  --dk-raised: #1e222a;
  --dk-line: #2c313b;
  --dk-line-strong: #3a404b;
  --dk-ink: #f1f3f7;
  --dk-text: #d5d9e0;
  --dk-muted: #a0a6b1;

  /* base.css neutrals, flipped. --color-white = the card colour; the few
     rules using it for text on coloured buttons are kept white by the
     generated sheet. */
  --color-white: #17191e;
  --color-primary: #e6e9ef;
  --color-primary-light: #ffffff;
  --color-primary-dark: #ffffff;
  --color-secondary: #c3c8d1;
  --color-gray-50: #1b1f26;
  --color-gray-100: #232730;
  --color-gray-200: #2c313b;
  --color-gray-300: #3a404b;
  --color-gray-400: #8d939e;
  --color-gray-500: #a0a6b1;
  --color-gray-600: #b6bcc6;
  --color-gray-700: #cbd0d8;
  --color-gray-800: #dfe3e9;
  --color-gray-900: #f1f3f7;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 32px -8px rgba(0, 0, 0, 0.6);

  /* Brand blue on dark: the tokens stay BUTTON blues (white text on them
     reads); "-ink" steps are hover shades, lighter than the base. Blue TEXT
     is switched to --dk-link by the generated sheet. Soft fills go deep. */
  --dk-link: #8fa9ff;
  --brand: #2b5cff;
  --brand-2: #4a72ff;
  --brand-ink: #3f69ff;
  --brand-ink-2: #a9bdff;    /* text on the soft blues (dark) — 6.8:1 on --brand-soft-2 */
  --brand-ink-3: #7c97ff;
  --brand-soft: #1b2440;
  --brand-soft-2: #22305a;
  --brand-line: #34467f;
  --brand-300: #5b7cff;
  --brand-400: #4a6cff;
  --brand-band: #12151b;
  --color-accent: #2b5cff;
  --color-accent-dark: #3f69ff;
  --color-indigo-600: #2b5cff;

  /* Reservation notes stripes keep their meaning, text gets lighter. */
  --note-attention-text: #fdba74;
  --note-urgent-text: #fda4af;
  --note-info-text: #a5b4fc;
  --note-attention-bg: #3a2512;
  --note-urgent-bg: #3d1a22;
  --note-info-bg: #1f2547;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .dashboard,
html[data-theme="dark"] .main-content {
  background: var(--dk-page);
  color: var(--dk-text);
}

/* Shared page palette used by the rebuilt pages (rooms-modern.css). */
html[data-theme="dark"] .rmx-page {
  --rmx-ink: var(--dk-ink);
  --rmx-text: var(--dk-text);
  --rmx-muted: var(--dk-muted);
  --rmx-faint: #8d939e;
  --rmx-line: var(--dk-line);
  --rmx-line-soft: #232730;
  --rmx-surface: var(--dk-surface);
  --rmx-subtle: var(--dk-raised);
  --rmx-accent: var(--brand);
}
html[data-theme="dark"] .rsv-modern {
  --rm-ink: var(--dk-ink);
  --rm-text: var(--dk-text);
  --rm-muted: var(--dk-muted);
  --rm-faint: #8d939e;
  --rm-line: var(--dk-line);
  --rm-line-soft: #232730;
  --rm-surface: var(--dk-surface);
  --rm-subtle: var(--dk-raised);
  /* status row tints: keep the hue so the front desk can still scan by
     colour, but dark enough for light text */
  --rm-tint-checkedin: #2e2414;
  --rm-tint-arrived: #15291d;
  --rm-tint-inproperty: #173a26;
  --rm-tint-todepart: #2f1a1f;
  --rm-tint-departed: #3d1b23;
}

/* ── Menu: back to the dark rail (the light-blue menu is the light look) ── */
html[data-theme="dark"] .sidebar--light {
  --sb-bg: #0b0c0f;
  --sb-text: #d6d8dd;
  --sb-text-strong: #fff;
  --sb-muted: #8f939c;
  --sb-hover: rgba(255, 255, 255, 0.06);
  --sb-active: rgba(255, 255, 255, 0.1);
  --sb-line: rgba(255, 255, 255, 0.08);
  --sb-focus: var(--dk-link);
  border-right-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .sidebar--light .sidebar-nav { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
html[data-theme="dark"] .sidebar--light .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] .sidebar--light .sidebar-header .org-name { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .sidebar--light .sidebar-nav a.active { color: #fff; box-shadow: none; }
html[data-theme="dark"] .sidebar--light .sidebar-nav a.active::before { background: var(--brand-300); }
html[data-theme="dark"] .sidebar--light .nav-lock { border-color: rgba(255, 255, 255, 0.18); color: var(--sb-muted); }
html[data-theme="dark"] .sidebar--light .nav-star { color: rgba(255, 255, 255, 0.4); }
html[data-theme="dark"] .sidebar--light .nav-star:hover,
html[data-theme="dark"] .sidebar--light[data-edit-mode="true"] .nav-star--active { color: #fbbf24; }
html[data-theme="dark"] .sidebar--light[data-edit-mode="true"] .sidebar-customize-btn { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
@media (min-width: 769px) {
  html[data-theme="dark"] .sidebar--light.collapsed .nav-section-line { background: rgba(255, 255, 255, 0.12); }
}
/* Dark-letters logo in light mode, white-letters logo in dark (same moon O). */
.sidebar .logo .logo-full--on-dark { display: none; }
html[data-theme="dark"] .sidebar .logo .logo-full--on-light { display: none; }
html[data-theme="dark"] .sidebar .logo .logo-full--on-dark { display: block; }
@media (min-width: 769px) {
  html[data-theme="dark"] .sidebar.collapsed .logo .logo-full--on-dark { display: none; }
}

/* ── Top bar ── */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .topbar--tenant {
  --tb-ink: var(--dk-ink);
  --tb-text: var(--dk-text);
  --tb-muted: var(--dk-muted);
  --tb-line: var(--dk-line);
  --tb-hover: #232730;
  --tb-press: #2a2f39;
  background: var(--dk-surface);
  border-bottom-color: var(--dk-line);
}

/* ── Cards, tables, forms, buttons (shared bits from base/dashboard.css) ── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .tb-panel,
html[data-theme="dark"] .user-menu-dropdown {
  background: var(--dk-surface);
  border-color: var(--dk-line);
  color: var(--dk-text);
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
  background-color: #12151a;
  border-color: var(--dk-line-strong);
  color: var(--dk-ink);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7d838e; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { border-color: var(--brand-300); }
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline {
  background: var(--dk-raised);
  color: var(--dk-ink);
  border-color: var(--dk-line-strong);
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover { background: #262b34; color: #fff; }
html[data-theme="dark"] .dashboard .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
html[data-theme="dark"] .dashboard .btn-primary:hover { background: #4a72ff; border-color: #4a72ff; }
/* Plain links: base.css colours them with --color-primary, which is light
   now. Only links inside text get the light blue (page styles that colour
   links themselves, e.g. tabs, keep their own colour). */
html[data-theme="dark"] :where(p, li, td, .help-text, .form-help, small) > a:not([class]) { color: var(--dk-link); }
html[data-theme="dark"] ::selection { background: rgba(91, 124, 255, 0.45); color: #fff; }
html[data-theme="dark"] hr { border-color: var(--dk-line); }
html[data-theme="dark"] img:not([src$=".svg"]) { color-scheme: normal; }

/* ── Appearance switch in the user menu (both modes) ── */
.user-menu-theme { padding: 6px 12px 8px; margin: 0; }
.user-menu-theme__label { font-size: 12px; font-weight: 600; color: var(--color-gray-500); margin: 2px 2px 6px; }
.user-menu-theme__seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--color-gray-100);
}
.user-menu-theme__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-gray-600);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.user-menu-theme__opt:hover { color: var(--color-gray-900); }
.user-menu-theme__opt[aria-checked="true"] {
  background: #fff;
  color: var(--brand-ink, #1d45d9);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(10, 11, 15, 0.12);
}
.user-menu-theme__opt:focus-visible { outline: 2px solid var(--brand-ink, #1d45d9); outline-offset: 1px; }
.user-menu-theme__hint { margin: 6px 2px 0; font-size: 12px; color: var(--color-gray-500); }
.user-menu-theme__hint[hidden] { display: none; }
@media (max-width: 600px) { .user-menu-theme__opt { min-height: 44px; } }
/* Text size is a phone setting (owner 2026-10-13): computers have their own
   zoom control top right, and the large-text sheet only applies ≤768px. */
@media (min-width: 769px) { .user-menu-text { display: none; } }
/* Text size row (Normal / Large) — same look, two options */
.user-menu-text { padding-top: 0; }
.user-menu-text .user-menu-theme__seg { grid-template-columns: repeat(2, 1fr); }
.user-menu-text__a { font-weight: 700; line-height: 1; font-family: var(--font-display, inherit); }
.user-menu-text__a--s { font-size: 12px; }
.user-menu-text__a--l { font-size: 17px; }
html[data-theme="dark"] .user-menu-theme__seg { background: #0f1115; }
html[data-theme="dark"] .user-menu-theme__opt[aria-checked="true"] { background: #2a2f39; color: #fff; box-shadow: none; }
html[data-theme="dark"] .user-menu-theme__opt:hover { color: #fff; }

/* ── Demo guide: in dark mode the pill turns light so it still stands out ── */
html[data-theme="dark"] .demo-guide {
  --dg-ink: #f1f3f7;
  --dg-muted: #a0a6b1;
  --dg-line: #2c313b;
}
html[data-theme="dark"] .demo-guide__btn,
html[data-theme="dark"].demo-guide-top .demo-guide__exit { color: #0f172a; }
html[data-theme="dark"] .demo-guide__panel { background: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-line); }

/* Smooth swap when someone flips the switch (not on page load). */
@media (prefers-reduced-motion: no-preference) {
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; }
}

/* ── Reservations: row colours chosen in the settings sheet ──────────
   The page sets light --rc-<state>-* colours (inline, per person). In dark
   keep each colour's hue but make it dark (cards) or light (pill text). */
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row.rsv-day-row--awaiting:not(.rsv-day-row--header) {
  background: color-mix(in oklab, var(--rc-awaiting-tint) 12%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-awaiting-tint) 0.26 min(calc(c * 3), 0.07) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--awaiting .rsv-room-type > .rsv-badge:first-child,
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--awaiting .rsv-m__pill--state {
  background: color-mix(in oklab, var(--rc-awaiting-pill-fg) 22%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-awaiting-pill-fg) 0.32 min(calc(c * 0.5), 0.08) h) !important;
  color: color-mix(in oklab, var(--rc-awaiting-pill-fg) 45%, #ffffff) !important;
  color: oklch(from var(--rc-awaiting-pill-fg) 0.84 min(c, 0.12) h) !important;
  border-color: color-mix(in oklab, var(--rc-awaiting-pill-fg) 45%, var(--dk-surface)) !important;
  border-color: oklch(from var(--rc-awaiting-pill-fg) 0.45 min(c, 0.1) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row.rsv-day-row--checkedin:not(.rsv-day-row--header) {
  background: color-mix(in oklab, var(--rc-checkedin-tint) 12%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-checkedin-tint) 0.26 min(calc(c * 3), 0.07) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--checkedin .rsv-room-type > .rsv-badge:first-child,
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--checkedin .rsv-m__pill--state {
  background: color-mix(in oklab, var(--rc-checkedin-pill-fg) 22%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-checkedin-pill-fg) 0.32 min(calc(c * 0.5), 0.08) h) !important;
  color: color-mix(in oklab, var(--rc-checkedin-pill-fg) 45%, #ffffff) !important;
  color: oklch(from var(--rc-checkedin-pill-fg) 0.84 min(c, 0.12) h) !important;
  border-color: color-mix(in oklab, var(--rc-checkedin-pill-fg) 45%, var(--dk-surface)) !important;
  border-color: oklch(from var(--rc-checkedin-pill-fg) 0.45 min(c, 0.1) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row.rsv-day-row--arrived:not(.rsv-day-row--header) {
  background: color-mix(in oklab, var(--rc-arrived-tint) 12%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-arrived-tint) 0.26 min(calc(c * 3), 0.07) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--arrived .rsv-room-type > .rsv-badge:first-child,
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--arrived .rsv-m__pill--state {
  background: color-mix(in oklab, var(--rc-arrived-pill-fg) 22%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-arrived-pill-fg) 0.32 min(calc(c * 0.5), 0.08) h) !important;
  color: color-mix(in oklab, var(--rc-arrived-pill-fg) 45%, #ffffff) !important;
  color: oklch(from var(--rc-arrived-pill-fg) 0.84 min(c, 0.12) h) !important;
  border-color: color-mix(in oklab, var(--rc-arrived-pill-fg) 45%, var(--dk-surface)) !important;
  border-color: oklch(from var(--rc-arrived-pill-fg) 0.45 min(c, 0.1) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row.rsv-day-row--inproperty:not(.rsv-day-row--header) {
  background: color-mix(in oklab, var(--rc-inproperty-tint) 12%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-inproperty-tint) 0.26 min(calc(c * 3), 0.07) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--inproperty .rsv-room-type > .rsv-badge:first-child,
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--inproperty .rsv-m__pill--state {
  background: color-mix(in oklab, var(--rc-inproperty-pill-fg) 22%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-inproperty-pill-fg) 0.32 min(calc(c * 0.5), 0.08) h) !important;
  color: color-mix(in oklab, var(--rc-inproperty-pill-fg) 45%, #ffffff) !important;
  color: oklch(from var(--rc-inproperty-pill-fg) 0.84 min(c, 0.12) h) !important;
  border-color: color-mix(in oklab, var(--rc-inproperty-pill-fg) 45%, var(--dk-surface)) !important;
  border-color: oklch(from var(--rc-inproperty-pill-fg) 0.45 min(c, 0.1) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row.rsv-day-row--todepart:not(.rsv-day-row--header) {
  background: color-mix(in oklab, var(--rc-todepart-tint) 12%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-todepart-tint) 0.26 min(calc(c * 3), 0.07) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--todepart .rsv-room-type > .rsv-badge:first-child,
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--todepart .rsv-m__pill--state {
  background: color-mix(in oklab, var(--rc-todepart-pill-fg) 22%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-todepart-pill-fg) 0.32 min(calc(c * 0.5), 0.08) h) !important;
  color: color-mix(in oklab, var(--rc-todepart-pill-fg) 45%, #ffffff) !important;
  color: oklch(from var(--rc-todepart-pill-fg) 0.84 min(c, 0.12) h) !important;
  border-color: color-mix(in oklab, var(--rc-todepart-pill-fg) 45%, var(--dk-surface)) !important;
  border-color: oklch(from var(--rc-todepart-pill-fg) 0.45 min(c, 0.1) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row.rsv-day-row--departed:not(.rsv-day-row--header) {
  background: color-mix(in oklab, var(--rc-departed-tint) 12%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-departed-tint) 0.26 min(calc(c * 3), 0.07) h) !important;
}
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--departed .rsv-room-type > .rsv-badge:first-child,
html[data-theme="dark"] .rsv-modern.rsv-rc .rsv-day-row--departed .rsv-m__pill--state {
  background: color-mix(in oklab, var(--rc-departed-pill-fg) 22%, var(--dk-surface)) !important;
  background: oklch(from var(--rc-departed-pill-fg) 0.32 min(calc(c * 0.5), 0.08) h) !important;
  color: color-mix(in oklab, var(--rc-departed-pill-fg) 45%, #ffffff) !important;
  color: oklch(from var(--rc-departed-pill-fg) 0.84 min(c, 0.12) h) !important;
  border-color: color-mix(in oklab, var(--rc-departed-pill-fg) 45%, var(--dk-surface)) !important;
  border-color: oklch(from var(--rc-departed-pill-fg) 0.45 min(c, 0.1) h) !important;
}

/* Demo guide copy offer (demo_guide.css) */
html[data-theme="dark"] .demo-guide__offer { background: #2e2414; border-color: #6b4f16; color: #fde68a; }
html[data-theme="dark"] .demo-guide__offer strong { color: #fef3c7; }

/* business logo in the menu (dashboard-brand.css): no card in dark either;
   an uploaded image gets a light backing so a dark logo stays visible */
html[data-theme="dark"] .sidebar--light .sidebar-header .org-brand { background: none; }
html[data-theme="dark"] .org-brand .biz-logo__img,
html[data-theme="dark"] .sidebar .logo .logo-biz .biz-logo__img { background: #fff; padding: 4px 8px; border-radius: 8px; box-sizing: content-box; }

/* Activity log category pills: their colour is set per category inline
   (--axl-c); lift it so it reads on the dark card (was 2.8:1 for red). */
html[data-theme="dark"] .axl-pill { color: color-mix(in oklab, var(--axl-c) 50%, #fff); background: color-mix(in srgb, var(--axl-c) 24%, transparent); }

/* Guest portal settings header (settings-forms.css .stx-head) sits outside
   .rmx-page, so its --rmx-ink fallback was the light-mode navy. */
html[data-theme="dark"] .stx-head h1 { color: var(--dk-ink); }
html[data-theme="dark"] .stx-head p { color: var(--dk-muted); }

/* Calendar "today" circle: --today turns light blue for text in dark, so
   the white number needs the button blue behind it. */
html[data-theme="dark"] .ctl-rday.is-today .ctl-rday__num,
html[data-theme="dark"] .ctl-day.is-today .ctl-day__num { background: #2b5cff; color: #fff; }

/* Phone reservation card (2026-10-15): text + soft chips on dark rows. */
html[data-theme="dark"] .rsv-mobile-cards-on .rsv-m { color: var(--dk-text, #e5e9f0); }
html[data-theme="dark"] .rsv-m__chip { background: rgba(255, 255, 255, 0.08); color: var(--dk-text, #e5e9f0); }
html[data-theme="dark"] .rsv-m .rsv-card-expand-btn--arrow { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: var(--dk-text, #e5e9f0); }
html[data-theme="dark"] .rsv-card--expanded .rsv-m .rsv-card-expand-btn--arrow { background: #e5e9f0; border-color: #e5e9f0; color: #0f172a; }
html[data-theme="dark"] .rsv-m__more { border-top-color: rgba(255, 255, 255, 0.12); }