/*
 * REGGIEJAN admin theme — layered on top of Filament's own stylesheet.
 *
 * Registered with `$panel->assets()` in DashboardPanelProvider and published to
 * public/css/app/reggiejan-admin.css by `php artisan filament:assets` (composer
 * runs it on every install). Edit THIS file, then re-run that command.
 *
 * Plain CSS on purpose: no Tailwind build, no Node on the server. Filament's
 * rules live in cascade layers, so these unlayered rules win without
 * `!important`; that also means Filament's `dark:` variants lose to them, which
 * is why every colour set here has an explicit `.dark` counterpart.
 *
 * Scope rules — keep it upgrade-friendly:
 *   - `rj-*` classes belong to our own Blade views (login, widgets, mobile bar,
 *     media picker).
 *   - `fi-*` overrides are limited to the shell (sidebar, canvas, headings) and
 *     card surfaces. Resource forms and tables stay Filament-native — the media
 *     picker styles its own markup, never Filament's field internals.
 *
 * Brand palette mirrors the public site (app/globals.css).
 */

:root {
    --rj-navy: #0a1f44;
    --rj-navy-700: #0e2a55;
    --rj-navy-900: #071632;
    --rj-navy-950: #050f24;
    --rj-slate: #273e59;
    --rj-red: #ff4444;
    --rj-red-soft: #ff6b6b;
    --rj-red-strong: #e53030;
    --rj-mist-50: #f6f8fb;
    --rj-mist-100: #eef2f8;
    --rj-mist-200: #dde4ef;
    --rj-on-navy: rgba(232, 238, 248, 0.86);
    --rj-on-navy-muted: rgba(203, 215, 235, 0.58);
    --rj-card-shadow: 0 0 0 1px rgba(10, 31, 68, 0.07), 0 1px 2px rgba(10, 31, 68, 0.04),
        0 4px 16px -6px rgba(10, 31, 68, 0.08);
    --rj-card-shadow-dark: 0 0 0 1px rgba(255, 255, 255, 0.08);
    --rj-radius-card: 0.875rem;
}

/* ==========================================================================
   1. Sign-in page  (resources/views/filament/auth/login.blade.php)
   ========================================================================== */

.rj-auth-body {
    background: #fff;
}

.dark .rj-auth-body {
    background: var(--gray-950);
}

.rj-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100dvh;
}

/* ---- Brand panel ------------------------------------------------------- */

.rj-auth-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(155deg, var(--rj-navy-700) 0%, var(--rj-navy) 48%, var(--rj-navy-900) 100%);
    padding: 1.125rem 1.25rem;
}

.rj-auth-art {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.rj-auth-art-glow {
    position: absolute;
    top: -16rem;
    right: -14rem;
    width: 34rem;
    height: 34rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(255, 68, 68, 0.26) 0%, rgba(255, 68, 68, 0) 68%);
}

/* Two soft diagonal sweeps that echo the angled strokes of the RJ mark. */
.rj-auth-art-band {
    position: absolute;
    left: -30%;
    width: 160%;
    height: 9rem;
    transform: rotate(-38deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.045) 50%, rgba(255, 255, 255, 0) 100%);
}

.rj-auth-art-band-one {
    bottom: 18%;
}

.rj-auth-art-band-two {
    bottom: -4%;
    height: 4rem;
    background: linear-gradient(90deg, rgba(255, 68, 68, 0) 0%, rgba(255, 68, 68, 0.1) 50%, rgba(255, 68, 68, 0) 100%);
}

.rj-auth-art-mark {
    position: absolute;
    right: -7rem;
    bottom: -5rem;
    width: 30rem;
    max-width: none;
    height: auto;
    opacity: 0.06;
}

.rj-auth-brand-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rj-auth-logo {
    flex: none;
}

.rj-auth-eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rj-red-soft);
}

.rj-auth-welcome {
    margin: 0.125rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.rj-auth-lede,
.rj-auth-highlights,
.rj-auth-brand-footnote,
.rj-auth-art-band,
.rj-auth-art-mark {
    display: none;
}

.rj-auth-lede {
    margin: 1.25rem 0 0;
    max-width: 30rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--rj-on-navy);
}

.rj-auth-highlights {
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
}

