/*
  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-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;
  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;
}

.site-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-header-text-muted);
  margin-bottom: 0;
}

/* 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: #fbbf24;
  color: #78350f;
  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 #78350f;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #78350f;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.view-as-exit-btn:hover {
  background: #78350f;
  color: #fbbf24;
}

/* 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;
}


/* ==========================================================================
   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);
  margin-bottom: var(--space-2);
}

.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));
  overflow-y: auto;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.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 5px;
  background: var(--color-border);
  border-radius: 999px;
  font-size: 10px;
  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: 5px;
  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-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);
}

.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%;
  min-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;
}

/* 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-total-row {
  border-top: 2px solid var(--color-border) !important;
  background: var(--color-primary-light) !important;
}


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

.badge {
  display: inline-block;
  padding: 3px 10px;
  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);
}

@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%;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .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;
}

/* 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: 1px 6px;
  font-size: 0.6875rem;
}

.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: 3px;
  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);
}


/* ==========================================================================
   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: 5px;
}

.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: 2px;
  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-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 {
  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);
  text-align: center;
}

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

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