@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

/* =========================================================================
   Spectrum-inspired theme (RSI / Star Citizen), applied via Bootstrap 5.3
   CSS variables + a few targeted overrides for AdminLTE 4 components.
   Palette mirrors the SC overlay (overlay/assets/styles.css), which is left
   untouched — this file only themes the AdminLTE dashboard.
   ========================================================================= */
:root,
[data-bs-theme="dark"] {
  --sc-bg: #06151f;
  --sc-bg-2: #0a2332;
  --sc-surface: #0f2c3e;
  --sc-surface-2: #13374e;
  --sc-line: rgba(86, 164, 208, 0.34);
  --sc-line-strong: rgba(86, 164, 208, 0.62);
  --sc-cyan: #63bfff;
  --sc-cyan-bright: #9ae9ff;
  --sc-text: #ddedf7;
  --sc-muted: #88a6b8;

  --bs-body-bg: var(--sc-bg);
  --bs-body-bg-rgb: 6, 21, 31;
  --bs-body-color: var(--sc-text);
  --bs-body-color-rgb: 221, 237, 247;
  --bs-secondary-color: var(--sc-muted);
  --bs-secondary-bg: var(--sc-bg-2);
  --bs-tertiary-bg: var(--sc-surface);
  --bs-emphasis-color: #f1fbff;
  --bs-emphasis-color-rgb: 241, 251, 255;
  --bs-border-color: var(--sc-line);
  --bs-border-color-translucent: var(--sc-line);
  --bs-border-radius: 0.3rem;
  --bs-border-radius-sm: 0.2rem;
  --bs-link-color: var(--sc-cyan-bright);
  --bs-link-color-rgb: 116, 215, 255;
  --bs-link-hover-color: #aee6ff;
  --bs-primary: var(--sc-cyan);
  --bs-primary-rgb: 84, 173, 247;

  /* Spectrum-style semantic colors: dark base, but stronger saturation */
  --sc-success: #42c7a4;
  --sc-info: #5bb4e4;
  --sc-warning: #dfb04c;
  --sc-danger: #e2666f;
  --sc-secondary: #547188;
  --bs-success: var(--sc-success);
  --bs-success-rgb: 66, 199, 164;
  --bs-info: var(--sc-info);
  --bs-info-rgb: 91, 180, 228;
  --bs-warning: var(--sc-warning);
  --bs-warning-rgb: 223, 176, 76;
  --bs-danger: var(--sc-danger);
  --bs-danger-rgb: 226, 102, 111;
  --bs-secondary: var(--sc-secondary);
  --bs-secondary-rgb: 84, 113, 136;

  --bs-body-font-family: "Bai Jamjuree", system-ui, Arial, sans-serif;
  --bs-font-sans-serif: "Bai Jamjuree", system-ui, Arial, sans-serif;
}

/* Subtle cyan glow in the top corner, like Spectrum panels */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(1200px 700px at 85% -12%, rgba(84, 173, 247, 0.08), transparent 55%);
}

/* Headings & labels: condensed Rajdhani with letter-spacing */
h1, h2, h3, h4, h5, h6 {
  font-family: "Rajdhani", "Bai Jamjuree", sans-serif;
  letter-spacing: 0.02em;
}
.app-main .card-title {
  font-family: "Rajdhani", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.nav-header {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sc-muted);
  font-size: 0.72rem;
}
.brand-text {
  font-family: "Rajdhani", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sc-cyan-bright);
}

/* Header bar */
.app-header.navbar {
  background: rgba(6, 21, 31, 0.92) !important;
  border-bottom: 1px solid var(--sc-line-strong) !important;
  backdrop-filter: blur(4px);
}

