/* 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;
}

/* 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;
}