/* ============================================================
   SKYWARD AIR — CINEMATIC DARK OPS
   Override for Disposable Theme v3 · Red/Amber
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&family=Inter:wght@300;400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --ops-red:         #c0392b;
  --ops-red-light:   #e74c3c;
  --ops-red-glow:    rgba(192,57,43,0.28);
  --ops-amber:       #e67e22;
  --ops-amber-light: #f39c12;
  --bg-void:         #080a0e;
  --bg-panel:        #111621;
  --bg-card:         #161d2e;
  --bg-raised:       #1f2b44;
  --border-dim:      rgba(255,255,255,0.06);
  --text-primary:    #e8eaf0;
  --text-secondary:  #8a95a8;
  --text-muted:      #4a5568;
  --font-display:    'Rajdhani', sans-serif;
  --font-mono:       'Share Tech Mono', monospace;
  --font-body:       'Inter', sans-serif;
  --transition:      0.18s cubic-bezier(0.4,0,0.2,1);
  --radius:          4px;
  --radius-sm:       2px;
}

/* ── BASE ───────────────────────────────────────────────────── */
html, body { background-color: var(--bg-void) !important; color: var(--text-primary) !important; font-family: var(--font-body) !important; }

/* Background image with dark overlay */
#page-container {
  background: url('/disposable/skyward_bg.jpg') center center / cover no-repeat fixed !important;
}
#page-container::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: rgba(8,10,14,0.93);
  pointer-events: none;
}
#page-container > * { position: relative; z-index: 1; }

