/* ==========================================================================
   Reelzy Player — panel theme (structural)
   --------------------------------------------------------------------------
   Loaded via PanelsRenderHook::STYLES_AFTER, which runs AFTER Filament's own
   stylesheet. Do NOT move this to ->theme(): that REPLACES Filament's theme
   rather than stacking on it, and the panel loses all base styling.

   Two layers:
     1. Token overrides on :root / .dark — remaps Filament's own gray scale so
        every component follows the Midnight Ocean palette without each one
        needing its own dark rule.
     2. Structural restyle — compact tables, flat 1px-bordered surfaces, 4px
        buttons, tighter vertical rhythm.

   No !important anywhere. Filament's rules sit inside @layer components and
   its dark rules use :where() (zero specificity), so plain selectors here win
   on the cascade without fighting it.

   Cache-bust: the ?v= is the file's mtime (see AppServiceProvider), so editing
   this file updates the query string automatically.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
    /* Surfaces */
    --rz-page: #f7f7f8;
    --rz-surface: #ffffff;
    --rz-surface-sunken: #fafafa;
    --rz-surface-hover: #f4f4f5;

    /* Lines */
    --rz-border: #e5e7eb;
    --rz-border-strong: #d4d4d8;

    /* Text */
    --rz-text: #18181b;
    --rz-text-muted: #71717a;
    --rz-text-subtle: #a1a1aa;

    /* Metrics */
    --rz-radius-btn: 4px;
    --rz-radius-card: 8px;
    --rz-body-size: 14px;
    --rz-control-h: 32px;

    /* Re-map Filament's gray scale so components that reference gray-*
       directly (the majority) inherit Midnight Ocean instead of neutral gray.
       Light values only — see the .dark block below for why this must NOT be
       mirrored there. */
    --gray-50: #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e5e7eb;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;
    --gray-950: #09090b;
}

/* 🚨 DO NOT re-map --gray-* inside .dark.
   Filament does not reference one gray scale that flips per mode: its own
   rules PICK a shade per mode, e.g.
       .fi-sidebar-item-label            { color: var(--gray-700) }
       .fi-sidebar-item-label:where(.dark,.dark *) { color: var(--gray-200) }
   So --gray-200 must stay a LIGHT value in dark mode. Mirroring the scale here
   (gray-200 -> #1f2c47) makes Filament's dark-mode text resolve to a dark navy
   on a dark surface: measured contrast 0.92:1, i.e. nav labels and the sign-out
   button are invisible. This is why "I can't see the nav text in dark mode".

   Dark surfaces are set on our own --rz-* tokens instead, and text colours are
   pinned per surface further down. */
.dark {
    --rz-page: #0b1120;          /* Midnight Ocean */
    --rz-surface: #111a2e;
    --rz-surface-sunken: #0d1526;
    --rz-surface-hover: #172138;

    --rz-border: #1f2c47;
    --rz-border-strong: #2b3b5c;

    --rz-text: #e8ecf5;
    --rz-text-muted: #8b9ab5;
    --rz-text-subtle: #64748b;
}

/* Page frame */
.fi-body,
.fi-simple-layout {
    background-color: var(--rz-page);
}

.fi-main,
.fi-simple-main {
    background-color: var(--rz-page);
}

/* --------------------------------------------------------------------------
   2. TYPE — 14px body, nothing oversized
   -------------------------------------------------------------------------- */

.fi-body,
.fi-simple-layout {
    font-size: var(--rz-body-size);
}

/* Page heading stays modest. Oversized heading type is the fastest way to
   make an admin panel look like a marketing page. */
.fi-header-heading {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--rz-text);
}

.fi-header-subheading {
    font-size: 0.8125rem;
    color: var(--rz-text-muted);
}

.fi-header {
    padding-block: 1.25rem;
}

/* --------------------------------------------------------------------------
   3. SURFACES — flat with 1px borders, shadow removed
   -------------------------------------------------------------------------- */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-dropdown-panel,
.fi-modal-window {
    background-color: var(--rz-surface);
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-radius-card);
    box-shadow: none;
}

