/* ============================================================
   DARK THEME
   ============================================================
   Activated by data-bs-theme="dark" on <html> or wrapper.

   Philosophy:
   - Neutral, cool dark backgrounds (no warm undertone)
   - Three-layer surface hierarchy: bg -> topbar -> card
   - Brand azure appears ONLY as accent (active nav, charts,
     CTAs) -- chrome stays neutral
   - Lighter brand variant (--brand-light-on-dark) for
     accents where canonical azure would be too saturated
   ============================================================ */

[data-bs-theme="dark"] {

  /* ===== SURFACES =====
     Mailgun-style two-level elevation by COLOUR, not shadow (design study, decision-pending,
     measured off the Sinch Mailgun UI 2026-08-30): one canvas layer behind everything, and a
     single raised layer (~4% lighter) shared by sidebar + topbar + cards, instead of the old
     three-tier base/raised/sunken stack. */
  --surface-base:    #14181C;     /* canvas - page background, deepest layer */
  --surface-raised:  #1A2126;     /* sidebar + topbar + cards - one shared raised layer */
  --surface-sunken:  #0E1116;     /* still used for genuinely inset elements (disabled inputs, search) */
  --surface-overlay: #232A33;     /* dropdowns, popovers */
  --surface-hover:   rgba(255, 255, 255, 0.04);
  --surface-active:  rgba(255, 255, 255, 0.08);

  /* ===== TEXT ===== */
  --text-primary:   #FAFAFA;
  --text-secondary: #A0A0A8;
  --text-muted:     #6A6A73;
  --text-inverse:   #FFFFFF;
  --text-link:      var(--brand-light-on-dark);
  --text-link-hover: var(--brand-300);

  /* ===== BORDERS ===== */
  --border-subtle:   rgba(255, 255, 255, 0.05);
  --border-default:  rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.14);
  --border-focus:    var(--brand-light-on-dark);
  /* Low-contrast hairline (Mailgun-style design study): reused for card edges, the tab-strip
     rule, and topbar group dividers. A literal flat colour rather than a white-alpha overlay. */
  --border-hairline: #2E373D;

  /* ===== SHADOWS - softer in dark mode ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.20);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.40), 0 4px 6px rgba(0, 0, 0, 0.20);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.50), 0 10px 10px rgba(0, 0, 0, 0.20);

  /* ===== SIDEBAR ===== */
  --sidebar-bg:                 var(--surface-raised);
  --sidebar-border:             var(--border-subtle);
  --sidebar-logo-color:         var(--text-primary);
  --sidebar-section-label:      #B4B4BC;
  --sidebar-item-color:         #E8E8EC;
  --sidebar-item-hover-bg:      var(--surface-hover);
  --sidebar-item-active-bg:     rgba(37, 99, 235, 0.20);   /* Roomzy blue */
  --sidebar-item-active-color:  var(--brand-light-on-dark);
  --sidebar-item-active-border: var(--brand-light-on-dark);
  --sidebar-badge-bg:           rgba(255, 255, 255, 0.06);
  --sidebar-badge-color:        #A0A0A8;
  --sidebar-active-badge-bg:    rgba(37, 99, 235, 0.28);   /* Roomzy blue */
  --sidebar-active-badge-color: var(--brand-light-on-dark);

  /* ===== TOPBAR ===== */
  --topbar-bg:         var(--surface-raised);
  --topbar-border:     var(--border-subtle);
  --topbar-divider:    var(--border-hairline);
  --topbar-search-bg:  rgba(255, 255, 255, 0.04);
  --topbar-kbd-bg:     rgba(255, 255, 255, 0.06);
  --topbar-kbd-border: rgba(255, 255, 255, 0.08);
  --topbar-kbd-color:  #A0A0A8;

  /* ===== TABLE ===== */
  --table-row-hover-bg:    rgba(255, 255, 255, 0.03);
  --table-row-inactive-bg: rgba(255, 255, 255, 0.03);
  /* One step up from a plain row (selected rows, and hovering a row that is already tinted), and one
     step above that again, so hovering an emphasised row still gives feedback instead of standing still. */
  --table-row-emphasis-bg:       rgba(255, 255, 255, 0.07);
  --table-row-emphasis-hover-bg: rgba(255, 255, 255, 0.10);
  --table-header-color:    var(--text-muted);
  --table-border:          var(--border-subtle);

  /* ===== STATUS BADGES ===== */
  --badge-success-bg:  rgba(151, 196, 89, 0.18);
  --badge-success-fg:  #97C459;
  --badge-info-bg:     rgba(133, 183, 235, 0.18);
  --badge-info-fg:     #85B7EB;
  --badge-warning-bg:  rgba(245, 147, 13, 0.18);
  --badge-warning-fg:  #f5930d;
  --badge-danger-bg:   rgba(240, 153, 123, 0.18);
  --badge-danger-fg:   #F0997B;
  --badge-neutral-bg:  rgba(255, 255, 255, 0.08);
  --badge-neutral-fg:  #A0A0A8;

  /* ===== SEMANTIC TEXT ===== */
  --color-success: #5DCAA5;
  --color-danger:  #F0997B;
  --color-warning: #f5930d;
  --color-info:    #85B7EB;

  /* ===== METRIC ICON TINTS ===== */
  --icon-tint-brand-bg:   rgba(37, 99, 235, 0.20);   /* Roomzy blue */
  --icon-tint-brand-fg:   var(--brand-light-on-dark);
  --icon-tint-info-bg:    rgba(24, 95, 165, 0.20);
  --icon-tint-info-fg:    #85B7EB;
  --icon-tint-success-bg: rgba(59, 109, 17, 0.20);
  --icon-tint-success-fg: #97C459;
  --icon-tint-warning-bg: rgba(245, 147, 13, 0.18);
  --icon-tint-warning-fg: #f5930d;

  /* ===== CHART COLORS ===== */
  --chart-grid:       rgba(255, 255, 255, 0.05);
  --chart-area-fill:  rgba(37, 99, 235, 0.20);   /* Roomzy blue */
  --chart-area-line:  var(--brand-light-on-dark);
  --chart-axis-label: var(--text-muted);

  /* ===== BOOTSTRAP OVERRIDES ===== */
  --bs-body-bg: var(--surface-base);
  --bs-body-color: var(--text-primary);
  /* NOTE: Bootstrap's real variable names are --bs-secondary-bg / --bs-tertiary-bg (NOT
     --bs-body-secondary-bg / --bs-body-tertiary-bg — those don't exist in Bootstrap and were
     silently no-ops). The -rgb variants are required too: .bg-body-secondary/.bg-body-tertiary
     read rgba(var(--bs-*-bg-rgb), ...), not the hex var directly. */
  --bs-secondary-bg: var(--surface-raised);
  --bs-secondary-bg-rgb: 26, 33, 38;      /* #1A2126 */
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-bg: var(--surface-sunken);
  --bs-tertiary-bg-rgb: 14, 17, 22;       /* #0E1116 */
  --bs-tertiary-color: var(--text-muted);
  --bs-emphasis-color: var(--text-primary);

  --bs-border-color: var(--border-default);
  --bs-border-color-translucent: var(--border-subtle);

  --bs-primary: var(--brand-500);
  --bs-primary-rgb: 37, 99, 235;   /* #2563EB - Roomzy blue */
  --bs-primary-bg-subtle: rgba(37, 99, 235, 0.20);
  --bs-primary-border-subtle: rgba(37, 99, 235, 0.35);
  --bs-primary-text-emphasis: var(--brand-light-on-dark);

  --bs-link-color: var(--brand-light-on-dark);
  --bs-link-color-rgb: 96, 165, 250;   /* #60A5FA - brand-400 (dark logo R) */
  --bs-link-hover-color: var(--brand-300);
  --bs-link-hover-color-rgb: 147, 197, 253;   /* #93C5FD - brand-300 */

  --bs-form-control-bg: var(--surface-raised);
  --bs-form-control-disabled-bg: var(--surface-sunken);

  --bs-card-bg: var(--surface-raised);
  --bs-card-border-color: var(--border-hairline);
  --bs-card-cap-bg: transparent;

  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
  --bs-table-border-color: var(--border-subtle);

  --bs-dropdown-bg: var(--surface-overlay);
  --bs-dropdown-border-color: var(--border-default);
  --bs-dropdown-link-hover-bg: var(--surface-hover);
  --bs-dropdown-link-active-bg: rgba(37, 99, 235, 0.20);   /* Roomzy blue */
  --bs-dropdown-link-active-color: var(--brand-light-on-dark);

  --bs-modal-bg: var(--surface-overlay);
  --bs-modal-border-color: var(--border-default);

  /* Semantic colors (--bs-danger, --bs-success, --bs-warning, --bs-info)
     are intentionally NOT overridden. Bootstrap 5.3's text-bg-* classes ship
     with compiled contrast (white/black text) and breaking the backgrounds
     would break readability. Brand identity lives on --bs-primary only. */
}

