/* ═══════════════════════════════════════════════════════════════
   SPECTRA theme for STAC Browser — dark, cyan/violet accent
   Injected at runtime; overrides Bootstrap + stac-browser styles
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS variables ── */
:root {
  --spectra-bg:       #04080f;
  --spectra-bg2:      #070d18;
  --spectra-bg3:      #0b1422;
  --spectra-bg4:      #0f1c30;
  --spectra-cyan:     #00e5ff;
  --spectra-cyan-dim: rgba(0,229,255,0.12);
  --spectra-cyan-glow:rgba(0,229,255,0.35);
  --spectra-violet:   #7c4dff;
  --spectra-white:    #f0f6ff;
  --spectra-muted:    #8898aa;
  --spectra-border:   rgba(0,229,255,0.12);
  --spectra-radius:   10px;

  /* Override Bootstrap CSS custom properties */
  --primary:    #00e5ff;
  --secondary:  #7c4dff;
  --dark:       #04080f;
  --light:      #0b1422;
  --body-bg:    #04080f;
  --body-color: #f0f6ff;
  --font-family-sans-serif: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-monospace:  'JetBrains Mono', SFMono-Regular, Menlo, monospace;
}

/* ── Base ── */
html, body {
  background-color: var(--spectra-bg) !important;
  color: var(--spectra-white) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Links ── */
a, a:not([href]):not([class]) {
  color: var(--spectra-cyan) !important;
}
a:hover {
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Navbar ── */
.navbar, .navbar-dark, nav.navbar {
  background: rgba(4,8,15,0.9) !important;
  border-bottom: 1px solid var(--spectra-border) !important;
  backdrop-filter: blur(16px) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.navbar-brand, .navbar-brand span, .navbar-brand * {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  color: var(--spectra-cyan) !important;
  text-shadow: 0 0 18px var(--spectra-cyan-glow) !important;
}
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--spectra-muted) !important;
  transition: color 0.2s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .active > .nav-link {
  color: var(--spectra-cyan) !important;
}
.navbar-toggler {
  border-color: var(--spectra-border) !important;
}
.navbar-toggler-icon {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(150deg);
}

/* ── Cards ── */
.card {
  background-color: var(--spectra-bg3) !important;
  border: 1px solid var(--spectra-border) !important;
  border-radius: var(--spectra-radius) !important;
  color: var(--spectra-white) !important;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.card:hover {
  border-color: rgba(0,229,255,0.3) !important;
  box-shadow: 0 8px 32px rgba(0,229,255,0.08) !important;
}
.card-header {
  background-color: var(--spectra-bg4) !important;
  border-bottom: 1px solid var(--spectra-border) !important;
  color: var(--spectra-cyan) !important;
  font-weight: 600 !important;
}
.card-footer {
  background-color: var(--spectra-bg4) !important;
  border-top: 1px solid var(--spectra-border) !important;
}
.card-title {
  color: var(--spectra-white) !important;
  font-weight: 600 !important;
}
.card-subtitle, .card-text {
  color: var(--spectra-muted) !important;
}
.card-body {
  background-color: transparent !important;
}
.card-img, .card-img-top, .card-img-bottom {
  border-color: var(--spectra-border) !important;
}

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--spectra-cyan), #0099cc) !important;
  border-color: transparent !important;
  color: #030810 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 8px !important;
  box-shadow: 0 0 18px rgba(0,229,255,0.2) !important;
  transition: all 0.25s !important;
}
.btn-primary:hover, .btn-primary:focus {
  box-shadow: 0 0 30px rgba(0,229,255,0.4) !important;
  filter: brightness(1.1) !important;
  color: #030810 !important;
}
.btn-secondary {
  background: rgba(124,77,255,0.15) !important;
  border: 1px solid rgba(124,77,255,0.4) !important;
  color: #b39ddb !important;
  border-radius: 8px !important;
  transition: all 0.25s !important;
}
.btn-secondary:hover {
  background: rgba(124,77,255,0.3) !important;
  color: var(--spectra-white) !important;
}
.btn-outline-primary {
  border-color: var(--spectra-cyan) !important;
  color: var(--spectra-cyan) !important;
  border-radius: 8px !important;
}
.btn-outline-primary:hover {
  background-color: var(--spectra-cyan-dim) !important;
  color: var(--spectra-cyan) !important;
}
.btn-light, .btn-outline-secondary {
  background: var(--spectra-bg4) !important;
  border-color: var(--spectra-border) !important;
  color: var(--spectra-muted) !important;
  border-radius: 8px !important;
}
.btn-light:hover, .btn-outline-secondary:hover {
  background: var(--spectra-bg3) !important;
  color: var(--spectra-white) !important;
}

/* ── Badges ── */
.badge-primary, .badge.bg-primary {
  background-color: var(--spectra-cyan-dim) !important;
  color: var(--spectra-cyan) !important;
  border: 1px solid rgba(0,229,255,0.25) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.06em !important;
}
.badge-secondary, .badge.bg-secondary {
  background-color: rgba(124,77,255,0.15) !important;
  color: #b39ddb !important;
  border: 1px solid rgba(124,77,255,0.25) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
}
.badge-dark, .badge.bg-dark,
.badge-info, .badge.bg-info,
.badge-success, .badge.bg-success,
.badge-warning, .badge.bg-warning {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.04em !important;
}
.badge-info, .badge.bg-info {
  background-color: rgba(0,229,255,0.1) !important;
  color: var(--spectra-cyan) !important;
  border: 1px solid var(--spectra-border) !important;
}

/* ── Tables ── */
.table {
  color: var(--spectra-white) !important;
  border-color: var(--spectra-border) !important;
}
.table th {
  color: var(--spectra-cyan) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-color: var(--spectra-border) !important;
  background-color: var(--spectra-bg4) !important;
  font-weight: 500 !important;
}
.table td {
  border-color: var(--spectra-border) !important;
  color: var(--spectra-muted) !important;
}
.table td a { color: var(--spectra-cyan) !important; }
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.02) !important;
}
.table-hover tbody tr:hover {
  background-color: rgba(0,229,255,0.04) !important;
  color: var(--spectra-white) !important;
}
.table-dark {
  background-color: var(--spectra-bg3) !important;
}

