/* ============================================
   GENIE THEME - CENTRALIZED THEME SYSTEM
   ============================================
   ALL PAGES MUST INHERIT FROM THIS FILE
   DO NOT USE WHITE COLORS EXCEPT FOR TEXT
   ============================================ */

/* ===== ROOT TRANSITIONS ===== */
:root {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* ===== DARK THEME (DEFAULT) ===== */
:root,
:root[data-theme="dark"] {
  /* ===== PRIMARY COLORS ===== */
  --genie-bg: #050A14;
  /* Main page background */
  --genie-panel: #111827;
  /* Card/Bar/Panel background */
  --genie-panel-transparent: rgba(17, 24, 39, 0.9);
  /* Transparent panel (for login, modals) */
  --genie-border: #374151;
  /* Borders and dividers */
  --genie-input-bg: #1F2937;
  /* Input field background */
  
  /* ===== ACCENT COLORS ===== */
  --genie-cyan: #00F0FF;
  /* Primary accent - Icons, highlights, links */
  --cyan-rgba-1: rgba(0, 240, 255, 0.1);
  --cyan-rgba-2: rgba(0, 240, 255, 0.2);
  --cyan-rgba-3: rgba(0, 240, 255, 0.3);
  --cyan-rgba-4: rgba(0, 240, 255, 0.4);
  --cyan-rgba-5: rgba(0, 240, 255, 0.5);
  --cyan-rgba-6: rgba(0, 240, 255, 0.6);
  --cyan-rgba-7: rgba(0, 240, 255, 0.7);
  /* RGBA values for use in shadows and effects */
  --genie-gold: #FFD700;
  /* Buttons, CTAs */
  --genie-gold-gradient: linear-gradient(180deg, #FFD700 0%, #E5C100 100%);
  --genie-gold-gradient-horizontal: linear-gradient(90deg, #FFC800, #FFD700);
  
  /* ===== TEXT COLORS ===== */
  --text-primary: #ffffff;
  /* Main text color - ONLY WHITE ALLOWED */
  --text-secondary: #9ca3af;
  /* Secondary text, muted */
  --text-label: #94a3b8;
  /* Form labels, captions */
  --text-muted: rgba(255, 255, 255, 0.7);
  /* Muted text with opacity */
  --text-placeholder: rgba(255, 255, 255, 0.5);
  /* Placeholder text */
  
  /* ===== SHADOWS & EFFECTS ===== */
  --shadow-cyan: 0 0 30px rgba(0, 240, 255, 0.15);
  --shadow-cyan-strong: 0 0 40px rgba(0, 240, 255, 0.6);
  --shadow-cyan-glow: 0 0 15px rgba(0, 240, 255, 0.5);
  --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.1);
  --shadow-none: none;
  
  /* ===== BORDER RADIUS ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 25px;
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
}

/* ===== BRIGHT THEME ===== */
:root[data-theme="bright"] {
  /* ===== PRIMARY COLORS ===== */
  --genie-bg: #E2E8F0;
  /* A slightly deeper, cooler grey */
  --genie-panel: #F8FAFC;
  /* A very soft grey-white, not blindingly bright */
  --genie-panel-transparent: rgba(248, 250, 252, 0.9);
  /* Transparent panel (for login, modals) */
  --genie-border: #CBD5E1;
  /* Subtle grey border */
  --genie-input-bg: #F1F5F9;
  /* Matches the old background, soft and readable */
  
  /* ===== ACCENT COLORS ===== */
  --genie-cyan: #1E3A8A;
  /* CHANGE this to Navy Blue. This makes the icons and active borders Navy, not Gold */
  --cyan-rgba-1: rgba(30, 58, 138, 0.1);
  --cyan-rgba-2: rgba(30, 58, 138, 0.2);
  --cyan-rgba-3: rgba(30, 58, 138, 0.3);
  --cyan-rgba-4: rgba(30, 58, 138, 0.4);
  --cyan-rgba-5: rgba(30, 58, 138, 0.5);
  --cyan-rgba-6: rgba(30, 58, 138, 0.6);
  --cyan-rgba-7: rgba(30, 58, 138, 0.7);
  /* RGBA values for use in shadows and effects - Navy Blue */
  --genie-gold: #FFD700;
  /* Keep the Filter button Gold */
  --genie-gold-gradient: linear-gradient(180deg, #FFD700 0%, #E5C100 100%);
  --genie-gold-gradient-horizontal: linear-gradient(90deg, #FFC800, #FFD700);
  
  /* ===== TEXT COLORS ===== */
  --text-primary: #0F172A;
  /* Deep Navy Blue for headers/titles */
  --text-secondary: #334155;
  /* Slate/Greyish Navy for labels */
  --text-label: #334155;
  /* Form labels, captions - Slate/Greyish Navy */
  --text-muted: rgba(0, 0, 0, 0.7);
  /* Standard body text - black with opacity */
  --text-placeholder: rgba(0, 0, 0, 0.5);
  /* Placeholder text - black with opacity */
  
  /* ===== SHADOWS & EFFECTS ===== */
  --shadow-cyan: 0 0 30px rgba(30, 58, 138, 0.3);
  /* Soft Navy Glow */
  --shadow-cyan-strong: 0 0 40px rgba(30, 58, 138, 0.6);
  /* Strong Navy Glow */
  --shadow-cyan-glow: 0 0 15px rgba(30, 58, 138, 0.5);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  /* Soft day shadow */
  --shadow-none: none;
  
  /* ===== BORDER RADIUS ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 25px;
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
}

/* ===== SMOOTH THEME TRANSITIONS ===== */
*,
*::before,
*::after {
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* ===== GLOBAL BACKGROUND ===== */
body {
  background-color: var(--genie-bg) !important;
  color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif;
}

/* ===== THEME CONTAINER ===== */
.theme-container {
  background-color: var(--genie-bg);
  color: var(--text-primary);
  min-height: 100vh;
}

/* ===== CARDS & PANELS ===== */
.card,
.modern-filter-card,
.bg-white,
.card-body,
form .card {
  background-color: var(--genie-panel) !important;
  background: var(--genie-panel) !important;
  border: 1px solid var(--genie-border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-md) !important;
}

/* ===== INPUT FIELDS ===== */
.form-control,
.form-select,
input[type="text"],
input[type="date"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea,
select {
  background-color: var(--genie-input-bg) !important;
  border: 1px solid var(--genie-border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  color-scheme: dark;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background-color: var(--genie-input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--genie-cyan) !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
  outline: none;
}

.form-control::placeholder {
  color: var(--text-placeholder) !important;
  opacity: 1;
}

/* ===== LABELS ===== */
.form-label,
label {
  color: var(--text-label) !important;
  font-weight: 600 !important;
  margin-bottom: 5px;
}

/* ===== BUTTONS ===== */
.btn-primary,
button[type="submit"],
.btn-login {
  background: var(--genie-gold-gradient) !important;
  color: #000 !important;
  font-weight: 800;
  border: none !important;
  text-transform: uppercase;
  transition: var(--transition-normal);
}

.btn-primary:hover,
button[type="submit"]:hover,
.btn-login:hover {
  background: var(--genie-gold-gradient-horizontal) !important;
  transform: scale(1.05);
}

/* ===== RESTORE CYAN BUTTONS ===== */
.btn-cyan {
  background: linear-gradient(45deg, #00d4ff, #0099cc) !important;
  color: #000 !important; /* dark text on cyan */
  box-shadow: 0 4px 15px rgba(0,212,255,0.4);
  border: none !important;
  font-weight: 600;
  transition: var(--transition-normal);
}

.btn-cyan:hover {
  background: linear-gradient(45deg, #00e5ff, #00aadd) !important;
  box-shadow: 0 6px 20px rgba(0,212,255,0.6);
  transform: scale(1.05);
}

/* ===== RESTORE GOLD LOGIN BUTTON ===== */
.login-gold {
  background: linear-gradient(45deg, #ffd700, #ffed4e) !important;
  color: #000 !important;
  border: none !important;
  font-weight: 800;
  text-transform: uppercase;
  transition: var(--transition-normal);
}

.login-gold:hover {
  background: linear-gradient(45deg, #ffed4e, #ffd700) !important;
  transform: scale(1.05);
}

/* ===== HEADERS & NAVIGATION ===== */
#header,
.header {
  background-color: var(--genie-panel) !important;
  border-color: var(--genie-border) !important;
  border-bottom: 1px solid var(--genie-border) !important;
}

/* ===== SIDEBAR ===== */
#sidebar,
.sidebar {
  background-color: var(--genie-panel) !important;
  border-color: var(--genie-border) !important;
}

.sidebar-nav .nav-link {
  background: transparent !important;
  color: var(--text-secondary) !important;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
  background: rgba(0, 240, 255, 0.1) !important;
  color: var(--genie-cyan) !important;
}

/* ===== TABLES ===== */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  border-color: var(--genie-border);
}

th {
  color: var(--genie-cyan) !important;
  border-bottom: 1px solid var(--genie-cyan) !important;
}

td {
  color: var(--text-primary) !important;
}

/* ===== ICONS ===== */
.card-body i,
.fa,
.bi {
  color: var(--genie-cyan) !important;
  transition: all 0.3s ease;
}

.card:hover i,
.card:hover .fa,
.card:hover .bi {
  color: var(--text-primary) !important;
  text-shadow: 0 0 15px var(--genie-cyan);
  transform: scale(1.1);
}

/* ===== HEADINGS ===== */
.display-4,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--genie-cyan) !important;
  font-weight: 600;
}

/* ===== DROPDOWN MENUS ===== */
.dropdown-menu {
  background-color: var(--genie-panel) !important;
  border: 1px solid var(--genie-border) !important;
  color: var(--text-primary) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-item:hover {
  background-color: rgba(0, 240, 255, 0.1) !important;
  color: var(--genie-cyan) !important;
}

/* ===== ALERTS ===== */
.alert {
  background-color: var(--genie-panel) !important;
  border: 1px solid var(--genie-border) !important;
  color: var(--text-primary) !important;
}

.alert-danger {
  background-color: rgba(231, 76, 60, 0.2) !important;
  border-color: #e74c3c !important;
  color: var(--text-primary) !important;
}

/* ===== UTILITY CLASSES ===== */
.text-white {
  color: var(--text-primary) !important;
}

.bg-white {
  background-color: var(--genie-panel) !important;
}

.text-dark {
  color: var(--text-label) !important;
}

.bg-dark {
  background-color: var(--genie-panel) !important;
}

/* ===== LOGIN PAGE SPECIFIC ===== */
.login-card {
  background: var(--genie-panel-transparent) !important;
  border: 1px solid var(--genie-cyan) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-cyan) !important;
}

.logo-image {
  filter: drop-shadow(var(--shadow-cyan-glow));
}

/* ===== CALENDAR PICKER ===== */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(76%) sepia(61%) saturate(3547%) hue-rotate(160deg) brightness(101%) contrast(104%);
  cursor: pointer;
  transition: transform 0.2s;
}

/* Bright theme calendar picker */
:root[data-theme="bright"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

:root[data-theme="bright"] input[type="date"],
:root[data-theme="bright"] input[type="text"],
:root[data-theme="bright"] input[type="search"],
:root[data-theme="bright"] input[type="password"],
:root[data-theme="bright"] input[type="email"],
:root[data-theme="bright"] textarea,
:root[data-theme="bright"] select,
:root[data-theme="bright"] .form-control,
:root[data-theme="bright"] .form-select {
  color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  transform: scale(1.2);
}

/* ============================================
   ULTIMATE WHITE KILLER 2026
   ============================================
   FORCE ALL BACKGROUNDS TO USE THEME COLORS
   NO WHITE BACKGROUNDS ALLOWED
   ============================================ */

/* Force body and main containers */
body,
html,
.theme-container,
main,
.container {
  background: var(--genie-bg) !important;
  background-color: var(--genie-bg) !important;
}

/* Override for panels and cards */
.card,
.panel,
.modern-filter-card,
.bg-white,
[class*="card"]:not(.btn):not(button),
[class*="panel"] {
  background: var(--genie-panel) !important;
  background-color: var(--genie-panel) !important;
}

/* Force all inputs, textareas, selects to use theme */
input:not(.btn):not(button),
textarea,
select,
.form-control:not(.btn),
.form-select {
  background: var(--genie-input-bg) !important;
  background-color: var(--genie-input-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--genie-border) !important;
}

/* Button primary override - keep gold gradient */
.btn-primary,
button[type="submit"],
.btn-login {
  background: var(--genie-gold-gradient) !important;
  background-color: transparent !important;
  color: #000 !important;
  border: none !important;
}

/* Regular buttons use input bg */
button:not(.btn-primary):not([type="submit"]):not(.btn-login),
.btn:not(.btn-primary) {
  background: var(--genie-input-bg) !important;
  background-color: var(--genie-input-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--genie-border) !important;
}

/* Focus states */
input:focus:not(.btn):not(button),
button:focus,
textarea:focus,
select:focus,
.form-control:focus:not(.btn),
.form-select:focus {
  background: var(--genie-input-bg) !important;
  background-color: var(--genie-input-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 2px var(--genie-cyan) !important;
  outline: none !important;
}

/* Table backgrounds */
table,
.table,
thead,
tbody {
  background: var(--genie-panel) !important;
  background-color: var(--genie-panel) !important;
}

tr,
td,
th {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background: var(--genie-panel) !important;
  background-color: var(--genie-panel) !important;
}

.dropdown-item {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.dropdown-item:hover {
  background: rgba(0, 240, 255, 0.1) !important;
  background-color: rgba(0, 240, 255, 0.1) !important;
}

/* Bright theme specific hover states */
:root[data-theme="bright"] .dropdown-item:hover {
  background: rgba(30, 58, 138, 0.1) !important;
  background-color: rgba(30, 58, 138, 0.1) !important;
}

:root[data-theme="bright"] .sidebar-nav .nav-link:hover,
:root[data-theme="bright"] .sidebar-nav .nav-link.active {
  background: rgba(30, 58, 138, 0.1) !important;
  color: var(--genie-cyan) !important;
}

/* Alerts */
.alert {
  background: var(--genie-panel) !important;
  background-color: var(--genie-panel) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--genie-border) !important;
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle-btn {
  background: var(--genie-panel) !important;
  border: 1px solid var(--genie-border) !important;
  color: var(--text-primary) !important;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition-normal);
  margin-right: 15px;
}

.theme-toggle-btn:hover {
  background: var(--genie-input-bg) !important;
  border-color: var(--genie-cyan) !important;
  color: var(--genie-cyan) !important;
  transform: scale(1.05);
}

.theme-toggle-btn .theme-icon {
  font-size: 18px;
  line-height: 1;
}