/* ================================================================
   bwStyles.css — BuildingWorks DataSphere
   ----------------------------------------------------------------
   Dual-theme (dark/light) with ADA WCAG 2.1 AA contrast compliance.
   All UI chrome (header, nav sidebar, search) switches with theme.
   Content area switches between dark and light.
   ================================================================ */

/* ── CSS CUSTOM PROPERTIES ────────────────────────────────────── */

/* Light theme (default fallback) */
:root {
  --ds-body-bg: #f5f6f8;
  --ds-text: #2c3e50; /* 11.1:1 on #fff */
  --ds-text-secondary: #4a6278; /* 6.8:1 on #fff */
  --ds-text-muted: #5c7080; /* 5.3:1 on #fff */
  --ds-heading: #0d1422;
  --ds-link: #1a6aaa; /* 5.5:1 on #fff */
  --ds-link-hover: #135a90; /* 7.0:1 on #fff */
  --ds-border: #e0e8f0;
  --ds-alt-row: #f4f7fb;
  --ds-hover-row: rgba(26, 106, 170, 0.06);
  --ds-footer-text: #5c7080;
  --ds-footer-border: #e0e8f0;
  /* Directory levels — light */
  --ds-building-bg: #e3eef7;
  --ds-building-text: #1a3050;
  --ds-building-link: #14608a;
  --ds-building-border: #c8d8ea;
  --ds-floor-bg: #eaf1f8;
  --ds-floor-text: #1e3e5c;
  --ds-floor-link: #14608a;
  --ds-floor-border: #d2e0ee;
  --ds-section-bg: #eff4f9;
  --ds-section-text: #2a4a68;
  --ds-section-link: #186098;
  --ds-section-border: #dbe6f0;
  --ds-wing-bg: #f2f6fa;
  --ds-wing-text: #2a4a68;
  --ds-wing-link: #186098;
  --ds-wing-border: #e0eaf2;
  --ds-room-bg: #f8fafc;
  --ds-room-text: #3a5a74;
  --ds-room-link: #1a6498;
  --ds-room-border: #e8eff6;
  /* Enterprise/Region/Complex — light */
  --ds-enterprise-bg: #1a3050;
  --ds-enterprise-text: #ffffff;
  --ds-enterprise-link: #6abfff;
  --ds-enterprise-border: rgba(106, 191, 255, 0.15);
  --ds-region-bg: #d4e4f2;
  --ds-region-text: #1a3050;
  --ds-region-link: #14608a;
  --ds-region-border: #bdd0e4;
  --ds-complex-bg: #dfe9f4;
  --ds-complex-text: #1a3050;
  --ds-complex-link: #14608a;
  --ds-complex-border: #c8d8ea;
  /* Separator (table headers) */
  --ds-sep-bg: #f0f4f8;
  --ds-sep-text: #0d1422;
  --ds-sep-accent: #1a6aaa;
  /* Page title bar */
  --ds-pagetitle-bg: #f0f4f8;
  --ds-pagetitle-text: #0d1422;
  --ds-pagetitle-accent: #1a6aaa;
  /* Search & Guide */
  --ds-search-hint: #5c7080;
  --ds-guide-text: #2c3e50;
  --ds-guide-italic: #14608a;
  /* Content td background */
  --ds-content-bg: #ffffff;
  /* Chrome */
  --ds-chrome-bg: #ffffff;
  --ds-sidebar-bg: #f8f9fb;
  --ds-sidebar-border: #e2e7ef;
  --ds-nav-text: #2a3f55;
  --ds-nav-hover: #1a6aaa;
  --ds-nav-active: #1a6aaa;
  --ds-nav-active-bg: rgba(26, 106, 170, 0.07);
  --ds-nav-divider: #edf0f5;
}

