/*
  style.css
  BuildingIQ – Main stylesheet.

  Mobile-first, no framework dependencies. Uses CSS custom properties for
  consistent theming. Designed for readability with dense tabular data.

  Sections:
    1. Custom properties / tokens
    2. Reset & base
    3. Layout (container, header, main, footer)
    4. Home page (hero, search, autocomplete, info grid)
    5. Building detail (header, section nav)
    6. Data sections (shared styles for all content sections)
    7. Data tables (sortable, assessment, ll97, etc.)
    8. Badges & status indicators
    9. LL97 section specifics
   10. Error page + gate page
   10b. Dashboard (tracked buildings)
   11. Utilities
   12. Responsive breakpoints
*/

/* ==========================================================================
   1. Non-color design tokens  (all colors live in theme.css)
   ========================================================================== */

:root {
  /* Typography */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, monospace;
  --font-size-2xs: 0.625rem;   /* 10px — nav counters, compact labels */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.8125rem;   /* 13px */
  --font-size-base: 0.875rem;  /* 14px — tighter for data density */
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --border-width: 1px;

  /* Stat card */
  --stat-card-number-size: 1.625rem;
  --stat-card-min-width:   145px;

  /* Sidebar nav layout */
  --sidebar-width: 220px;
}


/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* scroll-behavior: smooth removed — it caused the browser's native
     "keep focused element in view" behaviour to trigger a visible smooth
     scroll on every keystroke when typing in the sticky-sidebar search
     input while scrolled down the page.  Smooth scrolling for nav-link
     clicks is now handled in JS (initSmoothNavScroll in main.js). */
  scroll-padding-top: 80px; /* offset fixed/sticky elements */
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-text);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }

p { margin-bottom: var(--space-3); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

ul, ol { list-style: none; }


/* ==========================================================================
   3. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Site header */
.site-header {
  background: var(--color-header-bg);
  color: var(--color-header-text);
  padding: var(--space-4) 0;
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid var(--color-header-border);
  flex-shrink: 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-logo {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-header-text);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.site-logo:hover {
  text-decoration: none;
  opacity: 0.9;
}

.beta-badge {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--color-view-as-bg);
  color: var(--color-view-as-text);
  padding: 0.15em 0.5em;
  border-radius: 4px;
  line-height: 1;
  align-self: center;
  margin-left: 0.5rem;
}

/* Header nav link for Insights */

.header-nav-link {
  color: var(--color-header-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity: 0.85;
  transition: opacity var(--transition);
}

.header-nav-link:hover {
  opacity: 1;
}

/* Auth navigation (header right) */
.auth-nav {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

/* Logged-out buttons */
.auth-nav .auth-link {
  color: var(--color-header-text);
  text-decoration: none;
  transition: opacity var(--transition), border-color var(--transition), background var(--transition);
}

.auth-nav .auth-link-login {
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(250, 248, 245, 0.35);
  border-radius: var(--radius-sm);
}

.auth-nav .auth-link-login:hover {
  border-color: rgba(250, 248, 245, 0.6);
  background: rgba(250, 248, 245, 0.08);
}

.auth-nav .auth-link-signup {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}

.auth-nav .auth-link-signup:hover {
  background: var(--color-primary-dark);
}

/* User menu trigger (logged-in icon button) */
.user-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(250, 248, 245, 0.25);
  border-radius: var(--radius-sm);
  color: var(--color-header-text);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.user-menu-trigger:hover {
  border-color: rgba(250, 248, 245, 0.45);
  background: rgba(250, 248, 245, 0.08);
}

.user-menu-trigger:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* User menu dropdown panel */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  overflow: hidden;
}

.user-menu-info {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.user-menu-email {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition);
}

.user-menu-item:hover {
  background: var(--color-bg-alt);
}

.user-menu-signout {
  border-top: 1px solid var(--color-border);
}

/* Tier badge */
.tier-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
  white-space: nowrap;
}

.tier-badge.tier-tier0 {
  background: var(--badge-default-bg);
  color: var(--badge-default-text);
}

.tier-badge.tier-tier1 {
  background: var(--badge-active-bg);
  color: var(--badge-active-text);
}

.tier-badge.tier-tier2 {
  background: var(--badge-closed-bg);
  color: var(--badge-closed-text);
}

.tier-badge.tier-tier3 {
  background: var(--badge-open-bg);
  color: var(--badge-open-text);
}

/* View-as preview banner */
.view-as-banner {
  position: sticky;
  top: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-view-as-bg);
  color: var(--color-view-as-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.view-as-exit-form {
  display: inline;
}

.view-as-exit-btn {
  padding: 2px var(--space-3);
  border: 1px solid var(--color-view-as-text);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-view-as-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.view-as-exit-btn:hover {
  background: var(--color-view-as-text);
  color: var(--color-view-as-bg);
}

/* View-as tier switcher (building header) */
.building-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.view-as-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.view-as-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.view-as-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  cursor: pointer;
}

/* Main content */
.main-content {
  flex: 1;
  padding: var(--space-8) 0;
}

/* Site footer */
.site-footer {
  background: var(--color-bg-alt);
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-6) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
  text-align: center;
}

.site-footer a {
  color: var(--color-primary);
}


/* ==========================================================================
   4. Home page – hero, search, autocomplete, info grid
   ========================================================================== */

/* Hero section */
.hero {
  text-align: center;
  padding: var(--space-8) 0 var(--space-6);
  max-width: 600px;
  margin-inline: auto;
}

.hero h1 {
  margin-bottom: var(--space-3);
  color: var(--color-text);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.02em;
}

.hero-description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

/* Search form */
.search-form {
  position: relative;
  margin-bottom: var(--space-3);
}

.search-field-wrapper {
  display: flex;
  gap: var(--space-2);
  position: relative;
}

.search-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition);
  font-family: var(--font-sans);
}