/* ── Forms ── */
.form-control, .custom-select {
  background-color: var(--spectra-bg4) !important;
  border: 1px solid var(--spectra-border) !important;
  color: var(--spectra-white) !important;
  border-radius: 8px !important;
}
.form-control:focus, .custom-select:focus {
  background-color: var(--spectra-bg3) !important;
  border-color: var(--spectra-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.15) !important;
  color: var(--spectra-white) !important;
}
.form-control::placeholder {
  color: var(--spectra-muted) !important;
}
.input-group-text {
  background-color: var(--spectra-bg4) !important;
  border-color: var(--spectra-border) !important;
  color: var(--spectra-muted) !important;
}

/* ── Pagination ── */
.page-link {
  background-color: var(--spectra-bg3) !important;
  border-color: var(--spectra-border) !important;
  color: var(--spectra-cyan) !important;
}
.page-link:hover {
  background-color: var(--spectra-bg4) !important;
  color: var(--spectra-white) !important;
}
.page-item.active .page-link {
  background-color: var(--spectra-cyan) !important;
  border-color: var(--spectra-cyan) !important;
  color: #030810 !important;
  font-weight: 700 !important;
}
.page-item.disabled .page-link {
  background-color: var(--spectra-bg3) !important;
  border-color: var(--spectra-border) !important;
  color: var(--spectra-muted) !important;
}

/* ── Modals ── */
.modal-content {
  background-color: var(--spectra-bg2) !important;
  border: 1px solid var(--spectra-border) !important;
  border-radius: var(--spectra-radius) !important;
  color: var(--spectra-white) !important;
}
.modal-header {
  border-bottom: 1px solid var(--spectra-border) !important;
  background-color: var(--spectra-bg3) !important;
}
.modal-title {
  color: var(--spectra-cyan) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}
.modal-footer {
  border-top: 1px solid var(--spectra-border) !important;
  background-color: var(--spectra-bg3) !important;
}
.modal-backdrop {
  background-color: rgba(4,8,15,0.8) !important;
}
.close {
  color: var(--spectra-muted) !important;
  text-shadow: none !important;
}
.close:hover {
  color: var(--spectra-white) !important;
}

/* ── Dropdowns ── */
.dropdown-menu {
  background-color: var(--spectra-bg3) !important;
  border: 1px solid var(--spectra-border) !important;
  border-radius: var(--spectra-radius) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important;
}
.dropdown-item {
  color: var(--spectra-muted) !important;
  font-size: 0.9rem !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--spectra-cyan-dim) !important;
  color: var(--spectra-cyan) !important;
}
.dropdown-divider {
  border-color: var(--spectra-border) !important;
}

/* ── Nav tabs ── */
.nav-tabs {
  border-bottom: 1px solid var(--spectra-border) !important;
}
.nav-tabs .nav-link {
  color: var(--spectra-muted) !important;
  border-color: transparent !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em !important;
}
.nav-tabs .nav-link:hover {
  color: var(--spectra-cyan) !important;
  border-color: transparent !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  background-color: transparent !important;
  border-color: transparent transparent var(--spectra-cyan) !important;
  color: var(--spectra-cyan) !important;
  font-weight: 600 !important;
}
.nav-pills .nav-link.active {
  background-color: var(--spectra-cyan-dim) !important;
  color: var(--spectra-cyan) !important;
}