.fi-section-header {
    padding-inline: 1rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--rz-border);
}

.fi-section-header-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text);
}

.fi-section-content,
.fi-section-content-ctn {
    padding: 1rem;
}

/* 🚨 `.fi-section-content-ctn` is the section's INNER WRAPPER, not the card.
   Filament ships it with `display: none` (it is the collapsible body) and
   `order: -9999`; those only apply on the `.fi-section-collapsed` variants, so
   on a normal expanded section it is the element that carries the padding and
   the grid gap. Stripping it entirely (`display: none !important`) would hide
   the CONTENT and leave an empty card — the opposite of what was asked.

   What was actually wanted is the extra inset: the dashboard's stats/widgets
   sat inside a wrapper that added padding on top of the card's own padding, so
   the content floated away from its border. Collapsing the double inset and
   flattening the row gap keeps every child visible while removing the wasted
   space. */
.fi-section-content-ctn {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    border-top: 0;
    row-gap: 0.75rem;
}

/* The dashboard widget grid lives in here; give it a sane rhythm instead of
   Filament's default wide row gap. */
.fi-section-content-ctn > * {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   4. SIDEBAR — flat list, no group headings, no wasted space
   --------------------------------------------------------------------------
   The group headings ("Library" / "Access" / "System") are removed in PHP via
   ->navigationGroups([]); the rules below hide their slot defensively and, more
   importantly, kill the vertical margin that separated the groups — that gap
   was the main thing making the sidebar feel oversized.
   -------------------------------------------------------------------------- */

.fi-sidebar {
    background-color: var(--rz-surface-sunken);
    border-inline-end: 1px solid var(--rz-border);
}

.fi-sidebar-header {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--rz-border);
}

.fi-sidebar-header-logo-ctn img,
.fi-sidebar-header-logo-ctn svg {
    height: 1.375rem;
}

/* Kill the group heading. `display: none` (not visibility) so it takes no
   space at all. Filament still renders the element, so this also holds if a
   group is reintroduced in PHP. */
.fi-sidebar-group-label {
    display: none;
}

/* No gap between groups: this is the "too much space" fix. */
.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 0;
}

.fi-sidebar-group-items {
    gap: 1px;
}

/* Trim the nav's own vertical padding. */
.fi-sidebar-nav-groups {
    gap: 0;
}

.fi-sidebar-group-items,
.fi-sidebar-group {
    gap: 0;
}

/* Nav item */
.fi-sidebar-item-btn {
    position: relative;
    border-radius: var(--rz-radius-btn);
    padding-block: 0.375rem;
    transition: background-color 75ms ease, color 75ms ease;
}

/* Text colour is set EXPLICITLY, not inherited from Filament's gray scale.
   Filament picks var(--gray-700) light / var(--gray-200) dark for this label;
   leaving that to resolve on its own is what made the labels unreadable in
   dark mode once the gray scale was remapped. Our --rz-text-* tokens are
   defined per mode, so this is correct in both without any !important. */
.fi-sidebar-item-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rz-text);
}

/* Icon follows the label so they never disagree in dark mode. */
.fi-sidebar-item-icon {
    color: var(--rz-text-muted);
}