.search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.search-btn {
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-header-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}

.search-btn:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.search-btn:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.search-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Autocomplete dropdown */
.autocomplete-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
}

.autocomplete-item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--font-size-sm);
  border-bottom: var(--border-width) solid var(--color-bg-alt);
  transition: background var(--transition);
  text-align: left;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* Info grid */
.info-section {
  max-width: 880px;
  margin-inline: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.info-section h2 {
  text-align: center;
  margin-bottom: var(--space-5);
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.info-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.info-card h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.info-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.info-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--font-weight-medium);
}

.info-value {
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}


/* ==========================================================================
   5. Building detail – header and section nav
   ========================================================================== */

.building-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-strong);
}

.building-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.building-address {
  font-size: var(--font-size-2xl);
  color: var(--color-text);
}

.building-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.building-meta strong {
  color: var(--color-text);
}

/* Track / untrack building button */
.btn-track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.btn-track:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

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

.btn-track.tracked {
  background: var(--color-primary);
  color: var(--color-header-text);
  border-color: var(--color-primary);
}

.btn-track.tracked:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-header-text);
}

/* Building detail layout shell */
.building-detail-shell {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

/* Sticky left sidebar nav (desktop) */
.section-nav-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: sticky;
  top: var(--space-6);
  max-height: calc(100vh - var(--space-12));
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) 0;
}

.nav-sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* Nav search (sidebar + mobile drawer) */
.nav-search {
  position: relative;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.nav-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition);
  color: var(--color-text);
  box-sizing: border-box;
}

.nav-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.nav-search-input::placeholder {
  color: var(--color-text-muted);
}

.nav-autocomplete-list {
  left: 0;
  right: auto;
  width: 320px;
  max-height: 240px;
  z-index: 200;
}

.nav-autocomplete-list .autocomplete-item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
}

.nav-drawer-search {
  padding: var(--space-3) var(--space-4);
  margin-bottom: 0;
}

.nav-drawer-search .nav-autocomplete-list {
  left: 0;
  right: 0;
  width: auto;
}

.section-nav-sidebar .nav-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4) var(--space-1);
  display: block;
}

.section-nav-sidebar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.section-nav-sidebar a:hover,
.section-nav-sidebar a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-left-color: var(--sidebar-active-border);
  text-decoration: none;
}

.section-nav-sidebar a.active { font-weight: 600; }

.section-nav-sidebar .nav-count {
  display: inline-block;
  min-width: 20px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-2xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 18px;
  flex-shrink: 0;
}

.building-detail-content { flex: 1; min-width: 0; }

/* Hamburger button — hidden on desktop, shown on mobile */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  flex-shrink: 0;
}

.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-header-text);
  border-radius: 1px;
}

/* Nav drawer — hidden by default, slides in from left on mobile */
.nav-drawer,
.nav-drawer-backdrop {
  display: none;
}

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--color-modal-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  z-index: 1000;
  background: var(--sidebar-bg);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
}

.nav-drawer-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.nav-drawer-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  transition: color var(--transition);
}

.nav-drawer-close:hover {
  color: var(--color-text);
}

.nav-drawer-body {
  padding: var(--space-2) 0;
}

/* Drawer link styles (match sidebar) */
.nav-drawer .nav-group-children a {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  color: var(--color-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.nav-drawer .nav-group-children a:hover {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-left-color: var(--sidebar-active-border);
  text-decoration: none;
}

/* Body state when drawer is open */
body.nav-drawer-open {
  overflow: hidden;
}

body.nav-drawer-open .nav-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.nav-drawer-open .nav-drawer {
  transform: translateX(0);
  box-shadow: var(--shadow-modal);
}

/* Legacy .section-nav (kept for compatibility) */
.section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.section-nav a {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.section-nav a:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

/* Secondary button */
.btn-secondary {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-secondary:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-text-muted);
  text-decoration: none;
}


/* ==========================================================================
   6. Data sections – shared styles
   ========================================================================== */

/* Card wrapper for each data section */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.data-section.card { scroll-margin-top: 80px; }

/* Scorecard metrics row */
.scorecard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--stat-card-min-width), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--stat-card-accent, var(--color-primary));
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: var(--shadow-sm);
}

.stat-card-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
}

.stat-card-value {
  font-size: var(--stat-card-number-size);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}

.stat-card-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Stat card accent variants — neutral only */
.stat-card.stat-violet { --stat-card-accent: var(--color-accent-ll97); }

.data-section {
  margin-bottom: var(--space-12);
  scroll-margin-top: 80px;
}

.data-section h2 {
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-primary);
  line-height: 1.2;
}

/* Per-section left-accent colors */
.section-taxes h2           { border-left-color: var(--color-accent-tax); }
.section-ll97 h2            { border-left-color: var(--color-accent-ll97); }
.section-dob-jobs h2        { border-left-color: var(--color-accent-dob); }
.section-dob-violations h2,
.section-dob-ecb h2         { border-left-color: var(--color-accent-violations); }
.section-safety h2,
.section-fisp h2            { border-left-color: var(--color-accent-safety); }
.section-311 h2             { border-left-color: var(--color-accent-311); }
.section-hpd h2,
.section-hpd-registration h2,
.section-hpd-violations h2,
.section-hpd-complaints h2  { border-left-color: var(--color-accent-hpd); }
.section-acris h2,
.section-coop-mortgage h2,
.section-rolling-sales h2   { border-left-color: var(--color-accent-acris); }
.section-lpc-landmarks h2   { border-left-color: var(--color-accent-landmark); }
.section-building-info {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}