/* Sidebar */
.app-sidebar {
  background: linear-gradient(180deg, #081d2a, #04121c) !important;
  border-right: 1px solid var(--sc-line-strong);
}
.sidebar-brand {
  border-bottom: 1px solid var(--sc-line);
}
.sidebar-menu .nav-link {
  color: #b9d2e0;
  border-left: 2px solid transparent;
  border-radius: 0;
}
.sidebar-menu .nav-link:hover {
  background: rgba(99, 191, 255, 0.12);
  color: #fff;
}
.sidebar-menu .nav-link.active {
  background: linear-gradient(90deg, rgba(99, 191, 255, 0.26), rgba(99, 191, 255, 0.05));
  color: #fff;
  border-left-color: var(--sc-cyan-bright);
}
.sidebar-menu .nav-icon {
  color: var(--sc-cyan-bright);
}
.sidebar-menu .nav-link.disabled {
  opacity: 0.55;
}

/* Cards / panels */
.card {
  --bs-card-bg: var(--sc-surface);
  --bs-card-border-color: var(--sc-line);
  --bs-card-cap-bg: rgba(155, 233, 255, 0.05);
  background-image: linear-gradient(180deg, rgba(155, 233, 255, 0.05), transparent 45%);
}
.card-header {
  border-bottom-color: var(--sc-line);
}
.card-footer {
  border-top-color: var(--sc-line);
  background: transparent;
}

/* Status tiles: dark panels with a colored accent rail/icon (not bright fills) */
.small-box {
  background-color: var(--sc-surface) !important;
  background-image: linear-gradient(180deg, rgba(155, 233, 255, 0.06), transparent 70%) !important;
  border: 1px solid var(--sc-line);
  border-left-width: 3px;
  color: var(--sc-text);
}
.small-box h3,
.small-box p {
  color: var(--sc-text);
}
.small-box .small-box-subtitle {
  display: block;
  min-height: 1.5rem;
  opacity: 0.75;
}
.small-box .small-box-icon {
  opacity: 0.4;
  color: var(--sc-muted);
}
.small-box.text-bg-primary { border-left-color: var(--sc-cyan); }
.small-box.text-bg-primary .small-box-icon { color: var(--sc-cyan); }
.small-box.text-bg-info {
  border-left-color: var(--sc-info);
  background-image: linear-gradient(180deg, rgba(91, 180, 228, 0.16), transparent 70%) !important;
}
.small-box.text-bg-info .small-box-icon { color: var(--sc-info); }
.small-box.text-bg-success {
  border-left-color: var(--sc-success);
  background-image: linear-gradient(180deg, rgba(66, 199, 164, 0.18), transparent 70%) !important;
}
.small-box.text-bg-success .small-box-icon { color: var(--sc-success); }
.small-box.text-bg-warning {
  border-left-color: var(--sc-warning);
  background-image: linear-gradient(180deg, rgba(223, 176, 76, 0.18), transparent 70%) !important;
}
.small-box.text-bg-warning .small-box-icon { color: var(--sc-warning); }
.small-box.text-bg-danger {
  border-left-color: var(--sc-danger);
  background-image: linear-gradient(180deg, rgba(226, 102, 111, 0.18), transparent 70%) !important;
}
.small-box.text-bg-danger .small-box-icon { color: var(--sc-danger); }
.small-box.text-bg-secondary { border-left-color: var(--sc-secondary); }

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--sc-cyan);
  --bs-btn-border-color: var(--sc-cyan);
  --bs-btn-hover-bg: #82d0ff;
  --bs-btn-hover-border-color: #82d0ff;
  --bs-btn-active-bg: #4aa6f0;
  --bs-btn-active-border-color: #4aa6f0;
  --bs-btn-color: #04121c;
  --bs-btn-hover-color: #04121c;
  --bs-btn-active-color: #04121c;
  font-weight: 600;
}

