/* ===================================================================
   NOVA THEME — TYPOGRAPHY SYSTEM
   Visual facelift typography overrides for Nova DSO Tracker.
   These are additive styles that build on base.css and tokens.css.

   Reference: nova-desktop-facelift.html
   ================================================================ */

/* =================================================================
   CSS CUSTOM PROPERTIES — NOVA THEME EXTENSIONS
   ================================================================ */

:root {
  /* === FONT FAMILIES === */
  --nova-font-sans: 'DM Sans', 'Roboto', system-ui, -apple-system, sans-serif;
  --nova-font-mono: 'DM Mono', 'Courier New', monospace;

  /* === TEXT COLORS (semantic aliases) === */
  --nova-text: var(--text-primary);
  --nova-text-2: var(--text-secondary);
  --nova-text-3: var(--text-tertiary);
  --nova-text-4: var(--text-light);
  --nova-accent: var(--primary-color);
  --nova-accent-mid: var(--primary-light);
  --nova-bg: var(--gray-50);

  /* === COLUMN HEADER TOKENS === */
  --nova-header-size: 10px;
  --nova-header-weight: 700;
  --nova-header-tracking: 0.09em;
  --nova-header-color: var(--text-light);

  /* === SUB-LABEL TOKENS === */
  --nova-sub-size: 9px;
  --nova-sub-weight: 400;
  --nova-sub-tracking: 0;
  --nova-sub-opacity: 0.7;

  /* === TABLE TOKENS === */
  --nova-row-hover: #f0f7fa;
  --nova-alt-high-bg: rgba(131,180,197,0.52);
  --nova-alt-high-text: #1d6a80;
  --nova-alt-high-border: rgba(131,180,197,0.65);
  --nova-alt-med-bg: rgba(131,180,197,0.32);
  --nova-alt-med-text: #2d7d95;
  --nova-alt-med-border: rgba(131,180,197,0.45);
  --nova-alt-low-bg: #f0f0f0;
  --nova-alt-low-text: #606060;
  --nova-alt-low-border: transparent;
  --nova-trend-up: #2a9060;
  --nova-trend-down: #999;
  --nova-star-color: #c09030;
}

/* Dark mode adjustments */
:root[data-theme="dark"] {
  --nova-text: rgba(255,255,255,0.92);
  --nova-text-2: rgba(255,255,255,0.55);
  --nova-text-3: rgba(255,255,255,0.30);
  --nova-text-4: rgba(255,255,255,0.18);
  --nova-accent: #8ec8da;
  --nova-accent-mid: #a8cdd8;
  --nova-bg: #0f1118;
  --nova-header-color: rgba(255,255,255,0.18);

  /* Table tokens - dark mode */
  --nova-row-hover: rgba(122,175,192,0.06);
  --nova-alt-high-bg: rgba(142,200,218,0.28);
  --nova-alt-high-text: #8ec8da;
  --nova-alt-high-border: rgba(142,200,218,0.42);
  --nova-alt-med-bg: rgba(142,200,218,0.16);
  --nova-alt-med-text: #6db8cc;
  --nova-alt-med-border: rgba(142,200,218,0.28);
  --nova-alt-low-bg: rgba(255,255,255,0.05);
  --nova-alt-low-text: var(--nova-text-3);
  --nova-alt-low-border: var(--nova-border);
  --nova-trend-up: #6dcab0;
  --nova-trend-down: var(--nova-text-4);
  --nova-star-color: #d4a840;
}

/* =================================================================
   1. BASE BODY TEXT
   ================================================================ */

body {
  font-family: var(--nova-font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--nova-text);
  background: var(--nova-bg);
}

/* =================================================================
   2. DATA MONO CLASS & NUMERIC COLUMNS
   For numeric values in tables (altitude, azimuth, transit times,
   minutes, degrees).

   OPTION A: Apply .data-mono class manually to <td> elements
   OPTION B: Use data-column-key attribute selectors (automatically
             applied by dashboard.js)
   ================================================================ */

