@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  --bg: #080808;
  /* PWA safe area — iOS notch / Dynamic Island / home indicator */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bg-soft: #111111;
  --card: #151515;
  --text: #ffffff;
  --text-muted: #888888;
  --accent: #aaff00;
  --accent-soft: rgba(170,255,0,0.1);
  --border: rgba(170,255,0,0.2);
  --silver: #c0c0c0;
  --steel: #2a2a2a;
  --danger: #ff4444;
  --warning: #ffaa00;
}

/* === GLOBAL FONT === */
* { box-sizing: border-box; }

body {
  font-family: 'Barlow', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3 {
  font-family: 'Bebas Neue', 'Barlow', sans-serif;
  letter-spacing: 0.04em;
}

label,
.label,
.text-xs.font-semibold.uppercase,
.text-sm.font-semibold.uppercase {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
}

/* === APP HEADER === */
header,
header.fixed {
  background-color: #080808 !important;
  border-bottom: 1px solid rgba(170,255,0,0.1) !important;
  color: #ffffff !important;
}

/* ═══ PWA SAFE AREA — iOS notch / Dynamic Island ═══════════════════════
   env(safe-area-inset-top) is ~44px on iPhone X/11/12/13/14, ~59px on
   Dynamic Island models. Falls back to 0px on all other platforms.
   Header padding extends the background behind the status bar;
   sidebar top/height adjust to match; main padding clears the taller header.
   ═══════════════════════════════════════════════════════════════════════ */

/* Header: background fills behind status bar, content pushed below notch */
header.fixed,
header[class*="top-0"] {
  padding-top: var(--safe-top) !important;
}

/* Sidebar: starts below the now-taller header, fills remaining viewport */
aside#sidebar {
  top:    calc(3.5rem + var(--safe-top))  !important;
  height: calc(100vh - 3.5rem - var(--safe-top)) !important;
}

/* Fix 2 — Sidebar scroll: nav becomes scrollable so Log Out is always reachable */
aside#sidebar nav {
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;           /* required for flex child to scroll */
  padding-bottom: calc(1rem + var(--safe-bottom)) !important;
  scrollbar-width: none;              /* Firefox: hide scrollbar visually */
}
aside#sidebar nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Main content: add safe-top to whatever top padding is set by Tailwind class */
main[class*="pt-14"] { padding-top: calc(3.5rem + var(--safe-top)) !important; }
main[class*="pt-16"] { padding-top: calc(4rem   + var(--safe-top)) !important; }
main[class*="pt-20"] { padding-top: calc(5rem   + var(--safe-top)) !important; }
main[class*="pt-24"] { padding-top: calc(6rem   + var(--safe-top)) !important; }

/* Fixed bottom bars (crew clock bar, day timer strip, etc.) */
.fixed-bottom-bar,
.clock-bar {
  padding-bottom: var(--safe-bottom) !important;
}

/* ============================================
   SIDEBAR — clean operator grade
   Black background, #aaff00 text on hover/active
   Active page: left border accent only, no fill
   ============================================ */
aside#sidebar {
  background-color: #0d0d0d !important;
  border-right: 1px solid rgba(170,255,0,0.08) !important;
}

/* Base nav link — dim text, transparent bg */
aside#sidebar nav a {
  display: block;
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  padding: 7px 12px 7px 14px !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 6px 6px 0 !important;
  transition: color 0.15s, border-left-color 0.15s !important;
}

/* Hover — accent text, subtle left border */
aside#sidebar nav a:hover {
  color: #aaff00 !important;
  background: transparent !important;
  border-left-color: rgba(170,255,0,0.35) !important;
}

/* Active page — full accent left border, bright text, no fill */
aside#sidebar nav a.bg-green-700,
aside#sidebar nav a[class*="bg-green-7"],
aside#sidebar nav a.active {
  color: #aaff00 !important;
  background: transparent !important;
  border-left-color: #aaff00 !important;
}

/* Divider line in sidebar */
aside#sidebar hr,
aside#sidebar .border-gray-600,
aside#sidebar .border-gray-700 {
  border-color: rgba(170,255,0,0.08) !important;
  margin: 6px 0 !important;
}

/* Sub-nav item (Crew View, etc.) */
aside#sidebar nav a.text-gray-400 {
  color: rgba(255,255,255,0.3) !important;
  font-size: 0.75rem !important;
}

aside#sidebar nav a.text-gray-400:hover {
  color: #aaff00 !important;
}

