/* CodexAPILink Custom Light Theme v3 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --cal-primary: #4F46E5;
  --cal-primary-hover: #4338CA;
  --cal-primary-light: #EEF2FF;
  --cal-primary-ring: rgba(79, 70, 229, 0.25);
  --cal-accent: #06B6D4;
  --cal-bg: #F8FAFC;
  --cal-card: #FFFFFF;
  --cal-sidebar: #FFFFFF;
  --cal-border: #E2E8F0;
  --cal-text: #1E293B;
  --cal-text-secondary: #64748B;
  --cal-success: #10B981;
  --cal-warning: #F59E0B;
  --cal-danger: #EF4444;
  --cal-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --cal-shadow-md: 0 4px 12px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
  --cal-shadow-lg: 0 10px 25px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.03);
  --cal-radius: 12px;
  --cal-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #06B6D4 100%);
}

html, html.dark {
  color-scheme: light !important;
}

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body {
  background: var(--cal-bg) !important;
  color: var(--cal-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* ===== NUKE ALL DARK MODE BACKGROUNDS ===== */
html.dark, html.dark body,
.dark body {
  background-color: var(--cal-bg) !important;
  color: var(--cal-text) !important;
}

/* Override inline dark mode backgrounds from scoped CSS */
[style*="background-color: rgb(2, 6, 23)"],
[style*="background-color: rgb(15, 23, 42)"],
[style*="background-color: rgb(30, 41, 59)"],
[style*="background-color: rgb(51, 65, 85)"] {
  background-color: var(--cal-bg) !important;
}

/* ===== TEAL / EMERALD → INDIGO BRAND COLOR ===== */
.text-teal-400, .text-teal-500, .text-teal-600,
.text-emerald-400, .text-emerald-500, .text-emerald-600 {
  color: var(--cal-primary) !important;
}

.bg-teal-400, .bg-teal-500, .bg-teal-600,
.bg-emerald-400, .bg-emerald-500, .bg-emerald-600 {
  background-color: var(--cal-primary) !important;
}

.bg-teal-50, .bg-teal-100, .bg-emerald-50, .bg-emerald-100 {
  background-color: var(--cal-primary-light) !important;
}

.border-teal-400, .border-teal-500, .border-emerald-400, .border-emerald-500 {
  border-color: var(--cal-primary) !important;
}

.hover\:bg-teal-600:hover, .hover\:bg-emerald-600:hover,
.hover\:bg-teal-700:hover, .hover\:bg-emerald-700:hover {
  background-color: var(--cal-primary-hover) !important;
}

.focus\:ring-teal-500:focus, .focus\:ring-emerald-500:focus {
  --tw-ring-color: var(--cal-primary-ring) !important;
}

/* ===== LOGIN PAGE ===== */
.min-h-screen {
  background: var(--cal-bg) !important;
}

/* Login page with gradient */
.min-h-screen.flex.items-center,
.min-h-screen.flex.justify-center,
div[class*="min-h-screen"][class*="flex"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #4F46E5 100%) !important;
  position: relative;
}

/* Login card */
.min-h-screen .bg-white,
.min-h-screen [class*="bg-white"][class*="rounded"],
.min-h-screen > div > div[class*="rounded"],
.min-h-screen > div > div[class*="shadow"] {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255,255,255,0.1) !important;
}

/* Login form title */
.min-h-screen h1, .min-h-screen h2 {
  color: var(--cal-text) !important;
  font-weight: 700 !important;
}

/* ===== SIDEBAR / NAV ===== */
.bg-gray-900, .bg-slate-900, .bg-zinc-900 {
  background-color: var(--cal-sidebar) !important;
}

.bg-gray-800, .bg-slate-800, .bg-zinc-800 {
  background-color: var(--cal-card) !important;
}

.bg-gray-950, .bg-slate-950 {
  background-color: var(--cal-bg) !important;
}

/* Sidebar nav items */
nav a, aside a {
  border-radius: 10px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 2px 8px !important;
}

nav a:hover, aside a:hover {
  background: var(--cal-primary-light) !important;
  color: var(--cal-primary) !important;
}

nav a:hover svg, aside a:hover svg {
  color: var(--cal-primary) !important;
}

/* Active nav item */
.router-link-active, .router-link-exact-active,
a[class*="bg-teal"], a[class*="bg-emerald"],
nav a[aria-current="page"] {
  background: var(--cal-primary-light) !important;
  color: var(--cal-primary) !important;
  font-weight: 600 !important;
}

.router-link-active svg, .router-link-exact-active svg {
  color: var(--cal-primary) !important;
}

/* ===== MAIN CONTENT ===== */
main, [class*="main-content"] {
  background: var(--cal-bg) !important;
}

/* ===== CARDS ===== */
.rounded-lg, .rounded-xl, .rounded-2xl {
  border-radius: var(--cal-radius) !important;
}

.bg-white {
  background: var(--cal-card) !important;
  border: 1px solid var(--cal-border) !important;
  box-shadow: var(--cal-shadow) !important;
}

