/*
 * Nova Design Overrides
 *
 * Applies the Postflex corporate design to the Laravel Nova admin panel:
 * - Background color: #e1f0f8
 * - Text color: black
 * - Base font: Lato
 * - Headings font: Merriweather
 *
 * Note: Nova 5 uses Inertia.js and does NOT render a #nova wrapper element.
 * All selectors must target body or direct class/attribute selectors.
 */

/* ============================================================
 * Font rendering optimization
 * ============================================================ */

body {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================================
 * Background color
 * ============================================================ */

/* Main app background */
/* Note: Nova's layout.blade.php sets body class="bg-gray-100 text-gray-500"
 * We must use !important to override Tailwind utility classes.
 * We only target body and min-h-screen, NOT .bg-gray-100 generically,
 * because action dialogs and other components use bg-gray-100 for their own backgrounds. */
body,
body.bg-gray-100,
.min-h-screen {
    background-color: #e1f0f8 !important;
}

/* Sidebar background: blue for both desktop and mobile menu */
.hidden.lg\:block [dusk="sidebar-menu"],
.lg\:block [dusk="sidebar-menu"],
[dusk="sidebar-menu"][data-screen="responsive"],
[data-screen="responsive"] {
    background-color: #e1f0f8 !important;
}

/* Mobile menu panel wrapper: also blue */
[dusk="sidebar-menu"],
[dusk="sidebar-menu"] ~ *,
.flex.flex-col.gap-2.justify-between.h-full,
/* The outer panel wrapper that contains the sidebar-menu */
.relative.flex.flex-col:has([dusk="sidebar-menu"]),
.bg-white:has([dusk="sidebar-menu"]),
/* Any ancestor of sidebar-menu up to the fixed overlay */
.fixed:has([dusk="sidebar-menu"]),
.absolute:has([dusk="sidebar-menu"]) {
    background-color: #e1f0f8 !important;
}

/* Content area cards and panels: keep white, but NOT the mobile menu panel and NOT checkbox spans */
.bg-white:not(:has([dusk="sidebar-menu"])):not([dusk="sidebar-menu"]):not(span),
[class*="bg-white"]:not(:has([dusk="sidebar-menu"])):not([dusk="sidebar-menu"]):not(span) {
    background-color: #ffffff !important;
}

/* Override: mobile menu panel and all its ancestors must be blue (placed AFTER the white rule) */
.bg-white:has([dusk="sidebar-menu"]) {
    background-color: #e1f0f8 !important;
}

/* ============================================================
 * Text color
 * ============================================================ */

/* Note: Nova's body has text-gray-500 — override with !important */
body,
body.text-gray-500,
p,
td:not([class*="text-green-"]):not([class*="text-red-"]):not([class*="text-gray-4"]),
th,
li,
label,
input,
textarea,
select {
    color: #000000 !important;
}

/* span: black text, but not inside primary buttons or checkbox wrappers or text-white parents or inside badges */
/* Note: .relative.inline-flex is the checkbox SVG wrapper — must be excluded to keep currentColor working */
/* Note: [resource] and [dusk="sidebar-menu"] elements often contain badges where we want to preserve our custom colors */
span:not([class*="bg-primary-"]):not(.text-white):not([class*="inline-flex"]):not([class*="relative"]):not([class*="text-green-"]):not([class*="text-red-"]):not([class*="bg-green-"]):not([class*="bg-red-"]):not([class*="bg-blue-"]):not([class*="bg-yellow-"]):not([class*="bg-orange-"]):not([class*="bg-purple-"]):not([class*="bg-pink-"]):not([class*="bg-indigo-"]):not([class*="bg-teal-"]):not([class*="bg-cyan-"]):not([resource] span.rounded-full):not([dusk$="-detail-component"] span.rounded-full):not([dusk="sidebar-menu"] span.rounded-full) {
    color: #000000;
}

/* Spans inside primary buttons must stay white */
a[class*="bg-primary-"] span,
button[class*="bg-primary-"] span,
a.text-white span {
    color: #ffffff !important;
}

/* .text-white span: white, but NOT the checkbox SVG wrapper */
.text-white span:not(.relative.inline-flex.h-4.w-4) {
    color: #ffffff !important;
}


/* div: black text, but not primary-colored and not checkbox wrappers or green/red text or inside badges */
div:not([class*="bg-primary-"]):not(.text-white):not([role="checkbox"]):not([class*="text-green-"]):not([class*="text-red-"]):not([resource] div:has(> span.rounded-full)):not([dusk$="-detail-component"] div:has(> span.rounded-full)):not([dusk="sidebar-menu"] div:has(> span.rounded-full)) {
    color: #000000;
}

.text-gray-500:not([class*="bg-primary-"]):not(.text-white):not(svg):not(path):not([class*="text-green-"]):not([class*="text-red-"]) {
    color: #000000 !important;
}

/* Explicit colors for green and red text to override global black */
.text-green-500,
span[class*="text-green-500"],
div[class*="text-green-500"] {
    color: #63A152 !important;
}

.text-red-500,
span[class*="text-red-500"],
div[class*="text-red-500"] {
    color: #D95757 !important;
}


/* Links: blue by default, but not primary-colored buttons */
a:not([class*="bg-primary-"]):not([variant="button"]):not(.text-white) {
    color: #009DD4;
}

/* ============================================================
 * Base font: Lato
 * ============================================================ */

body,
p,
span,
td,
th,
li,
label,
input,
textarea,
select,
button {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

/* ============================================================
 * Headings font: Merriweather
 * ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
[class*="heading"],
[class*="title"] {
    font-family: 'Merriweather', serif !important;
}

/* Primary buttons: white text (overrides the global color: black rule) */
a[variant="button"],
a.bg-primary-500,
button.bg-primary-500,
[class*="bg-primary-"],
a[variant="button"] span:not(.relative.inline-flex.h-4.w-4),
a.bg-primary-500 span:not(.relative.inline-flex.h-4.w-4),
button.bg-primary-500 span:not(.relative.inline-flex.h-4.w-4),
[class*="bg-primary-"] span:not(.relative.inline-flex.h-4.w-4),
.text-white:not(.relative.inline-flex.h-4.w-4),
.text-white span:not(.relative.inline-flex.h-4.w-4),
.bg-white a.bg-primary-500,
.bg-white a[class*="bg-primary-"],
.bg-white a.bg-primary-500 span:not(.relative.inline-flex.h-4.w-4),
.bg-white a[class*="bg-primary-"] span:not(.relative.inline-flex.h-4.w-4),
div a.bg-primary-500,
div a[class*="bg-primary-"],
div a.bg-primary-500 span:not(.relative.inline-flex.h-4.w-4),
div a[class*="bg-primary-"] span:not(.relative.inline-flex.h-4.w-4),
a.bg-primary-500[target="_blank"],
a[class*="bg-primary-"][target="_blank"],
a.bg-primary-500[rel],
a[class*="bg-primary-"][rel],
a.bg-primary-500,
a[class*="bg-primary-"] {
    color: #ffffff !important;
}

/* Checkbox SVG wrapper: must use white color so the SVG checkmark (currentColor) appears white.
 * The span has class "text-white" directly on itself, so we target it explicitly.
 * Also target via parent data-state for robustness. */
span.relative.inline-flex.h-4.w-4,
span.text-white.relative,
span.text-white[class*="inline-flex"],
.text-white span.relative.inline-flex.h-4.w-4,
[class*="bg-primary-"] span.relative.inline-flex.h-4.w-4,
.bg-white span.relative.inline-flex.h-4.w-4,
[data-state="checked"] span.relative.inline-flex.h-4.w-4,
[role="checkbox"] span.relative.inline-flex.h-4.w-4 {
    color: #ffffff !important;
}

/* Search bars: add border matching other input fields */
[dusk="search-input"],
[dusk="global-search"] {
    border: 1px solid #a0c4d8 !important;
    border-radius: 0.375rem !important;
    background-color: #ffffff !important;
}

/* Table footer (pagination wrapper): white background like table header */
.border-t.border-gray-200,
[should-show-pagination],
[per-page],
.rounded-b-lg,
nav.flex.justify-between.items-center,
nav.flex.justify-between.items-center button,
nav.flex.justify-between.items-center span {
    background-color: #ffffff !important;
}

/* Menu hover: lighter blue matching the background (Nova uses hover:bg-gray-200) */
.hover\:bg-gray-200:hover {
    background-color: #b8d8ed !important;
}

/* Active menu item: restore bold font weight (overridden by global font-weight: 400 on span) */
[dusk="sidebar-menu"] .font-bold,
[dusk="sidebar-menu"] a.font-bold,
[dusk="sidebar-menu"] a.font-bold span,
[dusk="sidebar-menu"] span.font-bold,
[dusk="sidebar-menu"] button.font-bold,
nav a.font-bold,
nav a.font-bold span,
aside a.font-bold,
aside a.font-bold span,
.sidebar a.font-bold,
.sidebar a.font-bold span,
a.font-bold[href*="/resources/"],
a.font-bold[href*="/resources/"] span,
a.font-bold[href*="/dashboards/"],
a.font-bold[href*="/dashboards/"] span,
a.font-bold[href*="/lens/"],
a.font-bold[href*="/lens/"] span {
    font-weight: 700 !important;
}

/* ============================================================
 * Auth pages (Login, Forgot Password, Reset Password)
 * ============================================================ */

/* Auth page wrapper: ensure background color */
body.min-h-screen,
.min-h-screen.flex.flex-col.items-center,
.min-h-screen.flex.items-center {
    background-color: #e1f0f8 !important;
}

/* Auth card: white background with subtle shadow */
.bg-white.shadow.rounded-lg,
.bg-white.overflow-hidden.shadow,
.bg-white.rounded.shadow {
    background-color: #ffffff !important;
}

/* Auth headings (font-normal and font-bold variants) */
.text-2xl.font-bold,
.text-xl.font-bold,
.font-bold.text-2xl,
.font-bold.text-xl,
.text-2xl.font-normal,
.text-xl.font-normal,
h2.text-2xl,
h2.text-xl {
    font-family: 'Merriweather', serif !important;
    color: #000000 !important;
}

/* Auth "Forgot password" link: black text instead of gray */
a.text-gray-500.font-bold,
a.no-underline.font-bold {
    color: #000000 !important;
}

/* Auth page logo: ensure visibility on blue background */
.text-gray-600.fill-current,
svg .text-gray-600 {
    color: #000000 !important;
}

/* Auth page logo: double the size (from h-8 to h-16) */
.max-w-sm svg.h-8,
.py-8 svg.h-8 {
    height: 4rem !important;
}

/* Auth input fields */
.appearance-none.rounded,
input[type="email"],
input[type="password"],
input[type="text"] {
    font-family: 'Lato', sans-serif !important;
    font-weight: 400;
    color: #000000 !important;
}

/* Auth labels */
label {
    font-family: 'Lato', sans-serif !important;
    font-weight: 400;
    color: #000000 !important;
}

/* Auth links */
.text-primary-500,
a.text-primary-500 {
    color: #009DD4 !important;
}

/* Index/Lens/Dashboard heading (h1 with Tailwind utility classes like font-normal, text-xl) */
[dusk="index-heading"],
[dusk="lens-heading"],
[dusk="heading"],
[dusk="index-heading"] span:not(.relative.inline-flex.h-4.w-4),
[dusk="lens-heading"] span:not(.relative.inline-flex.h-4.w-4),
[dusk="heading"] span:not(.relative.inline-flex.h-4.w-4),
[dusk$="-detail-heading"],
[dusk$="-detail-heading"] span:not(.relative.inline-flex.h-4.w-4),
[dusk$="-panel-heading"],
[dusk$="-panel-heading"] span:not(.relative.inline-flex.h-4.w-4) {
    font-family: 'Merriweather', serif !important;
    color: #000000 !important;
}

/* ============================================================
 * CodeMirror editor: preserve theme colors (do not override with global black)
 * ============================================================ */

/* Reset all global color overrides inside CodeMirror — let the theme (e.g. Dracula) control colors.
 * The Dracula theme sets color on .CodeMirror itself; we must not override it with black.
 * Using "unset" removes our global black color so the theme's own color takes effect. */
.CodeMirror,
.CodeMirror *,
.CodeMirror pre,
.CodeMirror span,
.CodeMirror div,
.CodeMirror .CodeMirror-line,
.CodeMirror .CodeMirror-code,
.CodeMirror .CodeMirror-linenumber {
    color: unset !important;
}

/* Dropdown menus: disabled items use class "text-gray-400" — must override the global black text rule */
[dusk="dropdown-teleported"] .text-gray-400,
[dusk="dropdown-menu"] .text-gray-400 {
    color: #9ca3af !important;
    cursor: default !important;
}

/* Dropdown menus: ensure black text for buttons/headings, blue for links */
[dusk="dropdown-teleported"] button,
[dusk="dropdown-teleported"] h3,
[dusk="dropdown-teleported"] span:not(.relative.inline-flex.h-4.w-4),
[dusk="dropdown-menu"] button,
[dusk="dropdown-menu"] h3,
[dusk="dropdown-menu"] span:not(.relative.inline-flex.h-4.w-4) {
    color: #000000 !important;
}

[dusk="dropdown-teleported"] a,
[dusk="dropdown-menu"] a {
    color: #009DD4 !important;
}

/* Card text: ensure black color for all text inside Nova cards */
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6,
.bg-white p,
.bg-white span:not([class*="bg-primary-"]):not(.text-white):not(.relative.inline-flex.h-4.w-4):not([class*="bg-green-"]):not([class*="bg-red-"]):not([class*="bg-blue-"]):not([class*="bg-yellow-"]):not([class*="bg-orange-"]):not([class*="bg-purple-"]):not([class*="bg-pink-"]):not([class*="bg-indigo-"]):not([class*="bg-teal-"]):not([class*="bg-cyan-"]),
.bg-white td,
.bg-white th,
.bg-white li,
.bg-white label,
.bg-white div:not([role="checkbox"]) {
    color: #000000;
}

/* Error text inside cards: ensure red color overrides the black text rule */
.bg-white p.text-red-500,
.bg-white .help-text-error,
.bg-white .help-text.help-text-error,
p.text-red-500,
.help-text.text-red-500 {
    color: #D95757 !important;
}

/* Links inside cards: blue */
.bg-white a:not([class*="bg-primary-"]):not([variant="button"]):not(.text-white) {
    color: #009DD4;
}

/* User security / profile pages: ensure black text for headings and paragraphs
 * These pages use text-gray-600 and similar Tailwind classes that override body color.
 */
h1, h2, h3, h4, h5, h6 {
    color: #000000;
}

p.text-gray-600,
p.text-sm.text-gray-600,
.text-gray-600 {
    color: #000000 !important;
}

/* ============================================================
 * Checkboxes in actions and edit forms: match table checkbox style
 *
 * Nova uses two different checkbox implementations:
 * - Table rows: laravel-nova-ui <Checkbox> component (div[role="checkbox"] with data-state)
 * - Actions/Forms: native input[type="checkbox"].checkbox
 *
 * This section makes the native .checkbox look identical to the custom component.
 * ============================================================ */

/* Base style: match the custom checkbox span appearance */
input[type="checkbox"].checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    border-radius: 0.25rem !important;
    border: 1px solid rgba(3, 7, 18, 0.2) !important;
    background-color: #ffffff !important;
    background-image: none !important;
    cursor: pointer !important;
    position: relative !important;
    vertical-align: middle !important;
}

/* Focus ring: match the custom checkbox focus style */
input[type="checkbox"].checkbox:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgb(var(--colors-primary-500, 64 156 209)) !important;
}

