/* =============================================================
   RIA-TOM  ·  Full Dark Mode  (overrides Bootstrap 4 + main.css)
   ============================================================= */

/* ── Google Font ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* backgrounds */
  --bg-base:      #090c11;   /* page background  */
  --bg-surface:   #161b22;   /* cards, panels     */
  --bg-raised:    #1c2230;   /* card-headers, inputs, dropdowns */
  --bg-hover:     #21293a;   /* hover states      */

  /* borders */
  --border:       #2d3748;   /* subtle borders    */
  --thead-border: #44546f;   /* subtle borders    */
  --border-focus: #3b82f6;   /* focused inputs    */

  /* text */
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  /* accent palette */
  --accent-blue:   #3b82f6;
  --accent-green:  #22c55e;
  --accent-yellow: #f59e0b;
  --accent-red:    #ef4444;
  --accent-cyan:   #06b6d4;
  --accent-purple: #a855f7;
  --accent-indigo: #a5b4fc;  /* indigo-300 — matches Night Planner upload button */

  /* semantic colours (kept for TOM internals) */
  --primary:   #3b82f6;
  --secondary: #475569;
  --success:   #22c55e;
  --info:      #06b6d4;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --light:     #1e293b;
  --dark:      #0d1117;

  /* TOM theme vars */
  --theme_primary:        var(--bg-base);
  --theme_text_primary:   var(--text-primary);
  --theme_accent1:        var(--bg-surface);
  --theme_accent2:        var(--bg-raised);
  --theme_accent3:        var(--bg-hover);
  --theme_link_text:      var(--accent-blue);
  --theme_link_hover:     #60a5fa;
  --theme_link_active:    #93c5fd;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
  padding-top: 5rem;
  min-height: 100vh;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }

p, li, span, label, small, .form-text { color: var(--text-secondary); }

.text-muted { color: var(--text-muted) !important; }
.text-white  { color: var(--text-primary) !important; }
.text-white-50 { color: var(--text-secondary) !important; }
.fw-semibold, strong, b { color: var(--text-primary); }

a { color: var(--accent-blue); text-decoration: none; transition: color .2s; }
a:hover { color: #60a5fa; }
a:active { color: #93c5fd; font-weight: 600; }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar,
.navbar.navbar-dark,
.navbar.bg-dark {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 20px rgba(0,0,0,.4);
}

.navbar-brand { color: var(--text-primary) !important; font-weight: 700; }
.navbar-brand > img { max-height: 28px; }

.nav-link,
.navbar-dark .nav-link { color: var(--text-secondary) !important; transition: color .2s; }
.nav-link:hover,
.navbar-dark .nav-link:hover { color: var(--text-primary) !important; }
.nav-link.active,
.navbar-dark .nav-link.active,
.nav-item.active .nav-link,
.navbar-dark .nav-item.active .nav-link { color: var(--accent-blue) !important; }

.navbar-toggler { border-color: var(--border); }
.navbar-toggler-icon { filter: invert(1) brightness(.7); }

/* ── Dropdowns ────────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.dropdown-item {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  transition: background-color .15s, color .15s;
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.dropdown-divider { border-color: var(--border); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  transition: box-shadow .25s, transform .2s;
  animation: fadeUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stagger animations for cards inside rows (more exaggerated delays) */
.row > div:nth-child(1) .card { animation-delay: 0.1s; }
.row > div:nth-child(2) .card { animation-delay: 0.25s; }
.row > div:nth-child(3) .card { animation-delay: 0.4s; }
.row > div:nth-child(4) .card { animation-delay: 0.55s; }
.row > div:nth-child(5) .card { animation-delay: 0.7s; }
.row > div:nth-child(6) .card { animation-delay: 0.85s; }
.row > div:nth-child(7) .card { animation-delay: 1.0s; }
.row > div:nth-child(8) .card { animation-delay: 1.15s; }

.card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.5); }

.card-header {
  background-color: var(--bg-raised) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
}

