/*
 * App shell supplementary utilities.
 * Adds a focused subset of Tailwind-style helpers that the pre-purged
 * Metronic styles.css does not already ship, so the Blade views render
 * with the expected colors, spacing, and responsive behaviour.
 */

/* Layout helpers ---------------------------------------------------------- */
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-\[400px\] { max-width: 400px; }
.min-h-0 { min-height: 0; }
.min-h-\[90px\] { min-height: 90px; }
.min-h-\[160px\] { min-height: 160px; }
.z-\[60\] { z-index: 60; }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.size-\[18px\] { width: 18px; height: 18px; }
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.25; }
.leading-none { line-height: 1; }
.mt-0\.5 { margin-top: 0.125rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.-mb-6 { margin-bottom: -1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.text-\[10px\] { font-size: 10px; line-height: 1.4; }
.text-\[11px\] { font-size: 11px; line-height: 1.4; }

.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }
.divide-border > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border, #e5e7eb); }

/* Responsive grid / flex -------------------------------------------------- */
@media (min-width: 40rem) {
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:inline { display: inline; }
    .sm\:inline-flex { display: inline-flex; }
}
@media (min-width: 48rem) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:items-end { align-items: flex-end; }
    .md\:justify-between { justify-content: space-between; }
}
@media (min-width: 64rem) {
    .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    .lg\:p-6 { padding: 1.5rem; }
    .lg\:p-8 { padding: 2rem; }
    .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

/* Dark-mode display helpers not in the base bundle */
.dark .dark\:inline { display: inline; }
.dark .dark\:inline-flex { display: inline-flex; }

/* Shared palette ---------------------------------------------------------- */
.text-emerald-500 { color: #10b981; }
.text-emerald-700 { color: #047857; }
.text-emerald-300 { color: #6ee7b7; }
.text-amber-500 { color: #f59e0b; }
.text-amber-700 { color: #b45309; }
.text-amber-300 { color: #fcd34d; }
.text-slate-600 { color: #475569; }
.text-slate-300 { color: #cbd5e1; }
.text-indigo-500 { color: #6366f1; }
.text-violet-500 { color: #8b5cf6; }
.text-red-400 { color: #f87171; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }

.bg-emerald-50 { background-color: #ecfdf5; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-red-50 { background-color: #fef2f2; }

.bg-emerald-950\/40 { background-color: rgba(2, 44, 34, 0.4); }
.bg-amber-950\/40 { background-color: rgba(69, 26, 3, 0.4); }
.bg-slate-800\/60 { background-color: rgba(30, 41, 59, 0.6); }
.bg-slate-900\/60 { background-color: rgba(15, 23, 42, 0.6); }
.bg-red-950\/40 { background-color: rgba(69, 10, 10, 0.4); }

.bg-accent\/30 { background-color: color-mix(in oklab, var(--color-accent, #f1f5f9) 30%, transparent); }
.bg-accent\/40 { background-color: color-mix(in oklab, var(--color-accent, #f1f5f9) 40%, transparent); }
.bg-accent\/60 { background-color: color-mix(in oklab, var(--color-accent, #f1f5f9) 60%, transparent); }
.hover\:bg-accent\/40:hover { background-color: color-mix(in oklab, var(--color-accent, #f1f5f9) 40%, transparent); }
.hover\:bg-accent\/60:hover { background-color: color-mix(in oklab, var(--color-accent, #f1f5f9) 60%, transparent); }

.border-emerald-200 { border-color: #a7f3d0; }
.border-emerald-900\/60 { border-color: rgba(6, 78, 59, 0.6); }
.border-red-200 { border-color: #fecaca; }
.border-red-900\/60 { border-color: rgba(127, 29, 29, 0.6); }

.ring-emerald-200\/70 { --tw-ring-color: rgba(167, 243, 208, 0.7); box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), 0 0 0 1px var(--tw-ring-color), var(--tw-shadow, 0 0 #0000); }
.ring-emerald-900\/60 { --tw-ring-color: rgba(6, 78, 59, 0.6); box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), 0 0 0 1px var(--tw-ring-color), var(--tw-shadow, 0 0 #0000); }
.ring-amber-200\/70 { --tw-ring-color: rgba(253, 230, 138, 0.7); box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), 0 0 0 1px var(--tw-ring-color), var(--tw-shadow, 0 0 #0000); }
.ring-amber-900\/60 { --tw-ring-color: rgba(120, 53, 15, 0.6); box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), 0 0 0 1px var(--tw-ring-color), var(--tw-shadow, 0 0 #0000); }
.ring-slate-200 { --tw-ring-color: #e2e8f0; box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), 0 0 0 1px var(--tw-ring-color), var(--tw-shadow, 0 0 #0000); }
.ring-slate-700 { --tw-ring-color: #334155; box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), 0 0 0 1px var(--tw-ring-color), var(--tw-shadow, 0 0 #0000); }

.hover\:border-primary\/40:hover { border-color: color-mix(in oklab, var(--color-primary, #4f46e5) 40%, transparent); }
.group:hover .group-hover\:text-primary { color: var(--color-primary, #4f46e5); }

/* Dark mode overrides ----------------------------------------------------- */
html.dark .dark\:text-emerald-300 { color: #6ee7b7; }
html.dark .dark\:text-amber-300 { color: #fcd34d; }
html.dark .dark\:text-slate-300 { color: #cbd5e1; }
html.dark .dark\:text-red-300 { color: #fca5a5; }
html.dark .dark\:text-red-400 { color: #f87171; }
html.dark .dark\:bg-emerald-950\/40 { background-color: rgba(2, 44, 34, 0.4); }
html.dark .dark\:bg-amber-950\/40 { background-color: rgba(69, 26, 3, 0.4); }
html.dark .dark\:bg-slate-800\/60 { background-color: rgba(30, 41, 59, 0.6); }
html.dark .dark\:bg-red-950\/40 { background-color: rgba(69, 10, 10, 0.4); }
html.dark .dark\:border-emerald-900\/60 { border-color: rgba(6, 78, 59, 0.6); }
html.dark .dark\:border-red-900\/60 { border-color: rgba(127, 29, 29, 0.6); }
html.dark .dark\:ring-emerald-900\/60 { --tw-ring-color: rgba(6, 78, 59, 0.6); }
html.dark .dark\:ring-amber-900\/60 { --tw-ring-color: rgba(120, 53, 15, 0.6); }
html.dark .dark\:ring-slate-700 { --tw-ring-color: #334155; }

/*
 * Dark theme palette (app + auth).
 * Sidebar #000000 · Top bar #111827 · Page #0B0F14 · Cards #151B24
 * Borders #243041 · Accent #DC2626 · Text #F8FAFC · Muted #94A3B8
 */
html.dark {
    --background: #0b0f14;
    --foreground: #f8fafc;
    --card: #151b24;
    --card-foreground: #f8fafc;
    --popover: #151b24;
    --popover-foreground: #f8fafc;
    --primary: #dc2626;
    --primary-foreground: #ffffff;
    --secondary: #151b24;
    --secondary-foreground: #f8fafc;
    --muted: #111827;
    --muted-foreground: #94a3b8;
    --accent: #261a1e;
    --accent-foreground: #f8fafc;
    --border: #243041;
    --input: #243041;
    --ring: #dc2626;
    --mono: #f8fafc;
    --mono-foreground: #0b0f14;

    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-popover: var(--popover);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-mono: var(--mono);
}

html.dark body.demo1 {
    background-color: #0b0f14;
    color: #f8fafc;
}

html.dark body.demo1 .kt-sidebar#sidebar {
    background-color: #000000 !important;
}

/* Sidebar scroll: menu scrolls; footer stays pinned below. */
body.demo1 .kt-sidebar#sidebar {
    max-height: 100vh;
    height: 100vh;
    height: 100dvh;
}

body.demo1 .kt-sidebar#sidebar .kt-sidebar-content {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

body.demo1 .kt-sidebar#sidebar #sidebar_scrollable {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.demo1 .kt-sidebar#sidebar #sidebar_footer {
    flex-shrink: 0;
}

html.dark .kt-header#header {
    background-color: #111827 !important;
}

/* Cards / panels: match card token where components use page background. */
html.dark body.demo1 .kt-card {
    background-color: #151b24;
    border-color: #243041;
}

html.dark body.demo1 .kt-link,
html.dark body.demo1 .text-primary {
    color: #f87171;
}

html.dark body.demo1 .kt-link:hover {
    color: #fca5a5;
}

/* Regular users get the blue WILDN scheme while admins keep the red operations theme. */
html.dark body.demo1.wildn-user-theme {
    --primary: #2563eb;
    --ring: #2563eb;
    --accent: #111f3f;
    --color-primary: var(--primary);
    --color-accent: var(--accent);
}

html.dark body.demo1.wildn-user-theme .kt-link,
html.dark body.demo1.wildn-user-theme .text-primary {
    color: #60a5fa;
}

html.dark body.demo1.wildn-user-theme .kt-link:hover {
    color: #93c5fd;
}

/* Metronic default .kt-container-fixed caps content at ~1280px (breakpoint-xl). Use 2xl
   (~1536px) as a modest wider cap. Family/work dashboard routes keep xl (body.kt-dashboard-tv-design);
   TV wallboard mode still uses !important overrides. */
@media (width >= 80rem) {
    .kt-container-fixed {
        max-width: min(100%, var(--breakpoint-2xl));
    }

    body.kt-dashboard-tv-design .kt-container-fixed {
        max-width: var(--breakpoint-xl);
    }
}

/* TV wallboards: night dim (Auckland schedule) -------------------------------- */
.tv-night-dim-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.65s ease;
}

body.tv-night-dim-active .tv-night-dim-overlay {
    opacity: var(--tv-night-dim-opacity, 0.5);
}

.tv-night-dim-toggle {
    position: fixed;
    z-index: 100000;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(5.5rem, calc(5.5rem + env(safe-area-inset-bottom, 0px)));
    border-color: rgba(226, 232, 240, 0.35) !important;
    color: #e2e8f0 !important;
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.tv-night-dim-toggle:hover {
    border-color: rgba(226, 232, 240, 0.55) !important;
    color: #fff !important;
    background: rgba(30, 41, 59, 0.95) !important;
}

body.tv-night-dim-active .tv-night-dim-toggle {
    border-color: rgba(250, 204, 21, 0.45) !important;
}

/* Accessibility + listing toolbars ------------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Listing filter row — one line: search | label + select | … | create (right) */
.listing-toolbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 0.625rem;
    width: 100%;
}

.listing-toolbar > .listing-toolbar__search,
.listing-toolbar > .listing-toolbar__filter,
.listing-toolbar > .listing-toolbar__actions {
    width: auto;
}

.listing-toolbar__search {
    flex: 0 0 auto;
    width: 14rem;
    max-width: 14rem;
}

.listing-toolbar__filter {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 0.5rem;
    flex-shrink: 0;
}

.listing-toolbar__filter-label {
    display: inline-block;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--secondary-foreground, #94a3b8);
    white-space: nowrap;
}

.listing-toolbar__filter .kt-select {
    width: auto;
    min-width: 10.5rem;
    max-width: 14rem;
}

.listing-toolbar__actions {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Quick things: compact dropdown in top megamenu (not full-width accordion panel). */
#mega_menu > .kt-menu-item > .kt-menu-dropdown.kt-menu-default {
    width: 15rem;
    min-width: 13.75rem;
    max-width: 15rem;
}

#mega_menu > .kt-menu-item > .kt-menu-dropdown.kt-menu-default .kt-menu-link {
    padding-inline: 0.75rem;
}