/* Dashboard stat cards */
.grid > .bg-white, .grid > [class*="rounded"] > .bg-white,
.grid > div[class*="bg-white"],
.grid > div[class*="rounded"][class*="shadow"] {
  transition: all 0.2s ease !important;
}

.grid > .bg-white:hover, .grid > div[class*="bg-white"]:hover,
.grid > div[class*="rounded"][class*="shadow"]:hover {
  box-shadow: var(--cal-shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* ===== BUTTONS ===== */
.bg-teal-500, .bg-teal-600, .bg-emerald-500, .bg-emerald-600,
button.bg-teal-500, button.bg-teal-600,
button.bg-emerald-500, button.bg-emerald-600 {
  background: var(--cal-gradient) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px var(--cal-primary-ring) !important;
  transition: all 0.2s ease !important;
  color: white !important;
}

.bg-teal-500:hover, .bg-teal-600:hover,
.bg-emerald-500:hover, .bg-emerald-600:hover,
button.bg-teal-500:hover, button.bg-teal-600:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 6px 20px var(--cal-primary-ring) !important;
  transform: translateY(-1px) !important;
}

/* ===== INPUTS ===== */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
textarea, select {
  background: var(--cal-card) !important;
  border: 1.5px solid var(--cal-border) !important;
  border-radius: 10px !important;
  color: var(--cal-text) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--cal-primary) !important;
  box-shadow: 0 0 0 3px var(--cal-primary-ring) !important;
  outline: none !important;
}

/* ===== TABLES ===== */
table {
  border-radius: var(--cal-radius) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead, thead tr, thead th {
  background: #F1F5F9 !important;
  color: var(--cal-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

tbody td {
  border-bottom: 1px solid #F1F5F9 !important;
  color: var(--cal-text) !important;
}

tbody tr {
  transition: background 0.15s ease !important;
}

tbody tr:hover {
  background: #F8FAFC !important;
}

/* ===== BADGES ===== */
.bg-green-100, .bg-emerald-100 {
  background: #ECFDF5 !important;
  color: #059669 !important;
}

.bg-red-100 {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
}

.bg-yellow-100, .bg-amber-100 {
  background: #FFFBEB !important;
  color: #D97706 !important;
}

.bg-blue-100 {
  background: #EFF6FF !important;
  color: #2563EB !important;
}

/* ===== HEADER ===== */
.border-b {
  border-bottom-color: var(--cal-border) !important;
}

.border-r {
  border-right-color: var(--cal-border) !important;
}

/* Gray text overrides for light mode readability */
.text-gray-400 {
  color: #94A3B8 !important;
}

.text-gray-500 {
  color: var(--cal-text-secondary) !important;
}

.text-gray-600 {
  color: #475569 !important;
}

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

.text-white {
  /* Don't override text-white on colored backgrounds */
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* ===== PROGRESS BAR ===== */
.navigation-progress-bar {
  background: linear-gradient(90deg, transparent 0%, var(--cal-primary) 20%, #6366F1 50%, var(--cal-primary) 80%, transparent 100%) !important;
}

/* ===== MODALS ===== */
.fixed.inset-0[class*="bg-black"],
.fixed.inset-0[class*="bg-gray"],
[class*="backdrop"] {
  background: rgba(15, 23, 42, 0.3) !important;
  backdrop-filter: blur(4px) !important;
}

/* ===== DROPDOWN ===== */
[role="menu"], [role="listbox"],
div[class*="absolute"][class*="shadow-lg"] {
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--cal-border) !important;
  background: var(--cal-card) !important;
}

/* ===== TOOLTIP ===== */
[role="tooltip"] {
  border-radius: 8px !important;
  box-shadow: var(--cal-shadow-md) !important;
}

/* ===== TABS ===== */
[role="tablist"] button,
[role="tab"] {
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

[role="tab"][aria-selected="true"] {
  background: var(--cal-primary-light) !important;
  color: var(--cal-primary) !important;
  font-weight: 600 !important;
}

/* ===== COPY CODE BLOCK ===== */
.bg-gray-100, .bg-slate-100 {
  background: #F1F5F9 !important;
}

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
  border-radius: 8px !important;
}

/* ===== SELECTION COLOR ===== */
::selection {
  background: rgba(79, 70, 229, 0.15) !important;
  color: var(--cal-text) !important;
}

/* ===== SKELETON LOADING ===== */
.animate-pulse {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%) !important;
  background-size: 200% 100% !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .rounded-lg, .rounded-xl {
    border-radius: 10px !important;
  }

  nav, aside {
    background: var(--cal-card) !important;
    box-shadow: var(--cal-shadow-lg) !important;
  }
}

/* ===== SMOOTH TRANSITIONS ===== */
a, button {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ===== DISABLE DARK TEAL SHADOW ===== */
[class*="shadow-teal"], [class*="shadow-emerald"] {
  --tw-shadow-color: var(--cal-primary-ring) !important;
}