/* Manual class for numeric data cells */
.data-mono {
  font-family: var(--nova-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Auto-apply monospace to numeric columns via data-column-key attribute */
/* These columns contain numeric data that should use monospace font */
td[data-column-key="Altitude Current"],
td[data-column-key="Azimuth Current"],
td[data-column-key="Altitude 11PM"],
td[data-column-key="Azimuth 11PM"],
td[data-column-key="Transit Time"],
td[data-column-key="Observable Duration (min)"],
td[data-column-key="Max Altitude (°)"],
td[data-column-key="Angular Separation (°)"],
td[data-column-key="Magnitude"],
td[data-column-key="Size"],
td[data-column-key="SB"],
td[data-column-key="Max Altitude"] {
  font-family: var(--nova-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Object ID column - monospace for catalog designators */
td[data-column-key="Object"] {
  font-family: var(--nova-font-mono);
  font-size: 12px;
  font-weight: 600;
}

/* Journal table numeric columns */
td[data-journal-column-key="calculated_integration_time_minutes"],
td[data-journal-column-key="session_rating_subjective"] {
  font-family: var(--nova-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Outlook table numeric columns */
td[data-outlook-column-key="max_alt"],
td[data-outlook-column-key="obs_dur"] {
  font-family: var(--nova-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* =================================================================
   3. LOGO TREATMENT
   Targets the brand-group structure in base.html:
   <div class="brand-group">
     <h1><span>Nova</span> DSO Tracker <small>vX.X</small></h1>
   </div>
   ================================================================ */

/* "Nova" word - the accent-colored span */
.brand-group h1 span {
  font-weight: 700;
  color: var(--nova-accent);
  letter-spacing: -0.03em;
  font-size: 17px;
}

/* "DSO Tracker" - the text after the span within h1 */
/* Note: CSS cannot directly target a text node. The h1 itself
   provides the base styling, with the span overriding for "Nova" */
.brand-group h1 {
  font-size: 14px;
  font-weight: 400;
  color: var(--nova-text-2);
  letter-spacing: -0.01em;
}

/* Re-apply Nova styling since it inherits from h1 */
.brand-group h1 span {
  font-size: 17px;
}

/* Version number - the <small> element */
.brand-group h1 small {
  font-size: 10px;
  color: var(--nova-text-4);
  font-family: var(--nova-font-mono);
  font-weight: 400;
  margin-left: 4px;
  letter-spacing: 0;
}

/* =================================================================
   4. PAGE TITLE
   Targets .injected-title h2 and .page-title classes used in
   templates for page-specific titles (Dashboard, Configuration, etc.)
   ================================================================ */

.injected-title h2,
.page-title,
h2.page-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nova-text);
}

/* =================================================================
   5. COLUMN HEADERS IN TABLES
   Targets standard <th> elements and specific table header classes.
   Sub-labels are spans within headers for units like "Current", "11 PM", etc.
   ================================================================ */

/* Main column header style */
th,
.table-header,
.ca-th, .cb-th, .cc-th {
  font-size: var(--nova-header-size);
  font-weight: var(--nova-header-weight);
  text-transform: uppercase;
  letter-spacing: var(--nova-header-tracking);
  color: var(--nova-header-color);
}

/* Sub-labels within column headers (units, times) */
/* The main app uses .subtext class within <th> for sub-labels */
th .subtext,
th span.th-sub,
.ca-th-sub, .cb-th-sub, .cc-th-sub,
th small,
.table-header-sub {
  font-size: var(--nova-sub-size);
  font-weight: var(--nova-sub-weight);
  letter-spacing: var(--nova-sub-tracking);
  display: block;
  text-transform: none;
  margin-top: 1px;
  opacity: var(--nova-sub-opacity);
  color: var(--nova-header-color);
}

/* =================================================================
   6. SECTION LABELS / MICRO-LABELS
   Small uppercase labels above form groups in Configuration and
   similar section dividers throughout the app.
   ================================================================ */

.section-label,
.micro-label,
.form-section-label,
.config-section-title {
  font-size: var(--nova-header-size);
  font-weight: var(--nova-header-weight);
  text-transform: uppercase;
  letter-spacing: var(--nova-header-tracking);
  color: var(--nova-header-color);
  margin-bottom: var(--space-2, 8px);
}

/* =================================================================
   STAT BOX / STATUS ITEM LABELS
   Targets the macros: stat_box, status_item
   ================================================================ */

/* Stat box label (from macros.html) */
.stat-box .stat-label,
.stat-label {
  font-size: var(--nova-header-size);
  font-weight: var(--nova-header-weight);
  text-transform: uppercase;
  letter-spacing: var(--nova-header-tracking);
  color: var(--nova-header-color);
}

/* Stat box value - semibold primary text */
.stat-box .stat-value,
.stat-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--nova-text);
}

/* Status item from macros.html - inherits from above */
.status-item .status-label {
  font-size: var(--nova-header-size);
  font-weight: var(--nova-header-weight);
  text-transform: uppercase;
  letter-spacing: var(--nova-header-tracking);
  color: var(--nova-header-color);
}

.status-item .status-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--nova-text);
}

/* =================================================================
   TAB BUTTONS (from macros.html: tab_button)
   ================================================================ */

.detail-tab-button {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.detail-tab-button.active {
  font-weight: 600;
}

/* =================================================================
   ALTITUDE BADGES
   Numeric altitude values displayed as colored badges
   ================================================================ */

.alt-badge,
.altitude-badge,
[class*="alt-badge"],
[class*="ca-alt-"],
[class*="cb-alt-"],
[class*="cc-alt-"] {
  font-family: var(--nova-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* =================================================================
   FORM GROUP LABELS (from macros.html: form_group)
   ================================================================ */

.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--nova-text-2);
  letter-spacing: 0.01em;
}

/* =================================================================
   BUTTON TYPOGRAPHY (from macros.html: action_button)
   ================================================================ */

.action-button {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* =================================================================
   HELP BADGE (from macros.html: help_badge)
   ================================================================ */

.help-badge {
  font-size: 11px;
  font-weight: 700;
  font-family: serif;
}

/* =================================================================
   DETAIL ROW (from macros.html: detail_row)
   Definition list pairs for object details
   ================================================================ */

dt {
  font-size: var(--nova-header-size);
  font-weight: var(--nova-header-weight);
  text-transform: uppercase;
  letter-spacing: var(--nova-header-tracking);
  color: var(--nova-header-color);
}

dd {
  font-size: 13px;
  font-weight: 500;
  color: var(--nova-text);
}

/* =================================================================
   UPDATE/TIMESTAMP INDICATORS
   Small mono text for "last updated" displays
   ================================================================ */

.update-indicator,
.last-update,
.ca-update, .cb-update, .cc-update,
#next-update-timer {
  font-size: 11px;
  font-family: var(--nova-font-mono);
  font-weight: 500;
}

/* Status strip time/date values */
#date,
#time,
#dusk,
#dawn {
  font-family: var(--nova-font-mono);
  font-size: 13px;
  font-weight: 500;
}

/* =================================================================
   HEADER & STATUS STRIP FACELIFT
   Reference: nova-desktop-facelift.html (.ca-header, .cb-header)
   ================================================================ */

/* Add missing Nova theme tokens for header styling */
:root {
  --nova-surface: var(--bg-white);
  --nova-surface-alt: var(--bg-light);
  --nova-border: var(--border-medium);
  --nova-border-light: var(--border-light);
  --nova-accent-light: var(--primary-light);
  --nova-accent-bg: var(--primary-bg);
  --nova-accent-mid: var(--primary-light);
  --nova-shadow-sm: var(--shadow-sm);
  --nova-radius-sm: var(--radius-sm);
  --nova-radius: var(--radius-lg);
}

/* Dark mode header tokens */
:root[data-theme="dark"] {
  --nova-surface: var(--bg-dark-secondary);
  --nova-surface-alt: var(--bg-dark-primary);
  --nova-border: rgba(255,255,255,0.07);
  --nova-border-light: rgba(255,255,255,0.04);
  --nova-accent-light: rgba(142,200,218,0.2);
  --nova-accent-bg: rgba(142,200,218,0.1);
  --nova-accent-mid: #a8cdd8;
}

/* =================================================================
   1. MAIN HEADER BAR (.app-header)
   Top bar with logo + title + Config button
   ================================================================ */

.app-header {
  background: var(--nova-surface);
  border-bottom: 1px solid var(--nova-border);
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  box-shadow: var(--nova-shadow-sm);
  position: relative;
}

/* Subtle gradient line under header */
.app-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nova-accent-light) 30%, var(--nova-accent-light) 70%, transparent);
  pointer-events: none;
}

/* Dark mode gradient line */
:root[data-theme="dark"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgba(122,175,192,0.2) 40%, rgba(122,175,192,0.2) 60%, transparent);
}

/* =================================================================
   2. DARK MODE HEADER STAR-FIELD TEXTURE
   Concept B: subtle star dots in the header background
   ================================================================ */

:root[data-theme="dark"] .app-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 8% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 70%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 40%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,0.5) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0.6;
}

/* =================================================================
   3. STATUS STRIP (.status-strip)
   Bar with Location, Time, Moon, Dusk/Dawn, Simulation controls
   ================================================================ */

.status-strip {
  background: var(--nova-surface-alt);
  border: none;
  border-bottom: 1px solid var(--nova-border-light);
  border-radius: 0;
  height: 40px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 0;
  font-size: 13px;
  flex-wrap: nowrap;
}

/* Status item (label + value pair) */
.status-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

/* Status labels - uppercase micro-labels */
.status-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nova-text-4);
}

/* Status values - primary text */
.status-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--nova-text);
}

/* Numeric values in status strip use mono */
.status-value #date,
.status-value #time,
.status-value #dusk,
.status-value #dawn,
.status-value .data-mono {
  font-family: var(--nova-font-mono);
  font-size: 13px;
  font-weight: 500;
}

/* Location select in status strip */
.status-strip select,
#location-select {
  background: transparent;
  border: none;
  font-weight: 600;
  color: var(--nova-text);
  font-size: 13px;
  padding: 2px 4px;
  cursor: pointer;
  font-family: var(--nova-font-sans);
}

.status-strip select:focus,
#location-select:focus {
  outline: none;
}

/* =================================================================
   4. SIMULATION CONTROLS
   Toggle + label + help icon + date input
   ================================================================ */

#simulation-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
  min-width: auto;
}

/* Simulation toggle label */
#simulation-controls label[for="sim-mode-toggle"],
#simulation-controls .status-label {
  font-size: 11px;
  color: var(--nova-text-4);
  font-weight: 500;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

/* Help icon (?) in simulation controls */
#simulation-controls .help-badge {
  font-size: 11px;
  width: 16px;
  height: 16px;
  color: var(--nova-text-4);
  opacity: 0.5;
  cursor: pointer;
  border-color: var(--nova-text-4);
  margin-left: 4px;
}

#simulation-controls .help-badge:hover {
  opacity: 1;
}

/* Toggle switch track (off state) */
.switch .slider {
  background-color: var(--nova-border);
}

/* Toggle switch track (on state) */
.switch input:checked + .slider {
  background-color: var(--nova-accent-mid);
}

/* Toggle switch thumb */
.switch .slider::before {
  background-color: white;
  box-shadow: var(--nova-shadow-sm);
}

/* Date input in simulation controls */
#sim-date-input {
  border: 1px solid var(--nova-border);
  border-radius: var(--nova-radius-sm);
  background: var(--nova-surface);
  font-family: var(--nova-font-mono);
  font-size: 12px;
  color: var(--nova-text-2);
  padding: 3px 8px;
  height: 28px;
  font-weight: 500;
}

#sim-date-input:focus {
  border-color: var(--nova-accent-mid);
  outline: none;
}

#sim-date-input:disabled {
  background: var(--nova-surface-alt);
  color: var(--nova-text-4);
}

/* Dark mode date input */
:root[data-theme="dark"] #sim-date-input {
  background: var(--nova-surface);
  border-color: var(--nova-border);
  color: var(--nova-text-2);
}

:root[data-theme="dark"] #sim-date-input:focus {
  border-color: var(--nova-accent-mid);
}

/* =================================================================
   5. UPDATE TIMER BADGE
   "in 38s" countdown display
   ================================================================ */

#next-update-timer {
  font-size: 11px;
  font-family: var(--nova-font-mono);
  color: var(--nova-accent);
  background: var(--nova-accent-bg);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

