/* ============================================================================
 * OWLX admin theme overrides — extends Nova's compiled Tailwind CSS
 * ----------------------------------------------------------------------------
 * Surgical layer loaded AFTER `vendor/nova/app.css` via <link> in
 * layout.blade.php, so any rule here wins specificity ties without `!important`
 * unless the underlying utility uses `!important` itself.
 *
 * Brand reference: Flutter app's design.md (Iron Navy #2F4E5E accent on
 * teal-tinted near-black surfaces). Tokens used below are documented inline.
 * ========================================================================== */


/* ============================================================================
 * §1 BASE — Deeper surface palette + app-wide gradient bg
 * ----------------------------------------------------------------------------
 * Original gray palette (in generators.js) baked these CSS vars at compile
 * time on `:root`. Surface tones (gray-800 = #1C2E36, gray-900 = #0F1B21)
 * looked too lifted/teal-bright when the browser frame is pitch black.
 *
 * Override on `html.dark` to shift every surface stop DOWN one design.md
 * level — every element using `bg-gray-{800,850,900,950}` inherits the new
 * deeper tone instantly without needing to rebuild Nova's compiled CSS.
 * ============================================================================ */
html.dark {
  --colors-gray-800: 15, 27, 33;   /* was 28,46,54 (#1C2E36) → now #0F1B21 (surfaceCard) */
  --colors-gray-850: 10, 21, 26;   /* was 21,37,43 (#15252B) → now #0A151A (surfaceSubtle) */
  --colors-gray-900: 5, 15, 18;    /* was 15,27,33 (#0F1B21) → now #050F12 (surfaceBg) */
  --colors-gray-950: 2, 6, 8;      /* was 5,15,18  (#050F12) → now #020608 (surfaceBgEnd) */
}

/* App-wide gradient bg — slightly lifted above design.md spec so the page
 * doesn't read as pitch-black against the browser frame. Cards (#0F1B21)
 * still stand clearly above the gradient.
 */
