/*
 * RRK TrakIt theme
 * ----------------------------------------------------------------------------
 * Implements the TrakIt UI design spec on top of Filament. Plain CSS layered
 * over the panel — no build step — loaded from AdminPanelProvider via the
 * STYLES_AFTER render hook, which is why :root declarations here win over
 * Filament's own.
 *
 * Brand colours (primary, info, success, warning, danger) are set in
 * AdminPanelProvider; this file covers surfaces, chrome and typography.
 *
 * Caveat: the fi-* selectors are Filament's internal markup, not a public API.
 * Re-check this file after a Filament upgrade.
 *
 * Sections
 *   1. Design tokens
 *   2. Base typography and workspace
 *   3. Topbar / global header
 *   4. Brand lockup
 *   5. Sidebar
 *   6. Cards, sections and panels
 *   7. Tables and badges
 *   8. Stat cards
 *   9. Buttons, inputs and interaction states
 *  10. Responsive
 *  11. Accessibility
 */

/* ========================================================================
   1. Design tokens
   ======================================================================== */

:root {
    /* Spec §3 — system stack, no external font dependency. */
    --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;

    /* Brand — spec §2.
       The supplied artwork reads nearer #0B3960; change --rrk-navy alone to
       match it, the header and sidebar both follow. */
    --rrk-navy: #163B5C;
    --rrk-steel: #35688F;
    --rrk-pale: #DCEAF5;
    --rrk-amber: #E69A2D;

    /* Surfaces */
    --rrk-page-bg: #F4F7FA;
    --rrk-surface: #FFFFFF;
    --rrk-border: #D8E1E9;

    /* Text */
    --rrk-text: #283746;
    --rrk-muted: #627386;

    /* Header chrome */
    --rrk-header-bg: var(--rrk-navy);
    --rrk-header-height: 5rem;
    --rrk-header-text: #FFFFFF;
    --rrk-header-muted: rgba(255, 255, 255, 0.72);
    --rrk-header-hover: rgba(255, 255, 255, 0.12);

    /* Sidebar chrome */
    --rrk-sidebar-bg: var(--rrk-navy);
    --rrk-sidebar-link: #C8D8E6;
    --rrk-sidebar-icon: rgba(200, 216, 230, 0.65);
    --rrk-sidebar-heading: #8BA6BF;
    --rrk-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --rrk-sidebar-active-bg: rgba(220, 234, 245, 0.16);

    /* Tables */
    --rrk-table-header-bg: var(--rrk-pale);
    --rrk-table-header-text: var(--rrk-navy);
    --rrk-table-row-hover: #EDF4FA;

    --rrk-radius: 0.5rem;
}

html.dark {
    --rrk-page-bg: #0B1120;
    --rrk-surface: #1E293B;
    --rrk-border: rgba(255, 255, 255, 0.09);
    --rrk-text: #E2E8F0;
    --rrk-muted: #94A3B8;

    /* Header and sidebar stay navy in both modes — the lockup is white
       on transparent, so it reads either way and the brand stays put. */
    --rrk-header-bg: #102B42;
    --rrk-sidebar-bg: #102B42;
    --rrk-sidebar-link: #B9CBDC;
    --rrk-sidebar-heading: #7E97AE;

    --rrk-table-header-bg: rgba(53, 104, 143, 0.22);
    --rrk-table-header-text: #CFE2F2;
    --rrk-table-row-hover: rgba(53, 104, 143, 0.12);
}

/* ========================================================================
   2. Base typography and workspace
   ======================================================================== */

body.fi-body {
    background-color: var(--rrk-page-bg);
    color: var(--rrk-text);
    line-height: 1.5;
}

/* Spec §3 — page headings 28–32px. */
.fi-body .fi-header-heading {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--rrk-text);
}

.fi-body .fi-header-subheading,
.fi-body .fi-section-header-description {
    color: var(--rrk-muted);
    font-size: 0.875rem;
}

/* Section headings 18–20px, semibold. */
.fi-body .fi-section-header-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--rrk-text);
}

/* Spec §4 — workspace padding 24–32px desktop. */
.fi-body .fi-main {
    padding-inline: 2rem;
    padding-block: 1.75rem;
}

/* ========================================================================
   3. Topbar / global header  (spec §4 "Global header")
   ======================================================================== */

.fi-body nav.fi-topbar {
    background-color: var(--rrk-header-bg);
    min-height: var(--rrk-header-height);
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 1rem;
}

/* The collapse toggle ships here, between the menu button and the logo.
   It's rendered at the foot of the sidebar nav instead (§5), so the brand
   lockup has the left of the header to itself. */
.fi-body .fi-topbar-collapse-sidebar-btn-ctn {
    display: none;
}

/* Icon buttons, search and the user menu all sit on navy. */
.fi-body .fi-topbar .fi-icon-btn,
.fi-body .fi-topbar .fi-icon-btn .fi-icon {
    color: var(--rrk-header-muted);
}