:root[data-theme="dark"] #next-update-timer {
  background: rgba(122,175,192,0.1);
}

/* =================================================================
   6. CONFIG BUTTON (.action-button in header)
   Primary action button styling
   ================================================================ */

.header-right .action-button {
  background: var(--nova-accent);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--nova-font-sans);
  box-shadow: var(--nova-shadow-sm);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.header-right .action-button:hover {
  filter: brightness(0.9);
}

/* Dark mode Config button with glow */
:root[data-theme="dark"] .header-right .action-button {
  box-shadow: 0 0 16px rgba(122,175,192,0.2), var(--nova-shadow-sm);
}

/* =================================================================
   7. THEME TOGGLE BUTTON (moon/sun icon)
   Dark mode toggle button styling
   ================================================================ */

.theme-toggle-button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--nova-surface-alt);
  border: 1px solid var(--nova-border);
  color: var(--nova-text-3);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-toggle-button:hover {
  background: var(--nova-surface);
  border-color: var(--nova-accent-mid);
  color: var(--nova-text);
}

.theme-toggle-button .theme-icon {
  position: absolute;
}

/* =================================================================
   8. USER/LOGOUT AREA
   Username display and logout link
   ================================================================ */

.user-menu {
  font-size: 12px;
  color: var(--nova-text-3);
  border-right: none;
  padding-right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-menu a,
.user-menu button[type="submit"] {
  color: var(--nova-accent);
  font-size: 12px;
  text-decoration: none;
}

.user-menu a:hover,
.user-menu button[type="submit"]:hover {
  color: var(--nova-accent-mid);
}

/* =================================================================
   9. HEADER LEFT SECTION
   Brand group, divider, page title
   ================================================================ */

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Header divider line */
.header-divider {
  height: 18px;
  width: 1px;
  background: var(--nova-border);
}

/* =================================================================
   10. DARK MODE STATUS STRIP VARIATIONS
   ================================================================ */

:root[data-theme="dark"] .status-strip {
  background: var(--nova-surface);
  border-bottom-color: var(--nova-border);
}

:root[data-theme="dark"] .status-strip select,
:root[data-theme="dark"] #location-select {
  color: var(--nova-text);
}

/* Simulated status strip (green tint) */
.status-strip.simulated {
  background-color: var(--success-bg);
  border-radius: 0;
}

:root[data-theme="dark"] .status-strip.simulated {
  background-color: rgba(76,175,80,0.08);
}

/* =================================================================
   OBJECT NAMES IN TABLES
   Monospace styling for catalog designators (NGC 7662, M31, etc.)
   ================================================================ */

.object-name,
.obj-id,
.ca-td-obj, .cb-td-obj, .cc-td-obj {
  font-family: var(--nova-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--nova-text);
}

/* =================================================================
   TAB BAR STYLING
   Reference: nova-desktop-facelift.html (.ca-tabs, .cb-tabs)
   ================================================================ */

/* 1. TAB BAR CONTAINER */
.tab-container {
  background: var(--nova-surface);
  border-bottom: 1px solid var(--nova-border);
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 2px;
}

/* 2. INDIVIDUAL TAB BUTTONS */
.tab-button {
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--nova-font-sans);
  color: var(--nova-text-3);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlaps container border */
  white-space: nowrap;
  background: transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.01em;
}

.tab-button:hover {
  color: var(--nova-text-2);
}

.tab-button.active {
  color: var(--nova-accent);
  font-weight: 600;
  border-bottom-color: transparent;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--nova-accent-mid);
  border-radius: 2px 2px 0 0;
}

/* 3. HELP ICON NEXT TO TABS */
.tab-container .help-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--nova-border);
  font-size: 10px;
  font-weight: 700;
  font-family: serif;
  color: var(--nova-text-4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  margin-left: 10px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tab-container .help-badge:hover {
  border-color: var(--nova-accent-mid);
  color: var(--nova-accent);
}

/* 4. SAVED VIEWS CONTAINER (right side of tab bar) */
#saved-views-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Saved Views Dropdown */
#saved-views-container .styled-select,
#saved-views-dropdown {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--nova-border);
  background: var(--nova-surface-alt);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--nova-font-sans);
  color: var(--nova-text-3);
  min-width: 140px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

#saved-views-container .styled-select:focus,
#saved-views-dropdown:focus {
  border-color: var(--nova-accent-mid);
  outline: none;
}

/* 5. SAVE/DELETE BUTTONS IN TAB BAR */
#save-view-btn,
#delete-view-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-family: var(--nova-font-sans);
  background: var(--nova-accent-bg);
  border: 1px solid var(--nova-accent-light);
  color: var(--nova-accent);
  cursor: pointer;
  transition: background 0.15s ease;
}

#save-view-btn:hover,
#delete-view-btn:hover {
  background: var(--nova-accent-light);
}

/* 6. ACTIVE ONLY CHECKBOX */
#saved-views-container label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--nova-text-3);
  cursor: pointer;
  user-select: none;
}

#global-active-toggle {
  width: 14px;
  height: 14px;
  accent-color: var(--nova-accent);
  cursor: pointer;
}

/* 7. DETAIL PAGE TAB BAR (Chart / Notes & Framing / Opportunities / Journal / SIMBAD) */
/* Uses the same .tab-container and .tab-button styles as the main dashboard */

/* 8. SECONDARY TAB ROW (inside Notes & Framing) */
.detail-tabs-container {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 12px 0;
  border-bottom: 1px solid var(--nova-border-light);
  margin-bottom: 16px;
}

.detail-tab-button {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--nova-font-sans);
  color: var(--nova-text-3);
  cursor: pointer;
  border: none;
  border-radius: 6px;
  background: transparent;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.detail-tab-button:hover {
  color: var(--nova-text-2);
}

.detail-tab-button.active {
  color: var(--nova-accent);
  font-weight: 600;
  background: var(--nova-accent-bg);
}

/* Dark mode adjustments for secondary tabs */
:root[data-theme="dark"] .detail-tab-button.active {
  background: rgba(122, 175, 192, 0.1);
}

/* 9. DARK MODE TAB BAR ENHANCEMENTS */
:root[data-theme="dark"] .tab-container {
  background: var(--nova-surface);
  border-bottom-color: var(--nova-border);
}

:root[data-theme="dark"] .tab-button {
  border: none;
  color: rgba(255, 255, 255, 0.3);
}

:root[data-theme="dark"] .tab-button:hover {
  color: rgba(255, 255, 255, 0.55);
}

:root[data-theme="dark"] .tab-button.active {
  border: none;
  color: var(--primary-color);
}

:root[data-theme="dark"] .tab-button.active::after {
  background: var(--primary-color);
}

:root[data-theme="dark"] #saved-views-container .styled-select,
:root[data-theme="dark"] #saved-views-dropdown {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--nova-border);
  color: rgba(255, 255, 255, 0.3);
}

:root[data-theme="dark"] #saved-views-container .styled-select:focus,
:root[data-theme="dark"] #saved-views-dropdown:focus {
  border-color: rgba(142, 200, 218, 0.3);
}

:root[data-theme="dark"] #save-view-btn,
:root[data-theme="dark"] #delete-view-btn {
  background: rgba(142, 200, 218, 0.12);
  border-color: rgba(142, 200, 218, 0.2);
  color: var(--nova-accent);
}

:root[data-theme="dark"] #save-view-btn:hover,
:root[data-theme="dark"] #delete-view-btn:hover {
  background: rgba(142, 200, 218, 0.2);
}

:root[data-theme="dark"] #saved-views-container label {
  color: rgba(255, 255, 255, 0.3);
}

/* =================================================================
   DATA TABLES STYLING
   Reference: nova-desktop-facelift.html (.ca-table, .cb-table)
   ================================================================ */

/* =================================================================
   1. TABLE WRAPPER
   Container div with rounded corners and shadow
   ================================================================ */

.table-wrapper {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--nova-border);
  box-shadow: var(--nova-shadow-sm);
  background: var(--nova-surface);
  margin-bottom: 20px;
}

/* =================================================================
   2. TABLE BASE
   ================================================================ */

.table-wrapper table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--nova-surface);
}