.rj-auth-highlights li {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.9375rem;
    color: var(--rj-on-navy);
}

.rj-auth-highlights li + li {
    margin-top: 0.875rem;
}

.rj-auth-highlight-icon {
    flex: none;
    box-sizing: content-box;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0.5rem;
    border-radius: 0.625rem;
    color: var(--rj-red-soft);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.rj-auth-brand-footnote {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rj-on-navy-muted);
}

/* ---- Form panel -------------------------------------------------------- */

.rj-auth-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem 1.25rem 3rem;
    background: #fff;
    outline: none;
}

.dark .rj-auth-main {
    background: var(--gray-950);
}

.rj-auth-card {
    width: 100%;
    max-width: 24rem;
}

.rj-auth-header {
    margin-bottom: 2rem;
}

.rj-auth-heading {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--rj-navy);
}

.dark .rj-auth-heading {
    color: #fff;
}

.rj-auth-subheading {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    color: var(--gray-500);
}

.dark .rj-auth-subheading {
    color: var(--gray-400);
}

.rj-auth .fi-input-wrp {
    border-radius: 0.625rem;
}

.rj-auth .fi-input {
    padding-block: 0.6875rem;
}

.rj-auth .fi-btn {
    padding-block: 0.6875rem;
    border-radius: 0.625rem;
    font-weight: 600;
}

@media (min-width: 1024px) {
    .rj-auth {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .rj-auth-brand {
        padding: clamp(2.5rem, 4.5vw, 4.5rem);
    }

    .rj-auth-brand-inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 3rem;
        height: 100%;
    }

    .rj-auth-brand-copy {
        max-width: 32rem;
    }

    .rj-auth-eyebrow {
        font-size: 0.75rem;
    }

    .rj-auth-welcome {
        margin-top: 0.875rem;
        font-size: clamp(2.5rem, 3.6vw, 3.5rem);
        line-height: 1.04;
        letter-spacing: -0.035em;
    }

    .rj-auth-lede,
    .rj-auth-brand-footnote,
    .rj-auth-art-band,
    .rj-auth-art-mark {
        display: block;
    }

    .rj-auth-highlights {
        display: block;
    }

    .rj-auth-main {
        align-items: center;
        padding: 3rem 2.5rem;
    }
}

/* ==========================================================================
   2. Shell — navy sidebar over a light canvas
   ========================================================================== */

.fi-body:not(.rj-auth-body) {
    background: #f3f5f9;
}

.dark .fi-body:not(.rj-auth-body) {
    background: var(--gray-950);
}

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

.fi-sidebar {
    background: linear-gradient(180deg, var(--rj-navy) 0%, var(--rj-navy-900) 100%);
    color: var(--rj-on-navy);
}

.dark .fi-sidebar {
    background: linear-gradient(180deg, var(--rj-navy-900) 0%, var(--rj-navy-950) 100%);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06);
}

.fi-sidebar .fi-sidebar-header {
    height: 4.5rem;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

.fi-sidebar-nav {
    padding-block: 1.5rem;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.fi-sidebar-nav-groups {
    row-gap: 1.5rem;
}

/* Icon buttons in the sidebar (group collapse chevrons). */
.fi-sidebar .fi-icon-btn {
    color: var(--rj-on-navy-muted);
}

.fi-sidebar .fi-icon-btn:hover,
.fi-sidebar .fi-icon-btn:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* ---- Global search (sits in the sidebar when the topbar is off) -------- */

.fi-sidebar .fi-global-search-ctn {
    margin: 1rem 1rem 0;
}

.fi-sidebar .fi-global-search-field .fi-input-wrp {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.fi-sidebar .fi-global-search-field .fi-input-wrp:focus-within {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 2px var(--rj-red-soft);
}

.fi-sidebar .fi-global-search-field .fi-input {
    color: #fff;
}

.fi-sidebar .fi-global-search-field .fi-input::placeholder {
    color: var(--rj-on-navy-muted);
}

.fi-sidebar .fi-global-search-field .fi-icon {
    color: var(--rj-on-navy-muted);
}

/* ---- Navigation groups and items -------------------------------------- */

.fi-sidebar .fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rj-on-navy-muted);
}

.fi-sidebar .fi-sidebar-group-btn .fi-icon {
    color: var(--rj-on-navy-muted);
}

.fi-sidebar .fi-sidebar-item-btn {
    border-radius: 0.625rem;
    padding-inline: 0.75rem;
}

.fi-sidebar .fi-sidebar-item-btn > .fi-icon {
    color: var(--rj-on-navy-muted);
}

.fi-sidebar .fi-sidebar-item-label {
    color: var(--rj-on-navy);
}

.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background: rgba(255, 255, 255, 0.07);
}

