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

/* === BRAND TOKENS === */
:root {
  --it-black:    #050810;
  --it-dark:     #080c14;
  --it-surface:  #0d1320;
  --it-card:     #111923;
  --it-border:   #1a2844;
  --it-blue:     #1b6bf8;
  --it-blue-l:   #3d87ff;
  --it-green:    #00d68f;
  --it-red:      #ff4757;
  --it-amber:    #ffb800;
  --it-purple:   #7c5cfc;
  --it-text:     #e8edf5;
  --it-muted:    #7b8ea8;
  --it-faint:    #3f5068;
  --font-brand:  "Orbitron", monospace;
  --font-mono:   "Space Mono", monospace;
  --font-ui:     "DM Sans", sans-serif;
}

/* === GLOBAL === */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-ui); background: var(--it-dark); color: var(--it-text); -webkit-font-smoothing: antialiased; }

/* === TOP PANEL / NAVBAR === */
#top-panel {
  background: var(--it-black) !important;
  border-bottom: 1px solid var(--it-border) !important;
  border-radius: 0 !important;
  padding: 8px 20px !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* === SIDEBAR === */
#sidebar {
  background: var(--it-black) !important;
  border-right: 1px solid var(--it-border) !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
  margin-left: 0 !important;
  width: 220px !important;
  top: 52px !important;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar nav links - kill all Tailwind hover states */
#sidebar a,
#sidebar .magic-navigation {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  margin: 1px 8px !important;
  border-radius: 8px !important;
  font-family: var(--font-ui) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--it-muted) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  width: auto !important;
  box-shadow: none !important;
  transform: none !important;
}

#sidebar a:hover,
#sidebar .magic-navigation:hover {
  background: rgba(27,107,248,0.08) !important;
  color: var(--it-blue-l) !important;
  transform: none !important;
}

#sidebar a.ts-gray-1 {
  background: rgba(27,107,248,0.12) !important;
  color: var(--it-blue) !important;
  border-left: 2px solid var(--it-blue) !important;
}

/* Sidebar icons */
#sidebar svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

/* Sidebar section labels */
.it-nav-section {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--it-faint);
  padding: 14px 16px 4px;
  display: block;
}

.it-nav-divider {
  height: 1px;
  background: var(--it-border);
  margin: 8px 16px;
}

/* Sidebar widths remove Tailwind w-3/4 */
#sidebar .w-3\/4 { width: 100% !important; }
#sidebar .mt-3 { margin-top: 0 !important; }

/* === MAIN CONTENT AREA === */
.min-h-screen.w-full.md\:flex { margin-top: 52px !important; }
.min-h-screen.w-full.md\:flex > div:last-child { flex: 1; padding: 24px; }

/* === CARDS === */
.ts-gray-1, .ts-gray-2, .rescron-card {
  background: var(--it-card) !important;
  border: 1px solid var(--it-border) !important;
  border-radius: 12px !important;
  color: var(--it-text) !important;
}

/* === BUTTONS === */
.bg-purple-500, .bg-purple-600 { background: var(--it-blue) !important; }
.hover\:bg-purple-500:hover, .hover\:bg-purple-600:hover { background: var(--it-blue-l) !important; }
.text-purple-500, .text-purple-600, .text-purple-700 { color: var(--it-blue) !important; }
.border-purple-500 { border-color: var(--it-blue) !important; }
.hover\:text-purple-700:hover { color: var(--it-blue-l) !important; }
.hover\:scale-110:hover { transform: none !important; }

/* === INPUTS === */
input:not([type=range]):not([type=checkbox]):not([type=radio]),
select, textarea,
.theme1-text-input {
  background: var(--it-surface) !important;
  border: 1px solid var(--it-border) !important;
  border-radius: 8px !important;
  color: var(--it-text) !important;
  font-family: var(--font-ui) !important;
  font-size: 16px !important;
  padding: 10px 14px !important;
  outline: none !important;
  transition: border-color 0.15s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--it-blue) !important;
  box-shadow: 0 0 0 3px rgba(27,107,248,0.1) !important;
}
input::placeholder, textarea::placeholder { color: var(--it-faint) !important; }

/* === TABLES === */
table { width: 100%; border-collapse: collapse; }
th {
  background: var(--it-surface) !important;
  color: var(--it-faint) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--it-border) !important;
  text-align: left !important;
}
td {
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(26,40,68,0.5) !important;
  color: var(--it-text) !important;
  font-size: 16px !important;
}
tr:hover td { background: rgba(27,107,248,0.04) !important; }

/* === BADGES === */
.badge, [class*="rounded-full"][class*="text-xs"] {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}

.text-green-500, .text-green-400 { color: var(--it-green) !important; }
.text-red-500, .text-red-400 { color: var(--it-red) !important; }
.bg-green-500 { background: rgba(0,214,143,0.12) !important; color: var(--it-green) !important; }
.bg-red-500 { background: #dc2626 !important; }

/* Bg overrides */
.bg-slate-800, .bg-slate-900 { background: var(--it-surface) !important; }
.bg-slate-700 { background: var(--it-card) !important; }
.border-slate-700, .border-slate-800 { border-color: var(--it-border) !important; }
.text-white { color: var(--it-text) !important; }
.text-gray-400, .text-gray-500 { color: var(--it-muted) !important; }
.text-gray-600 { color: var(--it-faint) !important; }

/* === PAGE TITLE === */
h1.capitalize.font-extrabold span,
.font-extrabold.capitalize span.border-b-2 {
  font-family: var(--font-brand) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--it-text) !important;
  border-bottom: 1px solid var(--it-blue) !important;
  text-transform: uppercase !important;
}

/* === FOOTER === */
footer { background: var(--it-black) !important; border-top: 1px solid var(--it-border) !important; }
footer .text-gray-500 { color: var(--it-faint) !important; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--it-dark); }
::-webkit-scrollbar-thumb { background: var(--it-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(27,107,248,0.5); }

/* === INLINE RANGE SLIDER === */
input[type=range] { -webkit-appearance: none; height: 3px; background: var(--it-border); border-radius: 2px; outline: none; width: 100%; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--it-blue); cursor: pointer; }


/* HOMEPAGE SECTION FIX */
section, section * { color: inherit; }
.it-section-dark { background: #060a12 !important; color: #e8edf5 !important; }
section[style] { color: #e8edf5; }
section[style] h1, section[style] h2, section[style] h3 { color: #e8edf5; }
section[style] p { color: #7b8ea8; }
/* Force light text on dark backgrounds */
[style*='background:#060a12'], [style*='background: #060a12'],
[style*='background:#070c15'], [style*='background: #070c15'],
[style*='background:#0a0f1a'], [style*='background: #0a0f1a'] { color: #e8edf5; }


/* === HOMEPAGE SECTION VISIBILITY FIX ===
   Ensures all homepage section content is visible */
section, .section { color: #e8edf5 !important; }
section h1, section h2, section h3, section h4, section p,
section span, section div, section a { color: inherit; }
section h1 { color: #e8edf5 !important; }
section h2 { color: #e8edf5 !important; }
section p { color: #7b8ea8 !important; }
section .text-it-muted { color: #7b8ea8 !important; }
section .text-gray-800, section .text-gray-900, section .text-dark { color: #e8edf5 !important; }
section .font-bold { color: inherit; }
[style*='background:#060a12'] *, [style*='background:#070c15'] *,
[style*='background:#0a0f1a'] *, [style*='background:#080b10'] * { color: inherit; }