/* Remove duplicate borders from dashboard.css - use our unified styling */
.table-wrapper table th,
.table-wrapper table td {
  border: none;
}

/* =================================================================
   3. TABLE HEADER ROW
   ================================================================ */

.table-wrapper thead tr:first-child {
  background: var(--nova-surface-alt);
  border-bottom: 1px solid var(--nova-border);
}

/* =================================================================
   4. HEADER CELLS (<th>)
   ================================================================ */

.table-wrapper thead tr:first-child th {
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nova-text-4);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

/* Center-align numeric columns in header */
.table-wrapper thead tr:first-child th[data-column-key]:not([data-column-key="Object"]):not([data-column-key="Common Name"]),
.table-wrapper thead tr:first-child th[data-journal-column-key]:not([data-journal-column-key="object_name"]):not([data-journal-column-key="target_common_name"]):not([data-journal-column-key="project_name"]):not([data-journal-column-key="location_name"]):not([data-journal-column-key="telescope_setup_notes"]),
.table-wrapper thead tr:first-child th[data-outlook-column-key]:not([data-outlook-column-key="object_name"]):not([data-outlook-column-key="common_name"]) {
  text-align: center;
}

/* =================================================================
   5. SUB-LABELS IN HEADERS
   Units like "(Current)", "(11 PM)", etc.
   ================================================================ */

.table-wrapper th .subtext,
.table-wrapper th span.subtext {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  display: block;
  opacity: 0.75;
  margin-top: 1px;
  color: var(--nova-text-4);
}

/* =================================================================
   6. SORTING INDICATORS
   Active sort column gets accent color
   ================================================================ */

.table-wrapper th.sortable {
  cursor: pointer;
}

.table-wrapper th.sortable:hover {
  color: var(--nova-text-2);
}

/* Sort arrow indicator */
.table-wrapper th .sort-indicator {
  font-size: 0.8em;
  margin-left: 5px;
  display: inline-block;
  color: var(--nova-text-4);
}

/* Active sort column */
.table-wrapper th[data-sort-dir="asc"] .sort-indicator::after,
.table-wrapper th[data-sort-dir="desc"] .sort-indicator::after {
  color: var(--nova-accent);
}

/* =================================================================
   7. FILTER ROW
   Row containing filter inputs
   ================================================================ */

.table-wrapper .filter-row {
  background: var(--nova-surface);
  border-bottom: 1px solid var(--nova-border-light);
}

.table-wrapper .filter-row th {
  padding: 6px 12px;
  background: var(--nova-surface);
  vertical-align: top;
}

/* Filter inputs */
.table-wrapper .filter-row input[type="text"],
.table-wrapper .filter-row input[type="number"] {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--nova-border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--nova-text-3);
  background: var(--nova-surface-alt);
  font-family: var(--nova-font-sans);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Placeholder styling */
.table-wrapper .filter-row input::placeholder {
  color: var(--nova-text-4);
}

/* Focus state */
.table-wrapper .filter-row input:focus {
  border-color: var(--nova-accent-mid);
  background: var(--nova-surface);
  color: var(--nova-text);
}

/* =================================================================
   8. DATA ROWS
   ================================================================ */

.table-wrapper tbody tr {
  cursor: pointer;
  transition: background 0.1s ease;
}

/* Row separator lines on td cells (tr borders don't work with border-collapse: separate) */
.table-wrapper tbody td {
  border-bottom: 1px solid var(--nova-border-light);
}

.table-wrapper tbody tr:last-child td {
  border-bottom: none;
}

/* Section header row (e.g., "NOW OBSERVABLE" divider) */
.table-wrapper tbody tr.section-row td,
.table-wrapper tbody tr[data-type="section"] td {
  background: linear-gradient(90deg, var(--nova-accent-bg), transparent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nova-accent);
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nova-accent-light);
}

:root[data-theme="dark"] .table-wrapper tbody tr.section-row td,
:root[data-theme="dark"] .table-wrapper tbody tr[data-type="section"] td {
  background: linear-gradient(90deg, rgba(122,175,192,0.08), transparent);
  color: var(--nova-accent);
  border-bottom: 1px solid rgba(122,175,192,0.15);
}

.table-wrapper tbody tr:hover {
  background: var(--nova-row-hover);
}

/* Dark mode: left accent bar on hover */
:root[data-theme="dark"] .table-wrapper tbody tr:hover td:first-child {
  border-left: 2px solid var(--nova-accent);
  padding-left: 10px;
}

/* =================================================================
   9. DATA CELLS (<td>)
   ================================================================ */

.table-wrapper tbody td {
  padding: 0 12px;
  height: 36px;
  font-size: 13px;
  color: var(--nova-text-2);
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
}

/* =================================================================
   10. OBJECT ID COLUMN
   First column with catalog designators (NGC/IC/SH codes)
   ================================================================ */

/* Object ID in Position tab */
.table-wrapper tbody td[data-column-key="Object"],
/* Object ID in Journal tab */
.table-wrapper tbody td[data-journal-column-key="object_name"],
/* Object ID in Outlook tab */
.table-wrapper tbody td[data-outlook-column-key="object_name"] {
  font-weight: 600;
  color: var(--nova-text);
  font-family: var(--nova-font-mono);
  font-size: 12px;
}

/* =================================================================
   11. ⓘ INFO BUTTON
   Next to object names in the Name column
   ================================================================ */