.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible > .fi-icon,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible > .fi-sidebar-item-label {
    color: #fff;
}

.fi-sidebar .fi-sidebar-item-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.7);
}

/* Active item: red rail, warm tint, white label. */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(90deg, rgba(255, 68, 68, 0.2) 0%, rgba(255, 68, 68, 0.06) 100%);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 9999px;
    background: var(--rj-red);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--rj-red-soft);
}

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

/* ---- User menu (sidebar footer) --------------------------------------- */

.fi-sidebar .fi-sidebar-footer {
    margin: 0;
    padding: 0.75rem 1rem 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.fi-sidebar .fi-user-menu-trigger {
    color: #fff;
    border-radius: 0.625rem;
}

.fi-sidebar .fi-user-menu-trigger:hover,
.fi-sidebar .fi-user-menu-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.07);
}

.fi-sidebar .fi-user-menu-trigger .fi-user-menu-trigger-text {
    color: #fff;
}

.fi-sidebar .fi-user-menu-trigger .fi-icon,
.fi-sidebar .fi-user-menu-trigger:hover .fi-icon {
    color: var(--rj-on-navy-muted);
}

/* ---- Mobile bar (resources/views/filament/partials/mobile-bar.blade.php) */

.rj-mobile-bar {
    display: none;
}

@media (max-width: 1023.98px) {
    .rj-mobile-bar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        height: 3.75rem;
        padding-inline: 4rem 1rem;
        background: var(--rj-navy);
        box-shadow: 0 6px 18px -10px rgba(7, 22, 50, 0.6);
    }

    .rj-mobile-bar-home {
        display: inline-flex;
        border-radius: 0.375rem;
    }

    .rj-mobile-bar-home:focus-visible {
        outline: 2px solid var(--rj-red-soft);
        outline-offset: 3px;
    }

    /* Filament's sidebar toggle, lifted onto the bar. */
    .fi-body > .fi-layout-sidebar-toggle-btn-ctn {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        z-index: 21;
        display: flex;
        align-items: center;
        height: 3.75rem;
        padding: 0 0 0 1.25rem;
    }

    .fi-body > .fi-layout-sidebar-toggle-btn-ctn .fi-icon-btn {
        color: #fff;
    }

    .fi-body > .fi-layout-sidebar-toggle-btn-ctn .fi-icon-btn:hover,
    .fi-body > .fi-layout-sidebar-toggle-btn-ctn .fi-icon-btn:focus-visible {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* ==========================================================================
   3. Canvas — page headings and card surfaces
   ========================================================================== */

.fi-header-heading {
    color: var(--rj-navy);
    letter-spacing: -0.03em;
}

.dark .fi-header-heading {
    color: #fff;
}

.fi-header-subheading {
    font-size: 1rem;
    color: var(--gray-500);
}

.dark .fi-header-subheading {
    color: var(--gray-400);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.fi-compact),
.fi-section.fi-aside:not(.fi-compact) > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--rj-radius-card);
    box-shadow: var(--rj-card-shadow);
}

.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.fi-compact),
.dark .fi-section.fi-aside:not(.fi-compact) > .fi-section-content-ctn,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat {
    box-shadow: var(--rj-card-shadow-dark);
}

.fi-section-header-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---- Summary cards ----------------------------------------------------- */

.fi-wi-stats-overview-stat {
    padding: 1.25rem;
    transition: box-shadow 120ms ease;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    font-size: 0.8125rem;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: var(--rj-navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: #fff;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    color: var(--rj-red-strong);
}

.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    color: var(--rj-red-soft);
}

a.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 0 0 1px rgba(255, 68, 68, 0.35), 0 8px 24px -12px rgba(10, 31, 68, 0.25);
}

