/* EUMETSAT Theme Override for LibreChat */
/* Navy: #00205b | Blue: #0066cc | Grey: #f5f5f5 | White: #ffffff */

/* ====================================================================
   LOGO & THEME SELECTOR
   ==================================================================== */

/* Logo container — 2x bigger, CSS background for theme-aware swap */
.h-10.w-full.bg-cover {
  height: 10rem !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Hide the <img> — we use CSS background instead (SVGs in <img> can't
   respond to in-app theme toggle, only OS prefers-color-scheme) */
.h-10.w-full.bg-cover img {
  display: none !important;
}

/* Light mode — blue globe brand mark */
html:not(.dark) .h-10.w-full.bg-cover {
  background-image: url("/chat/custom/logo-light.svg") !important;
}

/* Dark mode — white globe brand mark */
.dark .h-10.w-full.bg-cover {
  background-image: url("/chat/custom/logo-dark.svg") !important;
}

/* ====================================================================
   LIGHT THEME VARIABLES — EUMETSAT branding
   Scoped to html (specificity 0,0,1). The .dark block below
   (specificity 0,1,0) correctly overrides these in dark mode.
   EUMETSAT website palette:
     Navy: #00205b | Blue: #0066cc | Grey: #f5f5f5 | White: #ffffff
   ==================================================================== */

html {
  --brand-purple: #0066cc;

  /* Text — navy/charcoal on light backgrounds */
  --text-primary: #00205b;
  --text-secondary: #4a5568;
  --text-secondary-alt: #6b7280;
  --text-tertiary: #9ca3af;
  --text-warning: #d97706;
  --text-destructive: #dc2626;

  /* Header — white with navy hover */
  --header-primary: #ffffff;
  --header-hover: #f5f5f5;
  --header-button-hover: #f5f5f5;

  /* Surfaces — white and light greys (EUMETSAT website style) */
  --surface-active: #e8eef5;
  --surface-active-alt: #d6e0ec;
  --surface-hover: #f5f5f5;
  --surface-hover-alt: #ebebeb;
  --surface-primary: #ffffff;
  --surface-primary-alt: #f9fafb;
  --surface-primary-contrast: #f5f5f5;
  --surface-secondary: #f5f5f5;
  --surface-secondary-alt: #ebebeb;
  --surface-tertiary: #f0f0f0;
  --surface-tertiary-alt: #ffffff;
  --surface-dialog: #ffffff;
  --surface-submit: #0066cc;
  --surface-submit-hover: #0052a3;
  --surface-destructive: #dc2626;
  --surface-destructive-hover: #b91c1c;
  --surface-chat: #ffffff;

  /* Borders — light greys */
  --border-light: #e3e3e3;
  --border-medium-alt: #d1d5db;
  --border-medium: #d1d5db;
  --border-heavy: #9ca3af;
  --border-xheavy: #6b7280;
  --border-destructive: #ef4444;

  /* shadcn/ui HSL variables — light mode */
  --background: 0 0% 100%;
  --foreground: 215 100% 14%;
  --card: 0 0% 100%;
  --card-foreground: 215 100% 14%;
  --secondary: 210 20% 96%;
  --secondary-foreground: 215 100% 14%;
  --muted: 210 20% 96%;
  --muted-foreground: 215 14% 40%;
  --accent: 210 20% 94%;
  --accent-foreground: 215 100% 14%;
  --border: 210 16% 87%;
  --input: 210 16% 87%;
  --ring: 210 100% 40%;
  --switch-unchecked: 210 16% 80%;
}

/* ====================================================================
   DARK THEME VARIABLES — Deep navy with EUMETSAT brand colors
   Old surfaces (#0a1520, #0d1a2a) were RGB ~10-18 — perceptually black.
   New surfaces (#1a2d4a–#2f4870) are RGB ~26-47 — clearly deep navy blue.
   Hierarchy preserved: body darkest → sidebar → main → cards → active.
   ==================================================================== */

.dark {
  --brand-purple: #0066cc;
  --presentation: #162640;

  /* Text — brightened slightly for contrast on lighter navy surfaces */
  --text-primary: #ffffff;
  --text-secondary: #b8c8d8;
  --text-secondary-alt: #98a8c0;
  --text-tertiary: #7888a8;
  --text-warning: #f0a020;
  --text-destructive: #ef4444;

  /* Header — EUMETSAT navy */
  --header-primary: #00205b;
  --header-hover: #0a2d6f;
  --header-button-hover: #0a2d6f;

  /* Surfaces — deep navy (lightened from near-black) */
  --surface-active: #2a4068;
  --surface-active-alt: #2f4870;
  --surface-hover: #21365c;
  --surface-hover-alt: #243a66;
  --surface-primary: #1a2d4a;
  --surface-primary-alt: #1e3258;
  --surface-primary-contrast: #162640;
  --surface-secondary: #162640;
  --surface-secondary-alt: #162640;
  --surface-tertiary: #21365c;
  --surface-tertiary-alt: #21365c;
  --surface-dialog: #1e3258;
  --surface-submit: #0066cc;
  --surface-submit-hover: #0052a3;
  --surface-destructive: #b91c1c;
  --surface-destructive-hover: #991b1b;
  --surface-chat: #1a2d4a;

  /* Borders — lightened to match new surfaces */
  --border-light: #2a4068;
  --border-medium-alt: #355078;
  --border-medium: #355078;
  --border-heavy: #406090;
  --border-xheavy: #5070a0;
  --border-destructive: #ef4444;

  /* shadcn/ui HSL variables — navy overrides */
  --background: 219 47% 16%;
  --foreground: 0 0% 98%;
  --card: 217 49% 17%;
  --card-foreground: 0 0% 98%;
  --secondary: 219 49% 23%;
  --secondary-foreground: 0 0% 98%;
  --muted: 219 47% 25%;
  --muted-foreground: 0 0% 64%;
  --accent: 219 47% 25%;
  --accent-foreground: 0 0% 98%;
  --border: 219 42% 29%;
  --input: 219 42% 29%;
  --ring: 210 100% 40%;
  --switch-unchecked: 219 42% 35%;
}

/* ====================================================================
   BODY & LOADING SCREEN
   ==================================================================== */

html body,
html html {
  background-color: #ffffff !important;
}

.dark body,
.dark html {
  background-color: #16243d !important;
}

/* Loading screen — scoped to theme */
html #loading-container {
  background-color: #ffffff !important;
}

