/* ═══════════════════════════════════════════════════════════════
   APOLO EGYPT — Single Source of Truth CSS Overrides
   Loaded AFTER Vite bundle via raw <link> in index.html
   All rules use !important to beat Tailwind utilities
   ═══════════════════════════════════════════════════════════════ */

/* ═══ BODY ═══ */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
  background-color: #f5f5f7 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* ═══ SIDEBAR — layout + white text on navy ═══ */
aside { background: #0f172a !important; }
.sidebar-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  position: relative !important;
  transition: all 200ms ease !important;
  cursor: pointer !important;
}
.sidebar-section-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 18px 14px 6px !important;
}
aside, aside a, aside button, aside span, aside p, aside div {
  color: rgba(255,255,255,0.6) !important;
}
aside .sidebar-item:hover,
aside .sidebar-item:hover span,
aside .sidebar-item:hover svg {
  color: rgba(255,255,255,0.9) !important;
}
aside .sidebar-item.active,
aside .sidebar-item.active span,
aside .sidebar-item.active svg {
  color: #ffffff !important;
}
aside .sidebar-item.active::before {
  background: #d4a853 !important;
}
aside .sidebar-section-title {
  color: rgba(255,255,255,0.25) !important;
}
/* Logo + brand name */
aside > div:first-child span.font-bold,
aside > div:first-child .text-\[15px\] {
  color: #ffffff !important;
}
aside > div:first-child .tracking-widest {
  color: rgba(255,255,255,0.3) !important;
}
/* Logout button */
aside > div:last-child button,
aside > div:last-child span {
  color: rgba(255,255,255,0.4) !important;
}
aside > div:last-child button:hover,
aside > div:last-child button:hover span {
  color: rgba(255,255,255,0.7) !important;
}
/* Sub-items gold dot active */
aside a .bg-\[var\(--apolo-gold\)\] {
  background: #d4a853 !important;
}

/* ═══ HEADER — solid white ═══ */
header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
header h1 { color: #0f172a !important; }
header span, header button { color: #64748b !important; }
header .font-medium { color: #0f172a !important; }

/* ═══ MAIN CONTENT ═══ */
main { color: #1d1d1f !important; }

/* ═══ DARK SURFACES (hero banners, gradient cards) ═══ */
[class*="from-navy"],
[class*="bg-navy-"],
[class*="bg-gradient"],
.bg-\[\#0f172a\],
.bg-\[var\(--apolo-navy\)\] {
  color: #ffffff !important;
}
[class*="from-navy"] p,
[class*="from-navy"] span,
[class*="from-navy"] h1,
[class*="from-navy"] h2,
[class*="from-navy"] h3,
[class*="from-navy"] button {
  color: inherit !important;
}
[class*="from-navy"] .text-gold-300,
[class*="from-navy"] .text-\[var\(--apolo-gold\)\] {
  color: #d4a853 !important;
}

/* ═══ CARDS ═══ */
main .bg-white,
main .rounded-xl.border,
main .rounded-2xl.border {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0.5px 1px rgba(0,0,0,0.03) !important;
}

/* ═══ TABLES ═══ */
main .overflow-x-auto {
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
}
main thead { background: #fafafa !important; }
main thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
main tbody tr:hover { background: #fafafa !important; }

/* ═══ MODALS ═══ */
.rounded-2xl.shadow-xl,
main .rounded-2xl.shadow-xl {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  border-radius: 20px !important;
}

/* ═══ INPUTS ═══ */
main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
main select,
main textarea {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}
main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
main select:focus,
main textarea:focus {
  border-color: #d4a853 !important;
  box-shadow: 0 0 0 3px rgba(212,168,83,0.1) !important;
  outline: none !important;
}

/* ═══ GOLD BUTTONS ═══ */
main .bg-gold-500,
main .bg-gold-600,
main .bg-gold,
.btn-gold {
  background: #d4a853 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(212,168,83,0.2) !important;
}
main .bg-gold-500:hover,
main .bg-gold-600:hover,
.btn-gold:hover {
  background: #b38a38 !important;
}

/* ═══ TAB BARS ═══ */
main .bg-gray-100.p-1 {
  background: rgba(0,0,0,0.04) !important;
  border-radius: 14px !important;
}

/* ═══ CARD HOVER LIFT ═══ */
main .grid > .rounded-xl:hover,
main .grid > [class*="rounded-"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* ═══ CALENDAR ═══ */
.rbc-calendar { font-family: 'Inter', -apple-system, sans-serif !important; }
.rbc-header { font-size: 11px !important; font-weight: 600 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.rbc-today { background: #faf6ed !important; }
.rbc-event { border-radius: 6px !important; font-size: 11px !important; font-weight: 500 !important; }
.rbc-toolbar button { border-radius: 8px !important; font-size: 13px !important; }
.rbc-toolbar button.rbc-active { background: #0f172a !important; color: white !important; border-color: #0f172a !important; }

/* ═══ RECHARTS ═══ */
.recharts-default-tooltip { border-radius: 12px !important; border: 1px solid rgba(0,0,0,0.06) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; }

/* ═══ SCROLLBAR ═══ */
main::-webkit-scrollbar { width: 6px; }
main::-webkit-scrollbar-track { background: transparent; }
main::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 3px; }
main::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.15); }