.table-wrapper .info-icon,
.table-wrapper tbody td .info-icon {
  font-size: 11px;
  color: var(--nova-text-4);
  opacity: 0.35;
  cursor: pointer;
  margin-left: 4px;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.table-wrapper .info-icon:hover,
.table-wrapper tbody td .info-icon:hover {
  opacity: 0.9;
  color: var(--nova-accent);
}

/* =================================================================
   12. ALTITUDE BADGE
   Highlighted cell with current altitude - pill badge inside cell
   The .highlight class is on the td, the .alt-badge span inside gets styled
   ================================================================ */

/* Cell itself has transparent background - badge styling is on the span */
.table-wrapper tbody td.highlight {
  background: transparent;
}

/* Altitude badge pill - the span inside the td */
.table-wrapper tbody td.highlight .alt-badge,
.table-wrapper tbody td.highlight span.alt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 3px 9px;
  border-radius: 5px;
  font-family: var(--nova-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: var(--nova-alt-med-bg);
  color: var(--nova-alt-med-text);
}

/* High altitude (>=75°) */
.table-wrapper tbody td.highlight[data-alt-tier="high"] .alt-badge,
.table-wrapper tbody td.highlight.alt-high .alt-badge {
  background: var(--nova-alt-high-bg);
  color: var(--nova-alt-high-text);
}

/* Medium altitude (>=60°) - default */
.table-wrapper tbody td.highlight[data-alt-tier="med"] .alt-badge,
.table-wrapper tbody td.highlight.alt-med .alt-badge {
  background: var(--nova-alt-med-bg);
  color: var(--nova-alt-med-text);
}

/* Low altitude (<60°) */
.table-wrapper tbody td.highlight[data-alt-tier="low"] .alt-badge,
.table-wrapper tbody td.highlight.alt-low .alt-badge {
  background: var(--nova-alt-low-bg);
  color: var(--nova-alt-low-text);
}

/* Dark mode altitude badges with borders */
:root[data-theme="dark"] .table-wrapper tbody td.highlight .alt-badge,
:root[data-theme="dark"] .table-wrapper tbody td.highlight span.alt-badge {
  border: 1px solid var(--nova-alt-med-border);
}

:root[data-theme="dark"] .table-wrapper tbody td.highlight[data-alt-tier="high"] .alt-badge,
:root[data-theme="dark"] .table-wrapper tbody td.highlight.alt-high .alt-badge {
  background: var(--nova-alt-high-bg);
  color: var(--nova-alt-high-text);
  border-color: var(--nova-alt-high-border);
}

:root[data-theme="dark"] .table-wrapper tbody td.highlight[data-alt-tier="med"] .alt-badge,
:root[data-theme="dark"] .table-wrapper tbody td.highlight.alt-med .alt-badge {
  background: var(--nova-alt-med-bg);
  color: var(--nova-alt-med-text);
  border-color: var(--nova-alt-med-border);
}

:root[data-theme="dark"] .table-wrapper tbody td.highlight[data-alt-tier="low"] .alt-badge,
:root[data-theme="dark"] .table-wrapper tbody td.highlight.alt-low .alt-badge {
  background: var(--nova-alt-low-bg);
  color: var(--nova-alt-low-text);
  border-color: var(--nova-alt-low-border);
}

/* Obstructed altitude badge (yellow warning) */
.table-wrapper tbody td.highlight.obstructed .alt-badge,
.table-wrapper tbody td.highlight.obstructed span.alt-badge {
  background-color: var(--highlight-yellow) !important;
  color: var(--highlight-yellow-text) !important;
  border: none;
}

/* =================================================================
   13. HIGHLIGHTED/SELECTED ROW
   Currently selected or observing object
   ================================================================ */

.table-wrapper tbody tr.active-project-row {
  background: var(--nova-accent-bg);
  border-left: 2px solid var(--nova-accent-mid);
}

:root[data-theme="dark"] .table-wrapper tbody tr.active-project-row {
  background: rgba(122,175,192,0.08);
  border-left-color: var(--nova-accent);
}

/* =================================================================
   14. TREND ARROWS (↑ ↓)
   ================================================================ */

.table-wrapper tbody td[data-column-key="Trend"] {
  font-size: 12px;
}

/* Up trend */
.table-wrapper tbody .trend-up,
.table-wrapper tbody td[data-column-key="Trend"] .trend-up {
  color: var(--nova-trend-up);
}

/* Down trend */
.table-wrapper tbody .trend-down,
.table-wrapper tbody td[data-column-key="Trend"] .trend-down {
  color: var(--nova-trend-down);
}

/* Direct arrow styling */
.table-wrapper tbody td[data-column-key="Trend"]:has(span:not(.trend-down)):not(:has(.trend-down)) {
  color: var(--nova-trend-up);
}

/* =================================================================
   15. STAR RATINGS
   In Journal/Outlook tabs
   ================================================================ */

.table-wrapper tbody td[data-journal-column-key="session_rating_subjective"],
.table-wrapper tbody td[data-outlook-column-key="rating"] {
  color: var(--nova-star-color);
  font-size: 12px;
  letter-spacing: 1px;
}

/* =================================================================
   16. GEOMETRICALLY IMPOSSIBLE ROWS
   Objects that never rise above threshold
   ================================================================ */

.table-wrapper tbody tr.geometrically-impossible {
  background-color: var(--nova-surface-alt);
  color: var(--nova-text-4);
}

.table-wrapper tbody tr.geometrically-impossible td {
  font-style: italic;
  color: var(--nova-text-4);
}

.table-wrapper tbody tr.geometrically-impossible:hover {
  background-color: var(--nova-surface);
  cursor: help;
}

/* =================================================================
   17. CLICKABLE ROWS
   ================================================================ */

.table-wrapper tbody tr.clickable-row:hover {
  background-color: var(--nova-row-hover);
  cursor: pointer;
}

/* =================================================================
   18. CONFIG TABLES
   Tables in configuration pages
   ================================================================ */

.config-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--nova-surface);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--nova-border);
}

.config-table thead tr {
  background: var(--nova-surface-alt);
  border-bottom: 1px solid var(--nova-border);
}

.config-table th {
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nova-text-4);
  text-align: left;
  white-space: nowrap;
}

.config-table td {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--nova-text-2);
  border-bottom: 1px solid var(--nova-border-light);
  vertical-align: middle;
}

.config-table tbody tr:last-child td {
  border-bottom: none;
}

.config-table tbody tr:hover td {
  background: var(--nova-row-hover);
}

/* =================================================================
   19. DARK MODE TABLE OVERRIDES
   ================================================================ */

/* Filter row inputs - dark mode */
:root[data-theme="dark"] .table-wrapper .filter-row input[type="text"],
:root[data-theme="dark"] .table-wrapper .filter-row input[type="number"] {
  background: rgba(255,255,255,0.03);
  border-color: var(--nova-border);
  color: var(--nova-text-3);
}

:root[data-theme="dark"] .table-wrapper .filter-row input::placeholder {
  color: var(--nova-text-4);
}

:root[data-theme="dark"] .table-wrapper .filter-row input:focus {
  border-color: rgba(122,175,192,0.3);
  background: var(--nova-surface);
  color: var(--nova-text);
}

/* Table header - dark mode */
:root[data-theme="dark"] .table-wrapper thead tr:first-child {
  background: var(--bg-dark-primary, #1c2230);
}

:root[data-theme="dark"] .table-wrapper thead tr:first-child th {
  color: rgba(255,255,255,0.18);
}

/* Data rows - dark mode */
:root[data-theme="dark"] .table-wrapper tbody td {
  border-bottom-color: rgba(255,255,255,0.04);
}

/* Geometrically impossible - dark mode */
:root[data-theme="dark"] .table-wrapper tbody tr.geometrically-impossible {
  background-color: rgba(255,255,255,0.02);
}

:root[data-theme="dark"] .table-wrapper tbody tr.geometrically-impossible td {
  color: rgba(255,255,255,0.25);
}

/* Config tables - dark mode */
:root[data-theme="dark"] .config-table {
  background: var(--nova-surface);
  border-color: var(--nova-border);
}

:root[data-theme="dark"] .config-table thead tr {
  background: var(--bg-dark-primary, #1c2230);
}

:root[data-theme="dark"] .config-table td {
  border-bottom-color: rgba(255,255,255,0.04);
}

:root[data-theme="dark"] .config-table tbody tr:hover td {
  background: rgba(122,175,192,0.06);
}

/* =================================================================
   BUTTON AND FORM ELEMENT SYSTEM
   Reference: nova-desktop-facelift.html (.ca-btn-primary, .ca-btn-ghost,
   .ca-icon-btn, .ca-filter-input sections)
   ================================================================ */

/* =================================================================
   1. PRIMARY BUTTON
   Used for main actions: Configuration, Save, Submit, etc.
   ================================================================ */

/* Target all primary action buttons across the app */
.btn-primary,
.btn-edit,
.action-button,
.action-button.primary,
input[type="submit"],
button[type="submit"],
.form-actions button[type="submit"],
.column button,
.file-button,
.edit-btn,
.btn-save {
  background: var(--nova-accent);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--nova-font-sans);
  box-shadow: var(--nova-shadow-sm);
  cursor: pointer;
  transition: filter 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.btn-primary:hover,
.btn-edit:hover,
.action-button:hover,
.action-button.primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.form-actions button[type="submit"]:hover,
.column button:hover,
.file-button:hover,
.edit-btn:hover,
.btn-save:hover {
  filter: brightness(0.9);
}

.btn-primary:active,
.btn-edit:active,
.action-button:active,
.action-button.primary:active,
input[type="submit"]:active,
button[type="submit"]:active,
.form-actions button[type="submit"]:active,
.column button:active,
.file-button:active,
.edit-btn:active,
.btn-save:active {
  filter: brightness(0.8);
}

/* Dark mode primary button with glow */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-edit,
:root[data-theme="dark"] .action-button,
:root[data-theme="dark"] .action-button.primary,
:root[data-theme="dark"] input[type="submit"],
:root[data-theme="dark"] button[type="submit"],
:root[data-theme="dark"] .form-actions button[type="submit"],
:root[data-theme="dark"] .column button,
:root[data-theme="dark"] .file-button,
:root[data-theme="dark"] .edit-btn,
:root[data-theme="dark"] .btn-save {
  box-shadow: 0 0 16px rgba(122,175,192,0.2), var(--nova-shadow-sm);
}

/* =================================================================
   2. SECONDARY / GHOST BUTTON
   Used for secondary actions, cancel, user menus
   ================================================================ */

.btn-secondary,
.btn-ghost,
.form-actions button[type="button"],
.dlback-button,
.view-button {
  background: transparent;
  color: var(--nova-text-2);
  border: 1px solid var(--nova-border);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--nova-font-sans);
  cursor: pointer;
  transition: background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.btn-secondary:hover,
.btn-ghost:hover,
.form-actions button[type="button"]:hover,
.dlback-button:hover,
.view-button:hover {
  background: var(--nova-surface-alt);
}

/* Dark mode ghost button */
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-ghost,
:root[data-theme="dark"] .form-actions button[type="button"],
:root[data-theme="dark"] .dlback-button,
:root[data-theme="dark"] .view-button {
  border-color: var(--nova-border);
  color: var(--nova-text-2);
}

:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-ghost:hover,
:root[data-theme="dark"] .form-actions button[type="button"]:hover,
:root[data-theme="dark"] .dlback-button:hover,
:root[data-theme="dark"] .view-button:hover {
  background: rgba(255,255,255,0.04);
}

/* =================================================================
   3. ACCENT-LIGHT BUTTON
   Used for "Save" in tab bar, "Add to Cal", subtle accent actions
   ================================================================ */

.btn-accent,
.btn-accent-light,
#save-view-btn,
#delete-view-btn,
.cb-save-btn,
.ca-btn-accent {
  background: var(--nova-accent-bg);
  border: 1px solid var(--nova-accent-light);
  color: var(--nova-accent);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--nova-font-sans);
  cursor: pointer;
  transition: background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-accent:hover,
.btn-accent-light:hover,
#save-view-btn:hover,
#delete-view-btn:hover,
.cb-save-btn:hover,
.ca-btn-accent:hover {
  background: var(--nova-accent-light);
}

/* Dark mode accent-light button */
:root[data-theme="dark"] .btn-accent,
:root[data-theme="dark"] .btn-accent-light,
:root[data-theme="dark"] #save-view-btn,
:root[data-theme="dark"] #delete-view-btn {
  background: rgba(122,175,192,0.12);
  border-color: rgba(122,175,192,0.2);
  color: var(--nova-accent);
}

:root[data-theme="dark"] .btn-accent:hover,
:root[data-theme="dark"] .btn-accent-light:hover,
:root[data-theme="dark"] #save-view-btn:hover,
:root[data-theme="dark"] #delete-view-btn:hover {
  background: rgba(122,175,192,0.2);
}

