/* ─── Bloomberg-Inspired Dashboard Styles ─────────────────────────────────
 *
 * Palette:
 *   Navy:       #003366  (nav bar, headings)
 *   Blue:       #0066CC  (links, accents)
 *   Teal:       #0099CC  (secondary accent)
 *   Green-teal: #00CC99  (positive indicators)
 *   Orange:     #FF8C00  (warning/accent)
 *   Light gray: #F5F6FA  (page background)
 *   White:      #FFFFFF  (cards)
 */

/* ─── Reset & Base ──────────────────────────────────────────────────────── */

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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #F5F6FA;
  color: #333;
  line-height: 1.5;
}

/* ─── Navigation ────────────────────────────────────────────────────────── */

.nav {
  background: #003366;
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  min-height: 56px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
  gap: 8px;
}

.nav-brand {
  font-size: 18px;
  font-weight: 600;
  margin-right: 32px;
  white-space: nowrap;
  padding: 12px 0;
}

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  flex-wrap: wrap;
  padding: 8px 0;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.nav-links a.active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 500;
}

/* ─── Focus Styles (Accessibility) ──────────────────────────────────────── */
/* Visible focus indicators for keyboard navigation */

.nav-links a:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Focus styles for interactive elements */
a:focus,
button:focus,
.retry-btn:focus {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

/* Skip to main content link (hidden until focused) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #003366;
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* ─── Page Layout ───────────────────────────────────────────────────────── */

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #003366;
  margin-bottom: 20px;
}

/* ─── KPI Cards ─────────────────────────────────────────────────────────── */
/* Auto-fill grid: cards fill available space, minimum 200px each.
 * Similar to a flex-wrap but with consistent sizing.
 */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.kpi-label {
  font-size: 13px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: #003366;
}

/* ─── Chart Grid ────────────────────────────────────────────────────────── */
/* 2 columns on desktop, 1 column on mobile. Each chart sits in a card. */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Allow a chart to span full width (both columns) */
.chart-grid .full-width {
  grid-column: 1 / -1;
}

.chart-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-height: 350px;
  /* Highcharts needs an explicit container to render into */
  position: relative;
}

.chart-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #003366;
  margin-bottom: 12px;
}

/* The actual Highcharts render target inside each card */
.chart-container {
  width: 100%;
  min-height: 300px;
  height: auto;
  /* Ensure pie charts have enough room for labels */
  aspect-ratio: 4 / 3;
}

/* ─── Loading Spinner ───────────────────────────────────────────────────── */
/* Pure CSS spinner — no library needed. Shown by malloy-client.js while
 * a query is in flight.
 */

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #666;
  font-size: 14px;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #E0E0E0;
  border-top-color: #0066CC;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

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

/* ─── Error State ───────────────────────────────────────────────────────── */

.error-message {
  border: 1px solid #E53E3E;
  border-radius: 8px;
  padding: 16px;
  background: #FFF5F5;
  color: #C53030;
  font-size: 14px;
  text-align: center;
}

.error-message p {
  margin-bottom: 12px;
}

.retry-btn {
  background: #003366;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s;
}

.retry-btn:hover {
  background: #004080;
}

/* ─── Empty State ───────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999;
  font-size: 14px;
}

/* ─── Filter Controls ──────────────────────────────────────────────────── */
/* Three filter UI styles: dropdowns, chips, and collapsible panel. */

/* Style 1: Dropdown filters in a horizontal bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-select-wrapper label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 160px;
  background: #fff;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: #0066CC;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
}

.filter-clear-btn {
  padding: 8px 16px;
  background: #E53E3E;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.filter-clear-btn:hover {
  background: #C53030;
}

.filter-clear-btn-small {
  padding: 4px 12px;
  font-size: 12px;
}

/* Style 2: Chip/tag selectors */
.filter-chips-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-chip-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip-label {
  font-size: 13px;
  font-weight: 500;
  color: #666;
  min-width: 100px;
}

.filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  padding: 6px 12px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-chip:hover {
  background: #e0e0e0;
  border-color: #ccc;
}

.filter-chip.active {
  background: #003366;
  color: #fff;
  border-color: #003366;
}

.filter-chip.active:hover {
  background: #004080;
  border-color: #004080;
}

/* Style 3: Collapsible panel */
.filter-panel-container {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.filter-panel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 4px;
  transition: background 0.15s;
}

.filter-panel-toggle:hover {
  background: #e9ecef;
}

.filter-panel-icon {
  font-size: 10px;
  color: #666;
}

.filter-panel-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

.filter-panel-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-panel-label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