/* Light theme explicit selector */
html[data-theme="light"] {
  --ds-body-bg: #f5f6f8;
  --ds-text: #2c3e50;
  --ds-text-secondary: #4a6278;
  --ds-text-muted: #5c7080;
  --ds-heading: #0d1422;
  --ds-link: #1a6aaa;
  --ds-link-hover: #135a90;
  --ds-border: #e0e8f0;
  --ds-alt-row: #f4f7fb;
  --ds-hover-row: rgba(26, 106, 170, 0.06);
  --ds-footer-text: #5c7080;
  --ds-footer-border: #e0e8f0;
  --ds-building-bg: #e3eef7;
  --ds-building-text: #1a3050;
  --ds-building-link: #14608a;
  --ds-building-border: #c8d8ea;
  --ds-floor-bg: #eaf1f8;
  --ds-floor-text: #1e3e5c;
  --ds-floor-link: #14608a;
  --ds-floor-border: #d2e0ee;
  --ds-section-bg: #eff4f9;
  --ds-section-text: #2a4a68;
  --ds-section-link: #186098;
  --ds-section-border: #dbe6f0;
  --ds-wing-bg: #f2f6fa;
  --ds-wing-text: #2a4a68;
  --ds-wing-link: #186098;
  --ds-wing-border: #e0eaf2;
  --ds-room-bg: #f8fafc;
  --ds-room-text: #3a5a74;
  --ds-room-link: #1a6498;
  --ds-room-border: #e8eff6;
  --ds-enterprise-bg: #1a3050;
  --ds-enterprise-text: #ffffff;
  --ds-enterprise-link: #6abfff;
  --ds-enterprise-border: rgba(106, 191, 255, 0.15);
  --ds-region-bg: #d4e4f2;
  --ds-region-text: #1a3050;
  --ds-region-link: #14608a;
  --ds-region-border: #bdd0e4;
  --ds-complex-bg: #dfe9f4;
  --ds-complex-text: #1a3050;
  --ds-complex-link: #14608a;
  --ds-complex-border: #c8d8ea;
  --ds-sep-bg: #f0f4f8;
  --ds-sep-text: #0d1422;
  --ds-sep-accent: #1a6aaa;
  --ds-pagetitle-bg: #f0f4f8;
  --ds-pagetitle-text: #0d1422;
  --ds-pagetitle-accent: #1a6aaa;
  --ds-search-hint: #5c7080;
  --ds-guide-text: #2c3e50;
  --ds-guide-italic: #14608a;
  --ds-content-bg: #ffffff;
  /* Chrome */
  --ds-chrome-bg: #ffffff;
  --ds-sidebar-bg: #f8f9fb;
  --ds-sidebar-border: #e2e7ef;
  --ds-nav-text: #2a3f55;
  --ds-nav-hover: #1a6aaa;
  --ds-nav-active: #1a6aaa;
  --ds-nav-active-bg: rgba(26, 106, 170, 0.07);
  --ds-nav-divider: #edf0f5;
}

/* Dark theme */
html[data-theme="dark"] {
  --ds-body-bg: #0f1928;
  --ds-text: #ccd8e4; /* 11.0:1 on #0f1928 */
  --ds-text-secondary: #8ea4bc; /* 6.0:1 on #0f1928 */
  --ds-text-muted: #7090a8; /* 4.5:1 on #0f1928 */
  --ds-heading: #e8ecf1;
  --ds-link: #6abfff; /* 8.5:1 on #0f1928 */
  --ds-link-hover: #9dd4ff;
  --ds-border: rgba(106, 191, 255, 0.1);
  --ds-alt-row: #141e30;
  --ds-hover-row: rgba(106, 191, 255, 0.08);
  --ds-footer-text: #7090a8;
  --ds-footer-border: rgba(106, 191, 255, 0.08);
  /* Directory levels — dark */
  --ds-building-bg: #162640;
  --ds-building-text: #ccd8e4;
  --ds-building-link: #6abfff;
  --ds-building-border: rgba(106, 191, 255, 0.12);
  --ds-floor-bg: #142238;
  --ds-floor-text: #b0c4d8;
  --ds-floor-link: #6abfff;
  --ds-floor-border: rgba(106, 191, 255, 0.08);
  --ds-section-bg: #121e32;
  --ds-section-text: #9cb4cc;
  --ds-section-link: #6abfff;
  --ds-section-border: rgba(106, 191, 255, 0.06);
  --ds-wing-bg: #101a2c;
  --ds-wing-text: #9cb4cc;
  --ds-wing-link: #6abfff;
  --ds-wing-border: rgba(106, 191, 255, 0.06);
  --ds-room-bg: #0f1928;
  --ds-room-text: #8ea4bc;
  --ds-room-link: #6abfff;
  --ds-room-border: rgba(106, 191, 255, 0.06);
  /* Enterprise/Region/Complex — dark */
  --ds-enterprise-bg: #0d1422;
  --ds-enterprise-text: #ffffff;
  --ds-enterprise-link: #6abfff;
  --ds-enterprise-border: rgba(106, 191, 255, 0.15);
  --ds-region-bg: #172640;
  --ds-region-text: #d0dce8;
  --ds-region-link: #8ec8ff;
  --ds-region-border: rgba(106, 191, 255, 0.08);
  --ds-complex-bg: #223a58;
  --ds-complex-text: #d0dce8;
  --ds-complex-link: #8ec8ff;
  --ds-complex-border: rgba(255, 255, 255, 0.06);
  --ds-sep-bg: #0d1422;
  --ds-sep-text: #ffffff;
  --ds-sep-accent: #6abfff;
  --ds-pagetitle-bg: #0d1422;
  --ds-pagetitle-text: #ffffff;
  --ds-pagetitle-accent: #6abfff;
  --ds-search-hint: #7090a8;
  --ds-guide-text: #b0c4d8;
  --ds-guide-italic: #6abfff;
  --ds-content-bg: #0f1928;
  /* Chrome (header + sidebar + nav) — dark */
  --ds-chrome-bg: #0d1422;
  --ds-sidebar-bg: #111b2e;
  --ds-sidebar-border: rgba(106, 191, 255, 0.08);
  --ds-nav-text: #c0cfe0;
  --ds-nav-hover: #6abfff;
  --ds-nav-active: #6abfff;
  --ds-nav-active-bg: rgba(106, 191, 255, 0.08);
  --ds-nav-divider: rgba(106, 191, 255, 0.05);
}