/* --- Building map --- */
.building-map {
  width: 100%;
  height: 200px;
}
.building-map .mapboxgl-ctrl-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm);
}
.building-map .mapboxgl-ctrl-group button {
  background-color: var(--color-surface);
}
.building-map .mapboxgl-ctrl-group button:hover {
  background-color: var(--color-bg-alt);
}
.building-map .mapboxgl-ctrl-group button + button {
  border-top: 1px solid var(--color-border);
}
.building-map .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
  filter: invert(47%) sepia(50%) saturate(600%) hue-rotate(20deg) brightness(90%);
}

/* --- Info bar: compact metadata strip below map --- */
.info-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.4;
}
.info-bar strong {
  font-weight: 700;
}
.info-bar-item {
  white-space: nowrap;
}
.info-bar-muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.info-bar-sep {
  width: 1px;
  height: 14px;
  background: var(--color-border);
  flex-shrink: 0;
}
.info-bar-ids {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
  font-size: 11px;
  letter-spacing: .01em;
}
.badge-building-type {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.badge-type-coop   { background: #e8f0e4; color: #2d5e2d; }
.badge-type-condo  { background: #e4ecf5; color: #2d4a6b; }
.badge-type-rental { background: #f5f0e4; color: #6b5a2d; }
.section-nys-entity h2      { border-left-color: var(--color-accent-entity); }

/* Section record count badge in heading */
.section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 var(--space-2);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

/* Landmark badge in stat card */
.badge-landmark {
  background: var(--badge-landmark-bg);
  color: var(--badge-landmark-text);
}

.badge-experimental {
  background: var(--badge-open-bg);
  color: var(--badge-open-text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.data-section h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.data-section h3:first-of-type {
  margin-top: var(--space-4);
}

/* Safety subsection dividers — visually separate checks within the safety card */
.safety-check {
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}
.safety-check:first-of-type {
  padding-top: 0;
  margin-top: var(--space-4);
  border-top: none;
}
.safety-check h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 0;
  font-size: var(--font-size-lg);
  letter-spacing: -0.01em;
}

/* History toggle (collapsible filing history inside safety checks) */
.history-toggle {
  margin-top: var(--space-4);
}
.history-toggle > summary {
  cursor: pointer;
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  list-style: none;
}
.history-toggle > summary::-webkit-details-marker {
  display: none;
}
.history-toggle > summary::before {
  content: "\25B6\00a0";
  font-size: 0.65em;
  vertical-align: middle;
}
.history-toggle[open] > summary::before {
  content: "\25BC\00a0";
}
.history-toggle[open] > summary {
  margin-bottom: var(--space-3);
}

.section-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  max-width: 80ch;
}

.section-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  font-style: italic;
}

.compliance-deadline {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
  margin-bottom: var(--space-3);
}

.compliance-deadline span {
  cursor: help;
  border-bottom: 1px dotted var(--color-success);
}

.no-data {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  font-style: italic;
}

/* Locked section cards — shown inline for tier-gated sections */
.section-locked {
  text-align: center;
  padding: var(--space-6) var(--space-5);
}
.section-locked h2 {
  justify-content: center;
  border-left: none;
  padding-left: 0;
  color: var(--color-text-muted);
  gap: var(--space-2);
}
.section-locked .lock-icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.section-locked-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

/* Locked nav links — dimmed with lock icon */
.nav-link-locked {
  opacity: 0.55;
}
.nav-link-locked .nav-lock-icon {
  width: 12px;
  height: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-left: auto;
}

/* Back to top / navigation */
.back-to-top {
  text-align: center;
  padding: var(--space-8) 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-6);
}

.back-to-top a {
  color: var(--color-primary);
}

/* ==========================================================================
   7. Data tables
   ========================================================================== */

/* JS in main.js wraps .data-table elements in a div.table-scroll-wrapper */

.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Tables inside the scroll wrapper fill the full wrapper width */
.table-scroll-wrapper table {
  width: 100%;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
}

table.data-table,
table.assessment-table,
table.ll97-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  background: var(--color-bg);
}

/* Thead */
.data-table thead th,
.assessment-table thead th,
.ll97-table thead th {
  background: var(--color-header-bg);
  color: var(--color-header-text);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  position: relative;
}

/* Sortable column headers */
.sortable thead th[data-sort] {
  cursor: pointer;
  user-select: none;
  padding-right: var(--space-6); /* room for arrow */
}

.sortable thead th[data-sort]:hover {
  background: var(--color-table-header-hover);
}

/* Sort direction indicators (added by main.js) */
.sortable thead th[data-sort]::after {
  content: "⇅";
  position: absolute;
  right: var(--space-2);
  opacity: 0.4;
  font-size: 0.75rem;
}

.sortable thead th.sort-asc::after {
  content: "↑";
  opacity: 1;
}

.sortable thead th.sort-desc::after {
  content: "↓";
  opacity: 1;
}

/* Tbody */
.data-table tbody tr,
.assessment-table tbody tr,
.ll97-table tbody tr {
  border-bottom: var(--border-width) solid var(--color-border);
  transition: background var(--transition);
}

.data-table tbody tr:last-child,
.assessment-table tbody tr:last-child,
.ll97-table tbody tr:last-child {
  border-bottom: none;
}

/* Zebra striping — applied via JS (.stripe class) so hidden detail-rows
   don't break the visual alternation.  nth-child is unreliable when tables
   mix visible data rows with hidden detail-row elements. */
.data-table tbody tr.stripe,
.assessment-table tbody tr.stripe,
.ll97-table tbody tr.stripe {
  background: var(--color-table-stripe);
}

.data-table tbody tr:hover,
.assessment-table tbody tr:hover,
.ll97-table tbody tr:hover {
  background: var(--color-primary-light);
}

.data-table td,
.assessment-table td,
.ll97-table td {
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
  color: var(--color-text);
}

/* Wide description columns */
.description-cell {
  max-width: 280px;
  white-space: normal;
  word-break: break-word;
}

/* Truncated text cell — full text shown via data-tooltip on hover */
.cell-truncate {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Monospace for codes / IDs */
.monospace {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* Penalty / violation highlight */
td.penalty {
  color: var(--color-danger);
  font-weight: 600;
}

td.violation {
  color: var(--color-warning);
  font-weight: 600;
}

/* Assessment key-value table specific */
.assessment-table tbody td:first-child {
  font-weight: 500;
  color: var(--color-text-muted);
  width: 220px;
  white-space: nowrap;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.text-xs {
  font-size: var(--font-size-xs);
}

.text-lg {
  font-size: var(--font-size-lg);
}

/* ---------------------------------------------------------------------------
   Tax bill two-panel layout (mirrors NYC DOF bill)
   --------------------------------------------------------------------------- */

.tax-bill-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.tax-bill-panel {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
}

.tax-bill-panel-heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* Left panel: property details */
.tax-bill-details {
  background: var(--color-surface);
}

/* Right panel: calculation — subtle tinted background */
.tax-bill-calculation {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* Property detail list (dl) */
.tax-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tax-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tax-detail-item dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tax-detail-item dd {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
}

/* Exemption / abatement itemized groups */
.tax-itemized-group {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.tax-itemized-heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.tax-itemized-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tax-itemized-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.tax-itemized-label {
  color: var(--color-text);
}

.tax-itemized-amount {
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
  margin-left: var(--space-3);
}

.tax-itemized-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* Tax calculation table (right panel) */
.tax-calc-table {
  width: 100%;
  border-collapse: collapse;
}

.tax-calc-table td {
  padding: var(--space-2) 0;
  font-size: var(--font-size-base);
  vertical-align: baseline;
}

.tax-calc-table td:first-child {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  padding-right: var(--space-3);
}

.tax-calc-table td:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tax-calc-subtotal td {
  border-bottom: var(--border-width) solid var(--color-border);
  padding-bottom: var(--space-3);
}

.tax-calc-total td {
  border-top: 2px solid var(--color-primary-dark);
  padding-top: var(--space-3);
  font-size: var(--font-size-lg);
}

.tax-quarterly-note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.tax-disclaimer {
  margin-top: var(--space-4);
}

/* Mobile: stack vertically, calculation first */
@media (max-width: 768px) {
  .tax-bill-layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .tax-bill-calculation {
    order: -1;
  }

  .tax-bill-panel {
    padding: var(--space-3) var(--space-4);
  }
}


/* ==========================================================================
   8. Badges & status indicators
   ========================================================================== */

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--badge-default-bg);
  color: var(--badge-default-text);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Status-specific badge colors */
.badge-open,
.badge-active {
  background: var(--badge-open-bg);
  color: var(--badge-open-text);
}

.badge-closed,
.badge-resolved,
.badge-resolve,
.badge-satisfied,
.badge-compliant {
  background: var(--badge-closed-bg);
  color: var(--badge-closed-text);
}

.badge-violation,
.badge-not-compliant,
.badge-unsafe,
.badge-rescinded,
.badge-default {
  background: var(--badge-violation-bg);
  color: var(--badge-violation-text);
}

.badge-approved,
.badge-filed,
.badge-permit-issued {
  background: var(--badge-active-bg);
  color: var(--badge-active-text);
}

/* HPD violation class badges */
.badge-class-a {
  background: var(--badge-class-a-bg);
  color: var(--badge-class-a-text);
}

.badge-class-b {
  background: var(--badge-class-b-bg);
  color: var(--badge-class-b-text);
}

.badge-class-c {
  background: var(--badge-violation-bg);
  color: var(--badge-violation-text);
}

.badge-unknown {
  background: var(--badge-default-bg);
  color: var(--badge-default-text);
}


/* ==========================================================================
   9. LL97 section specifics
   ========================================================================== */

.ll97-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.ll97-stat {
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 180px;
  flex: 1;
}

.ll97-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.ll97-value {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
}

/* Penalty row highlight in LL97 table */
.ll97-table td.penalty {
  color: var(--color-danger);
  font-weight: 700;
}


/* ==========================================================================
   10. Error page
   ========================================================================== */

.error-page {
  text-align: center;
  padding: var(--space-12) var(--space-4);
}

.error-code {
  font-size: 6rem;
  font-weight: 800;
  color: var(--color-border);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.error-message {
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.error-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.error-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-header-text);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  text-decoration: none;
}

/* Login / signup gate page */
.gate-page {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  max-width: 540px;
  margin-inline: auto;
}

.gate-page h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.gate-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.gate-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.btn-outline {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.btn-outline:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  text-decoration: none;
}


/* ==========================================================================
   10b. Dashboard (tracked buildings)
   ========================================================================== */

.dashboard-container {
  max-width: 720px;
  margin: 0 auto;
}

.dashboard-container h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.tracking-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.tracking-summary strong {
  color: var(--color-text);
}

.tier-upgrade-hint {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-warning);
}

.tracked-buildings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tracked-building-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.tracked-building-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}

.tracked-building-link {
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.tracked-building-link h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
  transition: color var(--transition);
}

.tracked-building-link:hover h3 {
  color: var(--color-primary-dark);
}

.tracked-building-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.btn-untrack {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  color: var(--color-text-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-untrack:hover {
  background: var(--color-danger-light);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.org-section {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.org-section h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* Change badges (dashboard building cards) */
.building-changes {
  margin-top: var(--space-2);
}

.change-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

.change-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.change-badge {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
  background: var(--badge-default-bg);
  color: var(--badge-default-text);
}

.change-badge--compliance {
  background: var(--badge-active-bg);
  color: var(--badge-active-text);
}

.change-badge--complaints {
  background: var(--badge-attention-bg);
  color: var(--badge-attention-text);
}

.change-badge--sales {
  background: var(--badge-closed-bg);
  color: var(--badge-closed-text);
}

.change-badge--permits {
  background: var(--badge-open-bg);
  color: var(--badge-open-text);
}

/* Change History timeline (building detail page) */
.change-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.change-timeline-entry {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.change-timeline-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 1px;
}

.change-timeline-details {
  flex: 1;
  min-width: 0;
}

.change-detail {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  line-height: 1.5;
}

.change-detail:last-child {
  margin-bottom: 0;
}

.change-detail strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 640px) {
  .tracked-building-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .btn-untrack {
    align-self: flex-end;
  }
}


/* ==========================================================================
   11. Utilities
   ========================================================================== */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}


/* ==========================================================================
   11b. Table pagination controls
   ========================================================================== */

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pagination-controls button {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.pagination-controls button:hover:not(:disabled) {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.pagination-controls button:disabled {
  color: var(--color-border);
  cursor: not-allowed;
}

.pagination-info {
  flex: 1;
  text-align: center;
}


/* ==========================================================================
   11c. Doc-type tooltips
   ========================================================================== */

.doc-type-tooltip {
  cursor: help;
  border-bottom: 1px dotted var(--color-text-muted);
}

/* Tooltip bubble — injected by JS (position: fixed escapes overflow clipping) */
#data-tooltip-popup {
  position: fixed;
  background: var(--color-text);
  color: var(--color-header-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 1000;
  max-width: 280px;
  white-space: normal;
}


/* ==========================================================================
   11d. Unit mortgage status badges
   ========================================================================== */

.status-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.status-active {
  background: var(--status-active-bg);
  color: var(--status-active-text);
}

.status-paid {
  background: var(--status-paid-bg);
  color: var(--status-paid-text);
}

.status-none {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}


/* ==========================================================================
   11e. Subsection headings within data sections
   ========================================================================== */

.subsection-heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}


/* ==========================================================================
   12. Responsive breakpoints
   ========================================================================== */

/* Tablet and below — sidebar collapses, pills appear */
@media (max-width: 1023px) {
  .building-detail-shell  { flex-direction: column; align-items: stretch; }
  .section-nav-sidebar    { display: none; }
  .hamburger-btn          { display: flex; }
  .page-home .hamburger-btn { display: none; }
  .nav-drawer,
  .nav-drawer-backdrop    { display: block; }
  .scorecard { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 640px) {
  :root {
    --font-size-2xl: 1.5rem;
    --font-size-xl: 1.25rem;
  }

  .container {
    padding-inline: var(--space-4);
  }

  .hero {
    padding: var(--space-8) 0 var(--space-6);
  }

  .hero h1          { font-size: var(--font-size-2xl); }
  .scorecard        { grid-template-columns: 1fr 1fr; }
  .stat-card-value  { font-size: var(--font-size-xl); }

  .search-field-wrapper {
    flex-direction: column;
  }

  .search-btn {
    width: 100%;
  }

  .building-map {
    height: 160px;
  }
  .info-bar-ids {
    margin-left: 0;
    width: 100%;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }

  .building-title-row {
    flex-direction: column;
  }

  .building-header-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .view-as-banner {
    flex-wrap: wrap;
    text-align: center;
  }

  .building-address {
    font-size: 1.375rem;
  }

  .section-nav {
    gap: var(--space-1);
  }

  .ll97-summary {
    flex-direction: column;
  }

  .ll97-stat {
    min-width: unset;
  }

  .error-code {
    font-size: 4rem;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: var(--space-6) 0;
  }

  .data-section {
    margin-bottom: var(--space-8);
  }

  .data-section h2 {
    font-size: var(--font-size-lg);
  }
}


/* ==========================================================================
   Mobile card layout — tables transform to stacked cards below 768px.
   Each row becomes a bordered card; cells become labeled flex rows
   using data-label attributes applied by initResponsiveLabels() in JS.
   Assessment tables and detail subtables are excluded.
   ========================================================================== */

@media (max-width: 767px) {
  /* Hide table headers on mobile — labels come from data-label ::before */
  .data-table:not(.detail-subtable) thead,
  .ll97-table thead {
    display: none;
  }

  /* Block-level tbody and rows for card stacking */
  .data-table:not(.detail-subtable) tbody,
  .data-table:not(.detail-subtable) tbody > tr:not(.detail-row),
  .ll97-table tbody,
  .ll97-table tbody > tr:not(.detail-row) {
    display: block;
  }

  /* Card appearance for each data row */
  .data-table:not(.detail-subtable) tbody > tr:not(.detail-row):not(.filtered-out),
  .ll97-table tbody > tr:not(.detail-row):not(.filtered-out) {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  /* Override stripe background in card mode — all cards are uniform */
  .data-table:not(.detail-subtable) tbody > tr.stripe,
  .ll97-table tbody > tr.stripe {
    background: var(--color-surface);
  }

  /* Cells become label-value flex rows */
  .data-table:not(.detail-subtable) tbody > tr:not(.detail-row) > td,
  .ll97-table tbody > tr:not(.detail-row) > td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-bg-alt);
    text-align: right;
  }

  .data-table:not(.detail-subtable) tbody > tr:not(.detail-row) > td:last-child,
  .ll97-table tbody > tr:not(.detail-row) > td:last-child {
    border-bottom: none;
  }

  /* Column label from data-label attribute */
  .data-table:not(.detail-subtable) tbody > tr:not(.detail-row) > td::before,
  .ll97-table tbody > tr:not(.detail-row) > td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    margin-right: var(--space-3);
    text-align: left;
  }

  /* Expand chevron cell — no label, right-aligned */
  .data-table:not(.detail-subtable) td.expand-cell {
    display: flex;
    justify-content: flex-end;
    border-bottom: none;
    padding-top: var(--space-1);
  }

  .data-table:not(.detail-subtable) td.expand-cell::before {
    content: none;
  }

  /* Detail rows in card mode */
  .data-table:not(.detail-subtable) .detail-row {
    display: none;
  }

  .data-table:not(.detail-subtable) .detail-row.open {
    display: block;
  }

  .data-table:not(.detail-subtable) .detail-row > td {
    display: block;
    padding: 0;
    border-bottom: none;
  }

  .data-table:not(.detail-subtable) .detail-row > td::before {
    content: none;
  }

  /* Detail subtables stay as compact scrollable tables */
  .detail-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Scroll wrapper: softer treatment in card mode */
  .table-scroll-wrapper {
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow-x: visible;
  }

  /* Filter bar: full-width buttons */
  .table-filter-bar {
    width: 100%;
  }

  .filter-btn {
    flex: 1;
    text-align: center;
  }

  /* Pagination: smaller text */
  .pagination-controls {
    font-size: var(--font-size-xs);
  }

  .pagination-controls button {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
  }
}


@media (min-width: 1024px) {
  .hero {
    padding: var(--space-10) 0 var(--space-8);
  }

  .description-cell {
    max-width: 360px;
  }

  /* Sticky table headers — requires overflow-x: visible on wrapper */
  .table-scroll-wrapper {
    overflow-x: visible;
  }

  .data-table thead th,
  .assessment-table thead th,
  .ll97-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* Shadow on stuck header to separate from scrolled content */
  thead.is-stuck th {
    box-shadow: 0 2px 4px rgba(44, 38, 34, 0.10);
  }
}

/* Zero-height sentinel for sticky header detection (inserted by JS) */
.sticky-sentinel {
  height: 0;
  visibility: hidden;
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   Expandable detail rows (violations, filings with descriptions)
   --------------------------------------------------------------------------- */

/* Rows that expand a detail panel below */
.expandable-row {
  cursor: pointer;
}

.expandable-row:hover {
  background: var(--color-primary-light) !important;
}

/* Expand chevron in last cell */
.expand-cell {
  width: 40px;
  text-align: center;
  color: var(--color-primary);
  user-select: none;
}

td.expand-cell {
  padding-right: var(--space-3);
}

.expand-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.75rem;
  transition: transform var(--transition), background var(--transition);
}

.expandable-row:hover .expand-chevron {
  background: var(--color-primary);
  color: var(--color-header-text);
}

.expandable-row[aria-expanded="true"] .expand-chevron {
  transform: rotate(90deg);
}

/* Detail row — hidden by default, full-width description panel */
.detail-row {
  display: none;
}

.detail-row.open {
  display: table-row;
}

.detail-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--color-border);
}

.detail-panel {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.6;
}

.detail-meta {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Description callout — narrative text that precedes a detail subtable.
   Elevated typography + left border anchors it as "read this first",
   distinct from the structured data in the subtable below. */
.detail-description {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  margin: 0 0 var(--space-3) 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-border-strong);
}

/* Remove bottom border on the expandable row when its detail is open,
   so the detail panel visually connects to the row above */
.expandable-row[aria-expanded="true"] {
  border-bottom: none !important;
}

.expandable-row[aria-expanded="true"] td {
  border-bottom: none;
}

/* Detail subtable — compact inner table for grouped rows (e.g. DOB NOW).
   Sits inside .detail-panel (bg-alt sand), so use a white surface background
   with its own subtle striping to separate it visually from the panel. */
.detail-subtable {
  width: 100%;
  font-size: var(--font-size-sm);
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.detail-subtable thead th {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.detail-subtable tbody tr {
  background: var(--color-subtable-row);
}

.detail-subtable tbody tr.stripe {
  background: var(--color-subtable-row-alt);
}

.detail-subtable tbody tr:hover {
  background: var(--color-bg-hover);
}

.detail-subtable tbody td {
  padding: var(--space-1) var(--space-2);
}

.detail-subtable .badge {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-2xs);
}

.detail-subtable tbody tr:last-child td {
  border-bottom: none;
}


/* ---------------------------------------------------------------------------
   Table status filter bar (violations tables)
   --------------------------------------------------------------------------- */

.table-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: var(--space-1);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: fit-content;
}

.filter-btn {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform 0.1s ease,
              box-shadow var(--transition);
  white-space: nowrap;
  line-height: 1.4;
}

.filter-btn:active {
  transform: scale(0.97);
}

.filter-btn:hover {
  color: var(--color-text);
  background: var(--color-bg-hover);
}

.filter-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-weight-semibold);
}

.filter-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.filter-btn.active .filter-count {
  color: var(--color-text);
}

/* Rows hidden by the status filter */
tr.filtered-out,
tr.filtered-out + tr.detail-row {
  display: none !important;
}


/* ---------------------------------------------------------------------------
   Permit expand button (DOB NOW table cell trigger)
   --------------------------------------------------------------------------- */

.permit-expand-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.permit-expand-btn:hover { color: var(--color-primary-dark); }


/* ---------------------------------------------------------------------------
   Permit detail modal
   --------------------------------------------------------------------------- */

.permit-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.permit-modal[hidden] { display: none; }

.permit-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-modal-backdrop);
}