.card-footer {
  background-color: var(--bg-raised) !important;
  border-top: 1px solid var(--border) !important;
}

.card-body { color: var(--text-secondary); }
.card-title { color: var(--text-primary) !important; font-weight: 600; }
.card-text  { color: var(--text-secondary) !important; }

/* Strip colored backgrounds from Bootstrap bg-* utilities */
.bg-primary, .bg-success, .bg-warning, .bg-info,
.bg-danger, .bg-dark, .bg-secondary,
.text-white.bg-primary, .text-white.bg-success,
.text-white.bg-warning, .text-white.bg-info,
.text-white.bg-danger {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

/* "bg-light" secondary info cards */
.bg-light {
  background-color: var(--bg-raised) !important;
  color: var(--text-primary) !important;
}

/* ── Nested (weather) cards with Bootstrap color → thin full border ── */
/* Scoped to .card-body so top-level stat cards (Targets, Pending …) are unaffected */
.card-body .card.bg-primary,
.card-body .card.text-white.bg-primary { border: 2px solid var(--accent-blue)   !important; }
.card-body .card.bg-success,
.card-body .card.text-white.bg-success { border: 2px solid var(--accent-green)  !important; }
.card-body .card.bg-warning,
.card-body .card.text-white.bg-warning { border: 2px solid var(--accent-yellow) !important; }
.card-body .card.bg-info,
.card-body .card.text-white.bg-info    { border: 2px solid var(--accent-cyan)   !important; }
.card-body .card.bg-danger,
.card-body .card.text-white.bg-danger  { border: 2px solid var(--accent-red)    !important; }

/* Subtle glow on hover matching the border color */
.card-body .card.bg-primary:hover  { box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 4px 20px rgba(0,0,0,.45) !important; }
.card-body .card.bg-success:hover  { box-shadow: 0 0 0 3px rgba(34,197,94,.18),  0 4px 20px rgba(0,0,0,.45) !important; }
.card-body .card.bg-warning:hover  { box-shadow: 0 0 0 3px rgba(245,158,11,.18), 0 4px 20px rgba(0,0,0,.45) !important; }
.card-body .card.bg-info:hover     { box-shadow: 0 0 0 3px rgba(6,182,212,.18),  0 4px 20px rgba(0,0,0,.45) !important; }
.card-body .card.bg-danger:hover   { box-shadow: 0 0 0 3px rgba(239,68,68,.18),  0 4px 20px rgba(0,0,0,.45) !important; }

/* ── Stat display numbers ─────────────────────────────────── */
.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.stat-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .25rem;
}

/* ── Alerts / Control-panel banner ───────────────────────────*/
.alert {
  border: 1px solid var(--border);
  border-radius: 12px;
}