/* ── RESET & BASE ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Override inline body { background-color:#FFFFFF } on sub pages */
body {
  background-color: var(--ds-body-bg) !important;
  color: var(--ds-text) !important;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

td,
p,
div,
span {
  font:
    13.5px/1.55 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-text);
}

#homeheader img,
#blue img {
  display: block;
}

/* ── HEADER BAND ─────────────────────────────────────────────── */
#homeheader {
  background-color: var(--ds-chrome-bg);
  background-image: url(bg_header.gif);
  background-position: right top;
  background-repeat: no-repeat;
  width: 100%;
  padding: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  transition: background-color 0.25s ease;
}

#blue {
  background-color: var(--ds-chrome-bg);
  line-height: 0;
  transition: background-color 0.25s ease;
}

#grey {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(106, 191, 255, 0.18) 0%,
    rgba(106, 191, 255, 0) 70%
  );
}

/* ── HEADER CONTROLS (search + toggle, injected by ds-app.js) ── */
#ds-hdr-ctrl {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 60px 0 0; /* room for toggle on right */
}

#ds-hdr-search {
  position: relative;
  display: flex;
  align-items: center;
}

#ds-hdr-search .ds-si {
  position: absolute;
  left: 12px;
  pointer-events: none;
  z-index: 1;
}

#ds-sinput {
  width: 340px;
  padding: 10px 36px 10px 38px;
  font:
    13.5px/1 "Segoe UI",
    system-ui,
    sans-serif;
  color: #e0e8f0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(106, 191, 255, 0.15);
  border-radius: 6px;
  outline: none;
  transition:
    width 0.25s ease,
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

#ds-sinput::placeholder {
  color: rgba(192, 207, 224, 0.4);
}

#ds-sinput:focus {
  width: 420px;
  border-color: #6abfff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(106, 191, 255, 0.1);
}

#ds-sclear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #6abfff;
  font-size: 18px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}
#ds-sclear:hover {
  opacity: 1;
}

/* Search results dropdown */
#ds-sresults {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  width: 460px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--ds-sidebar-bg);
  border: 1px solid rgba(106, 191, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  scrollbar-width: thin;
  scrollbar-color: rgba(106, 191, 255, 0.25) transparent;
}
#ds-sresults::-webkit-scrollbar {
  width: 6px;
}
#ds-sresults::-webkit-scrollbar-track {
  background: transparent;
}
#ds-sresults::-webkit-scrollbar-thumb {
  background: rgba(106, 191, 255, 0.25);
  border-radius: 3px;
}

.ds-sr-meta {
  padding: 10px 16px;
  font:
    600 10.5px/1 "Segoe UI",
    system-ui,
    sans-serif;
  color: rgba(192, 207, 224, 0.45);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ds-sr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.12s;
}
.ds-sr-item:hover {
  background: rgba(106, 191, 255, 0.06);
}