.permit-modal-dialog {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  width: min(600px, calc(100vw - var(--space-8)));
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.permit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.permit-modal-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  font-family: var(--font-mono);
}

.permit-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.permit-modal-close:hover { background: var(--color-bg-alt); color: var(--color-text); }

.permit-modal-body {
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


/* ---------------------------------------------------------------------------
   Permit cards (inside modal body)
   --------------------------------------------------------------------------- */

.permit-card {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.permit-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.permit-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.permit-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.6;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}

.record-id {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.record-meta-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}


/* ---------------------------------------------------------------------------
   Loading modal (shown during building data fetch)
   --------------------------------------------------------------------------- */

.loading-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-modal[hidden] { display: none; }

.loading-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-modal-backdrop);
}

.loading-modal-dialog {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

/* Unavailable building modal */
.unavailable-dialog {
  max-width: 420px;
  text-align: center;
}
.unavailable-icon {
  color: var(--color-warning);
}
.unavailable-title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text);
}
.unavailable-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.unavailable-close {
  padding: var(--space-2) var(--space-6);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.unavailable-close:hover {
  background: var(--color-primary-dark);
}


/* ==========================================================================
   Compliance Dashboard
   ========================================================================== */

.compliance-dashboard {
  margin-bottom: var(--space-6);
}

.compliance-dashboard h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.compliance-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition);
}

