/* ╔══════════════════════════════════════════════════════════════╗
   ║   USS HOMELAB NCC-2026 — LCARS INTERFACE SYSTEM v2.026     ║
   ║   LIBRARY COMPUTER ACCESS AND RETRIEVAL SYSTEM             ║
   ╚══════════════════════════════════════════════════════════════╝ */

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

/* ═══════════════════════════════════════════════
   BASE — DEEP SPACE BACKGROUND
═══════════════════════════════════════════════ */

html, body {
  background-color: #030303 !important;
}

body {
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif !important;
}

[class*="bg-white"] {
  background-color: #0d1117 !important;
}
[class*="bg-gray-100"], [class*="bg-zinc-100"], [class*="bg-slate-100"] {
  background-color: #0d1117 !important;
}

/* ═══════════════════════════════════════════════
   LCARS SECTION HEADERS — ORANGE PILL BAR
═══════════════════════════════════════════════ */

.service-group-name {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: #000000 !important;
  background: linear-gradient(90deg, #FF9900 0%, #FFB300 80%, #CC7700 100%) !important;
  padding: 5px 24px 5px 20px !important;
  border-radius: 18px 0 0 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  min-height: 28px !important;
  animation: lcars-pulse 4s ease-in-out infinite !important;
}

@keyframes lcars-pulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 3px 0 14px rgba(255,153,0,0.35); }
}

/* Collapse arrow — amber tint */
button svg { color: #FF9900 !important; opacity: 0.5 !important; }

/* ═══════════════════════════════════════════════
   SERVICES GROUP — LEFT ACCENT BAR
═══════════════════════════════════════════════ */

.services-group {
  border-left: 3px solid rgba(255,153,0,0.25) !important;
  padding-left: 4px !important;
}

/* ═══════════════════════════════════════════════
   SERVICE CARDS — DARK PANEL STYLE
═══════════════════════════════════════════════ */

.service-card {
  background: rgba(10,15,25,0.97) !important;
  border: 1px solid rgba(255,153,0,0.18) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.service-card:hover {
  background: rgba(20,28,45,0.97) !important;
  border-color: rgba(255,153,0,0.55) !important;
  box-shadow: 0 0 12px rgba(255,153,0,0.12) !important;
}

/* TRICORDER SCANLINE — sweeps on hover */
.service-card::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: 0 !important; right: 0 !important;
  height: 50% !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,153,0,0.03) 35%,
    rgba(255,153,0,0.07) 50%,
    rgba(255,153,0,0.03) 65%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}

.service-card:hover::after {
  animation: scanline 0.75s linear forwards !important;
}

@keyframes scanline {
  0%   { top: -50%; }
  100% { top: 110%; }
}

