/* ==========================================================================
   ASG Tools — Advocates for Self-Government brand skin for the Filament panel.

   Plain CSS on purpose: this app has no npm/Vite build, so a compiled Filament
   theme isn't available. Everything here is written against Filament's own
   `fi-*` class names and stock CSS custom properties.

   Loaded via the STYLES_AFTER render hook (resources/views/filament/brand/styles.blade.php)
   so it wins over both @filamentStyles and the inline :root block that follows it.

   Brand tokens are lifted from the main site's resources/css/shared.css:
     #02A9FF  brand primary   (main blue)
     #008fdb  brand tertiary  (dark blue)
     #6bc4e8  brand secondary (light blue)
     #333     body copy
   ========================================================================== */

:root {
    --asg-blue: #02a9ff;
    --asg-blue-dark: #008fdb;
    --asg-blue-light: #6bc4e8;
    --asg-ink: #333;

    /* Filament emits `--font-family: 'Graphik'` with no fallbacks. Widen it to the
       same stack the main site uses so the metric-matched fallback can do its job. */
    --font-family: 'Graphik', 'Graphik Fallback', ui-sans-serif, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Brand lockup — logo, divider, "Tools"
   -------------------------------------------------------------------------- */

.asg-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 100%;
    min-width: 0;
}

.asg-brand__logo {
    display: block;
    height: 100%;
    width: auto;
    /* Allowed to shrink on cramped topbars; object-fit keeps the mark from
       distorting if flex ever takes width off it. */
    flex: 0 1 auto;
    min-width: 0;
    object-fit: contain;
    object-position: left center;
}

.asg-brand__logo--dark {
    display: none;
}

.dark .asg-brand__logo--light {
    display: none;
}

.dark .asg-brand__logo--dark {
    display: block;
}

/* Divider echoes the lockup's height rather than the full row, so it reads as
   part of the mark instead of a layout border. */
.asg-brand__rule {
    flex: none;
    width: 1px;
    height: 62%;
    border-radius: 1px;
    background-color: rgb(0 0 0 / 0.14);
}

.dark .asg-brand__rule {
    background-color: rgb(255 255 255 / 0.22);
}

/* Uppercase + tracking mirrors the "FOR SELF-GOVERNMENT" line in the logo, so
   "Tools" reads as part of the lockup instead of a label bolted onto it. */
.asg-brand__word {
    flex: none;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--asg-ink);
    white-space: nowrap;
    /* Optical centering: uppercase sits high against the logo's baseline. */
    padding-top: 0.0625rem;
}

.dark .asg-brand__word {
    color: rgb(255 255 255 / 0.92);
}

/* The logo is a wide lockup (266×52). On narrow topbars let it shrink rather
   than push "Tools" out of the row. */
@media (max-width: 26rem) {
    .asg-brand {
        gap: 0.5rem;
    }

    .asg-brand__word {
        font-size: 0.8125rem;
        letter-spacing: 0.09em;
    }
}

/* --------------------------------------------------------------------------
   Panel chrome
   -------------------------------------------------------------------------- */

/* Give the sidebar header enough room for the full lockup and separate it from
   the nav below with a hairline, the way the main site's header is separated. */
.fi-sidebar-header {
    border-bottom: 1px solid rgb(0 0 0 / 0.06);
}

.dark .fi-sidebar-header {
    border-bottom-color: rgb(255 255 255 / 0.08);
}

/* Navigation group labels — same uppercase treatment as the wordmark. */
.fi-sidebar-group-label {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Active nav item gets a brand-blue spine, matching the site's link accent. */
.fi-sidebar-item-active .fi-sidebar-item-button {
    position: relative;
}

.fi-sidebar-item-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    inset-block: 0.375rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--asg-blue);
}

/* --------------------------------------------------------------------------
   Login page — the one unauthenticated surface, so it carries the most brand.
   -------------------------------------------------------------------------- */

.fi-simple-layout {
    background-image: radial-gradient(
        ellipse 80% 60% at 50% -10%,
        rgb(2 169 255 / 0.13),
        transparent 70%
    );
}

.dark .fi-simple-layout {
    background-image: radial-gradient(
        ellipse 80% 60% at 50% -10%,
        rgb(2 169 255 / 0.16),
        transparent 70%
    );
}

/* The login lockup is centred, so let it run larger than the sidebar version. */
.fi-simple-layout .asg-brand {
    gap: 0.75rem;
}

.fi-simple-layout .asg-brand__word {
    font-size: 1.0625rem;
}

/* Headings pick up the brand typeface weight rather than Inter's default. */
.fi-simple-header-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}