/* Bootstrap's own .card/.dropdown-menu/.modal rules locally RE-DECLARE --bs-card-bg (defaulting
   to --bs-body-bg), --bs-card-border-color, --bs-card-cap-bg, --bs-dropdown-bg and --bs-modal-bg
   on the element itself. A directly-matching declaration always wins over an inherited custom
   property, no matter the source order of the theme block above — so the overrides just set on
   [data-bs-theme="dark"] never actually reached rendered cards/dropdowns/modals. Restated here,
   targeting the components directly, so the elevation design actually applies. */
[data-bs-theme="dark"] .card {
  --bs-card-bg: var(--surface-raised);
  --bs-card-border-color: var(--border-hairline);
  --bs-card-cap-bg: transparent;
}

[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--surface-overlay);
  --bs-dropdown-border-color: var(--border-default);
}

[data-bs-theme="dark"] .modal {
  --bs-modal-bg: var(--surface-overlay);
  --bs-modal-border-color: var(--border-default);
}

/* ===== TABS - underline style (Mailgun-style design study) =====
   No pills, no filled background: the strip rule and the active indicator are both hairline-
   thin. Active = brighter text + a 2px brand-blue underline (kept as OUR brand blue, not
   Mailgun's coral). Language-tab semantics (has-translation / needs-translation) keep their
   colour meaning but express it as text colour + underline instead of a filled pill. */