.compliance-item:hover {
  box-shadow: var(--shadow-card-hover);
}

.compliance-status-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: var(--space-1);
}

.compliance-status-dot.dot-compliant     { background: var(--color-success); }
.compliance-status-dot.dot-needs-attention { background: var(--color-warning); }
.compliance-status-dot.dot-non-compliant { background: var(--color-danger); }
.compliance-status-dot.dot-no-data       { background: var(--color-border-strong); }

.compliance-item-body {
  flex: 1;
  min-width: 0;
}

.compliance-item-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.compliance-item-summary {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  line-height: 1.4;
}

.badge-needs-attention {
  background: var(--badge-attention-bg);
  color: var(--badge-attention-text);
}

.badge-no-data {
  background: var(--badge-default-bg);
  color: var(--badge-default-text);
}

@media (max-width: 600px) {
  .compliance-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Sidebar nav groups (collapsible categories)
   ========================================================================== */

.nav-group {
  border-bottom: 1px solid var(--sidebar-border);
}

.nav-group:last-child {
  border-bottom: none;
}

.nav-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: var(--nav-group-header-bg);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  text-align: left;
  transition: background var(--transition);
}

.nav-group-header:hover {
  background: var(--color-bg-hover);
}

.nav-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-group-chevron {
  margin-left: auto;
  font-size: 0.65rem;
  transition: transform var(--transition);
  flex-shrink: 0;
}