.ds-sr-icon {
  flex-shrink: 0;
  width: 36px;
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font:
    700 8.5px/1 "Segoe UI",
    system-ui,
    sans-serif;
  letter-spacing: 0.5px;
}
.ds-sr-icon-page {
  background: rgba(106, 191, 255, 0.12);
  color: #6abfff;
}
.ds-sr-icon-file {
  background: rgba(106, 220, 160, 0.12);
  color: #6adca0;
}

.ds-sr-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-sr-title {
  font:
    600 12.5px/1.3 "Segoe UI",
    system-ui,
    sans-serif;
  color: #d0dce8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-sr-item:hover .ds-sr-title {
  color: #fff;
}

.ds-sr-title mark {
  background: none;
  color: #6abfff;
  font-weight: 700;
}

.ds-sr-cat {
  font:
    11px/1 "Segoe UI",
    system-ui,
    sans-serif;
  color: rgba(192, 207, 224, 0.4);
}

.ds-sr-empty {
  padding: 24px 16px;
  text-align: center;
  font:
    13px/1.5 "Segoe UI",
    system-ui,
    sans-serif;
  color: rgba(192, 207, 224, 0.4);
}

/* Theme toggle button */
#ds-tbtn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(106, 191, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  color: #6abfff;
  transition:
    background 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
  padding: 0;
}
#ds-tbtn:hover {
  background: rgba(106, 191, 255, 0.12);
  border-color: rgba(106, 191, 255, 0.3);
}
#ds-tbtn:focus-visible {
  outline: 2px solid var(--ds-link);
  outline-offset: 2px;
}

/* Show sun in dark mode, moon in light mode */
html[data-theme="dark"] #ds-tbtn .ds-icon-sun {
  display: block;
}
html[data-theme="dark"] #ds-tbtn .ds-icon-moon {
  display: none;
}
html[data-theme="light"] #ds-tbtn .ds-icon-sun {
  display: none;
}
html[data-theme="light"] #ds-tbtn .ds-icon-moon {
  display: block;
}
/* Default (no attribute yet) */
#ds-tbtn .ds-icon-sun {
  display: block;
}
#ds-tbtn .ds-icon-moon {
  display: none;
}

/* ── SUB-PAGE FLEX LAYOUT ────────────────────────────────────── */
.ds-layout,
.ds-layout > tbody,
.ds-layout > tbody > tr {
  display: flex !important;
  width: 100%;
}
.ds-layout {
  min-height: calc(100vh - 160px);
}

/* Left sidebar cell */
.ds-sidebar-td {
  width: 220px !important;
  min-width: 220px !important;
  flex-shrink: 0 !important;
  background: var(--ds-sidebar-bg) !important;
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid var(--ds-sidebar-border);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

/* Content cell */
.ds-layout > tbody > tr > td:last-child {
  flex: 1 !important;
  width: auto !important;
  min-width: 0;
  background: var(--ds-content-bg);
  transition: background-color 0.25s ease;
}

/* ── BUILDINGWORKS FOOTER (sub pages, injected by ds-app.js) ── */
#ds-bw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-top: 1px solid var(--ds-footer-border);
  background: var(--ds-body-bg);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.ds-bw-flink {
  text-decoration: none !important;
}

.ds-bw-flogo {
  height: 36px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.18s;
  display: block;
}
.ds-bw-flink:hover .ds-bw-flogo {
  opacity: 1;
}

.ds-bw-ftext {
  font:
    11px/1 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-footer-text);
  letter-spacing: 0.5px;
}

/* ── PAGE TITLE BAR ──────────────────────────────────────────── */
.pagetitle {
  background-color: var(--ds-pagetitle-bg);
  color: var(--ds-pagetitle-text);
  font:
    600 15px/42px "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  padding: 0 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* Arrow cell next to page title — match background */
td:first-child:has(+ .pagetitle) {
  background: var(--ds-pagetitle-bg);
}

/* ── LEFT SIDEBAR — CONTEXTUAL NAVIGATION ────────────────────── */
#nav {
  background-color: var(--ds-sidebar-bg);
  border-bottom: none;
  transition: background-color 0.25s ease;
}

#nav td {
  padding: 0;
  border: none;
  font-size: 0;
}