/* Tablet and below (820px matches iPad Air portrait) */
@media (max-width: 820px) {
  .nav {
    padding: 8px 16px;
  }

  .nav-brand {
    font-size: 16px;
    margin-right: 20px;
    padding: 8px 0;
  }

  .nav-links {
    gap: 2px;
  }

  .nav-links a {
    font-size: 13px;
    padding: 6px 10px;
  }

  .page {
    padding: 16px;
  }

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

  .chart-container {
    min-height: 280px;
  }

  /* Filter responsive - tablet */
  .filter-bar {
    gap: 12px;
    padding: 12px;
  }

  .filter-select {
    min-width: 140px;
  }

  .filter-chip-label {
    min-width: 80px;
    font-size: 12px;
  }

  .filter-chip {
    padding: 5px 10px;
    font-size: 12px;
  }

  .filter-panel-content {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile devices (430px covers iPhone 15 Pro Max) */
@media (max-width: 480px) {
  .nav {
    padding: 8px 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-brand {
    font-size: 15px;
    margin-right: 0;
    padding: 8px 0 4px 0;
  }

  .nav-links {
    width: 100%;
    justify-content: flex-start;
    padding: 4px 0 8px 0;
  }

  .nav-links a {
    font-size: 12px;
    padding: 6px 8px;
  }

  .page {
    padding: 12px;
  }

  .page-title {
    font-size: 20px;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .kpi-card {
    padding: 14px;
  }

  .kpi-label {
    font-size: 11px;
  }

  .kpi-value {
    font-size: 20px;
  }

  .chart-card {
    padding: 14px;
    min-height: 300px;
  }

  .chart-card h3 {
    font-size: 14px;
  }

  .chart-container {
    min-height: 250px;
  }

  /* Filter responsive - mobile */
  .filter-bar {
    flex-direction: column;
    gap: 12px;
  }

  .filter-select-wrapper {
    width: 100%;
  }

  .filter-select {
    width: 100%;
    min-width: auto;
  }

  .filter-clear-btn {
    width: 100%;
  }

  .filter-chip-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-chip-label {
    min-width: auto;
  }

  .filter-chips {
    width: 100%;
  }

  .filter-panel-content {
    grid-template-columns: 1fr;
  }
}

/* Small mobile (360px covers most Android devices) */
@media (max-width: 380px) {
  .nav-brand {
    font-size: 14px;
  }

  .nav-links a {
    font-size: 11px;
    padding: 5px 6px;
  }

  .page-title {
    font-size: 18px;
  }

  .kpi-value {
    font-size: 18px;
  }

  .chart-card h3 {
    font-size: 13px;
  }
}

/* ─── Focus Area Cards (Portfolio Page) ────────────────────────────────────── */
/* Clickable cards for navigating to each focus area dashboard */

.focus-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.focus-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #003366;
  transition: transform 0.15s, box-shadow 0.15s;
}

.focus-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.focus-card:focus {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

.focus-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.focus-title {
  font-size: 18px;
  font-weight: 600;
  color: #003366;
  margin-bottom: 12px;
}

.focus-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.focus-stat {
  font-size: 14px;
  color: #555;
}

.focus-description {
  font-size: 13px;
  color: #888;
}

/* Focus area color coding — left border indicates focus area */
.focus-environment { border-left-color: #2E7D32; }  /* Green */
.focus-health { border-left-color: #C62828; }       /* Red */
.focus-government { border-left-color: #1565C0; }   /* Blue */
.focus-education { border-left-color: #F57C00; }    /* Orange */
.focus-arts { border-left-color: #7B1FA2; }         /* Purple */

/* ─── Breadcrumb Navigation ────────────────────────────────────────────────── */
/* Shows current location in the hierarchy: Portfolio → Environment → Programs */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.breadcrumb a {
  color: #0066CC;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb a:focus {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

.breadcrumb-separator {
  color: #999;
}

.breadcrumb-current {
  color: #333;
  font-weight: 500;
}

/* ─── Focus Area Page Header ───────────────────────────────────────────────── */
/* Colored banner at top of focus area pages */

.focus-header {
  background: linear-gradient(135deg, #003366 0%, #0066CC 100%);
  color: #fff;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.focus-header h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}

.focus-header-description {
  font-size: 16px;
  opacity: 0.9;
}

/* Focus area specific header colors */
.focus-header-environment { background: linear-gradient(135deg, #1B5E20 0%, #43A047 100%); }
.focus-header-health { background: linear-gradient(135deg, #B71C1C 0%, #E53935 100%); }
.focus-header-government { background: linear-gradient(135deg, #0D47A1 0%, #1976D2 100%); }
.focus-header-education { background: linear-gradient(135deg, #E65100 0%, #FB8C00 100%); }
.focus-header-arts { background: linear-gradient(135deg, #4A148C 0%, #8E24AA 100%); }

/* Responsive adjustments for focus cards */
@media (max-width: 820px) {
  .focus-area-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .focus-card {
    padding: 18px;
  }

  .focus-icon {
    font-size: 28px;
  }

  .focus-title {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .focus-area-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .focus-card {
    padding: 16px;
  }

  .focus-header h1 {
    font-size: 22px;
  }

  .focus-header-description {
    font-size: 14px;
  }
}