/* ACTIVE: a 2px accent rail down the inline-start edge plus a faint tint.
   A filled rounded block reads as a pill/button, which is the slop look we
   are avoiding.

   🚨 The state class is `.fi-active`, NOT `.fi-sidebar-item-active`. Filament
   puts it on the wrapping `.fi-sidebar-item` element (verified in rendered
   markup: `class="fi-sidebar-item fi-active fi-sidebar-item-has-url"`).
   Styling a class the framework never emits produces NO rail and no error —
   the panel just looks unstyled in the one place it matters most. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--primary-500) 10%, transparent);
    color: var(--primary-500);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-block: 0.25rem;
    inset-inline-start: 0;
    width: 2px;
    border-start-end-radius: 1px;
    border-end-end-radius: 1px;
    background-color: var(--primary-500);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--primary-500);
}

/* Links shift colour on hover; they never gain an underline. */
.fi-sidebar-item-btn:hover {
    background-color: var(--rz-surface-hover);
    color: var(--rz-text);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover {
    background-color: color-mix(in oklab, var(--primary-500) 14%, transparent);
    color: var(--primary-500);
}

/* User menu (bottom of the sidebar) — this is the "sign out" row, and its text
   went invisible in dark mode for the same gray-scale reason. */
.fi-sidebar-footer .fi-btn,
.fi-user-menu .fi-btn {
    color: var(--rz-text);
}

.fi-user-menu .fi-btn:hover {
    background-color: var(--rz-surface-hover);
}

.fi-user-menu .fi-avatar {
    border: 1px solid var(--rz-border);
}

/* --------------------------------------------------------------------------
   5. TOPBAR
   -------------------------------------------------------------------------- */

.fi-topbar {
    background-color: var(--rz-surface);
    border-bottom: 1px solid var(--rz-border);
    min-height: 3.25rem;
}

.fi-topbar-start,
.fi-topbar-end {
    gap: 0.5rem;
}

/* Breadcrumbs.
   Real classes are fi-breadcrumbs / fi-breadcrumbs-list / fi-breadcrumbs-item
   (verified in rendered markup). There is no ".fi-breadcrumb". */
.fi-breadcrumbs-item {
    font-size: 0.8125rem;
    color: var(--rz-text-muted);
}

.fi-breadcrumbs-item[aria-current='page'] {
    color: var(--rz-text);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. BUTTONS — 32px, 4px radius, never a pill
   -------------------------------------------------------------------------- */

.fi-btn {
    border-radius: var(--rz-radius-btn);
    min-height: var(--rz-control-h);
    padding-inline: 0.75rem;
    padding-block: 0;
    font-size: 0.8125rem;
    font-weight: 500;
}

.fi-icon-btn {
    border-radius: var(--rz-radius-btn);
    transition: background-color 75ms ease;
}

.fi-icon-btn:hover {
    background-color: var(--rz-surface-hover);
}

.fi-btn-group > .fi-btn:first-child {
    border-start-start-radius: var(--rz-radius-btn);
    border-end-start-radius: var(--rz-radius-btn);
}

.fi-btn-group > .fi-btn:last-child {
    border-start-end-radius: var(--rz-radius-btn);
    border-end-end-radius: var(--rz-radius-btn);
}

/* --------------------------------------------------------------------------
   7. INPUTS
   -------------------------------------------------------------------------- */

.fi-input-wrp {
    border-radius: var(--rz-radius-btn);
    box-shadow: 0 0 0 1px var(--rz-border);
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 1px var(--primary-500);
}

.fi-input {
    font-size: 0.8125rem;
    min-height: calc(var(--rz-control-h) - 2px);
}

.fi-input-wrp-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text);
}

.fi-select-input,
.fi-input::placeholder {
    color: var(--rz-text-subtle);
}

/* --------------------------------------------------------------------------
   8. TABLES — the main structural change: compact, uppercase headers
   -------------------------------------------------------------------------- */

.fi-ta-ctn {
    overflow: hidden;
}

/* Column titles: uppercase micro-label. Reclaims a lot of vertical space over
   Filament's default 14px semibold row. */
.fi-ta-header-cell {
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rz-text-muted);
    background-color: var(--rz-surface-sunken);
    white-space: nowrap;
}

/* Filament pads the first/last header cell further out (24px); pull back to
   match the 12px body cells so the grid lines up. */
.fi-ta-header-cell:first-of-type {
    padding-inline-start: 0.75rem;
}

.fi-ta-header-cell:last-of-type {
    padding-inline-end: 0.75rem;
}

.fi-ta-header-cell-sort-btn {
    color: inherit;
}

.fi-ta-header-cell-sort-btn:hover {
    color: var(--rz-text);
}

.fi-ta-header-cell-sorted {
    color: var(--rz-text);
}

/* Rows */
.fi-ta-cell {
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    font-size: 0.8125rem;
    color: var(--rz-text);
}

.fi-ta-text-item {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rz-text);
}