.nav-group.collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-group-children {
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.25s ease;
}

.nav-group.collapsed .nav-group-children {
  max-height: 0;
}

/* Category dot colors */
.nav-group[data-category="overview"] .nav-group-dot   { background: var(--color-cat-overview); }
.nav-group[data-category="finance"] .nav-group-dot    { background: var(--color-cat-finance); }
.nav-group[data-category="construction"] .nav-group-dot { background: var(--color-cat-construction); }
.nav-group[data-category="housing"] .nav-group-dot    { background: var(--color-cat-housing); }
.nav-group[data-category="compliance"] .nav-group-dot { background: var(--color-cat-compliance); }


/* ==========================================================================
   Content area category headers
   ========================================================================== */

.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border);
}

.category-header:first-child {
  margin-top: 0;
}

.category-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.category-header h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
  border: none;
  padding: 0;
}

/* Category dot colors in content area */
.category-header[data-category="overview"] .category-dot   { background: var(--color-cat-overview); }
.category-header[data-category="finance"] .category-dot    { background: var(--color-cat-finance); }
.category-header[data-category="construction"] .category-dot { background: var(--color-cat-construction); }
.category-header[data-category="housing"] .category-dot    { background: var(--color-cat-housing); }
.category-header[data-category="compliance"] .category-dot { background: var(--color-cat-compliance); }