.nav {
  font:
    600 12.5px/1 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-nav-text);
  display: block;
  background-color: var(--ds-sidebar-bg);
  padding: 13px 14px 13px 22px;
  text-decoration: none;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--ds-nav-divider);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-left-color 0.2s ease;
  border-left: 3px solid transparent;
}
.nav:visited {
  color: var(--ds-nav-text);
  text-decoration: none;
}
.nav:hover {
  color: var(--ds-nav-hover);
  background-color: var(--ds-nav-active-bg);
  border-left: 3px solid var(--ds-nav-hover);
  text-decoration: none;
}
.nav:focus-visible {
  outline: 2px solid var(--ds-nav-hover);
  outline-offset: -2px;
}

.navOn {
  font:
    600 12.5px/1 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-nav-active);
  display: block;
  background-color: var(--ds-nav-active-bg);
  padding: 13px 14px 13px 22px;
  text-decoration: none;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--ds-nav-divider);
  border-left: 3px solid var(--ds-nav-active);
}
.navOn:visited {
  color: var(--ds-nav-active);
  text-decoration: none;
}
.navOn:hover {
  color: var(--ds-nav-active);
  text-decoration: none;
}

.snav {
  font:
    500 11.5px/1 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-text-secondary);
  display: block;
  background-color: var(--ds-sidebar-bg);
  padding: 8px 14px 8px 36px;
  text-decoration: none;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--ds-nav-divider);
  border-left: 3px solid transparent;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}
.snav:visited {
  color: var(--ds-text-secondary);
  text-decoration: none;
}
.snav:hover {
  color: var(--ds-nav-hover);
  background-color: var(--ds-nav-active-bg);
  text-decoration: none;
}
.snav:focus-visible {
  outline: 2px solid var(--ds-nav-hover);
  outline-offset: -2px;
}

.snavOn {
  font:
    500 11.5px/1 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-nav-active);
  display: block;
  background-color: var(--ds-nav-active-bg);
  padding: 8px 14px 8px 36px;
  text-decoration: none;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--ds-nav-divider);
  border-left: 3px solid var(--ds-nav-active);
}
.snavOn:visited {
  color: var(--ds-nav-active);
  text-decoration: none;
}
.snavOn:hover {
  color: var(--ds-nav-active);
  text-decoration: none;
}

.home {
  background-color: var(--ds-sidebar-bg);
  background-image: none;
}

/* Hide sidebar HOME button image and BW logo (CSS prevents flash before JS) */
img[src*="nav_home"] {
  display: none;
}
img[src*="buildingworks_logo"]:not(.ds-bw-flogo) {
  display: none;
}

#client {
  background-color: var(--ds-body-bg);
  background-image: none;
}

/* ── TYPOGRAPHY ───────────────────────────────────────────────── */
.text1 {
  font:
    600 15px/1.4 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-heading);
}

.text2 {
  font:
    600 15px/1.4 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-text-secondary);
}

/* ── HEADINGS ─────────────────────────────────────────────────── */
h1 {
  font:
    600 16px/1.3 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-heading);
  margin: 32px 0 12px 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ds-sep-accent);
  display: inline-block;
  letter-spacing: 0.2px;
}

h2 {
  font:
    600 15px/1.4 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-heading);
  margin: 22px 0 8px 0;
}

h3 {
  font:
    600 13.5px/1.4 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-text-secondary);
  margin: 18px 0 6px 0;
}

/* ── DATA TABLES ──────────────────────────────────────────────── */
.dataTable {
  border-collapse: collapse;
  margin-bottom: 4px;
}

.separator td {
  background-color: var(--ds-sep-bg);
  color: var(--ds-sep-text);
  font:
    600 12px/1 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  padding: 10px 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ds-sep-accent);
}

.dataTable tr td {
  padding: 9px 16px 9px 18px;
  border-bottom: 1px solid var(--ds-border);
  border-left: none;
  font:
    13.5px/1.5 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  color: var(--ds-text);
  vertical-align: top;
  transition: background-color 0.15s ease;
}

tr.alternate {
  background-color: var(--ds-alt-row);
}