.dark #loading-container {
  background-color: #1a2d4a !important;
}

/* ====================================================================
   AUTH PAGE — Light mode EUMETSAT styling
   White card, navy headings, EUMETSAT blue accents.
   .webkit-dark-styles is unique to auth page inputs.
   ==================================================================== */

/* Auth card header — navy text */
html .bg-white.dark\:bg-gray-900 h1,
html .bg-white.dark\:bg-gray-900 h2 {
  color: #00205b !important;
}

/* Auth inputs — white bg, navy text, blue focus border */
html .webkit-dark-styles,
html .webkit-dark-styles:focus {
  background-color: #ffffff !important;
  color: #00205b !important;
  -webkit-text-fill-color: #00205b !important;
  -webkit-box-shadow: 0 0 0 50vh #ffffff inset !important;
  border-color: #d1d5db !important;
}

html .webkit-dark-styles:focus,
html .webkit-dark-styles:focus-visible {
  border-color: #0066cc !important;
}

/* Auth floating labels */
html .webkit-dark-styles ~ label {
  background-color: #ffffff !important;
  color: #6b7280 !important;
}

html .webkit-dark-styles:focus ~ label {
  color: #0066cc !important;
}

html .bg-white.dark\:bg-gray-900 label[class*="bg-surface-primary"] {
  background-color: #ffffff !important;
}

/* ====================================================================
   AUTH PAGE — Dark mode overrides
   Dark navy card, white inputs with navy text.
   ==================================================================== */

/* Auth page card — keep dark navy so white logo and text are visible */
.dark .bg-white.dark\:bg-gray-900 {
  background-color: #1a2d4a !important;
}