/* ── NAVBAR ─────────────────────────────────────────────────── */
#Dispo_NavBar {
  background: rgba(13,17,23,0.97) !important;
  border-bottom: 1px solid var(--border-dim) !important;
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  padding-top: 0 !important; padding-bottom: 0 !important;
  min-height: 56px;
}
#Dispo_NavBar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ops-red), var(--ops-amber), transparent);
}
#Dispo_NavBar .navbar-brand img { max-height: 36px; }
#Dispo_NavBar .nav-link {
  color: var(--text-secondary) !important;
  font-family: var(--font-display) !important;
  font-size: 0.8rem !important; font-weight: 600 !important;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 0.7rem !important; transition: color var(--transition);
}
#Dispo_NavBar .nav-link:hover,
#Dispo_NavBar .nav-link.active { color: var(--text-primary) !important; }
#Dispo_NavBar .dropdown-menu {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border-dim) !important;
  border-top: 2px solid var(--ops-red) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7) !important;
  padding: 0.35rem 0 !important;
}
#Dispo_NavBar .dropdown-item {
  color: var(--text-secondary) !important;
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important; font-weight: 600 !important;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.5rem 1rem !important;
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
#Dispo_NavBar .dropdown-item:hover {
  background: var(--ops-red-glow) !important;
  color: var(--text-primary) !important;
  padding-left: 1.4rem !important;
}
#Dispo_NavBar .dropdown-divider { border-color: var(--border-dim) !important; }
#Dispo_NavBar .navbar-toggler { border-color: var(--border-dim) !important; }
#Dispo_NavBar .fa-compass, #Dispo_NavBar .fa-bars { color: var(--ops-red) !important; }

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius) !important;
  color: var(--text-primary) !important;
}
.card-header {
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid var(--border-dim) !important;
  color: var(--text-primary) !important;
}
.card-header h5 {
  font-family: var(--font-display) !important;
  font-size: 0.88rem !important; font-weight: 700 !important;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-primary) !important;
}
.card-header h5::before {
  content: ''; display: inline-block; width: 3px; height: 11px;
  background: var(--ops-red); margin-right: 0.55rem;
  vertical-align: middle; border-radius: 1px;
}
.card-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid var(--border-dim) !important;
  color: var(--text-secondary) !important;
}
.card-title { color: var(--text-primary) !important; }
.card-text  { color: var(--text-secondary) !important; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display) !important; font-weight: 600 !important;
  letter-spacing: 0.07em !important; text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important; transition: all var(--transition) !important;
}
.btn-primary   { background: var(--ops-red) !important; border-color: var(--ops-red) !important; color: #fff !important; }
.btn-primary:hover { background: var(--ops-red-light) !important; box-shadow: 0 0 14px var(--ops-red-glow) !important; }
.btn-secondary { background: var(--bg-raised) !important; border-color: var(--border-dim) !important; color: var(--text-secondary) !important; }
.btn-secondary:hover { background: #2a3556 !important; color: var(--text-primary) !important; }
.btn-success   { background: #1a6b3a !important; border-color: #1a6b3a !important; color: #fff !important; }
.btn-success:hover { background: #22863a !important; }
.btn-danger    { background: #7b1010 !important; border-color: #7b1010 !important; color: #fff !important; }
.btn-warning   { background: var(--ops-amber) !important; border-color: var(--ops-amber) !important; color: #fff !important; }
.btn-warning:hover { background: var(--ops-amber-light) !important; }
.btn-info      { background: var(--ops-amber) !important; border-color: var(--ops-amber) !important; color: #fff !important; }
.btn-info:hover { background: var(--ops-amber-light) !important; }
/* DT helper span-buttons (disabled badges) */
span.btn.disabled, span.btn-sm.disabled {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--border-dim) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important; font-size: 0.68rem !important;
}
span.btn.bg-white, span.badge.bg-white {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-secondary) !important; border: 1px solid var(--border-dim) !important;
}
span.btn.bg-warning, span.badge.bg-warning {
  background: rgba(230,126,34,0.15) !important;
  color: var(--ops-amber-light) !important; border: 1px solid rgba(230,126,34,0.3) !important;
}

/* ── BADGES ─────────────────────────────────────────────────── */
.badge { font-family: var(--font-mono) !important; font-size: 0.68rem !important; border-radius: var(--radius-sm) !important; }
.bg-primary   { background: var(--ops-red) !important; }
.bg-success   { background: #1a6b3a !important; }
.bg-danger    { background: #7b1010 !important; }
.bg-warning   { background: var(--ops-amber) !important; }
.bg-info      { background: #0a4a6b !important; }
.bg-secondary { background: var(--bg-raised) !important; }
/* Disposable uses text-black on badges — fix for dark bg */
.badge.text-black, .btn.text-black { color: #fff !important; }

/* ── TABLES ─────────────────────────────────────────────────── */
.table { color: var(--text-primary) !important; border-color: var(--border-dim) !important; }
.table thead th {
  background: rgba(255,255,255,0.03) !important; border-color: var(--border-dim) !important;
  color: var(--text-secondary) !important; font-family: var(--font-display) !important;
  font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase;
}
.table tbody td { border-color: var(--border-dim) !important; color: var(--text-primary) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255,255,255,0.02) !important; color: var(--text-primary) !important; }
.table-hover > tbody > tr:hover > * { background: rgba(192,57,43,0.07) !important; }
.table-borderless > :not(caption) > * > * { border: none !important; }

/* ── LINKS ──────────────────────────────────────────────────── */
a { color: var(--ops-amber-light) !important; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--ops-amber) !important; }

/* Sortable links in table headers */
a.sortablelink {
  color: var(--text-secondary) !important;
  font-family: var(--font-display) !important; font-size: 0.7rem !important;
  font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase;
}
a.sortablelink:hover { color: var(--ops-amber-light) !important; }

/* ── FORMS ──────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-panel) !important; border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-sm) !important; color: var(--text-primary) !important;
}
.form-control:focus, .form-select:focus {
  background: var(--bg-raised) !important; border-color: var(--ops-red) !important;
  box-shadow: 0 0 0 3px var(--ops-red-glow) !important; color: var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.input-group-text {
  background: var(--bg-raised) !important; border-color: var(--border-dim) !important;
  color: var(--ops-red-light) !important;
}
label, .form-label {
  color: var(--text-secondary) !important; font-family: var(--font-display) !important;
  font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase;
}
.form-check-input { background-color: var(--bg-panel) !important; border-color: var(--border-dim) !important; }
.form-check-input:checked { background-color: var(--ops-red) !important; border-color: var(--ops-red) !important; }
.form-check-label { font-size: 0.8rem !important; color: var(--text-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; }
.form-switch .form-check-input { background-color: var(--bg-raised) !important; }

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert { border-radius: var(--radius) !important; border-left-width: 3px !important; }
.alert-info    { background: rgba(10,74,107,0.15) !important; border-color: #0a4a6b !important; color: #7db8d4 !important; }
.alert-warning { background: rgba(230,126,34,0.1) !important; border-color: var(--ops-amber) !important; color: var(--ops-amber-light) !important; }
.alert-danger  { background: rgba(192,57,43,0.12) !important; border-color: var(--ops-red) !important; color: #e74c3c !important; }
.alert-success { background: rgba(26,107,58,0.12) !important; border-color: #22863a !important; color: #48bb78 !important; }

/* ── PAGINATION ─────────────────────────────────────────────── */
.pagination { gap: 3px; }
.page-link {
  background: var(--bg-card) !important; border: 1px solid var(--border-dim) !important;
  color: var(--text-secondary) !important; font-family: var(--font-display) !important;
  font-size: 0.75rem !important; font-weight: 700 !important; border-radius: var(--radius-sm) !important;
  transition: all var(--transition);
}
.page-link:hover { background: var(--ops-red-glow) !important; border-color: var(--ops-red) !important; color: var(--text-primary) !important; }
.page-item.active .page-link { background: var(--ops-red) !important; border-color: var(--ops-red) !important; color: #fff !important; }
.page-item.disabled .page-link { opacity: 0.3; }

/* ── MODALS ─────────────────────────────────────────────────── */
.modal-content {
  background: var(--bg-panel) !important; border: 1px solid var(--border-dim) !important;
  border-top: 2px solid var(--ops-red) !important; border-radius: var(--radius) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8) !important;
}
.modal-header { border-bottom: 1px solid var(--border-dim) !important; }
.modal-footer { border-top: 1px solid var(--border-dim) !important; }
.modal-title { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; }
.btn-close { filter: invert(1) !important; opacity: 0.5 !important; }

/* ── FOOTER ─────────────────────────────────────────────────── */
#footer .card {
  background: rgba(13,17,23,0.98) !important;
  border-top: 1px solid var(--border-dim) !important;
  border-left: none !important; border-right: none !important; border-bottom: none !important;
  border-radius: 0 !important; color: var(--text-muted) !important;
  font-family: var(--font-mono) !important; font-size: 0.7rem !important;
}
#footer a { color: var(--text-muted) !important; }
#footer a:hover { color: var(--ops-red-light) !important; }

/* ── MISC TEXT ──────────────────────────────────────────────── */
.text-dark, .text-muted { color: var(--text-secondary) !important; }
.text-black   { color: var(--text-primary) !important; }
.text-primary { color: var(--ops-red-light) !important; }
.text-success { color: #48bb78 !important; }
.text-danger  { color: #e74c3c !important; }
.text-warning { color: var(--ops-amber-light) !important; }
.text-info    { color: #7db8d4 !important; }
small, .small { color: var(--text-secondary) !important; }
hr { border-color: var(--border-dim) !important; }
.fw-bold { color: var(--text-primary) !important; }
.collapse hr { border-color: var(--border-dim) !important; }

/* ── SELECT2 ────────────────────────────────────────────────── */
.select2-container .select2-selection { background: var(--bg-panel) !important; border-color: var(--border-dim) !important; }
.select2-container .select2-selection__rendered { color: var(--text-primary) !important; }
.select2-dropdown { background: var(--bg-panel) !important; border-color: var(--border-dim) !important; }
.select2-results__option { color: var(--text-primary) !important; }
.select2-results__option--highlighted { background: var(--ops-red-glow) !important; }

/* ── COOKIE CONSENT ─────────────────────────────────────────── */
.cc-window { background: var(--bg-panel) !important; border-top: 2px solid var(--ops-red) !important; color: var(--text-secondary) !important; }
.cc-btn.cc-allow { background: var(--ops-red) !important; color: #fff !important; border-radius: var(--radius-sm) !important; }

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--bg-raised); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ops-red); }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes ops-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.ops-live { animation: ops-pulse 2.2s ease-in-out infinite; }

/* ── DASHBOARD ICON TILES ───────────────────────────────────── */
.ops-icon-tile {
  background: var(--bg-raised) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius) !important;
  padding: 0.75rem 0.5rem !important;
  transition: border-color var(--transition);
}
.ops-icon-tile:hover { border-color: rgba(192,57,43,0.4) !important; }
.ops-icon-value {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important; font-weight: 700 !important;
  color: var(--text-primary) !important; line-height: 1;
}
.ops-icon-label {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important; font-weight: 700 !important;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-secondary) !important; margin-top: 0.2rem;
}