/*
 * gymr console styling.
 *
 * Filament is themed at the source through its colour ramps (see
 * App\Support\Palette), so this file only carries what a ramp cannot express:
 * typography, the sidebar's own darker ground, card radii, and the numeric
 * treatment that makes a dashboard readable at a glance.
 *
 * Hand-written and loaded through a render hook rather than compiled as a
 * Filament custom theme, for the same reason the member app has no build step:
 * one person maintains this, and a toolchain that has to be alive for the
 * admin panel to look right is a liability, not an asset.
 *
 * Everything here is a real Filament class name, checked against the rendered
 * DOM. Tailwind utilities written in panel views do nothing - Filament ships
 * its CSS precompiled - which is why the styling lives here and not in Blade.
 */

:root {
    --gymr-display: 'Poppins', 'DM Sans', system-ui, sans-serif;
    --gymr-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* The sidebar sits a step below the page rather than on it, so the eye
       reads navigation and content as two planes. */
    --gymr-rail: #020409;
}

.fi-body {
    font-family: var(--gymr-body);
    -webkit-font-smoothing: antialiased;
}

/* --- Typography ----------------------------------------------------------
 * Poppins for anything read as a label or a figure; DM Sans for prose. The
 * split matters most on the dashboard, where every card is a number.
 * --------------------------------------------------------------------- */

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-logo,
.fi-wi-stats-overview-stat-value {
    font-family: var(--gymr-display);
    letter-spacing: -0.02em;
}

/* Figures line up in columns all over this product - money, credits, counts,
   times. Tabular digits stop them jittering between rows. */
.fi-ta-text-item-label,
.fi-in-text-item-label,
.fi-wi-stats-overview-stat-value,
.fi-ta-summary-cell {
    font-variant-numeric: tabular-nums;
}

/* --- Sidebar ------------------------------------------------------------- */

.fi-sidebar,
.fi-sidebar-header {
    background: var(--gymr-rail);
    border-right: none;
    box-shadow: none;
}

.fi-logo {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.045em;
}

/* Group headings are signposts, not content: small, spaced, quiet. */
.fi-sidebar-group-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.fi-sidebar-item-btn {
    border-radius: 0.5625rem;
    font-size: 0.8125rem;
}

/* The current page keeps a rail on its leading edge. A background tint alone
   is easy to lose against a dark sidebar. */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: color-mix(in srgb, var(--primary-500) 15%, transparent);
    box-shadow: inset 2px 0 0 var(--primary-500);
    color: #fff;
}

.fi-tenant-menu-trigger {
    border-radius: 0.6875rem;
    background: var(--gray-900);
}

/* --- Surfaces ------------------------------------------------------------ */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn {
    border-radius: 0.875rem;
}

.fi-main {
    padding-top: 1rem;
}

/* --- Tables --------------------------------------------------------------
 * Column headers as small caps: they are read once to orient, then ignored.
 * The rows are the content.
 * --------------------------------------------------------------------- */

.fi-ta-header-cell-label {
    font-size: 0.65625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* --- Badges -------------------------------------------------------------- */

.fi-badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* --- Focus ---------------------------------------------------------------
 * Keyboard focus has to stay visible on a dark ground; the default ring is
 * tuned for white.
 * --------------------------------------------------------------------- */

.fi-btn:focus-visible,
.fi-input:focus-visible,
.fi-sidebar-item-btn:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 2px;
}

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