.fi-ta-text-description {
    font-size: 0.75rem;
    color: var(--rz-text-muted);
}

.fi-ta-row {
    border-bottom: 1px solid var(--rz-border);
}

.fi-ta-row:last-child {
    border-bottom: 0;
}

.fi-ta-row:hover {
    background-color: var(--rz-surface-hover);
}

.fi-ta-empty-state {
    padding-block: 3rem;
}

/* --------------------------------------------------------------------------
   9. BADGES, TABS, MISC
   -------------------------------------------------------------------------- */

.fi-badge {
    border-radius: var(--rz-radius-btn);
    padding-inline: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
}

.fi-tabs-item-label {
    font-size: 0.8125rem;
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--primary-500);
}

.fi-modal-heading {
    font-size: 0.9375rem;
}

.fi-modal-description {
    font-size: 0.8125rem;
}

/* Stats widget: title small, value not shouting. */
/* The stats caption class is -label (verified in rendered markup).
   There is no ".fi-wi-stats-overview-stat-heading"; styling it does nothing. */
.fi-wi-stats-overview-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rz-text-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Pagination */
.fi-pagination {
    padding-block: 0.5rem;
}

.fi-pagination-item-btn,
.fi-pagination-item-label {
    border-radius: var(--rz-radius-btn);
}

/* Global search */
.fi-global-search-ctn .fi-input {
    font-size: 0.8125rem;
}

/* Login screen: keep the same rhythm so it doesn't feel like a different app. */
.fi-simple-main {
    padding: 2rem 1rem;
}

.fi-simple-main-ctn {
    background-color: var(--rz-surface);
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-radius-card);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   10. OWN PRIMITIVES — rz-* classes for our own Blade views
   --------------------------------------------------------------------------
   🚨 Plain classes only, NOT Tailwind utilities.

   A view may only use Tailwind classes if a build step compiles them. This app
   has no node_modules and no public/build, so `bg-white dark:bg-white/5` or
   `border-gray-200` in a Blade file resolve to NOTHING: the markup renders, the
   page returns 200, and the element comes out unstyled and unpadded. That is
   exactly what happened to the System Status page.

   These primitives live in the theme file, use the same tokens, and therefore
   follow light/dark automatically.
   -------------------------------------------------------------------------- */

.rz-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rz-card {
    background-color: var(--rz-surface);
    border: 1px solid var(--rz-border);
    border-radius: var(--rz-radius-card);
    overflow: hidden;
}

.rz-card-header {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--rz-border);
    background-color: var(--rz-surface-sunken);
}

.rz-card-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--rz-text);
}

.rz-rows {
    margin: 0;
}

.rz-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--rz-border);
}

.rz-row:last-child {
    border-bottom: 0;
}

.rz-row-label {
    flex: 0 0 11rem;
    font-size: 0.8125rem;
    color: var(--rz-text-muted);
}

.rz-row-value {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* State dot + value colour, defined once per state. */
.rz-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}

.rz-dot--ok {
    background-color: #10b981;
}

.rz-dot--warn {
    background-color: #f59e0b;
}

.rz-dot--bad {
    background-color: #f43f5e;
}

.rz-value--ok {
    color: var(--rz-text);
}

.rz-value--warn {
    color: #b45309;
}

.rz-value--bad {
    color: #be123c;
}

/* Status colours need their own dark variants: the light-mode amber/red are
   too dark to read on the dark surface. */
.dark .rz-value--warn {
    color: #fbbf24;
}

.dark .rz-value--bad {
    color: #fda4af;
}

.rz-note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--rz-text-subtle);
}

/* Narrow screens: let the label sit above the value instead of squeezing it. */
@media (max-width: 640px) {
    .rz-row {
        flex-wrap: wrap;
    }

    .rz-row-label {
        flex: 1 0 100%;
    }
}

/* --------------------------------------------------------------------------
   11. MOTION / PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fi-btn,
    .fi-icon-btn,
    .fi-sidebar-item-btn {
        transition: none;
    }
}

@media print {
    .fi-sidebar,
    .fi-topbar {
        display: none;
    }
}