.dataTable tr td:first-child {
  color: var(--ds-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  padding-right: 24px;
}

.dataTable tr:not(.separator):hover td {
  background-color: var(--ds-hover-row);
}

/* ── PROPERTY LEVEL ROWS (Directory) — all using CSS variables ── */

tr.enterprise {
  background: var(--ds-enterprise-bg);
}
tr.enterprise td {
  color: var(--ds-enterprise-text);
  font-weight: 600;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ds-enterprise-border);
}
tr.enterprise td a {
  color: var(--ds-enterprise-link);
  text-decoration: none;
}
tr.enterprise td a:hover {
  color: var(--ds-link-hover);
}

tr.region {
  background: var(--ds-region-bg);
}
tr.region td {
  color: var(--ds-region-text);
  font-weight: 500;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ds-region-border);
}
tr.region td a {
  color: var(--ds-region-link);
  text-decoration: none;
}
tr.region td a:hover {
  color: var(--ds-link-hover);
}

tr.complex {
  background: var(--ds-complex-bg);
}
tr.complex td {
  color: var(--ds-complex-text);
  font-weight: 500;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ds-complex-border);
}
tr.complex td a {
  color: var(--ds-complex-link);
  text-decoration: none;
}
tr.complex td a:hover {
  color: var(--ds-link-hover);
}

tr.building {
  background: var(--ds-building-bg);
}
tr.building td {
  font-weight: 600;
  color: var(--ds-building-text);
  padding: 10px 16px;
  border-bottom: 1px solid var(--ds-building-border);
}
tr.building td a {
  color: var(--ds-building-link);
  text-decoration: none;
}
tr.building td a:hover {
  color: var(--ds-link-hover);
}

tr.floor {
  background: var(--ds-floor-bg);
}
tr.floor td {
  font-weight: 600;
  color: var(--ds-floor-text);
  padding: 10px 16px 10px 28px;
  border-bottom: 1px solid var(--ds-floor-border);
}
tr.floor td a {
  color: var(--ds-floor-link);
  text-decoration: none;
}
tr.floor td a:hover {
  color: var(--ds-link-hover);
}

tr.section {
  background: var(--ds-section-bg);
}
tr.section td {
  font-weight: 500;
  color: var(--ds-section-text);
  padding: 9px 16px 9px 36px;
  border-bottom: 1px solid var(--ds-section-border);
}
tr.section td a {
  color: var(--ds-section-link);
  text-decoration: none;
}
tr.section td a:hover {
  color: var(--ds-link-hover);
}

tr.wing {
  background: var(--ds-wing-bg);
}
tr.wing td {
  font-weight: 500;
  color: var(--ds-wing-text);
  padding: 9px 16px 9px 36px;
  border-bottom: 1px solid var(--ds-wing-border);
}
tr.wing td a {
  color: var(--ds-wing-link);
  text-decoration: none;
}
tr.wing td a:hover {
  color: var(--ds-link-hover);
}

tr.room {
  background: var(--ds-room-bg);
}
tr.room td {
  color: var(--ds-room-text);
  padding: 8px 16px 8px 48px;
  border-bottom: 1px solid var(--ds-room-border);
}
tr.room td a {
  color: var(--ds-room-link);
  text-decoration: none;
}
tr.room td a:hover {
  color: var(--ds-link-hover);
}

/* ── LINKS ────────────────────────────────────────────────────── */
a {
  color: var(--ds-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--ds-link-hover);
  text-decoration: underline;
}
a:visited {
  color: var(--ds-link);
}
a:focus-visible {
  outline: 2px solid var(--ds-link);
  outline-offset: 2px;
}

/* ── SEARCH HINT ──────────────────────────────────────────────── */
#search {
  color: var(--ds-search-hint);
  font-size: 11.5px;
  font-style: italic;
  padding: 14px 18px 8px;
  letter-spacing: 0.2px;
}

/* ── USER GUIDE ───────────────────────────────────────────────── */
.userguide {
  padding: 28px 20px 20px 48px;
  max-width: 680px;
  line-height: 1.75;
  color: var(--ds-guide-text);
}
.userguide p {
  margin: 0 0 12px 0;
  color: var(--ds-guide-text);
}
.userguide i {
  color: var(--ds-guide-italic);
  font-weight: 500;
}
.userguide h2 {
  color: var(--ds-heading);
  margin-top: 28px;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ds-sep-accent);
  display: inline-block;
}
.userguide h3 {
  color: var(--ds-text-secondary);
  margin-top: 22px;
  margin-bottom: 6px;
  font-size: 13.5px;
}

