/*
 * Ocean theme override for the compiled 0xJack static build.
 * Loaded after the generated stylesheet so application behavior and layout stay intact.
 */
:root {
  --ocean-ink: #102a3c;
  --ocean-canvas: #e7f5f3;
  --ocean-paper: #fbfdfc;
  --ocean-blue: #dcecff;
  --ocean-mint: #d8f3e7;
  --ocean-coral: #ffe3d6;
  --ocean-violet: #eee4ff;
  --ocean-sun: #fff0bd;
  --ocean-accent: #2c6bed;
  --ocean-dark-hover: #174967;

  /* Tokens used by the dashboard/advanced screens in the compiled build. */
  --bg: var(--ocean-canvas);
  --bg-alt: var(--ocean-mint);
  --surface: var(--ocean-ink);
  --surface-light: var(--ocean-dark-hover);
  --border: rgb(16 42 60 / 12%);
  --border-strong: rgb(16 42 60 / 25%);
  --text: var(--ocean-ink);
  --text-secondary: #36566c;
  --text-muted: #668092;
  --text-on-surface: var(--ocean-paper);
  --brand: var(--ocean-accent);
  --brand-dark: var(--ocean-dark-hover);
  --brand-deep: var(--ocean-ink);
  --background: 171 41% 93%;
  --foreground: 204 58% 15%;
  --card: 150 33% 99%;
  --card-foreground: 204 58% 15%;
  --popover: 150 33% 99%;
  --popover-foreground: 204 58% 15%;
  --primary: 220 84% 55%;
  --primary-foreground: 150 33% 99%;
  --secondary: 212 100% 93%;
  --secondary-foreground: 204 58% 15%;
  --muted: 151 53% 90%;
  --muted-foreground: 204 30% 35%;
  --accent: 220 84% 55%;
  --accent-foreground: 150 33% 99%;
  --input: 204 58% 15%;
  --ring: 220 84% 55%;
}

html,
body {
  background: var(--ocean-canvas);
  color: var(--ocean-ink);
}

::selection {
  background: #a9ccff;
  color: #081c2a;
}

/* Core palette */
.bg-periwinkle {
  background-color: var(--ocean-canvas) !important;
}

main > .bg-periwinkle:first-child {
  background-image:
    radial-gradient(circle at 14% 16%, rgb(44 107 237 / 9%), transparent 30%),
    radial-gradient(circle at 88% 12%, rgb(32 160 135 / 10%), transparent 28%);
}

.bg-pastel-blue { background-color: var(--ocean-blue) !important; }
.bg-pastel-mint { background-color: var(--ocean-mint) !important; }
.bg-pastel-peach { background-color: var(--ocean-coral) !important; }
.bg-pastel-pink { background-color: var(--ocean-violet) !important; }
.bg-pastel-yellow { background-color: var(--ocean-sun) !important; }
.bg-white { background-color: var(--ocean-paper) !important; }

.bg-periwinkle\/40 { background-color: rgb(231 245 243 / 40%) !important; }
.bg-periwinkle\/50 { background-color: rgb(231 245 243 / 50%) !important; }
.bg-periwinkle\/90 { background-color: rgb(231 245 243 / 90%) !important; }
.bg-pastel-blue\/40 { background-color: rgb(220 236 255 / 40%) !important; }
.bg-pastel-blue\/50 { background-color: rgb(220 236 255 / 50%) !important; }
.bg-pastel-blue\/60 { background-color: rgb(220 236 255 / 60%) !important; }
.bg-pastel-mint\/60 { background-color: rgb(216 243 231 / 60%) !important; }
.bg-pastel-peach\/60 { background-color: rgb(255 227 214 / 60%) !important; }
.bg-pastel-pink\/50 { background-color: rgb(238 228 255 / 50%) !important; }
.bg-pastel-yellow\/40 { background-color: rgb(255 240 189 / 40%) !important; }

/* Replace the generated charcoal with a distinctive navy. */
.text-ink { color: var(--ocean-ink) !important; }
.bg-ink { background-color: var(--ocean-ink) !important; }
.border-ink { border-color: var(--ocean-ink) !important; }
.from-ink { --tw-gradient-from: var(--ocean-ink) !important; }

.text-ink\/15 { color: rgb(16 42 60 / 15%) !important; }
.text-ink\/30 { color: rgb(16 42 60 / 30%) !important; }
.text-ink\/35 { color: rgb(16 42 60 / 35%) !important; }
.text-ink\/40 { color: rgb(16 42 60 / 40%) !important; }
.text-ink\/45 { color: rgb(16 42 60 / 45%) !important; }
.text-ink\/50 { color: rgb(16 42 60 / 50%) !important; }
.text-ink\/55 { color: rgb(16 42 60 / 55%) !important; }
.text-ink\/60 { color: rgb(16 42 60 / 60%) !important; }
.text-ink\/65 { color: rgb(16 42 60 / 65%) !important; }
.text-ink\/70 { color: rgb(16 42 60 / 70%) !important; }
.text-ink\/75 { color: rgb(16 42 60 / 75%) !important; }
.text-ink\/80 { color: rgb(16 42 60 / 80%) !important; }
.text-ink\/85 { color: rgb(16 42 60 / 85%) !important; }