.dark a.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.45);
}

a.fi-wi-stats-overview-stat:focus-visible {
    box-shadow: 0 0 0 2px var(--primary-600);
}

/* ==========================================================================
   4. Dashboard widgets  (resources/views/filament/widgets/*)
   ========================================================================== */

.rj-widget-empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.dark .rj-widget-empty {
    color: var(--gray-400);
}

/* ---- Quick actions ----------------------------------------------------- */

.rj-quick-actions-list {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) and (max-width: 1279.98px) {
    .rj-quick-actions-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rj-quick-action {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    box-shadow: inset 0 0 0 1px var(--gray-200);
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.rj-quick-action:hover {
    background: var(--rj-mist-50);
    box-shadow: inset 0 0 0 1px rgba(255, 68, 68, 0.4);
}

.rj-quick-action:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.dark .rj-quick-action {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dark .rj-quick-action:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.45);
}

.rj-quick-action-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--rj-navy);
}

.rj-quick-action-icon .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--rj-red-soft);
}

.rj-quick-action-text {
    display: grid;
    min-width: 0;
}

.rj-quick-action-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-950);
}

.rj-quick-action-description {
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--gray-500);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .rj-quick-action-label {
    color: #fff;
}

.dark .rj-quick-action-description {
    color: var(--gray-400);
}

.rj-quick-action-chevron {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-inline-start: auto;
    color: var(--gray-400);
}

/* ---- Recently updated content ----------------------------------------- */

.rj-list {
    margin: -0.5rem -0.75rem;
    padding: 0;
    list-style: none;
}

.rj-list > li + li {
    border-top: 1px solid var(--gray-100);
}

.dark .rj-list > li + li {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.rj-list-row {
    display: grid;
    grid-template-areas:
        'type time'
        'title badge';
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.125rem 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
}

a.rj-list-row:hover {
    background: var(--rj-mist-50);
}

a.rj-list-row:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: -2px;
}

.dark a.rj-list-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.rj-list-type {
    grid-area: type;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.rj-list-title {
    grid-area: title;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-950);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .rj-list-title {
    color: #fff;
}

.rj-list-badge {
    grid-area: badge;
    justify-self: end;
}

.rj-list-time {
    grid-area: time;
    justify-self: end;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .rj-list-row {
        grid-template-areas: 'type title badge time';
        grid-template-columns: 6.5rem minmax(0, 1fr) auto 4.5rem;
    }
}

/* ---- Needs attention --------------------------------------------------- */

.rj-attention-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rj-attention-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--rj-mist-50);
    transition: background-color 120ms ease;
}

.rj-attention-item:hover {
    background: var(--rj-mist-100);
}

.rj-attention-item:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.dark .rj-attention-item {
    background: rgba(255, 255, 255, 0.04);
}

.dark .rj-attention-item:hover {
    background: rgba(255, 255, 255, 0.07);
}

.rj-attention-icon .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--warning-600);
}

.dark .rj-attention-icon .fi-icon {
    color: var(--warning-400);
}

.rj-attention-text {
    display: grid;
    min-width: 0;
}

.rj-attention-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-950);
}

.rj-attention-hint {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.dark .rj-attention-label {
    color: #fff;
}

.dark .rj-attention-hint {
    color: var(--gray-400);
}

.rj-attention-count {
    flex: none;
    min-width: 2rem;
    margin-inline-start: auto;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: #fff;
    background: var(--rj-navy);
}

.dark .rj-attention-count {
    background: rgba(255, 255, 255, 0.12);
}

.rj-attention-clear {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.rj-attention-clear p {
    margin: 0;
}

.rj-attention-clear-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--success-600);
}

@media (prefers-reduced-motion: reduce) {
    .fi-wi-stats-overview-stat,
    .rj-quick-action,
    .rj-attention-item {
        transition: none;
    }
}

/* ==========================================================================
   5. Media picker  (resources/views/filament/forms/components/media-*.blade.php)
   ========================================================================== */

/* ---- The field: a preview card with its own buttons -------------------- */