/* ==========================================================================
   Admin interface
   ========================================================================== */

.admin-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-6) 0;
}

.admin-nav {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--color-border);
}

.admin-nav-link {
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}

.admin-nav-link:hover {
  color: var(--color-text);
}

.admin-nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.admin-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.admin-header h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.admin-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Flash messages */
.admin-flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.admin-flash-success {
  background: var(--badge-closed-bg);
  color: var(--badge-closed-text);
  border: 1px solid var(--color-success);
}

.admin-flash-error {
  background: var(--badge-violation-bg);
  color: var(--badge-violation-text);
  border: 1px solid var(--color-danger);
}

/* User table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.admin-table thead th {
  padding: var(--space-3) var(--space-4);
  background: var(--color-header-bg);
  color: var(--color-header-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.admin-table tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.admin-table tbody tr:nth-child(even) {
  background: var(--color-table-stripe);
}

.admin-table tbody tr:hover {
  background: var(--color-bg-hover);
}

/* Role badges */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.role-admin {
  background: var(--badge-violation-bg);
  color: var(--badge-violation-text);
}

.role-user {
  background: var(--badge-default-bg);
  color: var(--badge-default-text);
}

/* Subscription status badges */
.sub-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sub-active {
  background: var(--badge-closed-bg);
  color: var(--badge-closed-text);
}