[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: var(--border-hairline);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-secondary);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  background-color: transparent;
  color: var(--text-primary);
  border-bottom-color: var(--border-hairline);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: transparent;
  color: var(--text-primary);
  border-bottom-color: var(--brand-light-on-dark);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.has-translation {
  color: var(--color-success);
  border-bottom-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.has-translation:hover,
[data-bs-theme="dark"] .nav-tabs .nav-link.has-translation.active {
  color: var(--color-success);
  background-color: transparent;
  border-bottom-color: var(--color-success);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.needs-translation {
  color: var(--color-warning);
  border-bottom-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.needs-translation:hover,
[data-bs-theme="dark"] .nav-tabs .nav-link.needs-translation.active {
  color: var(--color-warning);
  background-color: transparent;
  border-bottom-color: var(--color-warning);
}

/* Housekeeping Tasks - date group separator row in dark mode */
[data-bs-theme="dark"] .date-group-header td {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  border-top-color: var(--border-default);
}

/* Invert black PNG icons in dark mode (e.g., amenity icons) */
[data-bs-theme="dark"] .invert-dark {
  filter: invert(1);
}

/* Amenity/guide "icon" thumbnails (Amenities/Guides/Categories row lists, the MediaSelector inline
   preview, and the shared-icon library grid inside its modal) are flat black-line SVGs (Flaticon
   style, see ISharedMediaLibrary — it only ever indexes *.svg). On the dark surface a black stroke on
   a transparent background is nearly invisible. Invert them, scoped to `[src$=".svg"]` so real
   uploaded photos (listing cover photos, tenant logos) are never affected. */
[data-bs-theme="dark"] .amenity-icon-img[src$=".svg"],
[data-bs-theme="dark"] .media-selector-thumb img[src$=".svg"],
[data-bs-theme="dark"] .media-selector-chip img[src$=".svg"],
[data-bs-theme="dark"] .media-pick-thumb img[src$=".svg"] {
  filter: invert(1);
}

/* .amenity-thumb/.guide-thumb are applied directly to the <img> (unlike the wrappers above, which
   apply their background/border to a surrounding <span>). filter operates on the element's whole
   rendered box, so inverting the img here would also invert its own background/border — flipping the
   near-invisible dark chip into a bright, out-of-place light square. Drop that background/border for
   the svg case (the surrounding row already provides the dark backdrop) so only the icon's black
   strokes get inverted to white. */
[data-bs-theme="dark"] .amenity-thumb[src$=".svg"],
[data-bs-theme="dark"] .guide-thumb[src$=".svg"] {
  background: transparent;
  border-color: transparent;
  filter: invert(1);
}

/* Table contextual row variants in dark mode.
   Each variant needs its HOVER colour overridden as well as its base: Bootstrap gives every variant its
   own --bs-table-hover-bg from the same fixed light palette, so a row that reads correctly at rest still
   washes out the instant the pointer lands on it. */
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-success > td,
[data-bs-theme="dark"] .table-success > th {
  --bs-table-bg: rgba(25, 135, 84, 0.25);
  --bs-table-hover-bg: rgba(25, 135, 84, 0.35);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-border-color: rgba(25, 135, 84, 0.4);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-warning > td,
[data-bs-theme="dark"] .table-warning > th {
  --bs-table-bg: rgba(255, 193, 7, 0.2);
  --bs-table-hover-bg: rgba(255, 193, 7, 0.3);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-border-color: rgba(255, 193, 7, 0.35);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-danger > td,
[data-bs-theme="dark"] .table-danger > th {
  --bs-table-bg: rgba(220, 53, 69, 0.25);
  --bs-table-hover-bg: rgba(220, 53, 69, 0.35);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-border-color: rgba(220, 53, 69, 0.4);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-info > td,
[data-bs-theme="dark"] .table-info > th {
  --bs-table-bg: rgba(13, 202, 240, 0.2);
  --bs-table-hover-bg: rgba(13, 202, 240, 0.3);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-border-color: rgba(13, 202, 240, 0.35);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-primary > td,
[data-bs-theme="dark"] .table-primary > th {
  --bs-table-bg: rgba(13, 110, 253, 0.25);
  --bs-table-hover-bg: rgba(13, 110, 253, 0.35);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-border-color: rgba(13, 110, 253, 0.4);
  color: var(--bs-body-color);
}

/* The NEUTRAL variants matter more than the coloured ones above, because they carry meaning rather
   than emphasis: .table-secondary marks an inactive row, .table-light a header/footer band, and
   .table-active a selected row. Bootstrap 5.3 generates all of them once, from fixed LIGHT colours,
   and they do not react to data-bs-theme - so in dark mode the cell keeps a pale background while the
   text inherits the dark theme's near-white, and the row becomes literally unreadable: descriptions,
   icons and the Inactive badge all vanish into the background. They are driven off the existing
   tokens rather than new colours so light mode is untouched.

   Each variant also sets its own --bs-table-hover-bg / -striped-bg / -active-bg, in the same fixed
   light palette, and those are what .table-hover switches to on pointer-over. Overriding only the base
   --bs-table-bg therefore fixes the resting row and leaves the HOVERED row just as unreadable, which is
   exactly what happened - so the state variables have to be overridden too. */
[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-secondary > td,
[data-bs-theme="dark"] .table-secondary > th,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > td,
[data-bs-theme="dark"] .table-light > th {
  --bs-table-bg: var(--table-row-inactive-bg);
  --bs-table-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--table-row-emphasis-bg);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-striped-bg: var(--table-row-emphasis-bg);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-bg: var(--table-row-emphasis-bg);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-border-color: var(--border-subtle);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-active,
[data-bs-theme="dark"] .table-active > td,
[data-bs-theme="dark"] .table-active > th {
  --bs-table-bg: var(--table-row-emphasis-bg);
  --bs-table-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--table-row-emphasis-hover-bg);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-striped-bg: var(--table-row-emphasis-hover-bg);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-bg: var(--table-row-emphasis-hover-bg);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-border-color: var(--border-subtle);
  color: var(--bs-body-color);
}