/* =================================================================
   4. ICON BUTTON
   Moon toggle, help icons, small action buttons
   ================================================================ */

.icon-btn,
.icon-button,
.ca-icon-btn,
.cb-icon-btn,
.cc-icon-btn,
.help-badge,
.theme-toggle-button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--nova-surface-alt);
  border: 1px solid var(--nova-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nova-text-3);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  text-decoration: none;
}

.icon-btn:hover,
.icon-button:hover,
.ca-icon-btn:hover,
.cb-icon-btn:hover,
.cc-icon-btn:hover,
.help-badge:hover,
.theme-toggle-button:hover {
  background: var(--nova-accent-bg);
  border-color: var(--nova-accent-light);
  color: var(--nova-accent);
}

/* Dark mode icon button */
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .ca-icon-btn,
:root[data-theme="dark"] .cb-icon-btn,
:root[data-theme="dark"] .cc-icon-btn,
:root[data-theme="dark"] .help-badge,
:root[data-theme="dark"] .theme-toggle-button {
  background: rgba(255,255,255,0.04);
  border-color: var(--nova-border);
  color: var(--nova-text-3);
}

:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .icon-button:hover,
:root[data-theme="dark"] .ca-icon-btn:hover,
:root[data-theme="dark"] .cb-icon-btn:hover,
:root[data-theme="dark"] .cc-icon-btn:hover,
:root[data-theme="dark"] .help-badge:hover,
:root[data-theme="dark"] .theme-toggle-button:hover {
  background: var(--nova-accent-bg);
  border-color: var(--nova-accent-light);
  color: var(--nova-accent);
}

/* Smaller variant for inline icons */
.icon-btn.sm,
.icon-button.sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
  border-radius: 4px;
}

/* =================================================================
   5. TEXT INPUTS and SELECTS
   General forms — Config page, filter rows, journal session editor,
   date inputs
   ================================================================ */

/* Base input styling - applies to all text inputs and selects */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="time"],
.form-group select,
.form-group textarea,
.input,
input[type="text"].wide,
input[type="number"].wide,
input[type="text"].short,
input[type="text"].object_field,
input[type="text"].name_field,
input[type="text"].project_field,
input[type="number"].field-small-numeric,
textarea.wide,
textarea.project_field,
select.styled-select,
select[name^="timezone_"],
select[name="new_timezone"],
.inspiration-input {
  border: 1px solid var(--nova-border);
  border-radius: var(--nova-radius-sm);
  background: var(--nova-surface);
  font-family: var(--nova-font-sans);
  font-size: 13px;
  color: var(--nova-text);
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

/* Focus state */
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="date"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="time"]:focus,
.form-group select:focus,
.form-group textarea:focus,
.input:focus,
input[type="text"].wide:focus,
input[type="number"].wide:focus,
input[type="text"].short:focus,
input[type="text"].object_field:focus,
input[type="text"].name_field:focus,
input[type="text"].project_field:focus,
input[type="number"].field-small-numeric:focus,
textarea.wide:focus,
textarea.project_field:focus,
select.styled-select:focus,
select[name^="timezone_"]:focus,
select[name="new_timezone"]:focus,
.inspiration-input:focus {
  border-color: var(--nova-accent-mid);
  box-shadow: 0 0 0 3px var(--nova-accent-bg);
}

/* Dark mode focus glow */
:root[data-theme="dark"] .form-group input[type="text"]:focus,
:root[data-theme="dark"] .form-group input[type="number"]:focus,
:root[data-theme="dark"] .form-group input[type="date"]:focus,
:root[data-theme="dark"] .form-group input[type="password"]:focus,
:root[data-theme="dark"] .form-group input[type="email"]:focus,
:root[data-theme="dark"] .form-group input[type="time"]:focus,
:root[data-theme="dark"] .form-group select:focus,
:root[data-theme="dark"] .form-group textarea:focus,
:root[data-theme="dark"] .input:focus,
:root[data-theme="dark"] select.styled-select:focus,
:root[data-theme="dark"] select[name^="timezone_"]:focus,
:root[data-theme="dark"] select[name="new_timezone"]:focus,
:root[data-theme="dark"] .inspiration-input:focus {
  box-shadow: 0 0 0 3px rgba(122,175,192,0.1);
}

/* Placeholder styling */
.form-group input::placeholder,
.form-group textarea::placeholder,
.input::placeholder,
.inspiration-input::placeholder {
  color: var(--nova-text-4);
}

/* Dark mode inputs */
:root[data-theme="dark"] .form-group input[type="text"],
:root[data-theme="dark"] .form-group input[type="number"],
:root[data-theme="dark"] .form-group input[type="date"],
:root[data-theme="dark"] .form-group input[type="password"],
:root[data-theme="dark"] .form-group input[type="email"],
:root[data-theme="dark"] .form-group input[type="time"],
:root[data-theme="dark"] .form-group select,
:root[data-theme="dark"] .form-group textarea,
:root[data-theme="dark"] .input,
:root[data-theme="dark"] select.styled-select,
:root[data-theme="dark"] select[name^="timezone_"],
:root[data-theme="dark"] select[name="new_timezone"],
:root[data-theme="dark"] .inspiration-input {
  background: var(--nova-surface);
  border-color: var(--nova-border);
  color: var(--nova-text);
}

/* =================================================================
   6. CHECKBOXES
   ================================================================ */

/* Base checkbox styling */
input[type="checkbox"],
.form-group input[type="checkbox"],
.inline-fields input[type="checkbox"] {
  accent-color: var(--nova-accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* Checkbox labels */
.form-group input[type="checkbox"] + label,
.inline-fields input[type="checkbox"] + label,
label input[type="checkbox"],
.checkbox-label,
#saved-views-container label {
  font-size: 13px;
  color: var(--nova-text-2);
  cursor: pointer;
}

/* Share control checkboxes */
.share-control input[type="checkbox"] {
  accent-color: var(--nova-accent);
}

/* Dark mode checkboxes */
:root[data-theme="dark"] input[type="checkbox"] {
  accent-color: var(--nova-accent);
}

/* =================================================================
   7. DROPDOWNS / <select>
   Custom appearance with arrow
   ================================================================ */

/* Custom select dropdown styling */
select,
.form-group select,
select.styled-select,
.styled-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  padding-right: 28px;
  cursor: pointer;
}