/* === CARD GLOW === */
.card-glow {
  box-shadow: 0 0 40px rgba(170,255,0,0.08);
}

/* === GS-CARD COMPONENT === */
.gs-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

/* === ALL CARD/WHITE BACKGROUNDS === */
.bg-white, .bg-gray-50, .bg-gray-100,
section.bg-white, div.bg-white {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: rgba(170,255,0,0.12) !important;
}

/* Gray card variants */
.bg-gray-200, .bg-gray-300 {
  background-color: #1e1e1e !important;
  color: var(--text-muted) !important;
}

/* Dark card sections */
.bg-gray-900:not(header):not(aside) {
  background-color: var(--card) !important;
  color: var(--text) !important;
}

.bg-gray-800:not(aside):not(#sidebar) {
  background-color: #111111 !important;
  color: var(--text) !important;
}

/* === BUTTONS (ELEMENT-LEVEL) === */
button.bg-green-600, button.bg-green-700,
button.bg-blue-600, button.bg-blue-700, button.bg-blue-500,
button.bg-blue-800 {
  background-color: var(--accent) !important;
  color: #080808 !important;
  font-weight: 700;
}

button.bg-green-600:hover, button.bg-green-700:hover,
button.bg-blue-600:hover, button.bg-blue-700:hover {
  background-color: #c8ff33 !important;
  color: #080808 !important;
}

/* Link-as-button */
a.bg-green-600, a.bg-green-700,
a.bg-blue-600, a.bg-blue-700, a.bg-blue-500 {
  background-color: var(--accent) !important;
  color: #080808 !important;
  font-weight: 700;
}

a.bg-green-600:hover, a.bg-green-700:hover,
a.bg-blue-600:hover, a.bg-blue-700:hover {
  background-color: #c8ff33 !important;
  color: #080808 !important;
}

/* Span badge with green background (e.g., tier badge) */
span.bg-green-600, span.bg-green-700, span.bg-green-500 {
  background-color: rgba(170,255,0,0.12) !important;
  color: #aaff00 !important;
  border: 1px solid rgba(170,255,0,0.25) !important;
}

/* Dark ghost buttons */
button.bg-gray-900:not(header),
button.bg-gray-800,
button[class*="bg-gray-9"],
button[class*="bg-gray-8"] {
  background-color: #1a1a1a !important;
  color: var(--text) !important;
  border: 1px solid rgba(170,255,0,0.2) !important;
}

/* Subtle gray buttons */
button.bg-gray-100, button.bg-gray-200,
button.border.px-4 {
  background-color: #1e1e1e !important;
  color: var(--text-muted) !important;
  border-color: rgba(170,255,0,0.15) !important;
}

/* Danger buttons */
button.bg-red-50, button.bg-red-100,
button.bg-red-600, button.bg-red-700 {
  background-color: rgba(255,68,68,0.12) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(255,68,68,0.3) !important;
}

button.bg-red-600:hover, button.bg-red-700:hover {
  background-color: rgba(255,68,68,0.2) !important;
}

/* Log Out button in sidebar */
aside#sidebar nav a#logoutBtn,
aside#sidebar nav a[class*="hover:bg-red"] {
  color: rgba(255,68,68,0.6) !important;
}

aside#sidebar nav a#logoutBtn:hover,
aside#sidebar nav a[class*="hover:bg-red"]:hover {
  color: var(--danger) !important;
  border-left-color: rgba(255,68,68,0.4) !important;
}

/* === ACTIVE FILTER TABS === */
button.bg-green-600.text-white[data-filter],
button.bg-green-600.text-white[data-stage],
button.bg-blue-600.text-white[data-filter] {
  background-color: var(--accent) !important;
  color: #080808 !important;
}

/* Inactive filter tabs */
button.bg-gray-200.text-gray-700[data-filter],
button.bg-gray-200.text-gray-700[data-stage],
button.bg-white.text-gray-700[data-filter] {
  background-color: #1a1a1a !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(170,255,0,0.1) !important;
}

button.bg-gray-200.text-gray-700[data-filter]:hover,
button.bg-gray-200.text-gray-700[data-stage]:hover {
  background-color: rgba(170,255,0,0.1) !important;
  color: var(--accent) !important;
}

/* === BTN UTILITY CLASSES === */
.btn-primary {
  background: var(--accent);
  color: #080808;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn-primary:hover {
  background: #c8ff33;
}