/* Badges: keep semantic meaning, but use muted surfaces instead of loud fill blocks. */
.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.badge.text-bg-primary,
.badge.text-bg-info,
.badge.text-bg-success,
.badge.text-bg-warning,
.badge.text-bg-danger,
.badge.text-bg-secondary,
.badge.text-bg-light,
.badge.text-bg-dark {
  border: 1px solid transparent;
  background-clip: padding-box;
}
.badge.text-bg-primary {
  background-color: rgba(99, 191, 255, 0.20) !important;
  border-color: rgba(99, 191, 255, 0.52);
  color: #ecfbff !important;
}
.badge.text-bg-info {
  background-color: rgba(91, 180, 228, 0.20) !important;
  border-color: rgba(91, 180, 228, 0.52);
  color: #eef9ff !important;
}
.badge.text-bg-success {
  background-color: rgba(66, 199, 164, 0.20) !important;
  border-color: rgba(66, 199, 164, 0.52);
  color: #effffb !important;
}
.badge.text-bg-warning {
  background-color: rgba(223, 176, 76, 0.20) !important;
  border-color: rgba(223, 176, 76, 0.52);
  color: #fff3cc !important;
}
.badge.text-bg-danger {
  background-color: rgba(226, 102, 111, 0.20) !important;
  border-color: rgba(226, 102, 111, 0.52);
  color: #fff0f1 !important;
}
.badge.text-bg-secondary {
  background-color: rgba(84, 113, 136, 0.28) !important;
  border-color: rgba(84, 113, 136, 0.52);
  color: #deebf5 !important;
}
.badge.text-bg-light {
  background-color: rgba(12, 40, 57, 0.92) !important;
  border-color: rgba(155, 233, 255, 0.28);
  color: #f0fbff !important;
}
.badge.text-bg-dark {
  background-color: rgba(4, 18, 28, 0.88) !important;
  border-color: var(--sc-line);
  color: #d7e6ef !important;
}
.btn-outline-secondary {
  --bs-btn-color: #cfe2ee;
  --bs-btn-border-color: var(--sc-line-strong);
  --bs-btn-hover-bg: rgba(84, 173, 247, 0.12);
  --bs-btn-hover-border-color: var(--sc-cyan);
  --bs-btn-hover-color: #fff;
}
.btn-success {
  --bs-btn-bg: var(--sc-success);
  --bs-btn-border-color: var(--sc-success);
  --bs-btn-hover-bg: #45b89e;
  --bs-btn-hover-border-color: #45b89e;
  --bs-btn-active-bg: #318d79;
  --bs-btn-color: #04121c;
  --bs-btn-hover-color: #04121c;
  --bs-btn-active-color: #04121c;
}
.btn-info {
  --bs-btn-bg: var(--sc-info);
  --bs-btn-border-color: var(--sc-info);
  --bs-btn-hover-bg: #62add6;
  --bs-btn-hover-border-color: #62add6;
  --bs-btn-color: #04121c;
  --bs-btn-hover-color: #04121c;
}
.btn-warning {
  --bs-btn-bg: var(--sc-warning);
  --bs-btn-border-color: var(--sc-warning);
  --bs-btn-hover-bg: #d6a955;
  --bs-btn-hover-border-color: #d6a955;
  --bs-btn-color: #0c0a04;
  --bs-btn-hover-color: #0c0a04;
}
.btn-danger {
  --bs-btn-bg: var(--sc-danger);
  --bs-btn-border-color: var(--sc-danger);
  --bs-btn-hover-bg: #d96f74;
  --bs-btn-hover-border-color: #d96f74;
  --bs-btn-color: #1a0608;
  --bs-btn-hover-color: #1a0608;
}
.btn-outline-primary {
  --bs-btn-color: var(--sc-cyan-bright);
  --bs-btn-border-color: rgba(99, 191, 255, 0.65);
  --bs-btn-hover-bg: var(--sc-cyan);
  --bs-btn-hover-border-color: var(--sc-cyan);
  --bs-btn-hover-color: #04121c;
}
.btn-outline-success {
  --bs-btn-color: #99ebd7;
  --bs-btn-border-color: rgba(66, 199, 164, 0.65);
  --bs-btn-hover-bg: var(--sc-success);
  --bs-btn-hover-border-color: var(--sc-success);
  --bs-btn-hover-color: #04121c;
}
.btn-outline-danger {
  --bs-btn-color: #ffb6ba;
  --bs-btn-border-color: rgba(226, 102, 111, 0.65);
  --bs-btn-hover-bg: var(--sc-danger);
  --bs-btn-hover-border-color: var(--sc-danger);
  --bs-btn-hover-color: #1a0608;
}
.btn-outline-dark {
  --bs-btn-color: #c6deea;
  --bs-btn-border-color: rgba(155, 233, 255, 0.32);
  --bs-btn-hover-bg: rgba(99, 191, 255, 0.14);
  --bs-btn-hover-border-color: var(--sc-cyan);
  --bs-btn-hover-color: #fff;
}

/* Tables */
.app-main .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sc-text);
  --bs-table-border-color: var(--sc-line);
}
.app-main .table td,
.app-main .table th {
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(84, 173, 247, 0.07);
}

/* List groups */
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--sc-line);
  --bs-list-group-color: var(--sc-text);
  --bs-list-group-action-hover-bg: rgba(84, 173, 247, 0.07);
  --bs-list-group-action-hover-color: #fff;
}
.app-main .list-group-item {
  min-width: 0;
}

/* Form controls */
.form-control,
.form-select {
  background-color: rgba(4, 18, 28, 0.6);
  border-color: var(--sc-line);
  color: var(--sc-text);
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(4, 18, 28, 0.8);
  border-color: var(--sc-cyan);
  box-shadow: 0 0 0 0.2rem rgba(84, 173, 247, 0.2);
  color: var(--sc-text);
}

/* Breadcrumb + misc */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--sc-muted);
}
#dashboard-alert-region {
  min-height: 0;
}
.dashboard-target-title,
.dashboard-target-error {
  max-width: 18rem;
}

/* Cyan scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(84, 173, 247, 0.4) transparent;
}