/* ── FOOTER ───────────────────────────────────────────────────── */
#footer {
  clear: both;
  color: var(--ds-footer-text);
  padding: 16px 18px;
  font-size: 11px;
  letter-spacing: 0.3px;
  border-top: 1px solid var(--ds-footer-border);
  margin-top: 0;
  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

/* ── FOCUS INDICATORS (ADA WCAG 2.1 AA — 3:1 non-text contrast) ── */
:focus-visible {
  outline: 2px solid var(--ds-link);
  outline-offset: 2px;
}

/* ── SMOOTH THEME TRANSITION ──────────────────────────────────── */
td,
tr,
div,
p,
span,
a,
h1,
h2,
h3 {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

/* ── LIGHT MODE: COLOR-ONLY OVERRIDES ─────────────────────────── */
/* Same structure as dark mode — only colors change.                */

/* Header — remove dark bg image, tint DS logo navy */
html[data-theme="light"] #homeheader {
  background-image: none;
}
html[data-theme="light"] #homeheader > img {
  filter: sepia(1) saturate(3) hue-rotate(185deg) brightness(0.35);
}

/* Blue accent bar — fading line, same structure as dark */
html[data-theme="light"] #blue {
  background: linear-gradient(90deg, #1a6aaa 0%, rgba(26, 106, 170, 0) 60%);
}
html[data-theme="light"] #blue img {
  opacity: 0;
}
html[data-theme="light"] #grey {
  background: linear-gradient(
    90deg,
    rgba(26, 106, 170, 0.1) 0%,
    transparent 70%
  );
}

/* Page-title arrow — hide dark GIF, draw CSS chevron */
html[data-theme="light"] td:first-child:has(+ .pagetitle) {
  position: relative;
}
html[data-theme="light"] td:first-child:has(+ .pagetitle) img {
  opacity: 0;
}
html[data-theme="light"] td:first-child:has(+ .pagetitle)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #1a6aaa;
  border-bottom: 2.5px solid #1a6aaa;
  transform: translate(-70%, -50%) rotate(-45deg);
}

/* Search input */
html[data-theme="light"] #ds-sinput {
  color: #2c3e50;
  background: rgba(0, 0, 0, 0.04);
  border-color: #d4dbe5;
}
html[data-theme="light"] #ds-sinput::placeholder {
  color: rgba(42, 63, 85, 0.4);
}
html[data-theme="light"] #ds-sinput:focus {
  border-color: #1a6aaa;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 106, 170, 0.12);
}
html[data-theme="light"] #ds-sclear {
  color: #1a6aaa;
}
html[data-theme="light"] .ds-si circle {
  stroke: #6b8299;
}
html[data-theme="light"] .ds-si line {
  stroke: #6b8299;
}

/* Search results dropdown */
html[data-theme="light"] #ds-sresults {
  background: #ffffff;
  border-color: #d4dbe5;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06);
  scrollbar-color: rgba(26, 106, 170, 0.18) transparent;
}
html[data-theme="light"] #ds-sresults::-webkit-scrollbar-thumb {
  background: rgba(26, 106, 170, 0.18);
}
html[data-theme="light"] .ds-sr-meta {
  color: #6b8299;
  border-bottom-color: #edf0f5;
}
html[data-theme="light"] .ds-sr-item {
  border-bottom-color: #f4f6f9;
}
html[data-theme="light"] .ds-sr-item:hover {
  background: rgba(26, 106, 170, 0.04);
}
html[data-theme="light"] .ds-sr-title {
  color: #2a3f55;
}
html[data-theme="light"] .ds-sr-item:hover .ds-sr-title {
  color: #0d1422;
}
html[data-theme="light"] .ds-sr-title mark {
  color: #1a6aaa;
}
html[data-theme="light"] .ds-sr-cat {
  color: #6b8299;
}
html[data-theme="light"] .ds-sr-empty {
  color: #6b8299;
}
html[data-theme="light"] .ds-sr-icon-page {
  background: rgba(26, 106, 170, 0.08);
  color: #1a6aaa;
}
html[data-theme="light"] .ds-sr-icon-file {
  background: rgba(40, 160, 100, 0.08);
  color: #1a8060;
}

/* Theme toggle */
html[data-theme="light"] #ds-tbtn {
  background: rgba(0, 0, 0, 0.04);
  border-color: #d4dbe5;
  color: #2a3f55;
}
html[data-theme="light"] #ds-tbtn:hover {
  background: rgba(26, 106, 170, 0.08);
  border-color: #1a6aaa;
  color: #1a6aaa;
}