.sub-canceled {
  background: var(--badge-open-bg);
  color: var(--badge-open-text);
}

.sub-unpaid {
  background: var(--badge-violation-bg);
  color: var(--badge-violation-text);
}

.sub-none {
  background: var(--badge-default-bg);
  color: var(--badge-default-text);
}

.admin-stripe-link {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-primary);
  text-decoration: none;
}

.admin-stripe-link:hover {
  text-decoration: underline;
}

/* Actions cell */
.admin-actions-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-inline-form {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.admin-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
}

.admin-btn {
  padding: var(--space-1) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
  white-space: nowrap;
}

.admin-btn:hover { filter: brightness(0.9); }

.admin-btn-tier {
  background: var(--color-primary);
  color: var(--color-header-text);
}

.admin-btn-promote {
  background: var(--color-success);
  color: var(--color-header-text);
}

.admin-btn-demote,
.admin-btn-delete {
  background: var(--color-danger);
  color: var(--color-header-text);
}

.admin-self-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Pagination */
.admin-pagination {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.admin-page-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Create org expandable form */
.admin-create-form {
  margin-bottom: var(--space-5);
}

.admin-create-form > summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
}

.admin-create-form > summary::-webkit-details-marker {
  display: none;
}

.admin-create-form[open] > summary {
  margin-bottom: var(--space-4);
}

/* Admin forms */
.admin-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  max-width: 560px;
}

.admin-form-row {
  margin-bottom: var(--space-4);
}

.admin-form-row:last-of-type {
  margin-bottom: var(--space-5);
}

.admin-form-row label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.admin-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}

.admin-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.admin-input::placeholder {
  color: var(--color-text-muted);
}

.admin-input-error {
  border-color: var(--color-danger);
}

.admin-input-error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger-focus);
}

.admin-field-error {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
  min-height: 0;
}

/* Danger zone */
.org-danger-zone {
  margin-top: var(--space-6);
}

.danger-zone-card {
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 560px;
}

.danger-zone-info strong {
  display: block;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}

.danger-zone-info p {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 640px) {
  .admin-actions-cell {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-header {
    flex-direction: column;
    gap: var(--space-1);
  }

  .admin-form {
    max-width: none;
  }
}

/* ==========================================================================
   Insights / Blog
   ========================================================================== */

.insights-listing {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-8) 0;
}

.insights-page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-3);
}

.insights-page-desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.insights-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

a.insight-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid var(--color-primary);
  transition: border-color var(--transition);
}

a.insight-card:hover {
  border-color: var(--color-primary);
}

.insight-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
  color: var(--color-primary);
}

.insight-card-date {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.insight-card-desc {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.6;
}

/* Article page */

.insights-article-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-8) 0;
}

.insights-article-header {
  margin-bottom: var(--space-8);
}

.insights-article-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-3);
}

.insights-article-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.insights-article-author {
  margin-left: var(--space-2);
}

.insights-back {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.insights-back a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.insights-back a:hover {
  color: var(--color-primary-dark);
}

/* -- Prose / Article content -- */

.prose {
  max-width: 680px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
}

.prose p {
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.prose h2 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose h3 {
  font-size: var(--font-size-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.prose blockquote {
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
  margin: var(--space-6) 0;
  color: var(--color-text-muted);
}

.prose pre {
  background: var(--color-surface-raised);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.prose ul, .prose ol {
  list-style: revert;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose img {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
}

.prose th, .prose td {
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  text-align: left;
}

.prose th {
  background: var(--color-surface-raised);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   BIQ Score card
   ========================================================================== */

.biq-score-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.biq-score-grade {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.biq-grade-a, .biq-grade-b {
  background: var(--badge-closed-bg);
  color: var(--color-success);
}

.biq-grade-c, .biq-grade-d {
  background: var(--badge-open-bg);
  color: var(--color-warning);
}

.biq-grade-f {
  background: var(--badge-violation-bg);
  color: var(--color-danger);
}

.biq-score-heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.biq-score-label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0;
}

.biq-score-context {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

/* ==========================================================================
   Admin: Raw JSON viewer
   ========================================================================== */

.admin-raw-json-toggle {
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  padding: var(--space-3);
}

.admin-raw-json-pre {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  max-height: 600px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   Spacing utilities
   ========================================================================== */
.mt-2 { margin-top: var(--space-2); }