/* Dark mode dropdown arrow */
:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-size: 10px 6px;
}

/* Dropdown option styling */
.form-group select option,
select.styled-select option {
  background: var(--nova-surface);
  color: var(--nova-text);
}

:root[data-theme="dark"] .form-group select option,
:root[data-theme="dark"] select.styled-select option {
  background: var(--nova-surface);
}

/* =================================================================
   8. RANGE SLIDERS
   Framing tool — Brightness, Contrast, etc.
   ================================================================ */

input[type="range"] {
  accent-color: var(--nova-accent);
  height: 4px;
  border-radius: 2px;
  cursor: pointer;
}

/* Range slider track */
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--nova-border);
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--nova-border);
}

/* Range slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nova-accent);
  box-shadow: var(--nova-shadow-sm);
  cursor: pointer;
  margin-top: -6px; /* Center vertically on track */
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nova-accent);
  box-shadow: var(--nova-shadow-sm);
  cursor: pointer;
  border: none;
}

/* Range slider hover state */
input[type="range"]:hover::-webkit-slider-thumb {
  filter: brightness(1.1);
}

input[type="range"]:hover::-moz-range-thumb {
  filter: brightness(1.1);
}

/* Dark mode range slider */
:root[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.1);
}

:root[data-theme="dark"] input[type="range"]::-moz-range-track {
  background: rgba(255,255,255,0.1);
}

/* =================================================================
   9. RICH TEXT TOOLBAR (Trix Editor)
   Notes & Framing toolbars
   ================================================================ */

/* Trix toolbar container */
trix-toolbar {
  background: var(--nova-surface-alt);
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  padding: 4px;
  margin-bottom: 8px;
}

/* Trix button groups */
trix-toolbar .trix-button-group {
  border-color: var(--nova-border);
  margin: 0 2px;
}

/* Individual toolbar buttons */
trix-toolbar .trix-button {
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--nova-text-3);
  border-color: transparent;
  margin: 0 1px;
  transition: all 0.15s ease;
}

/* Toolbar button hover */
trix-toolbar .trix-button:hover {
  background: var(--nova-accent-bg);
  color: var(--nova-accent);
}

/* Toolbar button active/pressed state */
trix-toolbar .trix-button.trix-active {
  background: var(--nova-accent-light);
  color: var(--nova-accent);
}

/* Trix disabled buttons */
trix-toolbar .trix-button:disabled {
  color: var(--nova-text-4);
  opacity: 0.5;
}

/* Trix editor content area */
trix-editor {
  background: var(--nova-surface);
  border: 1px solid var(--nova-border);
  border-radius: var(--nova-radius-sm);
  padding: 10px;
  min-height: 100px;
}

trix-editor:focus {
  border-color: var(--nova-accent-mid);
  box-shadow: 0 0 0 3px var(--nova-accent-bg);
}

/* Trix labels */
.form-group.trix-group label,
.notes-section label,
.project-notes-section label {
  font-size: 12px;
  font-weight: 500;
  color: var(--nova-text-2);
  margin-bottom: 6px;
  display: block;
}

/* Dark mode Trix toolbar */
:root[data-theme="dark"] trix-toolbar {
  background: var(--nova-surface-alt);
  border-color: var(--nova-border);
}

:root[data-theme="dark"] trix-toolbar .trix-button-group {
  border-color: var(--nova-border);
}

:root[data-theme="dark"] trix-toolbar .trix-button {
  color: var(--nova-text-3);
}

:root[data-theme="dark"] trix-toolbar .trix-button:hover {
  background: var(--nova-accent-bg);
  color: var(--nova-accent);
}

:root[data-theme="dark"] trix-toolbar .trix-button.trix-active {
  background: var(--nova-accent-light);
  color: var(--nova-accent);
}

:root[data-theme="dark"] trix-editor {
  background: var(--nova-surface);
  border-color: var(--nova-border);
  color: var(--nova-text);
}

:root[data-theme="dark"] trix-editor:focus {
  border-color: var(--nova-accent-mid);
  box-shadow: 0 0 0 3px rgba(122,175,192,0.1);
}

/* =================================================================
   10. BUTTON SIZE VARIANTS
   ================================================================ */

/* Compact buttons - used in tight spaces */
.btn-primary.compact,
.btn-secondary.compact,
.btn-ghost.compact,
.action-button.compact {
  padding: 4px 10px;
  font-size: 11px;
}

/* Large buttons - used for primary page actions */
.btn-primary.large,
.btn-secondary.large,
.action-button.large {
  padding: 10px 20px;
  font-size: 14px;
}

/* Full-width buttons */
.btn-primary.block,
.btn-secondary.block,
.action-button.block {
  width: 100%;
  justify-content: center;
}

/* =================================================================
   11. DANGER BUTTONS
   Delete, remove, destructive actions
   ================================================================ */

.btn-danger,
.btn-delete,
.delete-btn {
  background: var(--danger-color);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--nova-font-sans);
  box-shadow: var(--nova-shadow-sm);
  cursor: pointer;
  transition: filter 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn-danger:hover,
.btn-delete:hover,
.delete-btn:hover {
  filter: brightness(0.9);
}

.btn-danger:active,
.btn-delete:active,
.delete-btn:active {
  filter: brightness(0.8);
}

/* =================================================================
   12. DISABLED STATE
   Universal disabled styling for all buttons and inputs
   ================================================================ */

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-accent:disabled,
.btn-danger:disabled,
.action-button:disabled,
input[type="submit"]:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none !important;
}

/* Disabled inputs */
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled,
.input:disabled {
  background: var(--nova-surface-alt);
  color: var(--nova-text-4);
  cursor: not-allowed;
}

/* =================================================================
   FINAL POLISH — THE DETAILS THAT MAKE IT FEEL FINISHED
   Reference: nova-desktop-facelift.html (scrollbars, focus rings,
   selection, transitions, tooltips, empty states, dark mode depth)
   ================================================================ */

/* =================================================================
   1. CUSTOM SCROLLBARS (webkit)
   Subtle, non-intrusive scrollbars that match the theme
   ================================================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}

/* Dark mode scrollbars */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* =================================================================
   2. FOCUS RINGS — Branded focus indicator
   Replaces browser default with accent-colored ring
   ================================================================ */

*:focus-visible {
  outline: 2px solid var(--nova-accent-mid);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Remove focus ring from elements that shouldn't show it */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline-offset: 1px;
}

/* =================================================================
   3. TEXT SELECTION COLOR
   Branded highlight when selecting text
   ================================================================ */

::selection {
  background: var(--nova-accent-light);
  color: var(--nova-text);
}

::-moz-selection {
  background: var(--nova-accent-light);
  color: var(--nova-text);
}

/* Dark mode selection */
:root[data-theme="dark"] ::selection {
  background: rgba(122,175,192,0.25);
  color: rgba(255,255,255,0.95);
}

:root[data-theme="dark"] ::-moz-selection {
  background: rgba(122,175,192,0.25);
  color: rgba(255,255,255,0.95);
}

/* =================================================================
   4. TRANSITIONS ON INTERACTIVE ELEMENTS
   Smooth, consistent hover/focus transitions
   ================================================================ */

a,
button,
[role="button"],
.tab,
.tab-button,
.detail-tab-button,
tr[onclick],
td[onclick],
.clickable-row {
  transition: color 0.15s ease,
              background 0.15s ease,
              border-color 0.15s ease,
              box-shadow 0.15s ease,
              opacity 0.15s ease;
}

/* =================================================================
   5. LOADING STATES
   Spinners and loading indicators use accent color
   ================================================================ */

.spinner,
.loading-spinner,
.loading-indicator,
.spinner-border,
.loader {
  border-color: var(--nova-accent-bg);
  border-top-color: var(--nova-accent);
}

/* Generic rotating spinner */
@keyframes nova-spin {
  to { transform: rotate(360deg); }
}

.spinner,
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--nova-accent-bg);
  border-top-color: var(--nova-accent);
  border-radius: 50%;
  animation: nova-spin 0.8s linear infinite;
}

/* Loading text */
.loading-text,
.loading-message {
  color: var(--nova-text-3);
  font-size: 12px;
  font-style: italic;
}

