/*
 * Weekly Issue page styling (2026-07-31, matching WeeklyIssue.html) —
 * kept in its own file, registered alongside warm-ember.css/business-
 * dashboard.css/settings via the same FilamentAsset::register() call
 * (AdminPanelProvider::boot()). Plain hand-written CSS, not Tailwind
 * utility classes — Filament's admin panel loads its own precompiled CSS
 * bundle, which never scans this app's custom page Blade views (found
 * 2026-07-31 building the Business Overview dashboard), so Tailwind
 * classes referenced in a custom view silently do nothing there.
 *
 * Same 10-shade desert-dusk palette given for App Settings — reused
 * here since it's the identical palette, not redefined.
 */
:root {
    --desert-dusk-1: #93594A;
    --desert-dusk-2: #B8705C;
    --desert-dusk-3: #D4917E;
    --desert-dusk-4: #E3B39B;
    --desert-dusk-5: #F0D4C2;
    --desert-dusk-6: #DDA890;
    --desert-dusk-7: #7A4638;
    --desert-dusk-8: #EDC3AC;
    --desert-dusk-9: #C8846C;
    --desert-dusk-10: #F7E4D8;
}

.rf-wi * {
    box-sizing: border-box;
}

.rf-wi {
    font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
    /* Text sitting directly on Filament's own page background (section
       headings, subtitles — anything NOT inside one of this page's own
       light cards) must track Filament's theme toggle, same as the page
       background itself does: dark text in light mode, light text in
       dark mode. The first pass (earlier 2026-07-31 fix) hardcoded dark
       text unconditionally, which went invisible against Filament's own
       dark-mode page background — this was the real bug, not just a
       one-off color choice. */
    color: #2b211c;
}

:root[data-theme="dark"] .rf-wi,
.dark .rf-wi {
    color: #f5ece2;
}

.rf-wi-level-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rf-wi-level-card,
.rf-wi-release-card,
.rf-wi-card {
    background: var(--rf-wi-card-bg, #fff);
    /* Every one of this page's own cards has a hardcoded light
       background regardless of Filament's theme toggle (matching the
       design reference, which has no dark variant) — so text inside
       them must stay dark unconditionally too, overriding the
       theme-aware rule above rather than inheriting it. */
    color: #2b211c;
}

/* This page's own hand-rolled selects (status filter, rotation weekday)
   already set their own color/background inline, so they never need a
   CSS rule here.
   The pagination "Per page" control otherwise keeps Filament's native
   style untouched (2026-07-31 follow-up #3) — same border, radius, and
   font-size as the Lessons resource page's own "Per page" control,
   since both render the exact same component. The one exception is
   background: in light mode Filament's native `bg-white` renders the
   control invisible-bordered against "Feature a New Lesson"'s own
   white card (unlike the Lessons page, whose table sits on a neutral
   page background, not a nested white card) — swapped to this page's
   own tan tone just for that one contrast case, scoped to
   `.rf-wi-card-flush` only so Previous Releases' pagination (not inside
   a white card) is untouched. */
.rf-wi-card-flush .fi-pagination-records-per-page-select .fi-input-wrp {
    background-color: var(--desert-dusk-10) !important;
}

/* The tan background above is always light, but Filament's native
   select text stays `dark:text-white` whenever the panel is in dark
   mode — invisible against this light tan otherwise. Forced dark
   unconditionally here, same scoping as the background fix. */
.rf-wi-card-flush .fi-pagination-records-per-page-select .fi-select-input,
.rf-wi-card-flush .fi-pagination-records-per-page-select .fi-input-wrp-label {
    color: var(--desert-dusk-1) !important;
}

.rf-wi-level-card {
    border: 2px solid var(--desert-dusk-5);
    border-radius: 14px;
    padding: 18px;
    transition: border-color .15s ease;
}

:root[data-theme="dark"] .rf-wi-level-card,
:root[data-theme="dark"] .rf-wi-release-card,
:root[data-theme="dark"] .rf-wi-card,
.dark .rf-wi-level-card,
.dark .rf-wi-release-card,
.dark .rf-wi-card {
    --rf-wi-card-bg: #fdfaf7;
}

.rf-wi-level-card-current {
    border-color: var(--desert-dusk-2);
    box-shadow: 0 0 0 4px rgba(184, 112, 92, .08);
}

.rf-wi-level-card-empty {
    opacity: .6;
}

.rf-wi-level-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 800;
    background: var(--desert-dusk-8);
    color: var(--desert-dusk-1);
}

.rf-wi-status-caption {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--desert-dusk-9);
}

.rf-wi-status-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--desert-dusk-2);
    color: #fff;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.rf-wi-cover {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--desert-dusk-5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.rf-wi-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rf-wi-title {
    font-weight: 700;
    color: var(--desert-dusk-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rf-wi-meta {
    font-size: 12px;
    color: var(--desert-dusk-9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rf-wi-release-card {
    background: var(--rf-wi-card-bg, #fff);
    border: 1px solid var(--desert-dusk-5);
    border-radius: 12px;
    padding: 14px;
}

.rf-wi-section-heading {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.rf-wi-section-sub {
    font-size: 13px;
    color: var(--desert-dusk-9);
    margin: 3px 0 0;
}

.rf-wi-card {
    background: var(--rf-wi-card-bg, #fff);
    border: 1px solid var(--desert-dusk-5);
    border-radius: 14px;
    padding: 20px;
}

.rf-wi-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--desert-dusk-5);
    cursor: pointer;
}

.rf-wi-radio-active {
    border-color: var(--desert-dusk-2);
    background: rgba(184, 112, 92, .06);
}

.rf-wi-info-box {
    background: var(--desert-dusk-10);
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--desert-dusk-1);
}

.rf-wi-btn {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
    padding: 9px 16px;
}

.rf-wi-btn-primary {
    background: var(--desert-dusk-2);
    color: #fff;
}

.rf-wi-btn-outline {
    background: transparent;
    border: 1px solid var(--desert-dusk-5);
    color: var(--desert-dusk-1);
}

.rf-wi-tab {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    border-radius: 999px;
    padding: 6px 14px;
    white-space: nowrap;
    background: var(--desert-dusk-10);
    color: var(--desert-dusk-1);
}

.rf-wi-tab-active {
    background: var(--desert-dusk-2);
    color: #fff;
}

.rf-wi-chip {
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    padding: 6px 12px;
    background: var(--desert-dusk-10);
    color: var(--desert-dusk-1);
}

.rf-wi-chip-active {
    background: var(--desert-dusk-8);
    border-color: var(--desert-dusk-2);
}

.rf-wi-table {
    width: 100%;
    border-collapse: collapse;
}

.rf-wi-table th {
    text-align: left;
    padding: 10px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--desert-dusk-9);
    background: var(--desert-dusk-10);
}

.rf-wi-table td {
    padding: 14px 18px;
    font-size: 14px;
    border-top: 1px solid var(--desert-dusk-5);
}

.rf-wi-table tr:hover td {
    background: rgba(184, 112, 92, .04);
}

.rf-wi-table tr.rf-wi-row-current td {
    background: rgba(184, 112, 92, .08);
}