.rj-media-field {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rj-media-field-preview,
.rj-media-field-empty {
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.rj-media-field-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid var(--gray-200);
    background: #fff;
}

.dark .rj-media-field-preview {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.rj-media-field-thumb {
    display: block;
    width: 100%;
    max-height: 12rem;
    border-radius: 0.5rem;
    object-fit: contain;
    background: var(--gray-100);
}

.dark .rj-media-field-thumb {
    background: rgba(255, 255, 255, 0.06);
}

.rj-media-field-facts {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.rj-media-field-facts p {
    margin: 0;
    overflow-wrap: anywhere;
}

.rj-media-field-name {
    font-size: 0.875rem;
    font-weight: 600;
}

.rj-media-field-meta,
.rj-media-field-alt {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--gray-500);
}

.rj-media-field-warning {
    color: var(--warning-600);
}

.dark .rj-media-field-warning {
    color: var(--warning-400);
}

.rj-media-field-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 8rem;
    border: 1px dashed var(--gray-300, var(--gray-200));
    color: var(--gray-500);
}

.dark .rj-media-field-empty {
    border-color: rgba(255, 255, 255, 0.15);
}

.rj-media-field-empty-icon {
    width: 2rem;
    height: 2rem;
    color: var(--gray-400);
}

.rj-media-field-empty-text {
    margin: 0;
    font-size: 0.875rem;
}

.rj-media-field-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---- The library, inside the modal ------------------------------------- */

.rj-media-browser {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rj-media-browser [x-cloak] {
    display: none;
}

.rj-media-browser-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.rj-media-browser-search {
    position: relative;
    flex: 1 1 16rem;
    display: block;
}

.rj-media-browser-search-icon {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: 50%;
    width: 1.125rem;
    height: 1.125rem;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

.rj-media-browser-search input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: inherit;
    background: #fff;
}

.dark .rj-media-browser-search input {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.rj-media-browser-search input:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 1px;
}

.rj-media-browser-count {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.rj-media-browser-body {
    max-height: min(60vh, 28rem);
    overflow-y: auto;
    padding-inline-end: 0.25rem;
}

.rj-media-browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.75rem;
}

.rj-media-tile {
    display: block;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    text-align: start;
    background: transparent;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.rj-media-tile:hover {
    background: var(--gray-100);
}

.dark .rj-media-tile:hover {
    background: rgba(255, 255, 255, 0.06);
}

.rj-media-tile:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 1px;
}

.rj-media-tile-chosen,
.rj-media-tile-chosen:hover {
    border-color: var(--primary-600);
    background: rgba(10, 31, 68, 0.04);
}

.dark .rj-media-tile-chosen,
.dark .rj-media-tile-chosen:hover {
    background: rgba(255, 255, 255, 0.08);
}

.rj-media-tile-frame {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--gray-100);
}

.dark .rj-media-tile-frame {
    background: rgba(255, 255, 255, 0.06);
}

.rj-media-tile-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rj-media-tile-flag {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    background: rgba(10, 31, 68, 0.75);
}

.rj-media-tile-name,
.rj-media-tile-meta {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rj-media-tile-name {
    margin-block-start: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.rj-media-tile-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.rj-media-browser-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.rj-media-browser-empty p {
    margin: 0;
}

.rj-media-browser-more {
    display: flex;
    justify-content: center;
    padding-block-start: 1rem;
}

.rj-media-browser-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--gray-200);
}

.dark .rj-media-browser-chosen {
    border-block-start-color: rgba(255, 255, 255, 0.1);
}

.rj-media-browser-chosen-thumb {
    flex: none;
    width: 7rem;
    height: 7rem;
    border-radius: 0.5rem;
    object-fit: contain;
    background: var(--gray-100);
}

.dark .rj-media-browser-chosen-thumb {
    background: rgba(255, 255, 255, 0.06);
}

.rj-media-browser-chosen-facts {
    flex: 1 1 14rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 1.25rem;
    margin: 0;
    font-size: 0.8125rem;
}

.rj-media-browser-chosen-facts dt {
    color: var(--gray-500);
}

.rj-media-browser-chosen-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .rj-media-tile {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
 * Media library page (Content → Media)
 *
 * Everything below is scoped to `.rj-media-library`, the class
 * `MediaAssetsTable` puts on that one table, so these rules cannot reach any
 * other Filament table. Inside that scope a handful of `fi-*` rules are
 * unavoidable: Filament owns the grid cell and the button it wraps each card
 * in, and a card cannot fill a cell that keeps its own padding. They are held
 * to exactly that — spacing, radius, and the focus ring on the card button.
 *
 * The card shares its measurements with the picker's tiles above, so an image
 * looks the same wherever an editor meets it.
 * ------------------------------------------------------------------------- */

/* ---- Grid / List toggle ------------------------------------------------- */

.rj-media-views {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.1875rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.625rem;
    background: var(--gray-50);
}

.dark .rj-media-views {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.rj-media-view {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    /* 2.25rem tall, plus the toolbar's own spacing around it, keeps the target
       comfortable on a touch screen without making the control look oversized. */
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    background: transparent;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.dark .rj-media-view {
    color: var(--gray-300);
}

.rj-media-view:hover {
    color: var(--gray-900);
    background: rgba(10, 31, 68, 0.06);
}

.dark .rj-media-view:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.rj-media-view:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 1px;
}

/* Which view is current is carried by `aria-pressed`; the fill and the weight
   are the visible half of the same fact, so it never rests on colour alone. */
.rj-media-view-current,
.rj-media-view-current:hover {
    font-weight: 600;
    color: #fff;
    background: var(--rj-navy);
}

.dark .rj-media-view-current,
.dark .rj-media-view-current:hover {
    color: var(--rj-navy-950);
    background: var(--rj-mist-100);
}

.rj-media-view-icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* ---- Grid cards --------------------------------------------------------- */

/* The card column carries an action, so Filament renders it as a <button> that
   wraps the whole card. It is the only focusable thing on a card, and the only
   button inside this table's grid, which is what makes the selector safe. */
.rj-media-library .fi-ta-record button.fi-ta-col {
    display: block;
    width: 100%;
    text-align: start;
    cursor: pointer;
}

.rj-media-library .fi-ta-record button.fi-ta-col:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
    border-radius: 0.75rem;
}

/* Filament lays each record out as a flex row (checkbox, content) and each
   column as a flex box, and flex items refuse to shrink below their content.
   Left alone, a card is as wide as its un-wrapped title: frames come out at
   different sizes, overflow their cell, and push the page sideways on a phone.
   Every box between the grid cell and the card is allowed to shrink instead. */
.rj-media-library .fi-ta-content-grid .fi-ta-record,
.rj-media-library .fi-ta-content-grid .fi-ta-record-content-ctn,
.rj-media-library .fi-ta-content-grid .fi-ta-record-content,
.rj-media-library .fi-ta-content-grid .fi-ta-record-content .fi-grid-col,
.rj-media-library .fi-ta-content-grid .fi-ta-stack {
    min-width: 0;
}

.rj-media-library .fi-ta-content-grid .fi-ta-stack {
    align-items: stretch;
}

/* The bulk-selection checkbox sits on the thumbnail's corner rather than in a
   column beside the card, so the picture gets the cell's full width — which on
   a two-up phone grid is most of what there is. */
.rj-media-library .fi-ta-content-ctn .fi-ta-content.fi-ta-content-grid .fi-ta-record {
    position: relative;
    padding-inline: 0.75rem;
}

.rj-media-library .fi-ta-content-ctn .fi-ta-content.fi-ta-content-grid .fi-ta-record .fi-ta-record-checkbox {
    position: absolute;
    z-index: 1;
    inset-block-start: 1.5rem;
    inset-inline-start: 1.5rem;
    margin: 0;
}

.rj-media-library .fi-ta-content-ctn .fi-ta-content.fi-ta-content-grid .fi-ta-record .fi-ta-record-content {
    padding-inline: 0;
}

.rj-media-card {
    display: block;
    flex: 1 1 0%;
    width: 100%;
    min-width: 0;
}

.rj-media-card-frame {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--gray-100);
}

.dark .rj-media-card-frame {
    background: rgba(255, 255, 255, 0.06);
}

/* The rule that matters most here: a thumbnail never renders at its own size,
   whatever was uploaded, and the frame reserves its space before it loads. */
.rj-media-card-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rj-media-card-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--gray-400);
}