.btn-secondary {
  background: transparent;
  color: var(--silver);
  border: 1px solid var(--silver);
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: rgba(170,255,0,0.08);
  border-color: var(--accent);
  color: var(--accent);
}

/* === TEXT COLORS === */
.text-green-700, .text-green-600, .text-green-500 {
  color: var(--accent) !important;
}

.text-blue-700, .text-blue-600, .text-blue-500 {
  color: var(--accent) !important;
}

.text-gray-900, .text-gray-800, .text-gray-700 {
  color: var(--text) !important;
}

.text-gray-600, .text-gray-500, .text-gray-400 {
  color: var(--text-muted) !important;
}

.text-red-600, .text-red-700 {
  color: var(--danger) !important;
}

.text-amber-600, .text-amber-700, .text-amber-800 {
  color: var(--warning) !important;
}

/* === BORDERS === */
.border-gray-200, .border-gray-300, .border-gray-200\/50 {
  border-color: rgba(170,255,0,0.1) !important;
}

.border-gray-600, .border-gray-700, .border-gray-800 {
  border-color: rgba(170,255,0,0.12) !important;
}

.border-blue-500, .border-blue-600, .border-blue-700 {
  border-color: var(--accent) !important;
}

.border-green-500, .border-green-600 {
  border-color: var(--accent) !important;
}

hr {
  border-color: rgba(170,255,0,0.1) !important;
}

/* === SHADOWS === */
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
}

/* === MODALS === */
.fixed.inset-0 > .bg-white,
.fixed.inset-0 > div > .bg-white,
div[id$="Modal"] > .bg-white,
div[id$="Modal"] div.bg-white,
div[id*="modal"] > .bg-white,
div[id*="Panel"] .bg-white,
div[id*="panel"] .bg-white {
  background-color: var(--card) !important;
  color: var(--text) !important;
}

/* === TABLES === */
table { width: 100%; border-collapse: collapse; }
thead tr { border-bottom: 1px solid rgba(170,255,0,0.15); }
tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
th { color: var(--text-muted); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; }
td { color: var(--text); }

/* === INPUT FIELDS === */
input, textarea, select {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid rgba(170,255,0,0.2) !important;
  border-radius: 6px;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(170,255,0,0.1) !important;
}

input[disabled], textarea[disabled], select[disabled],
input.bg-gray-100, textarea.bg-gray-100 {
  background-color: #111111 !important;
  color: var(--text-muted) !important;
  opacity: 0.7;
}

/* === BADGE / STATUS CHIPS === */
.rounded-full.bg-green-100, .bg-green-100 {
  background-color: rgba(170,255,0,0.12) !important;
  color: var(--accent) !important;
}

.rounded-full.bg-blue-100, .bg-blue-100 {
  background-color: rgba(170,255,0,0.1) !important;
  color: var(--accent) !important;
}

.rounded-full.bg-yellow-100, .bg-yellow-100,
.rounded-full.bg-amber-100, .bg-amber-100 {
  background-color: rgba(255,170,0,0.12) !important;
  color: var(--warning) !important;
}

.rounded-full.bg-red-100, .bg-red-100 {
  background-color: rgba(255,68,68,0.12) !important;
  color: var(--danger) !important;
}

.rounded-full.bg-gray-100, .bg-gray-100.rounded-full {
  background-color: #222222 !important;
  color: var(--text-muted) !important;
}

/* === NOTICE / ALERT BANNERS === */
.bg-amber-50, .bg-yellow-50 {
  background-color: rgba(255,170,0,0.08) !important;
  color: var(--warning) !important;
  border-color: rgba(255,170,0,0.2) !important;
}

.bg-red-50 {
  background-color: rgba(255,68,68,0.08) !important;
  color: var(--danger) !important;
  border-color: rgba(255,68,68,0.2) !important;
}

.bg-green-50 {
  background-color: rgba(170,255,0,0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(170,255,0,0.2) !important;
}

.bg-blue-50 {
  background-color: rgba(170,255,0,0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(170,255,0,0.15) !important;
}

/* === PROGRESS BARS === */
.bg-green-200 { background-color: rgba(170,255,0,0.15) !important; }
.bg-green-500, .bg-green-400 { background-color: var(--accent) !important; }
.bg-yellow-400, .bg-amber-400, .bg-amber-500 { background-color: var(--warning) !important; }
.bg-red-500, .bg-red-400 { background-color: var(--danger) !important; }