.alert-dark {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.alert-heading {
  font-weight: 800 !important;
  font-size: 2.8rem;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #06b6d4, #3b82f6, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  display: inline-block;
  text-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
}

/* bootstrap semantic alert colours */
.alert-success  { background-color: rgba(34,197,94,.12) !important;  border-color: rgba(34,197,94,.3) !important;  color: #86efac !important; }
.alert-warning  { background-color: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.3) !important; color: #fcd34d !important; }
.alert-danger   { background-color: rgba(239,68,68,.12) !important;  border-color: rgba(239,68,68,.3) !important;  color: #fca5a5 !important; }
.alert-info     { background-color: rgba(6,182,212,.12) !important;  border-color: rgba(6,182,212,.3) !important;  color: #67e8f9 !important; }
.alert-primary  { background-color: rgba(59,130,246,.12) !important; border-color: rgba(59,130,246,.3) !important; color: #93c5fd !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  border-radius: 8px;
  transition: filter .2s, box-shadow .2s, transform .1s;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background-color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  color: #fff !important;
}
.btn-primary:hover { filter: brightness(1.15); }

.btn-success {
  background-color: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
  color: #fff !important;
}
.btn-success:hover { filter: brightness(1.12); }

.btn-secondary {
  background-color: var(--secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
.btn-secondary:hover { background-color: var(--bg-hover) !important; }

.btn-outline-secondary {
  border-color: #cbd5e1 !important;
  color: #cbd5e1 !important;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background-color: #cbd5e1 !important;
  color: var(--bg-base) !important;
}

.btn-link { color: var(--accent-blue) !important; }
.btn-link:hover { color: #60a5fa !important; }

.btn-danger  { background-color: var(--accent-red)    !important; border-color: var(--accent-red)    !important; color: #fff !important; }
.btn-warning { background-color: var(--accent-yellow) !important; border-color: var(--accent-yellow) !important; color: #0d1117 !important; }
.btn-info    { background-color: var(--accent-cyan)   !important; border-color: var(--accent-cyan)   !important; color: #fff !important; }

/* ── Forms & Inputs ───────────────────────────────────────── */
.form-control,
.form-select,
.custom-select,
select.form-control,
textarea.form-control {
  background-color: var(--bg-raised) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
  transition: border-color .2s, box-shadow .2s;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
  background-color: var(--bg-raised) !important;
  color: var(--text-primary) !important;
  outline: none;
}

.form-select option,
.custom-select option,
select option {
  background-color: var(--bg-raised) !important;
  color: var(--text-primary) !important;
}

.form-control::placeholder { color: var(--text-muted); }

.form-label { color: var(--text-primary); font-weight: 500; }

.form-text, .form-hint { color: var(--text-muted) !important; }

.input-group-text {
  background-color: var(--bg-raised) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

/* ── Tables ───────────────────────────────────────────────── */
table, .table {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.table thead th {
  background-color: rgba(59, 130, 246, 0.30) !important;
  color: #bfdbfe !important;
  border-color: rgba(96, 165, 250, 0.70) !important;
  border-width: 1px !important;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}

.table td, .table th {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

.table-hover tbody tr:hover td {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
  background-color: var(--bg-raised) !important;
}

/* ── List Groups ──────────────────────────────────────────── */
.list-group-item {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

.list-group-item:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.list-group-item-action:active { background-color: var(--bg-raised) !important; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: .03em;
}

.badge-success, .bg-success.badge { background-color: rgba(34,197,94,.18)   !important; color: #86efac !important; }
.badge-warning, .bg-warning.badge { background-color: rgba(245,158,11,.18)  !important; color: #fcd34d !important; }
.badge-danger,  .bg-danger.badge  { background-color: rgba(239,68,68,.18)   !important; color: #fca5a5 !important; }
.badge-info,    .bg-info.badge    { background-color: rgba(6,182,212,.18)   !important; color: #67e8f9 !important; }
.badge-primary, .bg-primary.badge { background-color: rgba(59,130,246,.18)  !important; color: #93c5fd !important; }
.badge-secondary { background-color: rgba(71,85,105,.35) !important; color: var(--text-secondary) !important; }

/* ── Progress bars ────────────────────────────────────────── */
.progress {
  background-color: var(--bg-raised) !important;
  border-radius: 99px;
  height: 6px;
}

.progress-bar { border-radius: 99px; }
.progress-bar.bg-dark { background-color: var(--accent-blue) !important; }

/* ── Pagination ───────────────────────────────────────────── */
.page-link {
  background-color: var(--bg-raised) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  transition: background-color .15s, color .15s;
}
.page-link:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }
.page-item.active .page-link { background-color: var(--accent-blue) !important; border-color: var(--accent-blue) !important; color: #fff !important; }
.page-item.disabled .page-link { background-color: var(--bg-surface) !important; color: var(--text-muted) !important; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-content {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  background-color: var(--bg-raised) !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  background-color: var(--bg-raised) !important;
}

.modal-title { color: var(--text-primary) !important; }
.close { color: var(--text-secondary) !important; }
.modal-backdrop { background-color: #000; }

/* ── Tabs ─────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  border-color: transparent transparent var(--border) transparent;
  background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--text-primary) !important; border-color: var(--border); }
.nav-tabs .nav-link.active {
  color: var(--accent-blue) !important;
  background-color: var(--bg-surface) !important;
  border-color: var(--border) var(--border) var(--bg-surface) !important;
}

.tab-content { background-color: var(--bg-surface); }

/* ── Collapse / Accordion ─────────────────────────────────── */
.collapse.show, .collapsing { background-color: var(--bg-surface); }

/* ── Tooltips & Popovers ──────────────────────────────────── */
.tooltip-inner { background-color: var(--bg-raised); color: var(--text-primary); border: 1px solid var(--border); }
.popover { background-color: var(--bg-surface) !important; border-color: var(--border) !important; }
.popover-header { background-color: var(--bg-raised) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
.popover-body  { color: var(--text-secondary) !important; }

/* ── Scrollbar (webkit) ───────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Selection ────────────────────────────────────────────── */
::selection { background: rgba(59,130,246,.35); color: var(--text-primary); }

/* ── Misc helpers ─────────────────────────────────────────── */
.border-secondary { border-color: var(--border) !important; }

.content { padding: 2rem 1.5rem; }

.pointer { cursor: pointer; }

/* Observatory Status list in sidebar */
.list-group-flush .list-group-item { border-left: none; border-right: none; }

/* iframe (cloud map) border-radius */
.card-body.p-0 iframe { border-radius: 0 0 12px 12px; display: block; }

/* ── Form Section Color Accents ───────────────────────────── */

/* Left-border + subtle tinted bg for semantic section cards */
.card-header.section-blue {
  border-left: 3px solid var(--accent-blue)   !important;
  background-color: rgba(59,130,246,.07)      !important;
}
.card-header.section-cyan {
  border-left: 3px solid var(--accent-cyan)   !important;
  background-color: rgba(6,182,212,.07)       !important;
}
.card-header.section-purple {
  border-left: 3px solid var(--accent-purple) !important;
  background-color: rgba(168,85,247,.07)      !important;
}
.card-header.section-green {
  border-left: 3px solid var(--accent-green)  !important;
  background-color: rgba(34,197,94,.07)       !important;
}
.card-header.section-yellow {
  border-left: 3px solid var(--accent-yellow) !important;
  background-color: rgba(245,158,11,.07)      !important;
}
.card-header.section-red {
  border-left: 3px solid var(--accent-red)    !important;
  background-color: rgba(239,68,68,.07)       !important;
}

/* Section header icons match the border color */
.card-header.section-blue   i { color: var(--accent-blue);   }
.card-header.section-cyan   i { color: var(--accent-cyan);   }
.card-header.section-purple i { color: var(--accent-purple); }
.card-header.section-green  i { color: var(--accent-green);  }
.card-header.section-yellow i { color: var(--accent-yellow); }
.card-header.section-red    i { color: var(--accent-red);    }

/* Labels are always --text-primary (override the generic p/span/label rule) */
label, .form-label { color: var(--text-primary) !important; }

/* Custom checkbox & radio — accent blue */
.form-check-input {
  background-color: var(--bg-raised) !important;
  border-color: var(--border)        !important;
}
.form-check-input:checked {
  background-color: var(--accent-blue) !important;
  border-color:     var(--accent-blue) !important;
}
.form-check-input:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
}

/* Input-group icons pick up the accent blue */
.input-group-text i,
.input-group-text .fas,
.input-group-text .fa { color: var(--accent-blue); }

/* Validation error styling */
.form-control.is-invalid,
.form-select.is-invalid  { border-color: var(--accent-red) !important; }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,.2) !important;
}
.invalid-feedback,
.text-danger { color: #fca5a5 !important; }

/* Modal header — subtle blue top accent */
.modal-header {
  border-top: 3px solid var(--accent-blue) !important;
  border-radius: 12px 12px 0 0 !important;
}

/* Form help text — slightly brighter than text-muted */
.form-text, .form-hint, small.form-text {
  color: var(--text-secondary) !important;
  font-size: .8rem;
}