/* Checked state: blue background with white checkmark SVG — high specificity to override .bg-white rules */
input[type="checkbox"].checkbox:checked,
.bg-white input[type="checkbox"].checkbox:checked,
body input[type="checkbox"].checkbox:checked {
    background-color: #009DD4 !important;
    border-color: #009DD4 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' fill-rule='nonzero' d='M3.708 5.293a1 1 0 1 0-1.415 1.416l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.416L5.001 6.587 3.708 5.293Z'/%3E%3C/svg%3E") !important;
    background-size: 0.75rem !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Disabled state */
input[type="checkbox"].checkbox:disabled {
    background-color: #e5e7eb !important;
    border-color: #d1d5db !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================================
 * Custom checkbox (div[role="checkbox"]) in action modals:
 * Override !important background rules so checked/indeterminate states show the primary color.
 * ============================================================ */

/* Checked state: primary blue background and border */
html body [role="checkbox"][data-state="checked"] > span.relative.inline-flex,
html body [role="checkbox"][data-state="indeterminate"] > span.relative.inline-flex {
    background-color: rgb(var(--colors-primary-500)) !important;
    border-color: rgb(var(--colors-primary-500)) !important;
}

/* Unchecked state: white background (light mode) */
html body [role="checkbox"][data-state="unchecked"] > span.relative.inline-flex {
    background-color: #ffffff !important;
}

/* ============================================================
 * Dark mode overrides
 *
 * This file is loaded LAST in the cascade to ensure all dark: Tailwind variants
 * are overridden with light-mode equivalents. Nova uses both :is(.dark *) selectors
 * and context-prefixed selectors (e.g. .icon-action-toolbar .dark\:bg-gray-950).
 * We use html-prefixed selectors for maximum specificity to override all variants.
 * ============================================================ */

/* Dark backgrounds → light equivalents */
html body .dark\:bg-gray-950 { background-color: rgba(0, 0, 0, 0.03) !important; }
html body .dark\:bg-gray-900 { background-color: #f9fafb !important; }
html body .dark\:bg-gray-800 { background-color: #ffffff !important; }
html body .dark\:bg-gray-700 { background-color: #ffffff !important; }
html body .dark\:bg-gray-600 { background-color: #e5e7eb !important; }
html body .dark\:bg-gray-400 { background-color: #e5e7eb !important; }
html body .dark\:enabled\:bg-gray-950:enabled { background-color: rgba(0, 0, 0, 0.03) !important; }
html body .dark\:focus\:bg-gray-800:focus { background-color: #ffffff !important; }
html body .dark\:focus\:bg-gray-900:focus { background-color: #f9fafb !important; }

/* Dark text → light equivalents */
html body .dark\:text-gray-100 { color: #111827 !important; }
html body .dark\:text-gray-200 { color: #1f2937 !important; }
html body .dark\:text-gray-300 { color: #374151 !important; }
html body .dark\:text-gray-400 { color: #6b7280 !important; }
html body .dark\:text-gray-500 { color: #6b7280 !important; }
html body .dark\:text-gray-600 { color: #4b5563 !important; }
html body .dark\:text-gray-700 { color: #374151 !important; }
html body .dark\:text-gray-800 { color: #1f2937 !important; }
html body .dark\:text-gray-900 { color: #111827 !important; }
html body .dark\:text-red-400 { color: #f87171 !important; }
html body .dark\:text-sky-900 { color: #0c4a6e !important; }

/* Dark borders → light equivalents */
html body .dark\:border-gray-500 { border-color: #d1d5db !important; }
html body .dark\:border-gray-600 { border-color: #d1d5db !important; }
html body .dark\:border-gray-700 { border-color: #e5e7eb !important; }
html body .dark\:border-gray-800 { border-color: #f3f4f6 !important; }
html body .dark\:border-gray-900 { border-color: #f9fafb !important; }

/* Dark badge backgrounds → light equivalents */
html body .dark\:bg-sky-600 { background-color: #bae6fd !important; }
html body .dark\:bg-red-400 { background-color: #fee2e2 !important; }

/* Dark dividers → light equivalents */
html body .dark\:divide-gray-700 > * + * { border-color: #e5e7eb !important; }

/* Dark ring colors → light equivalents */
html body .dark\:ring-gray-600 { --tw-ring-color: #d1d5db !important; }
html body .dark\:focus\:ring-gray-600:focus { --tw-ring-color: #d1d5db !important; }

/* Body and html: always light background */
html body { background-color: #e1f0f8 !important; }
html.dark body { background-color: #e1f0f8 !important; }
body.dark\:bg-gray-900 { background-color: #e1f0f8 !important; }

/* Fix modal scrolling in Safari and Edge:
 * - The overlay uses position:fixed + overflow-y:auto (from Tailwind classes).
 * - In Safari, body overflow:hidden blocks fixed-element scrolling.
 * - We ensure the overlay itself is the scroll container.
 * - The JS file nova-modal-scroll-fix.js resets scrollTop when a modal opens.
 */
[role="alertdialog"].fixed,
[role="dialog"].fixed {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
}

/* Toolbar button hover background — must override nova-design.css !important rules */
/* High specificity to beat .bg-white * !important rules */

html body .icon-action-toolbar button:not(:disabled):hover,
html body .icon-action-toolbar .toolbar-button:not(:disabled):hover,
html body .bg-white .icon-action-toolbar button:not(:disabled):hover,
html body .bg-white .icon-action-toolbar .toolbar-button:not(:disabled):hover {
    background-color: #b8d8ed !important;
    border-radius: 0.25rem !important;
}