html.dark body {
  background:
    radial-gradient(ellipse at top, rgba(47, 78, 94, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #0A131A 0%, #060E15 100%);
  background-attachment: fixed;
  background-color: #0A131A;
}


/* ============================================================================
 * §2 LINKS — Lifted Iron Navy for legibility on dark surfaces
 * `text-primary-500` resolves to Iron Navy #2F4E5E which has only ~1.6:1
 * contrast against gray-900 #0F1B21. Lift to ~4.5:1 by using a brighter shade
 * in the same hue family while leaving `bg-primary-500` (button fill) intact.
 * ========================================================================== */
html.dark .text-primary-500,
html.dark a.link-default,
html.dark .link-default {
  color: rgb(154, 178, 192); /* #9AB2C0 — lifted Iron Navy */
}
html.dark .text-primary-500:hover,
html.dark a.link-default:hover,
html.dark .link-default:hover {
  color: rgb(192, 210, 220); /* #C0D2DC */
}
html.dark .text-primary-400 { color: rgb(184, 202, 212); }
html.dark .text-primary-300 { color: rgb(208, 222, 230); }


/* ============================================================================
 * §3 BUTTONS — design.md §9.1
 * ----------------------------------------------------------------------------
 * Primary CTA  → solid accent fill + glow.
 * Secondary    → outlined, borderDefault.
 * Tertiary     → text-only, accent fg.
 * Radius 12px (= Flutter `radius.default`).
 * ========================================================================== */
html.dark button.bg-primary-500,
html.dark button[class*="bg-primary-5"] {
  border-radius: 0.75rem;
  box-shadow:
    0 4px 16px rgba(47, 78, 94, 0.35),
    0 2px 4px rgba(6, 14, 17, 0.4);
  transition: box-shadow 200ms ease, transform 100ms ease, background-color 150ms ease;
}
html.dark button.bg-primary-500:hover,
html.dark button[class*="bg-primary-5"]:hover {
  box-shadow:
    0 8px 24px rgba(47, 78, 94, 0.55),
    0 4px 8px rgba(15, 27, 33, 0.5);
}
html.dark button.bg-primary-500:active,
html.dark button[class*="bg-primary-5"]:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(6, 14, 17, 0.5);
}

/* Outlined / secondary buttons (Nova's neutral white/gray buttons in dark mode) */
html.dark button.bg-white,
html.dark button.dark\:bg-gray-800 {
  border-radius: 0.75rem;
  border: 1px solid #24373F; /* borderDefault */
  transition: background-color 150ms ease, border-color 150ms ease;
}
html.dark button.bg-white:hover,
html.dark button.dark\:bg-gray-800:hover {
  border-color: #374D58; /* borderStrong */
  background-color: #1A2D34; /* interactiveHover */
}


/* ============================================================================
 * §4 INPUTS — design.md §9.2
 * ----------------------------------------------------------------------------
 * Bg surfaceCard, border borderDefault, focus ring borderFocus (= accent),
 * radius 12, hint text textTertiary.
 * ========================================================================== */
html.dark .form-input,
html.dark input[type="text"].form-input,
html.dark input[type="email"].form-input,
html.dark input[type="password"].form-input,
html.dark input[type="search"].form-input,
html.dark input[type="number"].form-input,
html.dark textarea.form-input,
html.dark select.form-input {
  border-radius: 0.75rem;
  background-color: #0F1B21; /* surfaceCard */
  color: #F2F8F8;            /* textPrimary */
  border: 1px solid #24373F; /* borderDefault */
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
html.dark .form-input::placeholder,
html.dark textarea.form-input::placeholder,
html.dark input.form-input::placeholder {
  color: #5A6770; /* textTertiary */
}
html.dark .form-control-bordered {
  border-radius: 0.75rem;
}
html.dark .form-input:focus,
html.dark .form-control:focus {
  border-color: #2F4E5E;
  box-shadow: 0 0 0 3px rgba(47, 78, 94, 0.25);
  outline: none;
}
html.dark .form-control-bordered-error {
  box-shadow: 0 0 0 2px #E07882; /* statusError */
}


/* ============================================================================
 * §5 CARDS / SURFACES — design.md §9.3
 * ----------------------------------------------------------------------------
 * Standard cards: surfaceCard bg + radius 16 (lg = 1rem) + elevation 2 shadow.
 * Targets the most common Nova card class chains. Sidebar excluded so its
 * full-height fill stays edge-to-edge.
 * ========================================================================== */
html.dark .bg-gray-800.shadow:not(aside *),
html.dark .bg-white.shadow.rounded-lg:not(aside *) {
  border-radius: 1rem;
  box-shadow:
    0 4px 8px rgba(15, 27, 33, 0.5),
    0 2px 4px rgba(6, 14, 17, 0.4);
}

/* Slightly stronger border on bordered cards so they don't disappear into bg */
html.dark .bg-white.dark\:bg-gray-800.shadow {
  border: 1px solid rgba(36, 55, 63, 0.4); /* borderDefault @ 40% */
}

/* Modals / sheets — surfaceHighest + elevation 3 + radius 20 */
html.dark .modal,
html.dark [role="dialog"] > div.bg-white,
html.dark [role="dialog"] > div.dark\:bg-gray-800 {
  border-radius: 1.25rem;
  box-shadow:
    0 8px 16px rgba(28, 46, 54, 0.6),
    0 4px 8px rgba(15, 27, 33, 0.5);
}


/* ============================================================================
 * §6 STATUS PILLS / BADGES — design.md §2.9 + §9.4
 * ----------------------------------------------------------------------------
 * Status colors come in 4 flavours (subtle bg, fg text, border).
 * Re-tone Tailwind palette stops Nova uses for status into the OWLX
 * statusXxx{Subtle,Fg,Border} family.
 *
 * !important is necessary because Nova's compiled utilities ship with
 * the same specificity (single class).
 * ========================================================================== */
/* Success — mint */
html.dark .bg-green-50,
html.dark .bg-green-100,
html.dark .bg-green-900,
html.dark .dark\:bg-green-900 {
  background-color: rgba(20, 43, 31, 0.95) !important; /* statusSuccessSubtle */
}
html.dark .text-green-400,
html.dark .text-green-500,
html.dark .text-green-600,
html.dark .text-green-700,
html.dark .dark\:text-green-400 {
  color: #8FE0AC !important; /* statusSuccessFg */
}
html.dark .border-green-500,
html.dark .border-green-600 {
  border-color: #2D6443 !important; /* statusSuccessBorder */
}

/* Warning — amber */
html.dark .bg-yellow-50,
html.dark .bg-yellow-100,
html.dark .bg-yellow-600,
html.dark .dark\:bg-yellow-600 {
  background-color: rgba(42, 34, 24, 0.95) !important; /* statusWarningSubtle */
}
html.dark .text-yellow-500,
html.dark .text-yellow-600,
html.dark .text-yellow-700,
html.dark .text-yellow-900,
html.dark .dark\:text-yellow-900 {
  color: #F5C880 !important; /* statusWarningFg */
}
html.dark .border-yellow-500 {
  border-color: #6B5230 !important; /* statusWarningBorder */
}

/* Error — rose */
html.dark .bg-red-50,
html.dark .bg-red-100,
html.dark .bg-red-900,
html.dark .dark\:bg-red-900 {
  background-color: rgba(42, 26, 30, 0.95) !important; /* statusErrorSubtle */
}
html.dark .text-red-400,
html.dark .text-red-500,
html.dark .text-red-600,
html.dark .dark\:text-red-400 {
  color: #E89099 !important; /* statusErrorFg */
}
html.dark .border-red-400,
html.dark .border-red-500 {
  border-color: #6B3540 !important; /* statusErrorBorder */
}

/* Info — slate blue */
html.dark .bg-blue-50,
html.dark .bg-blue-100 {
  background-color: rgba(26, 32, 48, 0.95) !important; /* statusInfoSubtle */
}
html.dark .text-blue-500,
html.dark .text-blue-600,
html.dark .text-blue-700 {
  color: #96B5E8 !important; /* statusInfoFg */
}
html.dark .border-blue-500 {
  border-color: #3A4F70 !important; /* statusInfoBorder */
}

/* Round common badge/pill containers to 12 if they don't already round more */
html.dark span.rounded.bg-green-50,
html.dark span.rounded.bg-yellow-50,
html.dark span.rounded.bg-red-50,
html.dark span.rounded.bg-blue-50,
html.dark span.rounded.bg-green-100,
html.dark span.rounded.bg-yellow-100,
html.dark span.rounded.bg-red-100,
html.dark span.rounded.bg-blue-100 {
  border-radius: 0.75rem;
  padding: 0.25rem 0.625rem;
  font-weight: 500;
}


/* ============================================================================
 * §7 AUTH / LOGIN PAGE — Phase B rebrand
 * ----------------------------------------------------------------------------
 * Detects auth pages via `:has()` — uses the form's distinctive
 * `max-w-[25rem]` class as the hook (Login.vue and forgot-password share it).
 * Modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+) all support this.
 * ========================================================================== */

/* Stronger ambient gradient for auth bg (mobile app vibe) */
html.dark body:has(form.max-w-\[25rem\]) {
  background:
    radial-gradient(ellipse 800px 600px at 50% 0%, rgba(47, 78, 94, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 600px 400px at 50% 100%, rgba(47, 78, 94, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, #050F12 0%, #020608 100%);
  background-attachment: fixed;
}

/* Auth wrapper — give the logo more breathing room */
html.dark body:has(form.max-w-\[25rem\]) > #app > div {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Logo container — bigger, glow underneath */
html.dark body:has(form.max-w-\[25rem\]) .max-w-sm.flex.justify-center {
  margin-bottom: 1.5rem;
}
html.dark body:has(form.max-w-\[25rem\]) .max-w-sm.flex.justify-center svg {
  height: 3rem !important;
  width: auto;
  filter: drop-shadow(0 4px 16px rgba(47, 78, 94, 0.4));
}

/* The login form card — glass effect over the gradient */
html.dark form.max-w-\[25rem\] {
  background: linear-gradient(180deg, rgba(28, 46, 54, 0.92), rgba(15, 27, 33, 0.92));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(36, 55, 63, 0.6);
  border-radius: 1.25rem;
  box-shadow:
    0 24px 64px rgba(1, 4, 6, 0.7),
    0 8px 24px rgba(28, 46, 54, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 2.25rem;
}

/* "Welcome Back!" heading */
html.dark form.max-w-\[25rem\] h2 {
  color: #F2F8F8;            /* textPrimary */
  font-size: 1.625rem;       /* ~h3 in design.md */
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

/* Hide the divider line under the welcome heading (cleaner look) */
html.dark form.max-w-\[25rem\] hr,
html.dark form.max-w-\[25rem\] [class*="divider" i] {
  border-color: rgba(36, 55, 63, 0.5);
  margin: 0 0 1.5rem;
}

/* Input labels — tracked uppercase per design.md §3.4 */
html.dark form.max-w-\[25rem\] label[for="email"],
html.dark form.max-w-\[25rem\] label[for="password"] {
  color: #788489;                /* textSecondary */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Inputs inside auth — slightly different tone than the §4 default */
html.dark form.max-w-\[25rem\] .form-input {
  background-color: rgba(5, 15, 18, 0.5);
  border: 1px solid rgba(36, 55, 63, 0.7);
  height: 3rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
  border-radius: 0.75rem;
}
html.dark form.max-w-\[25rem\] .form-input:focus {
  background-color: rgba(15, 27, 33, 0.7);
  border-color: #2F4E5E;
  box-shadow: 0 0 0 3px rgba(47, 78, 94, 0.3);
}

/* "Forgot your password?" link — recolor to lifted accent */
html.dark form.max-w-\[25rem\] a {
  color: #9AB2C0;
  font-weight: 500;
}
html.dark form.max-w-\[25rem\] a:hover {
  color: #C0D2DC;
}

/* Submit button — accent gradient + premium glow */
html.dark form.max-w-\[25rem\] button[type="submit"] {
  background: linear-gradient(90deg, #2F4E5E 0%, #456C7E 100%) !important;
  border-radius: 0.75rem;
  height: 3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  box-shadow:
    0 6px 20px rgba(47, 78, 94, 0.45),
    0 2px 4px rgba(6, 14, 17, 0.4);
  transition: all 200ms ease;
}
html.dark form.max-w-\[25rem\] button[type="submit"]:hover {
  background: linear-gradient(90deg, #456C7E 0%, #5C8090 100%) !important;
  box-shadow:
    0 10px 28px rgba(47, 78, 94, 0.6),
    0 4px 8px rgba(15, 27, 33, 0.5);
  transform: translateY(-1px);
}
html.dark form.max-w-\[25rem\] button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(6, 14, 17, 0.5);
}


/* ============================================================================
 * §9 TOP HEADER — inverted hierarchy
 * ----------------------------------------------------------------------------
 * Header bar blends into the body bg (transparent) so its silhouette
 * disappears against the gradient. Inner block elements (global search,
 * theme/notification/user pills) are LIFTED to surfaceElevated so they pop
 * out — the inverse of the default Nova chrome where the bar is lifted and
 * children sit darker.
 * ============================================================================ */

/* Header bar — match body */
html.dark header.dark\:bg-gray-800 {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(36, 55, 63, 0.25) !important;
  box-shadow: none !important;
}

/* Global search input pill — Nova wraps the input in a rounded container.
 * Lift both the wrapper and the input to surfaceElevated. */
html.dark header input[type="search"],
html.dark header input.form-input,
html.dark header [class*="rounded-full"],
html.dark header [class*="rounded-lg"]:has(input),
html.dark header [class*="rounded-md"]:has(input) {
  background-color: #15252B !important;
  border-color: rgba(36, 55, 63, 0.5) !important;
}
html.dark header input[type="search"]:focus,
html.dark header input.form-input:focus {
  background-color: #1C2E36 !important;
  border-color: #2F4E5E !important;
  box-shadow: 0 0 0 3px rgba(47, 78, 94, 0.25) !important;
}

/* Icon buttons (theme, notification, mobile menu toggle) — subtle lifted
 * pill on hover for hit-feedback consistency. */
html.dark header button {
  border-radius: 0.625rem;
  transition: background-color 150ms ease, color 150ms ease;
}
html.dark header button:hover:not([type="submit"]) {
  background-color: #15252B !important;
}

/* OWLX logo link container — keep transparent so the logo SVG floats. */
html.dark header a[href*="/nova"] {
  background-color: transparent !important;
}

/* UserMenu profile pill — subtle lifted bg so it reads as a clickable target. */
html.dark header [class*="UserMenu"],
html.dark header > div:last-child > div:last-child > div:last-child {
  border-radius: 999px;
}


/* ============================================================================
 * §10 TYPOGRAPHY — design.md §3 (hierarchy + tracking + line-height)
 * ----------------------------------------------------------------------------
 * Bare element selectors below apply ONLY when no Tailwind `text-*` size
 * utility is present on the element — Tailwind classes have higher
 * specificity and continue to win where Nova explicitly sizes a heading.
 *
 * Inter is already loaded via the @import url(...) in fonts.css that ships
 * inside Nova's compiled CSS. The font-family rule below ensures it
 * propagates to every element regardless of how Nova compiled `font-sans`.
 * ============================================================================ */

html,
body {
  font-family:
    'Inter', 'InterTight', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01'; /* Inter stylistic alternates */
}

/* Keep monospace explicit so body font-family doesn't cascade in */
code, pre, kbd, samp,
.CodeMirror, [class*="codemirror" i] {
  font-family:
    'JetBrains Mono', Menlo, Consolas, Monaco, 'Andale Mono',
    'Courier New', monospace;
}

/* §3.2 Type scale — h1 (32) / h2 (28) / h3 (24) / h4 (20) / h5 (18) */
h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
h4 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
h5 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* §3.4 Tracked uppercase labels — table column headers "ID", "NAME", etc.
 * Tailwind's `tracking-wider` is 0.05em; design.md spec says 1.5-2.0px
 * (~0.1em on 11-12px text). Bump accordingly. */
table thead th,
th[scope="col"] {
  letter-spacing: 0.1em;
  font-size: 0.6875rem;     /* 11px */
  font-weight: 600;
  text-transform: uppercase;
}
html.dark table thead th,
html.dark th[scope="col"] {
  color: #788489;            /* textSecondary */
}

/* Generic uppercase + small text combo (Nova badges, detail panel labels) */
html .uppercase.text-xs,
html .uppercase.text-xxs {
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* §3.2 Caption / help text — 12px regular */
.help-text {
  font-size: 0.75rem;
  line-height: 1.5;
}

/* §3.2 Button labels — 16px medium / 0.5 letter-spacing.
 * Nova ships button text via Tailwind utilities; just nudge the tracking. */
button {
  letter-spacing: 0.005em;
}

/* Nova page heading shorthand — `.heading` class is used in custom Nova pages.
 * Bring it up to match h2 spec when not explicitly sized. */
.heading {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}


/* ============================================================================
 * §8 SCROLLBAR — match dark theme (Webkit only, Firefox uses scrollbar-color)
 * ============================================================================ */
html.dark *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.dark *::-webkit-scrollbar-track {
  background: transparent;
}
html.dark *::-webkit-scrollbar-thumb {
  background-color: rgba(36, 55, 63, 0.6);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.dark *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(58, 77, 88, 0.8);
}
html.dark {
  scrollbar-color: rgba(36, 55, 63, 0.6) transparent;
}