.border-ink\/10 { border-color: rgb(16 42 60 / 10%) !important; }
.border-ink\/15 { border-color: rgb(16 42 60 / 15%) !important; }
.border-ink\/20 { border-color: rgb(16 42 60 / 20%) !important; }
.border-ink\/30 { border-color: rgb(16 42 60 / 30%) !important; }
.bg-ink\/\[0\.03\] { background-color: rgb(16 42 60 / 3%) !important; }
.bg-ink\/\[0\.04\] { background-color: rgb(16 42 60 / 4%) !important; }
.bg-ink\/5 { background-color: rgb(16 42 60 / 5%) !important; }
.bg-ink\/10 { background-color: rgb(16 42 60 / 10%) !important; }
.bg-ink\/15 { background-color: rgb(16 42 60 / 15%) !important; }
.bg-ink\/25 { background-color: rgb(16 42 60 / 25%) !important; }
.bg-ink\/30 { background-color: rgb(16 42 60 / 30%) !important; }
.bg-ink\/80 { background-color: rgb(16 42 60 / 80%) !important; }

/* Dashboard tab triggers combine text-ink/70 with a state-based text-white
   utility. The generated text utility wins in the compiled CSS, so lock the
   active state to the intended high-contrast treatment. */
button[data-state="active"] {
  background-color: var(--ocean-ink) !important;
  color: #fff !important;
}

button[data-state="active"] * {
  color: #fff !important;
}

button[data-state="active"] > span:first-child {
  background-color: rgb(255 255 255 / 18%) !important;
}

button[data-state="active"]:hover {
  background-color: var(--ocean-dark-hover) !important;
}

/* Small identity changes without moving any layout blocks. */
header > div,
nav[aria-label="Footer navigation"] {
  backdrop-filter: blur(14px);
}

header > div {
  box-shadow: 0 12px 34px rgb(16 42 60 / 8%);
}

a.bg-ink,
button.bg-ink {
  box-shadow: 0 8px 20px rgb(44 107 237 / 18%);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

a.bg-ink:hover,
button.bg-ink:hover {
  background-color: var(--ocean-dark-hover) !important;
  box-shadow: 0 12px 28px rgb(44 107 237 / 24%);
  transform: translateY(-1px);
}

.hover\:bg-ink:hover,
.hover\:bg-ink\/90:hover {
  background-color: var(--ocean-dark-hover) !important;
}

:focus-visible {
  outline-color: var(--ocean-accent) !important;
}

@media (prefers-reduced-motion: reduce) {
  a.bg-ink,
  button.bg-ink {
    transition: none;
  }
}


/* ------------------------------------------------------------------
   Interaction states.
   The blanket !important above out-ranks the generated hover/focus
   utilities, which silently removed the hover feedback. These rules
   have higher specificity, so they win the states back.
   ------------------------------------------------------------------ */
.hover\:text-ink:hover              { color: var(--ocean-ink) !important; }
.hover\:text-ink\/50:hover          { color: rgb(16 42 60 / 50%) !important; }
.hover\:text-ink\/55:hover          { color: rgb(16 42 60 / 55%) !important; }
.hover\:text-ink\/60:hover          { color: rgb(16 42 60 / 60%) !important; }
.hover\:text-ink\/70:hover          { color: rgb(16 42 60 / 70%) !important; }
.group-hover\:text-ink:is(:where(.group):hover *) { color: var(--ocean-ink) !important; }

.hover\:bg-ink\/5:hover             { background-color: rgb(16 42 60 / 5%) !important; }
.hover\:bg-ink\/10:hover            { background-color: rgb(16 42 60 / 10%) !important; }
.hover\:bg-ink\/25:hover            { background-color: rgb(16 42 60 / 25%) !important; }
.group-hover\:bg-ink\/35:is(:where(.group):hover *) { background-color: rgb(16 42 60 / 35%) !important; }
.hover\:bg-periwinkle\/60:hover     { background-color: rgb(231 245 243 / 60%) !important; }
.hover\:bg-white\/85:hover          { background-color: rgb(251 253 252 / 85%) !important; }

.hover\:border-ink\/30:hover        { border-color: rgb(16 42 60 / 30%) !important; }
.focus\:border-ink:focus            { border-color: var(--ocean-ink) !important; }
.focus\:text-ink:focus              { color: var(--ocean-ink) !important; }
.focus\:bg-ink\/5:focus             { background-color: rgb(16 42 60 / 5%) !important; }
.focus\:ring-ink:focus,
.focus-visible\:ring-ink:focus-visible { --tw-ring-color: var(--ocean-accent) !important; }
.focus\:ring-ink\/15:focus          { --tw-ring-color: rgb(16 42 60 / 15%) !important; }

.decoration-ink\/40                 { text-decoration-color: rgb(16 42 60 / 40%) !important; }
.hover\:decoration-ink:hover        { text-decoration-color: var(--ocean-ink) !important; }

/* Remaining ink-derived utilities the first pass didn't cover. */
.border-t-ink                       { border-top-color: var(--ocean-ink) !important; }
.border-l-ink                       { border-left-color: var(--ocean-ink) !important; }
.border-t-ink\/70                   { border-top-color: rgb(16 42 60 / 70%) !important; }
:where(.divide-ink\/8 > :not(:last-child)) { border-color: rgb(16 42 60 / 8%) !important; }
.accent-ink                         { accent-color: var(--ocean-ink) !important; }
.text-stat-blue                     { color: var(--ocean-accent) !important; }
.data-\[state\=active\]\:bg-ink[data-state="active"] { background-color: var(--ocean-ink) !important; }
.placeholder\:text-ink\/30::placeholder { color: rgb(16 42 60 / 30%) !important; }
.placeholder\:text-ink\/40::placeholder { color: rgb(16 42 60 / 40%) !important; }
.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-ink\/25::-webkit-scrollbar-thumb { background-color: rgb(16 42 60 / 25%) !important; }
.hover\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-ink\/40:hover::-webkit-scrollbar-thumb { background-color: rgb(16 42 60 / 40%) !important; }
.shadow-\[inset_0_-5px_0_0_rgba\(29\,29\,29\,0\.15\)\] { --tw-shadow-color: rgb(16 42 60 / 22%) !important; }