/* BW footer logo — navy tint */
html[data-theme="light"] .ds-bw-flogo {
  filter: sepia(1) saturate(3) hue-rotate(185deg) brightness(0.35);
}

/* ── PAGE FILTER (auto-injected above dataTables) ────────────── */
.ds-pf-wrap {
  padding: 12px 16px 8px 16px;
}
.ds-pf-inner {
  position: relative;
  max-width: 400px;
}
.ds-pf-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 70px 10px 14px;
  font:
    400 14px/1.4 "Segoe UI",
    system-ui,
    -apple-system,
    Helvetica Neue,
    Arial,
    sans-serif;
  border: 1px solid var(--ds-sidebar-border);
  border-radius: 6px;
  background: var(--ds-content-bg);
  color: var(--ds-sep-text);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.ds-pf-input::placeholder {
  color: rgba(138, 160, 184, 0.6);
}
.ds-pf-input:focus {
  border-color: var(--ds-sep-accent);
  box-shadow: 0 0 0 3px rgba(106, 191, 255, 0.12);
}
.ds-pf-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font:
    500 12px/1 "Segoe UI",
    system-ui,
    sans-serif;
  color: var(--ds-nav-text);
  pointer-events: none;
}

/* Page filter — light overrides */
html[data-theme="light"] .ds-pf-input {
  color: #2c3e50;
  background: rgba(0, 0, 0, 0.03);
  border-color: #d4dbe5;
}
html[data-theme="light"] .ds-pf-input::placeholder {
  color: rgba(42, 63, 85, 0.4);
}
html[data-theme="light"] .ds-pf-input:focus {
  border-color: #1a6aaa;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 106, 170, 0.12);
}
html[data-theme="light"] .ds-pf-count {
  color: #6b8299;
}

/* Filter chips (auto-generated for categorical columns) */
.ds-pf-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px 0;
}
.ds-pf-chip-label {
  font:
    700 9.5px/1 "Segoe UI",
    system-ui,
    sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  margin-right: 2px;
  white-space: nowrap;
}
.ds-pf-chip {
  display: inline-block;
  padding: 5px 12px;
  font:
    500 12px/1 "Segoe UI",
    system-ui,
    sans-serif;
  color: var(--ds-text-secondary);
  background: transparent;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.ds-pf-chip:hover {
  border-color: var(--ds-sep-accent);
  color: var(--ds-sep-accent);
}
.ds-pf-chip.active {
  background: var(--ds-sep-accent);
  border-color: var(--ds-sep-accent);
  color: #fff;
}

/* Filter chips — light overrides */
html[data-theme="light"] .ds-pf-chip-label {
  color: #6b8299;
}
html[data-theme="light"] .ds-pf-chip {
  color: #4a6278;
  border-color: #d4dbe5;
}
html[data-theme="light"] .ds-pf-chip:hover {
  border-color: #1a6aaa;
  color: #1a6aaa;
}
html[data-theme="light"] .ds-pf-chip.active {
  background: #1a6aaa;
  border-color: #1a6aaa;
  color: #fff;
}

/* ── PRINT ────────────────────────────────────────────────────── */
@media print {
  .ds-pf-wrap,
  .ds-pf-chips {
    display: none !important;
  }
  #homeheader,
  #blue,
  #grey {
    background-color: #fff !important;
  }
  #ds-hdr-ctrl {
    display: none !important;
  }
  .nav,
  .navOn,
  .snav,
  .snavOn {
    display: none !important;
  }
  #nav {
    display: none !important;
  }
  .ds-sidebar-td {
    display: none !important;
  }
  #ds-bw-footer {
    display: none !important;
  }
  .pagetitle {
    background-color: #fff !important;
    color: #0d1422 !important;
    border-left: 3px solid #0d1422 !important;
  }
  a {
    color: #000 !important;
  }
  .separator td {
    background-color: #eee !important;
    color: #000 !important;
    border-bottom: 1px solid #000 !important;
  }
  tr.alternate {
    background-color: #f5f5f5 !important;
  }
  #footer {
    border-top: 1px solid #ccc !important;
    color: #666 !important;
  }
  body {
    background-color: #fff !important;
    color: #000 !important;
  }
}