/*
 * Panel chrome overrides. Design System v0.1.
 */

/* --- brand logo -------------------------------------------------------- */

/*
 * .fi-topbar is min-height, not height, so an oversized logo grows the app bar
 * instead of being clipped. The assets are cropped to their artwork, so this
 * cap should never engage -- it exists so the next asset drop cannot resize the
 * chrome. .fi-simple-header .fi-logo (login) is left alone: no surrounding bar.
 */
.fi-topbar .fi-logo,
.fi-sidebar-header .fi-logo {
    max-height: calc(var(--topbar-height) - 1.5rem);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* --- typography -------------------------------------------------------- */

/*
 * Inter Tight at 400 reads light at panel text sizes. 500 is already in the
 * font request Filament hardcodes, so this costs no extra download.
 * --tw-font-weight must be set too: the compiled utilities read it.
 */
.fi-body {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
}

/* --- sidebar ----------------------------------------------------------- */

/*
 * Filament leaves .fi-sidebar transparent on desktop, so the rail is whatever
 * the body is. Hover and active must move with it -- Filament paints both from
 * --gray-100, the shade the rail is being set to, so darkening the rail alone
 * makes every hover state invisible.
 *
 * Light mode only: --gray-100 is a light colour in both themes.
 */
.fi-sidebar:not(:where(.dark, .dark *)),
.fi-sidebar-header:not(:where(.dark, .dark *)) {
    background-color: var(--gray-100);
}

.fi-sidebar-item-btn:not(:where(.dark, .dark *)):hover,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:not(:where(.dark, .dark *)),
.fi-sidebar-group-btn:not(:where(.dark, .dark *)):hover,
.fi-sidebar-group-dropdown-trigger-btn:not(:where(.dark, .dark *)):hover {
    background-color: var(--gray-200);
}

/* --- primary buttons --------------------------------------------------- */

/*
 * Repoints --color-* rather than background-color, so Filament's own hover,
 * focus and disabled rules keep working. :not(.fi-outlined) is required:
 * outlined buttons, links and badges are .fi-color-primary too and render text
 * from --color-500, so an unscoped override turns them all black.
 */
.fi-btn:not(.fi-outlined).fi-color-primary {
    --color-600: #000000;
    --color-500: var(--gray-800);
    --color-50: #FFFFFF;
}

/* Inverted in dark mode: black on the gray-900 panel has almost no edge. */
.fi-btn:not(.fi-outlined).fi-color-primary:where(.dark, .dark *) {
    --color-600: var(--gray-50);
    --color-500: var(--gray-200);
    --color-50: var(--gray-800);
}

/* --- environment badge ------------------------------------------------- */

/*
 * Rendered only outside production. Tints are keyed off the APP_ENV value so
 * the markup carries no inline style -- a real CSP is a pending ticket in
 * App\Http\Middleware\SecurityHeaders and would block inline styles.
 */
.fi-env-badge {
    --env-bg: var(--yellow-400);

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: var(--env-bg);
    color: var(--gray-800);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.25rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.fi-env-badge[data-env="local"],
.fi-env-badge[data-env="development"] {
    --env-bg: var(--info-400);
}

.fi-env-badge[data-env="staging"] {
    --env-bg: var(--warning-400);
}

.fi-env-badge[data-env="testing"] {
    --env-bg: var(--purple-300);
}

.fi-env-badge-debug {
    padding: 0 0.375rem;
    border-radius: 9999px;
    background-color: var(--gray-800);
    color: var(--env-bg);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
}