.rj-media-card-missing-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.rj-media-card-flag {
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    background: rgba(10, 31, 68, 0.75);
}

.rj-media-card-name,
.rj-media-card-meta {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rj-media-card-name {
    margin-block-start: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-900);
}

.dark .rj-media-card-name {
    color: #fff;
}

.rj-media-card-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.dark .rj-media-card-meta {
    color: var(--gray-400);
}

/* ---- Details modal ------------------------------------------------------ */

.rj-media-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 48rem) {
    .rj-media-details {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 1.5rem;
    }
}

.rj-media-details-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: var(--gray-100);
}

.dark .rj-media-details-preview {
    background: rgba(255, 255, 255, 0.06);
}

/* `contain`, not `cover`: this is the one place an editor checks what the
   picture actually is, so none of it may be cropped away. */
.rj-media-details-preview img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(60vh, 26rem);
    object-fit: contain;
    border-radius: 0.5rem;
}

.rj-media-details-missing {
    margin: 0;
    padding: 2rem 1rem;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--gray-500);
}

.rj-media-details-facts {
    min-width: 0;
}

.rj-media-details-heading {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.rj-media-details-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 1.25rem;
    margin: 0;
    font-size: 0.8125rem;
}

.rj-media-details-list dt {
    color: var(--gray-500);
}

