/* QuantumStream Fleet Ops Console - Design System */
/* Dark theme inspired by Volvo aesthetic */

:root {
  /* Primary Text & Background */
  --ink: #e7eefc;
  --ink-muted: #b6c5e3;
  --bg: #0b1020;
  --panel: #111a2e;
  --panel-elev: #162036;
  --line: #2d3e5f;
  
  /* Accent Colors */
  --accent: #7ab7ff;
  --accent-2: #3ec9d6;
  
  /* Status Colors */
  --good: #5ee6a8;
  --warn: #ffd27a;
  --bad: #ff7a7a;
  --info: #9ab0d4;
  
  /* Layout */
  --radius: 8px;
  --shadow: 0 6px 18px rgba(0,0,0,.28);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

h1 { font-size: 48px; font-weight: 600; margin-bottom: var(--spacing-lg); }
h2 { font-size: 36px; font-weight: 600; margin-bottom: var(--spacing-md); }
h3 { font-size: 24px; font-weight: 600; margin-bottom: var(--spacing-md); }
h4 { font-size: 18px; font-weight: 600; margin-bottom: var(--spacing-sm); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--accent-2);
}

/* ============================================
   GLOBAL SCROLLBAR STYLING - Modern & Translucent
   ============================================ */

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 183, 255, 0.15) transparent;
}

/* Webkit (Chrome, Safari, Edge) scrollbar styling */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(122, 183, 255, 0.15);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.3s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 183, 255, 0.3);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
  background: rgba(122, 183, 255, 0.4);
  background-clip: padding-box;
}

/* Scrollbar corner (where horizontal and vertical scrollbars meet) */
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Specific styling for dark panels/cards */
.card::-webkit-scrollbar-thumb,
.card-modern::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb,
[class*="panel"]::-webkit-scrollbar-thumb {
  background: rgba(122, 183, 255, 0.12);
}

.card::-webkit-scrollbar-thumb:hover,
.card-modern::-webkit-scrollbar-thumb:hover,
.panel::-webkit-scrollbar-thumb:hover,
[class*="panel"]::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 183, 255, 0.25);
}

/* Ensure scrollbar is more visible on hover for critical areas */
#prediction-list-panel:hover::-webkit-scrollbar-thumb,
#prediction-detail-panel:hover::-webkit-scrollbar-thumb,
#prediction-context-panel:hover::-webkit-scrollbar-thumb {
  background: rgba(122, 183, 255, 0.25);
}

/* Smooth transitions for scrollbar appearance */
*::-webkit-scrollbar-thumb {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  outline: none;
}

/* Focus styles for accessibility */
a:focus, button:focus, input:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Utility classes */
.hidden { display: none !important; }
.text-muted { color: var(--ink-muted); }
.text-good { color: var(--good); }
.text-warn { color: var(--warn); }
.text-bad { color: var(--bad); }