.fi-body .fi-topbar .fi-icon-btn:hover,
.fi-body .fi-topbar .fi-icon-btn:hover .fi-icon {
    color: var(--rrk-header-text);
}

.fi-body .fi-topbar .fi-global-search-field .fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.fi-body .fi-topbar .fi-global-search-field .fi-input {
    color: var(--rrk-header-text);
}

.fi-body .fi-topbar .fi-global-search-field .fi-input::placeholder {
    color: var(--rrk-header-muted);
}

.fi-body .fi-topbar .fi-global-search-field .fi-input-wrp-icon {
    color: var(--rrk-header-muted);
}

.fi-body .fi-topbar .fi-user-menu .fi-dropdown-trigger .fi-user-menu-label {
    color: var(--rrk-header-text);
}

/* ========================================================================
   4. Brand lockup  (resources/views/filament/logo.blade.php)
   ======================================================================== */

.rrk-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
}

.rrk-brand__lockup {
    height: 2.75rem;
    width: auto;
    display: block;
}

.rrk-brand__mark {
    height: 2.25rem;
    width: auto;
    display: none;
}

/* Spec §4 — optional subtitle. Real text, not baked into the SVG, so it
   stays legible and doesn't scale with the lockup. */
.rrk-brand__tagline {
    color: var(--rrk-header-muted);
    font-size: 0.8125rem;
    line-height: 1.3;
    padding-inline-start: 0.875rem;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
    white-space: nowrap;
}

/* On desktop the topbar carries the lockup, so the sidebar's own logo slot
   is redundant — but only there. Below 768px Filament hides the topbar logo
   and the sidebar becomes a drawer, which is then the only place the brand
   can appear (see §10). */
@media (min-width: 768px) {
    .fi-body.fi-body-has-topbar .fi-main-sidebar .fi-sidebar-header {
        display: none;
    }
}

/* Auth pages use Filament's "simple" layout: a white card, no topbar. The
   lockup is white-on-transparent for the navy header, so on that card it
   would be invisible — only the mark's coloured bars would show. Sit it on
   a navy band instead, and drop the subtitle, which doesn't fit the card. */
.fi-body .fi-simple-layout .fi-logo {
    justify-content: center;
    background-color: var(--rrk-header-bg);
    border-radius: var(--rrk-radius);
    padding: 0.875rem 1.25rem;
}

.fi-body .fi-simple-layout .rrk-brand__tagline {
    display: none;
}

/* ========================================================================
   5. Sidebar  (spec §4 "Primary navigation")
   ======================================================================== */

.fi-body .fi-sidebar {
    background-color: var(--rrk-sidebar-bg);
    border-inline-end: 1px solid rgba(255, 255, 255, 0.07);
}

.fi-body .fi-sidebar .fi-sidebar-nav {
    padding-block-start: 1rem;
}

/* Group headings ("Settings") */
.fi-body .fi-sidebar .fi-sidebar-group-label {
    color: var(--rrk-sidebar-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 600;
}

.fi-body .fi-sidebar .fi-sidebar-group-btn .fi-icon {
    color: var(--rrk-sidebar-heading);
}

/* Links */
.fi-body .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn {
    border-radius: var(--rrk-radius);
}

.fi-body .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--rrk-sidebar-link);
    font-size: 0.875rem;
}

.fi-body .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn > .fi-icon {
    color: var(--rrk-sidebar-icon);
}

.fi-body .fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-body .fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: var(--rrk-sidebar-hover-bg);
}

.fi-body .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-body .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn:hover > .fi-icon {
    color: #FFFFFF;
}

/* Active item — spec asks for a lighter blue block with a clear indicator. */
.fi-body .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--rrk-sidebar-active-bg);
    box-shadow: inset 3px 0 0 0 var(--rrk-pale);
}

.fi-body .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #FFFFFF;
    font-weight: 600;
}

.fi-body .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--rrk-pale);
}

/* Collapse toggle, moved here from the topbar
   (resources/views/filament/sidebar-collapse.blade.php). margin-block-start
   pushes it to the foot of the nav's flex column, so it sits below the last
   item however few there are. */
.rrk-sidebar-collapse {
    display: flex;
    justify-content: flex-end;
    margin-block-start: auto;
    padding-block: 0.75rem;
    padding-inline: 0.5rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

.fi-body .fi-sidebar .rrk-sidebar-collapse__btn,
.fi-body .fi-sidebar .rrk-sidebar-collapse__btn .fi-icon {
    color: var(--rrk-sidebar-icon);
}

.fi-body .fi-sidebar .rrk-sidebar-collapse__btn:hover,
.fi-body .fi-sidebar .rrk-sidebar-collapse__btn:hover .fi-icon {
    color: #FFFFFF;
}

/* Collapsed to icons only: centre it rather than letting it hug the edge. */
.fi-body:not(.fi-sidebar-open) .rrk-sidebar-collapse {
    justify-content: center;
    padding-inline: 0;
}

.fi-body .fi-sidebar .fi-sidebar-item-grouped-border-part {
    background-color: var(--rrk-sidebar-heading);
}

.fi-body .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
    background-color: var(--rrk-pale);
}