/* Service name */
.service-title a {
  color: #FFCC88 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.service-title a:hover { color: #FF9900 !important; }

/* Description */
.service-card p[class*="text-xs"],
.service-card p.text-theme-500 {
  color: #664422 !important;
  font-size: 0.67rem !important;
}

/* Widget numbers */
.service-card [class*="text-theme-200"],
.service-card [class*="text-theme-300"] { color: #FF9900 !important; }
.service-card [class*="text-theme-400"],
.service-card [class*="text-theme-500"] { color: #CC7700 !important; }
.service-card [class*="border-t"]       { border-color: rgba(255,153,0,0.14) !important; }

/* ═══════════════════════════════════════════════
   TOP HEADER / TITLE
═══════════════════════════════════════════════ */

p[class*="text-xl"], h1[class*="text"] {
  font-family: 'Orbitron', sans-serif !important;
  color: #FF9900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
}

/* Info widgets (CPU, memory, clock, weather) */
[class*="information-widget"] {
  background: rgba(10,15,25,0.95) !important;
  border: 1px solid rgba(255,153,0,0.22) !important;
  border-radius: 3px !important;
}
[class*="information-widget"] * { color: #FFCC88 !important; font-family: 'Rajdhani', sans-serif !important; }
[class*="information-widget"] [class*="text-theme-300"],
[class*="information-widget"] [class*="text-theme-200"] { color: #FF9900 !important; }

/* ═══════════════════════════════════════════════
   SEARCH BAR
═══════════════════════════════════════════════ */

input[type="text"], input[type="search"], input {
  background: #0a0f19 !important;
  border: 1px solid rgba(255,153,0,0.5) !important;
  border-radius: 3px !important;
  color: #FFCC88 !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
}
input:focus {
  border-color: #FF9900 !important;
  box-shadow: 0 0 8px rgba(255,153,0,0.3) !important;
  outline: none !important;
}
input::placeholder { color: #553311 !important; }

/* ═══════════════════════════════════════════════
   BOOKMARKS — BLUE LCARS PANELS
═══════════════════════════════════════════════ */

[class*="bookmark"] h2,
[class*="bookmarks"] h2 {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: #000 !important;
  background: #6699FF !important;
  padding: 4px 14px 4px 12px !important;
  border-radius: 14px 0 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

[class*="bookmark"] a {
  background: rgba(10,15,35,0.95) !important;
  border: 1px solid rgba(102,153,255,0.22) !important;
  border-radius: 3px !important;
  color: #AABBFF !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
[class*="bookmark"] a:hover {
  border-color: rgba(102,153,255,0.6) !important;
  color: #6699FF !important;
  box-shadow: 0 0 8px rgba(102,153,255,0.15) !important;
}

/* ═══════════════════════════════════════════════
   STATUS INDICATORS
═══════════════════════════════════════════════ */

[class*="bg-green"]  { background-color: #00CC66 !important; box-shadow: 0 0 5px #00CC66 !important; }
[class*="bg-red"]    { background-color: #CC2222 !important; box-shadow: 0 0 5px #CC2222 !important; }
[class*="bg-yellow"] { background-color: #FFAA00 !important; box-shadow: 0 0 5px #FFAA00 !important; }

/* ═══════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════ */

::-webkit-scrollbar              { width: 5px; height: 5px; background: #000; }
::-webkit-scrollbar-thumb        { background: #FF9900; border-radius: 3px; }
::-webkit-scrollbar-track        { background: #030303; }

/* ═══════════════════════════════════════════════
   TICKER ANIMATION (driven by JS-injected element)
═══════════════════════════════════════════════ */

@keyframes lcars-tick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════
   BOOT SEQUENCE ANIMATIONS
═══════════════════════════════════════════════ */

@keyframes lcars-bootbar {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}

/* ═══════════════════════════════════════════════
   RED ALERT MODE  (class toggled by JS on body)
═══════════════════════════════════════════════ */

body.lcars-red-alert {
  animation: ra-flash 0.75s ease-in-out infinite !important;
}

@keyframes ra-flash {
  0%, 100% { background-color: #030303 !important; }
  50%       { background-color: #180000 !important; }
}

/* Big RED ALERT text overlay */
body.lcars-red-alert::before {
  content: '⚠  RED ALERT  ⚠';
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 900;
  color: #FF0000;
  letter-spacing: 0.25em;
  text-shadow: 0 0 40px rgba(255,0,0,0.9), 0 0 80px rgba(255,0,0,0.5);
  z-index: 9990;
  pointer-events: none;
  animation: ra-text 0.75s ease-in-out infinite;
}

@keyframes ra-text {
  0%, 100% { opacity: 1;   text-shadow: 0 0 40px rgba(255,0,0,0.9), 0 0 80px rgba(255,0,0,0.5); }
  50%       { opacity: 0.2; text-shadow: none; }
}

/* Headers turn red */
body.lcars-red-alert .service-group-name {
  background: linear-gradient(90deg, #CC0000, #FF2200, #CC0000) !important;
  animation: ra-header 0.75s ease-in-out infinite !important;
}

@keyframes ra-header {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Cards get red border glow */
body.lcars-red-alert .service-card {
  border-color: rgba(255,0,0,0.45) !important;
  box-shadow: 0 0 8px rgba(255,0,0,0.2) !important;
}

body.lcars-red-alert .services-group {
  border-left-color: rgba(255,0,0,0.4) !important;
}

/* Red alert ticker stripe */
body.lcars-red-alert #lcars-ticker {
  background: #1a0000 !important;
  border-top-color: rgba(255,0,0,0.5) !important;
}

body.lcars-red-alert #lcars-ticker-inner {
  color: #FF4444 !important;
}