/* Auth card header — white in dark mode */
.dark .bg-white.dark\:bg-gray-900 h1,
.dark .bg-white.dark\:bg-gray-900 h2 {
  color: #ffffff !important;
}

/* Auth card text — ensure visible on dark navy card */
.dark .bg-white.dark\:bg-gray-900 p,
.dark .bg-white.dark\:bg-gray-900 span:not([class*="text-green"]):not([class*="text-blue"]) {
  color: #b8c8d8 !important;
}

/* Auth inputs — white background with navy text */
.dark .webkit-dark-styles,
.dark .webkit-dark-styles:focus {
  background-color: #ffffff !important;
  color: #00205b !important;
  -webkit-text-fill-color: #00205b !important;
  -webkit-box-shadow: 0 0 0 50vh #ffffff inset !important;
}

.dark .webkit-dark-styles {
  border-color: #cbd5e1 !important;
}

.dark .webkit-dark-styles:focus,
.dark .webkit-dark-styles:focus-visible {
  border-color: #0066cc !important;
}

.dark .webkit-dark-styles ~ label {
  background-color: #ffffff !important;
  color: #666666 !important;
}

.dark .webkit-dark-styles:focus ~ label {
  color: #0066cc !important;
}

.dark .bg-white.dark\:bg-gray-900 label[class*="bg-surface-primary"] {
  background-color: #ffffff !important;
}

/* ====================================================================
   GREEN → EUMETSAT BLUE (light mode)
   ==================================================================== */

html [class*="text-green-600"],
html [class*="text-green-500"],
html [class*="text-green-400"],
html [class*="text-green-300"] {
  color: #0066cc !important;
}

html [class*="hover:text-green-700"]:hover,
html [class*="hover:text-green-400"]:hover,
html [class*="hover:text-green-300"]:hover {
  color: #0052a3 !important;
}

html [class*="border-green-500"]:focus,
html [class*="border-green-500"]:focus-visible {
  border-color: #0066cc !important;
}

html [class*="decoration-green"] {
  text-decoration-color: #0066cc !important;
}

html [class*="text-blue-600"] {
  color: #0066cc !important;
}

/* ====================================================================
   GREEN → EUMETSAT BLUE (dark mode)
   ==================================================================== */

.dark [class*="text-green-600"],
.dark [class*="text-green-500"],
.dark [class*="text-green-400"],
.dark [class*="text-green-300"] {
  color: #0066cc !important;
}

.dark [class*="hover:text-green-700"]:hover,
.dark [class*="hover:text-green-400"]:hover,
.dark [class*="hover:text-green-300"]:hover {
  color: #0052a3 !important;
}

.dark [class*="border-green-500"]:focus,
.dark [class*="border-green-500"]:focus-visible {
  border-color: #0066cc !important;
}

.dark [class*="decoration-green"] {
  text-decoration-color: #0066cc !important;
}

.dark [class*="text-blue-600"] {
  color: #0066cc !important;
}

/* ====================================================================
   TAILWIND DARK GRAY UTILITIES (dark mode only)
   Override hardcoded near-black colors with navy palette.
   ==================================================================== */