.rj-media-details-list dd {
    margin: 0;
    color: var(--gray-900);
    overflow-wrap: anywhere;
}

.dark .rj-media-details-list dd {
    color: var(--gray-100);
}

.rj-media-details-note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.dark .rj-media-details-note {
    color: var(--gray-300);
}

.rj-media-details-usage {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.25rem;
    list-style: disc;
    font-size: 0.8125rem;
    color: var(--gray-900);
}

.dark .rj-media-details-usage {
    color: var(--gray-100);
}

.rj-media-details-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rj-media-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-700);
    background: #fff;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.dark .rj-media-copy {
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--gray-200);
    background: rgba(255, 255, 255, 0.05);
}

.rj-media-copy:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.dark .rj-media-copy:hover {
    background: rgba(255, 255, 255, 0.09);
}

.rj-media-copy:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 1px;
}

.rj-media-copy [x-cloak] {
    display: none;
}

.rj-media-copy-icon {
    width: 1rem;
    height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .rj-media-view,
    .rj-media-copy {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
 * Visually hidden text
 *
 * Ours rather than Tailwind's `sr-only`: that class only exists in Filament's
 * compiled stylesheet while one of Filament's own views happens to use it, and
 * nothing here runs through a Tailwind build.
 * ------------------------------------------------------------------------- */

.rj-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

/* ---------------------------------------------------------------------------
 * Form sidebar (Blog Post editor)
 *
 * A form column marked `.rj-form-sidebar` in its schema rides alongside the
 * main column instead of scrolling away from it. Sticky is applied to the grid
 * *item* two levels above that marker, not to the column itself: a grid child
 * stretches to the full row height by default, and an element that already
 * fills its parent has nowhere to travel. `align-self: start` shrinks the item
 * to its content, which is what gives `position: sticky` somewhere to go. The
 * `> .fi-sc-component >` step is what keeps the match to that one item rather
 * than every `.fi-grid-col` the sidebar happens to sit inside.
 *
 * The padding and the negative margin that cancels it are a focus-ring gutter.
 * `overflow-y: auto` clips at the padding edge, so 0.5rem of it keeps a focused
 * control's ring whole; the margins put the column back exactly where the grid
 * placed it, so nothing shifts against the article beside it.
 *
 * Below `lg` (64rem / 1024px) none of this exists: the grid is a single column
 * and the sidebar simply follows the article in DOM order, with no scroll
 * container of its own and nothing reordered.
 * ------------------------------------------------------------------------- */

@media (min-width: 64rem) {
    .fi-grid-col:has(> .fi-sc-component > .rj-form-sidebar) {
        align-self: start;
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        margin: -0.5rem;
        padding: 0.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Filament stretches this wrapper to the row height; inside a column that
       now scrolls, it has to be as tall as what it holds instead. */
    .fi-grid-col:has(> .fi-sc-component > .rj-form-sidebar) > .fi-sc-component {
        height: auto;
    }
}