/* Core white + blue theme baseline */

/* Belt-and-suspenders layout reset: no browser defaults interfere */
html, body {
  width: 100%;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.sg-app-shell) {
  height: 100dvh;
  overflow: hidden;
}

.sg-app-shell {
  height: 100vh;
  height: 100dvh;
}

:root {
  --sg-brand: #2563eb;
  --sg-brand-strong: #1d4ed8;
  --sg-page-bg: #f5f9ff;
  --sg-surface: #ffffff;
  --sg-border-soft: #dbe7ff;
}

body {
  background-color: var(--sg-page-bg);
  background-image: none;
}

.dark body {
  background-color: rgb(17, 24, 39);
  background-image: none;
}

/* ── Brand typography ──────────────────────────────────────────────
   Fonts come from the shared syncgaze_fonts store, loaded in base.html
   via /api/v1/fonts/css/. Lato = body/UI (humanist, legible for dense
   data); Montserrat = display/headings (confident, premium). Both fall
   back to the system stack if the font service is unavailable. */
:root {
  --sg-font-sans: 'Lato', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sg-font-display: 'Montserrat', 'Lato', ui-sans-serif, system-ui, sans-serif;
}
body { font-family: var(--sg-font-sans); }
h1, h2, h3, h4, .font-display { font-family: var(--sg-font-display); }
.font-sans { font-family: var(--sg-font-sans); }

/* Premium lightweight scrollbar treatment from Mail style language */
::-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;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

.dark * {
  scrollbar-color: #4b5563 transparent;
}

/* Lift top navigation and side navigation surfaces subtly.
   Use FULLY OPAQUE backgrounds so the body's radial gradient cannot
   bleed through the top edge of the topbar (no thin band at top). */
header.bg-white,
aside.bg-white,
nav.bg-white {
  background-color: #ffffff;
  border-color: var(--sg-border-soft);
}

.dark header.bg-white,
.dark aside.bg-white,
.dark nav.bg-white,
.dark header.dark\:bg-gray-800,
.dark aside.dark\:bg-gray-800,
.dark nav.dark\:bg-gray-800 {
  background-color: rgb(31, 41, 55); /* gray-800, fully opaque */
}

/* Stronger primary accents in key badges/buttons */
.bg-blue-600,
.bg-indigo-600 {
  background-color: var(--sg-brand) !important;
}

.hover\:bg-blue-700:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-500:hover {
  background-color: var(--sg-brand-strong) !important;
}

.text-blue-600,
.text-indigo-600,
.dark .text-blue-400,
.dark .text-indigo-400 {
  color: var(--sg-brand) !important;
}

.border-blue-500,
.border-indigo-500 {
  border-color: var(--sg-brand) !important;
}

.focus\:ring-blue-200:focus,
.focus\:ring-indigo-200:focus,
.peer-focus\:ring-indigo-100,
.peer-focus\:ring-blue-100 {
  --tw-ring-color: color-mix(in srgb, var(--sg-brand) 22%, transparent);
}

/* ─── Comprehensive white + blue (#2563eb) enforcement ──────────────────── */

/* Gradient destination fix: ensures to-blue-600 never fades to transparent */
.to-blue-600 { --tw-gradient-to: #2563eb !important; }
.from-blue-600 { --tw-gradient-from: #2563eb !important; }

/* Indigo light backgrounds → blue equivalents */
.bg-indigo-50  { background-color: #eff6ff !important; }
.bg-indigo-100 { background-color: #dbeafe !important; }
.bg-indigo-200 { background-color: #bfdbfe !important; }
.bg-indigo-700 { background-color: var(--sg-brand-strong) !important; }

/* Indigo text → brand blue */
.text-indigo-500 { color: var(--sg-brand) !important; }
.text-indigo-700 { color: var(--sg-brand-strong) !important; }
.text-indigo-800, .text-indigo-900 { color: var(--sg-brand-strong) !important; }

/* Indigo border light shades */
.border-indigo-100, .border-indigo-200, .border-indigo-300 {
  border-color: var(--sg-border-soft) !important;
}

/* Indigo hover states */
.hover\:bg-indigo-50:hover  { background-color: #eff6ff !important; }
.hover\:bg-indigo-100:hover { background-color: #dbeafe !important; }
.hover\:text-indigo-600:hover, .hover\:text-indigo-700:hover {
  color: var(--sg-brand-strong) !important;
}

/* Violet → brand blue */
.bg-violet-600, .bg-violet-700 { background-color: var(--sg-brand) !important; }
.hover\:bg-violet-700:hover, .hover\:bg-violet-500:hover {
  background-color: var(--sg-brand-strong) !important;
}
.text-violet-600, .text-violet-700 { color: var(--sg-brand) !important; }
.border-violet-500, .border-violet-600 { border-color: var(--sg-brand) !important; }

/* Purple → brand blue */
.bg-purple-600, .bg-purple-700 { background-color: var(--sg-brand) !important; }
.hover\:bg-purple-700:hover, .hover\:bg-purple-500:hover {
  background-color: var(--sg-brand-strong) !important;
}
.text-purple-600, .text-purple-700 { color: var(--sg-brand) !important; }
.border-purple-500, .border-purple-600 { border-color: var(--sg-brand) !important; }

/* Dark mode: indigo/violet/purple dark tints → blue equivalents */
.dark .dark\:bg-indigo-900\/30, .dark .dark\:bg-violet-900\/30, .dark .dark\:bg-purple-900\/30 {
  background-color: rgba(30, 64, 175, 0.3) !important;
}
.dark .dark\:bg-indigo-900\/20, .dark .dark\:bg-violet-900\/20, .dark .dark\:bg-purple-900\/20 {
  background-color: rgba(30, 64, 175, 0.2) !important;
}
.dark .dark\:text-indigo-400, .dark .dark\:text-violet-400, .dark .dark\:text-purple-400 {
  color: #60a5fa !important;
}