/* ========================================================================
   6. Cards, sections and panels  (spec §5 "Summary cards")
   ======================================================================== */

.fi-body .fi-section,
.fi-body .fi-wi-stats-overview-stat,
.fi-body .fi-ta-ctn {
    background-color: var(--rrk-surface);
    border: 1px solid var(--rrk-border);
    border-radius: var(--rrk-radius);
    box-shadow: none;
}

.fi-body .fi-section-content {
    padding: 1.25rem;
}

/* ========================================================================
   7. Tables and badges  (spec §5 "Recent projects table", "Status badges")
   ======================================================================== */

/* Tint the whole header strip. The selection checkbox and row-actions cells
   are not .fi-ta-header-cell, so targeting that class alone leaves untinted
   gaps at both ends of the row. */
.fi-body .fi-ta-table > thead > tr > * {
    background-color: var(--rrk-table-header-bg);
}

.fi-body .fi-ta-header-cell .fi-ta-header-cell-label {
    color: var(--rrk-table-header-text);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fi-body .fi-ta-row {
    border-top: 1px solid var(--rrk-border);
}

.fi-body .fi-ta-row:hover {
    background-color: var(--rrk-table-row-hover);
}

/* Spec §3 — table content 13–14px. */
.fi-body .fi-ta-text,
.fi-body .fi-ta-cell {
    font-size: 0.8125rem;
}

/* Pill badges, text plus colour (spec §5 and §8). */
.fi-body .fi-badge {
    border-radius: 9999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ========================================================================
   8. Stat cards  (spec §5 "Summary cards")
   ======================================================================== */

.fi-body .fi-wi-stats-overview-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rrk-text);
}

.fi-body .fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
    color: var(--rrk-muted);
    font-weight: 500;
}

.fi-body .fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
    color: var(--rrk-muted);
}

/* ========================================================================
   9. Buttons, inputs and interaction states  (spec §6)
   ======================================================================== */

.fi-body .fi-btn {
    border-radius: var(--rrk-radius);
    font-weight: 600;
}

/* Spec §6 — a visible keyboard focus ring everywhere, not just on inputs. */
.fi-body a:focus-visible,
.fi-body button:focus-visible,
.fi-body [role='button']:focus-visible {
    outline: 2px solid var(--rrk-steel);
    outline-offset: 2px;
}

.fi-body .fi-topbar a:focus-visible,
.fi-body .fi-topbar button:focus-visible,
.fi-body .fi-sidebar a:focus-visible,
.fi-body .fi-sidebar button:focus-visible {
    outline-color: var(--rrk-pale);
}

/* ========================================================================
   10. Responsive  (spec §7)
   ======================================================================== */

/* Tablet — 768–1199px: tighter padding, drop the subtitle. */
@media (max-width: 1199px) {
    .fi-body .fi-main {
        padding-inline: 1.25rem;
        padding-block: 1.25rem;
    }

    .rrk-brand__lockup {
        height: 2.5rem;
    }

    .rrk-brand__tagline {
        display: none;
    }
}

/* Mobile — below 768px: compact header, mark instead of the full lockup. */
@media (max-width: 767px) {
    :root {
        --rrk-header-height: 4rem;
    }

    .fi-body .fi-main {
        padding-inline: 0.875rem;
        padding-block: 1rem;
    }

    .fi-body .fi-header-heading {
        font-size: 1.375rem;
    }

    /* Filament hides the topbar's logo slot on phones; bring it back for the
       mark alone, which fits beside the menu button and search. */
    .fi-body .fi-topbar-start {
        display: flex;
        align-items: center;
    }

    /* The drawer has its own close button and the menu button reopens it, so
       the collapse toggle is desktop-only. */
    .rrk-sidebar-collapse {
        display: none;
    }

    .rrk-brand__lockup {
        display: none;
    }

    .rrk-brand__mark {
        display: block;
    }

    /* The drawer still shows the full lockup when it's open. */
    .fi-body .fi-main-sidebar .fi-sidebar-header .rrk-brand__lockup {
        display: block;
        height: 2.5rem;
    }

    .fi-body .fi-main-sidebar .fi-sidebar-header .rrk-brand__mark {
        display: none;
    }

    .fi-body .fi-main-sidebar .fi-sidebar-header {
        background-color: var(--rrk-sidebar-bg);
        box-shadow: none;
    }
}

/* ========================================================================
   11. Accessibility  (spec §8)
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fi-body *,
    .fi-body *::before,
    .fi-body *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}