.dark .dark\:bg-gray-950 { background-color: #16243d !important; }
.dark .dark\:bg-gray-900 { background-color: #1a2d4a !important; }
.dark .dark\:bg-gray-850 { background-color: #162640 !important; }
.dark .dark\:bg-gray-800 { background-color: #1e3258 !important; }
.dark .dark\:bg-gray-800\/90 { background-color: #1e3258e6 !important; }
.dark .dark\:bg-gray-700 { background-color: #21365c !important; }
.dark .dark\:bg-gray-600 { background-color: #2a4068 !important; }
.dark .dark\:bg-gray-500 { background-color: #2f4870 !important; }

.dark .bg-gray-950 { background-color: #16243d !important; }
.dark .bg-gray-900 { background-color: #1a2d4a !important; }
.dark .bg-gray-900\/80 { background-color: #1a2d4acc !important; }
.dark .bg-gray-850 { background-color: #162640 !important; }
.dark .bg-gray-800 { background-color: #1e3258 !important; }
.dark .bg-gray-700 { background-color: #21365c !important; }
.dark .bg-gray-600 { background-color: #2a4068 !important; }
.dark .bg-gray-600\/65 { background-color: #2a4068a6 !important; }
.dark .bg-gray-500 { background-color: #2f4870 !important; }
.dark .bg-gray-500\/90 { background-color: #2f4870e6 !important; }

/* ====================================================================
   SHADCN/UI UTILITY OVERRIDES (dark mode)
   ==================================================================== */

.dark .bg-background { background-color: #16243d !important; }
.dark .bg-card { background-color: #162640 !important; }
.dark .bg-surface { background-color: #1e3258 !important; }
.dark .bg-secondary { background-color: #1e3258 !important; }
.dark .bg-muted { background-color: #21365c !important; }
.dark .bg-muted\/50 { background-color: #21365c80 !important; }
.dark .hover\:bg-accent:hover { background-color: #21365c !important; }
.dark .focus\:bg-accent:focus { background-color: #21365c !important; }
.dark .data-\[state\=open\]\:bg-accent[data-state=open] { background-color: #21365c !important; }

/* ====================================================================
   DARK STATE VARIANTS — hover/focus/data-state on gray utilities
   ==================================================================== */

.dark .dark\:hover\:bg-gray-700:hover { background-color: #21365c !important; }
.dark .dark\:hover\:bg-gray-800:hover { background-color: #1e3258 !important; }
.dark .dark\:hover\:bg-gray-800\/50:hover { background-color: #1e325880 !important; }
.dark .dark\:hover\:bg-gray-800\/10:hover { background-color: #1e32581a !important; }
.dark .dark\:hover\:bg-gray-850\/25:hover { background-color: #16264040 !important; }
.dark .dark\:focus\:bg-gray-600:focus { background-color: #2a4068 !important; }
.dark .dark\:focus\:bg-white\/10:focus { background-color: #ffffff1a !important; }
.dark .dark\:hover\:bg-white\/10:hover { background-color: #ffffff1a !important; }

.dark .dark\:data-\[state\=active\]\:bg-gray-700[data-state=active],
.dark .dark\:data-\[state\=open\]\:bg-gray-700[data-state=open] {
  background-color: #21365c !important;
}
.dark .dark\:data-\[state\=open\]\:bg-gray-800[data-state=open] {
  background-color: #1e3258 !important;
}
.dark .dark\:radix-state-open\:bg-gray-700[data-state=open] {
  background-color: #21365c !important;
}
.dark .dark\:radix-state-active\:bg-surface[data-state=active] {
  background-color: #21365c !important;
}

.dark .hover\:bg-gray-700:hover { background-color: #21365c !important; }
.dark .hover\:bg-gray-800:hover { background-color: #1e3258 !important; }
.dark .hover\:bg-gray-800\/10:hover { background-color: #1e32581a !important; }

/* ====================================================================
   SIDEBAR, SUBMIT BUTTON & BRAND COLORS (light mode)
   ==================================================================== */

html .bg-surface-active {
  background-color: #e8eef5 !important;
}

html .bg-surface-submit {
  background-color: #0066cc !important;
}
html .bg-surface-submit:hover {
  background-color: #0052a3 !important;
}

html .text-brand-purple,
html [class*="text-brand"] {
  color: #0066cc !important;
}
html .bg-brand-purple,
html [class*="bg-brand"] {
  background-color: #0066cc !important;
}

/* ====================================================================
   SIDEBAR, SUBMIT BUTTON & BRAND COLORS (dark mode)
   ==================================================================== */

.dark .bg-surface-active {
  background-color: #2a4068 !important;
}

.dark .bg-surface-submit {
  background-color: #0066cc !important;
}
.dark .bg-surface-submit:hover {
  background-color: #0052a3 !important;
}

.dark .text-brand-purple,
.dark [class*="text-brand"] {
  color: #0066cc !important;
}
.dark .bg-brand-purple,
.dark [class*="bg-brand"] {
  background-color: #0066cc !important;
}