/* =================================================================
   6. TOOLTIP STYLING
   Popups on ⓘ help buttons and title attributes
   ================================================================ */

/* Title attribute tooltips (browser native, styled via pseudo-element where supported) */
[title] {
  text-decoration: none;
}

/* Custom tooltip classes used in the app */
.tooltip,
.tooltip-content,
.tooltip-inner,
.qtip-content,
.help-tooltip {
  background: var(--nova-text);
  color: var(--nova-bg);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--nova-font-sans);
  border-radius: 5px;
  padding: 5px 9px;
  box-shadow: var(--nova-shadow-sm);
  max-width: 260px;
  line-height: 1.5;
}

/* Dark mode tooltip */
:root[data-theme="dark"] .tooltip,
:root[data-theme="dark"] .tooltip-content,
:root[data-theme="dark"] .tooltip-inner,
:root[data-theme="dark"] .qtip-content,
:root[data-theme="dark"] .help-tooltip {
  background: var(--nova-surface-alt);
  color: var(--nova-text);
  border: 1px solid var(--nova-border);
}

/* Tooltip arrow (if using Tippy.js or similar) */
.tippy-box {
  background: var(--nova-text);
  font-size: 11px;
  font-family: var(--nova-font-sans);
  border-radius: 5px;
}

:root[data-theme="dark"] .tippy-box {
  background: var(--nova-surface-alt);
  border: 1px solid var(--nova-border);
}

/* =================================================================
   7. EMPTY STATE MESSAGES
   "No results", "No good imaging opportunities", etc.
   ================================================================ */

.empty-state,
.empty-message,
.no-results,
.no-data,
.no-imaging-opportunities {
  color: var(--nova-text-4);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 32px 16px;
}

/* Specific empty state in tables */
.table-wrapper .empty-state,
.table-wrapper .no-results {
  padding: 24px 16px;
  color: var(--nova-text-4);
}

/* Empty state with icon */
.empty-state-icon {
  font-size: 32px;
  color: var(--nova-text-4);
  opacity: 0.5;
  margin-bottom: 8px;
}

/* =================================================================
   8. DARK MODE: BODY BACKGROUND GRADIENT
   Subtle depth to prevent flat black look
   ================================================================ */

:root[data-theme="dark"] body {
  background: radial-gradient(ellipse at 20% 0%, #161e2a 0%, #0f1118 50%);
  background-attachment: fixed;
}

/* =================================================================
   9. DARK MODE: HEADER STAR FIELD
   Subtle star dots in the header for dark mode
   (Already added for .app-header in PROMPT 3, adding for .main-header
    if it exists as an alternate class)
   ================================================================ */

/* Ensure star field works for both .app-header and .main-header */
:root[data-theme="dark"] .main-header {
  position: relative;
  overflow: hidden;
}

:root[data-theme="dark"] .main-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 8% 30%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 70%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 20%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 50%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 42%, rgba(255,255,255,0.45) 0%, transparent 100%);
  opacity: 0.7;
  z-index: 0;
}

/* Ensure header content is above star field */
:root[data-theme="dark"] .main-header > * {
  position: relative;
  z-index: 1;
}

/* =================================================================
   10. MISC POLISH — SMALL REFINEMENTS
   ================================================================ */

/* Smooth scrolling for the whole page */
html {
  scroll-behavior: smooth;
}

/* Prevent text selection on UI elements that shouldn't be selectable */
button,
.btn,
.action-button,
.tab-button,
.tab,
.no-select {
  user-select: none;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Code/monospace inline elements */
code,
.code,
.mono {
  font-family: var(--nova-font-mono);
  font-size: 0.9em;
  background: var(--nova-surface-alt);
  padding: 2px 5px;
  border-radius: 3px;
}

:root[data-theme="dark"] code,
:root[data-theme="dark"] .code,
:root[data-theme="dark"] .mono {
  background: rgba(255,255,255,0.05);
}

/* Horizontal rules / dividers */
hr,
.divider {
  border: none;
  height: 1px;
  background: var(--nova-border-light);
  margin: 16px 0;
}

:root[data-theme="dark"] hr,
:root[data-theme="dark"] .divider {
  background: var(--nova-border);
}

/* Badge/tag styling */
.badge,
.tag,
.label-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  background: var(--nova-accent-bg);
  color: var(--nova-accent);
}

:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .label-badge {
  background: rgba(122,175,192,0.12);
}

/* =================================================================
   ABOUT MODAL
   Branded "About Nova DSO Tracker" modal dialog
   ================================================================ */

/* About trigger button in header */
.about-trigger-button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--nova-surface-alt);
  border: 1px solid var(--nova-border);
  color: var(--nova-text-3);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  margin-right: 8px;
}

.about-trigger-button:hover {
  background: var(--nova-surface);
  border-color: var(--nova-accent-mid);
  color: var(--nova-text);
}

:root[data-theme="dark"] .about-trigger-button {
  background: rgba(255,255,255,0.04);
  border-color: var(--nova-border);
  color: var(--nova-text-3);
}

:root[data-theme="dark"] .about-trigger-button:hover {
  background: var(--nova-accent-bg);
  border-color: var(--nova-accent-light);
  color: var(--nova-accent);
}

/* About modal overlay */
#about-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: var(--overlay-dark);
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: center;
  justify-content: center;
}

#about-modal.is-visible {
  display: flex !important;
  opacity: 1;
}

/* About modal content container */
#about-modal .about-modal-content {
  position: relative;
  background: var(--bg-white);
  padding: var(--space-7);
  width: 90%;
  max-width: 440px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  max-height: 85vh;
  overflow-y: auto;
  margin: 0;
  text-align: center;
}

:root[data-theme="dark"] #about-modal .about-modal-content {
  background: var(--nova-surface, var(--bg-light));
  border: 1px solid var(--nova-border, var(--border-medium));
}

/* Close button */
.about-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--nova-border);
  color: var(--nova-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.about-modal-close:hover {
  background: var(--nova-surface-alt);
  color: var(--nova-text);
  border-color: var(--nova-accent-mid);
}

:root[data-theme="dark"] .about-modal-close {
  border-color: var(--nova-border);
  color: var(--nova-text-3);
}

:root[data-theme="dark"] .about-modal-close:hover {
  background: rgba(255,255,255,0.04);
  color: var(--nova-text);
  border-color: var(--nova-accent-mid);
}

/* About modal body */
.about-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* Logo */
.about-logo {
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-3);
}

/* App title */
.about-title {
  font-family: var(--nova-font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--nova-text);
  margin: 0;
  letter-spacing: -0.01em;
}

.about-title span {
  color: var(--nova-accent);
}

/* Version number */
.about-version {
  font-family: var(--nova-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--nova-text-3);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Tagline */
.about-tagline {
  font-family: var(--nova-font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--nova-text-2);
  margin: 0;
  line-height: 1.5;
  max-width: 340px;
}

/* Description */
.about-description {
  font-family: var(--nova-font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--nova-text-3);
  margin: 0;
  line-height: 1.6;
  max-width: 360px;
}

/* Attribution line */
.about-attribution {
  font-family: var(--nova-font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--nova-text-4);
  margin: 0;
  line-height: 1.5;
  max-width: 340px;
}

/* Links container */
.about-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Individual links */
.about-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--nova-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--nova-accent);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  background: var(--nova-accent-bg);
  border: 1px solid var(--nova-accent-light);
  transition: all 0.15s ease;
}

.about-link:hover {
  background: var(--nova-accent-light);
  color: var(--nova-text);
}

.about-link svg {
  flex-shrink: 0;
}

:root[data-theme="dark"] .about-link {
  background: rgba(122,175,192,0.08);
  border-color: rgba(122,175,192,0.15);
  color: var(--nova-accent);
}

:root[data-theme="dark"] .about-link:hover {
  background: rgba(122,175,192,0.18);
  border-color: rgba(122,175,192,0.3);
}

/* Credits line */
.about-credits {
  font-family: var(--nova-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--nova-text-3);
  margin: var(--space-4) 0 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--nova-border-light);
  width: 100%;
}

:root[data-theme="dark"] .about-credits {
  border-top-color: var(--nova-border);
}