/* ── List groups ── */
.list-group-item {
  background-color: var(--spectra-bg3) !important;
  border-color: var(--spectra-border) !important;
  color: var(--spectra-white) !important;
}
.list-group-item:hover {
  background-color: var(--spectra-bg4) !important;
}
.list-group-item.active {
  background-color: var(--spectra-cyan-dim) !important;
  border-color: var(--spectra-cyan) !important;
  color: var(--spectra-cyan) !important;
}
.list-group-item-action:hover {
  background-color: rgba(0,229,255,0.05) !important;
  color: var(--spectra-cyan) !important;
}

/* ── Alerts ── */
.alert {
  border-radius: var(--spectra-radius) !important;
  border-width: 1px !important;
}
.alert-info {
  background-color: rgba(0,229,255,0.07) !important;
  border-color: rgba(0,229,255,0.2) !important;
  color: var(--spectra-cyan) !important;
}
.alert-warning {
  background-color: rgba(255,215,64,0.07) !important;
  border-color: rgba(255,215,64,0.2) !important;
  color: #ffd740 !important;
}
.alert-danger {
  background-color: rgba(255,64,129,0.07) !important;
  border-color: rgba(255,64,129,0.2) !important;
  color: #ff4081 !important;
}
.alert-success {
  background-color: rgba(0,230,118,0.07) !important;
  border-color: rgba(0,230,118,0.2) !important;
  color: #00e676 !important;
}

/* ── Headings & text ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--spectra-white) !important;
}
.text-muted { color: var(--spectra-muted) !important; }
.text-primary { color: var(--spectra-cyan) !important; }
.text-secondary { color: #b39ddb !important; }
.text-dark { color: var(--spectra-white) !important; }
.bg-light { background-color: var(--spectra-bg3) !important; }
.bg-dark  { background-color: var(--spectra-bg2) !important; }
.bg-white { background-color: var(--spectra-bg3) !important; }
.border   { border-color: var(--spectra-border) !important; }

/* ── Code blocks ── */
code, kbd, pre, samp {
  font-family: 'JetBrains Mono', SFMono-Regular, monospace !important;
  font-size: 0.82rem !important;
}
code {
  color: var(--spectra-cyan) !important;
  background-color: rgba(0,229,255,0.07) !important;
  padding: 0.1em 0.4em !important;
  border-radius: 4px !important;
}
pre {
  background-color: var(--spectra-bg4) !important;
  border: 1px solid var(--spectra-border) !important;
  border-radius: var(--spectra-radius) !important;
  color: var(--spectra-white) !important;
  padding: 1rem !important;
}

/* ── STAC Browser specific ── */
#stac-browser {
  background-color: var(--spectra-bg) !important;
  min-height: 100vh;
}
#stac-browser .description,
#stac-browser .styled-description {
  color: var(--spectra-muted) !important;
}
#stac-browser .styled-description h1,
#stac-browser .styled-description h2,
#stac-browser .styled-description h3,
#stac-browser .styled-description h4,
#stac-browser .styled-description h5,
#stac-browser .styled-description h6 {
  color: var(--spectra-cyan) !important;
}
#stac-browser .styled-description code {
  color: var(--spectra-cyan) !important;
  background-color: rgba(0,229,255,0.07) !important;
}
#stac-browser .styled-description pre {
  background-color: var(--spectra-bg4) !important;
}
#stac-browser .datetime,
#stac-browser .catalog-card .datetime {
  color: var(--spectra-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
}

/* Thumbnails / imagery */
#stac-browser .thumbnail,
#stac-browser .card-img,
#stac-browser .card-img-top {
  border-bottom: 1px solid var(--spectra-border) !important;
  background-color: var(--spectra-bg) !important;
}

/* Loading overlay */
.loading {
  background-color: rgba(4,8,15,0.85) !important;
  color: var(--spectra-cyan) !important;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: transparent !important;
  padding-left: 0 !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--spectra-muted) !important;
}
.breadcrumb-item.active {
  color: var(--spectra-cyan) !important;
  font-weight: 600 !important;
}

/* Map */
.leaflet-container {
  background-color: var(--spectra-bg) !important;
  border: 1px solid var(--spectra-border) !important;
  border-radius: var(--spectra-radius) !important;
}
.leaflet-popup-content-wrapper {
  background-color: var(--spectra-bg3) !important;
  color: var(--spectra-white) !important;
  border: 1px solid var(--spectra-border) !important;
  border-radius: var(--spectra-radius) !important;
}
.leaflet-popup-tip {
  background-color: var(--spectra-bg3) !important;
}
.leaflet-bar a {
  background-color: var(--spectra-bg3) !important;
  border-color: var(--spectra-border) !important;
  color: var(--spectra-cyan) !important;
}
.leaflet-bar a:hover {
  background-color: var(--spectra-bg4) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--spectra-bg2); }
::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,0.45); }