/* ============================================================
   CashAndStats sidebar — Blazor-native rebuild
   ============================================================
   Fixed-position sidebar on the left. The header + main content
   live inside a "shift wrapper" (.cas-layout__main) whose
   margin-left animates between 0 and the sidebar width. When the
   sidebar is open, the wrapper shifts right so nothing sits
   under the sidebar; when it's closed, the wrapper sits flush
   at x=0, which parks the hamburger at the far-left edge.
   ============================================================ */

:root {
    --cas-sb-width: 260px;
    --cas-sb-bg: #1b2236;
    --cas-sb-bg-submenu: #151a2c;
    --cas-sb-header-bg: #121627;
    --cas-sb-text: #cbd1e0;
    --cas-sb-text-muted: #7a8199;
    --cas-sb-text-active: #ffffff;
    --cas-sb-accent: #6366f1;
    --cas-sb-hover-bg: rgba(255, 255, 255, 0.06);
    --cas-sb-active-bg: rgba(99, 102, 241, 0.18);
    --cas-sb-active-bar: #818cf8;
    --cas-sb-divider: rgba(255, 255, 255, 0.05);
    --cas-sb-transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --cas-sb-z: 1040;
}

/* ---------- Page layout -------------------------------------- */

.cas-layout {
    min-height: 100vh;
}

/* Shift wrapper holds header + main content + footer. When the
   sidebar is open, shift it right by the sidebar width; the
   header and content both move in lockstep so the hamburger
   always lines up at the left edge of the visible area. */
.cas-layout__main {
    margin-left: 0;
    transition: margin-left var(--cas-sb-transition);
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .cas-layout__main--shift {
        margin-left: var(--cas-sb-width);
    }
}

/* Kill the theme's .main-content margin-left so our shift
   wrapper is the single source of truth for horizontal
   positioning. Without this, the theme's stylesheet adds its
   own margin-left:260px to .main-content and the content ends
   up double-shifted (or wrong-shifted) against the sidebar. */
.cas-layout .main-content,
.cas-layout .app-content,
.cas-layout .main-content.cas-main-reset,
.cas-layout .app-content.cas-main-reset {
    margin-inline-start: 0 !important;
    margin-left: 0 !important;
}

/* The theme gives .app-header a fixed position + left offset.
   Inside our shift wrapper the header flows naturally (relative
   position, full width of the wrapper) so margin animation
   carries it along. Also kill the theme's
   `padding-inline-start: 15rem` which was hard-coding a 240px
   indent on the header — the hamburger was landing way past
   the left edge because of this. */
.cas-layout__main > .app-header,
.cas-layout__main > header.app-header {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-inline-start: 0 !important;
    padding-left: 0 !important;
    /* Header must out-rank .cas-hnav (z-index: 25) so dropdowns
       that open from the header (profile, layout toggle, etc.)
       render on top of the horizontal nav sitting directly below
       it. Without this, .cas-hnav forms a higher stacking context
       as a sibling of the header and clips the dropdown. */
    z-index: 40;
}

/* Kill the theme's `margin-block-start: 3.2rem` on .app-content
   which was pushing the whole page body down ~52px below the
   header. With our flow-layout (header is a normal block above
   content) there's no reason to reserve that space. */
.cas-layout__main .app-content,
.cas-layout__main .main-content {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* The theme pins .app-header to a fixed 3.2rem (~51px) — too
   short for the JFNA brand logo (458x100), which left it cramped
   against the bar edges. Lift it to 4rem (64px) so the logo sits
   with even breathing room. 64px also matches .cas-sb__header
   (the sidebar's own header), so the top bar and sidebar header
   line up. Scoped to .cas-layout (.page wrapper) so it beats the
   theme's bare `.app-header` rule on specificity, and applies to
   both the authenticated header and the sign-in screen header. */
.cas-layout .app-header {
    height: 4rem;
}

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

.cas-sb {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--cas-sb-width);
    background: var(--cas-sb-bg);
    color: var(--cas-sb-text);
    display: flex;
    flex-direction: column;
    z-index: var(--cas-sb-z);
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);
    transform: translateX(0);
    transition: transform var(--cas-sb-transition);
    will-change: transform;
}

.cas-sb--closed {
    transform: translateX(-100%);
}

.cas-sb__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    background: var(--cas-sb-header-bg);
    border-bottom: 1px solid var(--cas-sb-divider);
    min-height: 64px;
    flex-shrink: 0;
}

.cas-sb__header img {
    max-height: 38px;
    max-width: 100%;
    object-fit: contain;
}

.cas-sb__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.cas-sb__scroll::-webkit-scrollbar {
    width: 6px;
}
.cas-sb__scroll::-webkit-scrollbar-track {
    background: transparent;
}
.cas-sb__scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.cas-sb__scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* ---------- Menu tree ---------------------------------------- */

.cas-sb__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cas-sb__group {
    padding: 1px 10px;
}

.cas-sb__group-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--cas-sb-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}

.cas-sb__group-btn:hover,
.cas-sb__group-btn:focus-visible {
    background: var(--cas-sb-hover-bg);
    color: var(--cas-sb-text-active);
    outline: none;
    text-decoration: none;
}

.cas-sb__group--active > .cas-sb__group-btn {
    color: var(--cas-sb-text-active);
}

.cas-sb__label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cas-sb__chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    opacity: 0.55;
    transition: transform var(--cas-sb-transition), opacity 140ms ease;
}

.cas-sb__group--open > .cas-sb__group-btn .cas-sb__chevron,
.cas-sb__item--open > .cas-sb__link .cas-sb__chevron {
    transform: rotate(90deg);
    opacity: 0.9;
}

/* ---------- Submenus ----------------------------------------- */

.cas-sb__submenu {
    list-style: none;
    margin: 2px 0 4px 0;
    padding: 4px 0 6px 10px;
    background: var(--cas-sb-bg-submenu);
    border-radius: 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--cas-sb-transition), opacity 140ms ease;
}

.cas-sb__group--open > .cas-sb__submenu,
.cas-sb__item--open > .cas-sb__submenu {
    max-height: 3000px;
    opacity: 1;
}

.cas-sb__submenu .cas-sb__submenu {
    background: transparent;
    padding-left: 14px;
    margin: 0;
    border-radius: 0;
}

/* ---------- Leaf links --------------------------------------- */

.cas-sb__item {
    padding: 1px 0;
}

.cas-sb__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--cas-sb-text);
    font-size: 13px;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 120ms ease, color 120ms ease;
}

.cas-sb__link:hover,
.cas-sb__link:focus-visible {
    background: var(--cas-sb-hover-bg);
    color: var(--cas-sb-text-active);
    text-decoration: none;
    outline: none;
}

.cas-sb__link--active {
    background: var(--cas-sb-active-bg);
    color: var(--cas-sb-text-active);
    font-weight: 500;
}

.cas-sb__link--active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--cas-sb-active-bar);
    border-radius: 2px;
}

.cas-sb__empty {
    padding: 12px 22px;
    color: var(--cas-sb-text-muted);
    font-size: 12px;
}

/* ---------- Layout mode toggle ------------------------------- */

/* Next-to-the-user-menu button that flips between Sidebar and
   Horizontal layout modes. Shows the icon for the INACTIVE mode
   (i.e. "the one you'd switch to") so the affordance reads
   correctly. */
.cas-layout-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #4a5270;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.cas-layout-toggle:hover,
.cas-layout-toggle:focus-visible {
    background: rgba(17, 24, 39, 0.06);
    color: #0f172a;
    outline: none;
}

.cas-layout-toggle__svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ---------- Theme (light/dark) toggle ------------------------ */

/* Sits next to the .cas-layout-toggle on the right side of the
   header. Same sizing + hover treatment as the layout toggle so
   the two icons read as a group. Selection persists via
   ThemeService + localStorage (key: "vertixdarktheme"), and the
   bundled theme's main.js re-applies it on full page reload so
   the user's choice survives logout / login. */
.cas-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #4a5270;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.cas-theme-toggle:hover,
.cas-theme-toggle:focus-visible {
    background: rgba(17, 24, 39, 0.06);
    color: #0f172a;
    outline: none;
}

.cas-theme-toggle__svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ============================================================
   Dark-mode overrides for CashAndStats custom components
   ============================================================
   The theme's styles.css already covers [data-theme-mode=dark]
   for its own .app-header / .card / .table etc. But the custom
   .cas-hnav, .cas-dash, .cas-sb, header toggle icons, and any
   app-wide primary-colored links use hard-coded light values
   that don't respond to the attribute flip — everything below
   wires those into dark mode with higher-contrast tones so
   text and links stay readable on the dark background.
   ============================================================ */

/* Header toggle icons — lift to a light tone on dark header. */
[data-theme-mode=dark] .cas-theme-toggle,
[data-theme-mode=dark] .cas-layout-toggle,
[data-theme-mode=dark] .cas-hamburger {
    color: #cbd5e1;
}

[data-theme-mode=dark] .cas-theme-toggle:hover,
[data-theme-mode=dark] .cas-theme-toggle:focus-visible,
[data-theme-mode=dark] .cas-layout-toggle:hover,
[data-theme-mode=dark] .cas-layout-toggle:focus-visible,
[data-theme-mode=dark] .cas-hamburger:hover,
[data-theme-mode=dark] .cas-hamburger:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Horizontal nav — replace the light CSS variables with a dark
   palette. The whole component is variable-driven so this is
   all we need to flip background, text, panel, hover, active,
   and dropdown panel colors in one shot. */
[data-theme-mode=dark] .cas-hnav {
    --cas-hnav-bg: #1b2236;
    --cas-hnav-border: rgba(255, 255, 255, 0.08);
    --cas-hnav-text: #cbd5e1;
    --cas-hnav-text-muted: #94a3b8;
    --cas-hnav-text-active: #ffffff;
    --cas-hnav-accent: #a5b4fc;
    --cas-hnav-hover: rgba(255, 255, 255, 0.06);
    --cas-hnav-panel-bg: #1f2640;
    --cas-hnav-panel-border: rgba(255, 255, 255, 0.1);
    --cas-hnav-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --cas-hnav-active-bg: rgba(165, 180, 252, 0.15);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Dashboard cards + toolbar — same variable-override pattern. */
[data-theme-mode=dark] .cas-dash {
    --cas-dash-card-bg: #1f2640;
    --cas-dash-card-border: rgba(255, 255, 255, 0.08);
    --cas-dash-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --cas-dash-card-hover-border: #818cf8;
    --cas-dash-card-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.5);
    --cas-dash-accent: #a5b4fc;
    --cas-dash-muted: #94a3b8;
    --cas-dash-title: #f1f5f9;
    --cas-dash-toolbar-bg: transparent;
    --cas-dash-hit-bg: rgba(251, 191, 36, 0.25);
    --cas-dash-hit-fg: #fde68a;
}

/* Dashboard toolbar pill-tabs track and active pill.
   The track gets a subtle inset surface so it reads as a
   container; the active pill uses a bright indigo fill that
   clearly stands out against both the track and the dark body.
   Inactive tabs use a light-slate text color so they are
   readable without competing with the active pill. */
[data-theme-mode=dark] .cas-dash__tabs {
    background: rgba(15, 19, 33, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme-mode=dark] .cas-dash__tab {
    color: #cbd5e1;
}

[data-theme-mode=dark] .cas-dash__tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

[data-theme-mode=dark] .cas-dash__tab--active,
[data-theme-mode=dark] .cas-dash__tab--active:hover {
    background: #6366f1;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35),
                0 2px 8px rgba(99, 102, 241, 0.45);
}

[data-theme-mode=dark] .cas-dash__tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.35);
}

/* Favorites count chip + star color tuned for dark bg. */
[data-theme-mode=dark] .cas-dash__tab-count {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.25);
}

[data-theme-mode=dark] .cas-dash__tab--active .cas-dash__tab-count {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
}

/* Section titles + counts inside the dashboard (COMMITMENTS &
   ASSESSMENTS, etc.) — lift from the muted gray that disappears
   on dark. */
[data-theme-mode=dark] .cas-dash__section-title {
    color: #cbd5e1;
}

[data-theme-mode=dark] .cas-dash__section-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme-mode=dark] .cas-dash__section-count {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.2);
}

/* Card title + arrow inside dashboard quick-link cards. */
[data-theme-mode=dark] .cas-dash__card-title {
    color: #f1f5f9;
}

[data-theme-mode=dark] .cas-dash__card:hover .cas-dash__card-arrow,
[data-theme-mode=dark] .cas-dash__card:focus-visible .cas-dash__card-arrow {
    color: #a5b4fc;
}

/* Empty-state / placeholder text in the dashboard. */
[data-theme-mode=dark] .cas-dash__empty,
[data-theme-mode=dark] .cas-dash__filter-summary,
[data-theme-mode=dark] .cas-dash__empty-hint {
    color: #94a3b8;
}

[data-theme-mode=dark] .cas-dash__empty {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dashboard filter input. */
[data-theme-mode=dark] .cas-dash__filter {
    background: #1f2640;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme-mode=dark] .cas-dash__filter:focus-within {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.2);
}

[data-theme-mode=dark] .cas-dash__filter-input {
    color: #f1f5f9;
}

/* ---------- Blue / primary color contrast fixes -------------
   The bundled theme + Bootstrap both emit a deep-indigo primary
   color (rgb(99, 102, 241) and similar). On the dark body that
   color sits too close to background luminance — link text like
   table row IDs, breadcrumbs, and `.text-primary` spans end up
   barely readable. The rules below lift those specific accent
   uses to a lighter indigo (#a5b4fc) in dark mode only, without
   touching primary-colored buttons (whose white-on-indigo text
   remains high-contrast). */

[data-theme-mode=dark] a:not(.btn):not(.dropdown-item):not(.dropdown-toggle):not(.header-link):not(.nav-link):not(.cas-hnav__trigger):not(.cas-hnav__panel-link):not(.cas-sb__link):not(.cas-sb__group-btn):not(.cas-dash__card) {
    color: #a5b4fc;
}

[data-theme-mode=dark] a:not(.btn):not(.dropdown-item):not(.dropdown-toggle):not(.header-link):not(.nav-link):not(.cas-hnav__trigger):not(.cas-hnav__panel-link):not(.cas-sb__link):not(.cas-sb__group-btn):not(.cas-dash__card):hover {
    color: #c7d2fe;
}

[data-theme-mode=dark] .text-primary {
    color: #a5b4fc !important;
}

[data-theme-mode=dark] .breadcrumb .breadcrumb-item a,
[data-theme-mode=dark] .breadcrumb-item a {
    color: #a5b4fc;
}

[data-theme-mode=dark] .breadcrumb-item.active,
[data-theme-mode=dark] .breadcrumb-item + .breadcrumb-item::before {
    color: #94a3b8;
}

/* Grid.js / generic tables render cell links (e.g. System ID
   column in Direct Distributions) with the theme's primary
   color. Lift those specifically. */
[data-theme-mode=dark] .gridjs-table a,
[data-theme-mode=dark] table a {
    color: #a5b4fc;
}

[data-theme-mode=dark] .gridjs-table a:hover,
[data-theme-mode=dark] table a:hover {
    color: #c7d2fe;
}

/* Form labels inside filter panels — the theme leaves them at a
   muted gray that disappears on dark. */
[data-theme-mode=dark] .form-label,
[data-theme-mode=dark] label {
    color: #cbd5e1;
}

/* ---------- Criteria panel (search / filter card) -----------
   The RecordManagementCriteriaPanel wraps its body in
   .card > .card-body with an INLINE style="background: #eee;"
   (see Components/Shared/CriteriaPanel/). Inline styles beat
   normal CSS, so the override below uses !important to flip the
   panel to a dark tone in dark mode. The whole .custom-card is
   also lifted to a dark surface so the card header + footer
   match. Scoped to [data-theme-mode=dark] — light mode is
   unchanged. */
[data-theme-mode=dark] .custom-card {
    background: #1f2640;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

[data-theme-mode=dark] .custom-card .card-header {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

[data-theme-mode=dark] .custom-card .card-title {
    color: #f1f5f9;
}

[data-theme-mode=dark] .custom-card .card-footer {
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Override the inline style="background: #eee;" on the filter
   panel body. !important is required to beat the inline style
   without modifying the razor file. */
[data-theme-mode=dark] .custom-card .card-body {
    background: #1f2640 !important;
    color: #e5e7eb;
}

/* Labels sitting inside the (now dark) criteria body — bump up
   so they read against #1f2640. These are the "ID", "Donor",
   "Amuta #", "Organization", "Project", etc. labels. */
[data-theme-mode=dark] .custom-card .card-body .form-label,
[data-theme-mode=dark] .custom-card .card-body label {
    color: #cbd5e1;
    font-weight: 500;
}

/* ---------- Outline buttons (.btn-outline-*) ---------------
   The theme uses Bootstrap-style outline buttons for secondary
   actions like "Refresh Results" (.btn-outline-info). On a dark
   body the default colors (info=#0dcaf0 border with white text)
   are either hard to see or look washed out. Lift the color
   tokens to a higher-luminance tone in dark mode only. */
[data-theme-mode=dark] .btn-outline-info {
    color: #7dd3fc;
    border-color: rgba(125, 211, 252, 0.55);
    background: transparent;
}

[data-theme-mode=dark] .btn-outline-info:hover,
[data-theme-mode=dark] .btn-outline-info:focus-visible {
    background: rgba(125, 211, 252, 0.15);
    border-color: #7dd3fc;
    color: #e0f2fe;
}

[data-theme-mode=dark] .btn-outline-primary {
    color: #a5b4fc;
    border-color: rgba(165, 180, 252, 0.55);
    background: transparent;
}

[data-theme-mode=dark] .btn-outline-primary:hover,
[data-theme-mode=dark] .btn-outline-primary:focus-visible {
    background: rgba(165, 180, 252, 0.15);
    border-color: #a5b4fc;
    color: #e0e7ff;
}

[data-theme-mode=dark] .btn-outline-secondary {
    color: #cbd5e1;
    border-color: rgba(203, 213, 225, 0.4);
    background: transparent;
}

[data-theme-mode=dark] .btn-outline-secondary:hover,
[data-theme-mode=dark] .btn-outline-secondary:focus-visible {
    background: rgba(203, 213, 225, 0.12);
    border-color: #cbd5e1;
    color: #f1f5f9;
}

[data-theme-mode=dark] .btn-outline-danger {
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.5);
    background: transparent;
}

[data-theme-mode=dark] .btn-outline-danger:hover,
[data-theme-mode=dark] .btn-outline-danger:focus-visible {
    background: rgba(252, 165, 165, 0.15);
    border-color: #fca5a5;
    color: #fee2e2;
}

[data-theme-mode=dark] .btn-outline-success {
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.5);
    background: transparent;
}

[data-theme-mode=dark] .btn-outline-success:hover,
[data-theme-mode=dark] .btn-outline-success:focus-visible {
    background: rgba(134, 239, 172, 0.15);
    border-color: #86efac;
    color: #dcfce7;
}

[data-theme-mode=dark] .btn-outline-warning {
    color: #fcd34d;
    border-color: rgba(252, 211, 77, 0.5);
    background: transparent;
}

[data-theme-mode=dark] .btn-outline-warning:hover,
[data-theme-mode=dark] .btn-outline-warning:focus-visible {
    background: rgba(252, 211, 77, 0.15);
    border-color: #fcd34d;
    color: #fef3c7;
}

/* Inputs inside the criteria panel — the theme leaves them with
   a light background in dark mode, making them look odd next to
   the dark panel body. Flip to a dark input surface with a soft
   border so they blend correctly. */
[data-theme-mode=dark] .custom-card .form-control,
[data-theme-mode=dark] .custom-card .form-select,
[data-theme-mode=dark] .custom-card input[type="text"],
[data-theme-mode=dark] .custom-card input[type="number"],
[data-theme-mode=dark] .custom-card input[type="date"],
[data-theme-mode=dark] .custom-card input[type="email"],
[data-theme-mode=dark] .custom-card select,
[data-theme-mode=dark] .custom-card textarea {
    background-color: #151a2c;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

[data-theme-mode=dark] .custom-card .form-control::placeholder,
[data-theme-mode=dark] .custom-card input::placeholder,
[data-theme-mode=dark] .custom-card textarea::placeholder {
    color: #64748b;
}

[data-theme-mode=dark] .custom-card .form-control:focus,
[data-theme-mode=dark] .custom-card .form-select:focus,
[data-theme-mode=dark] .custom-card input:focus,
[data-theme-mode=dark] .custom-card select:focus,
[data-theme-mode=dark] .custom-card textarea:focus {
    background-color: #151a2c;
    border-color: #a5b4fc;
    color: #f1f5f9;
    box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.2);
}

/* ---------- Horizontal navigation ---------------------------- */

:root {
    --cas-hnav-bg: #ffffff;
    --cas-hnav-border: #e5e7eb;
    --cas-hnav-text: #374151;
    --cas-hnav-text-muted: #6b7280;
    --cas-hnav-text-active: #111827;
    --cas-hnav-accent: #6366f1;
    --cas-hnav-hover: rgba(17, 24, 39, 0.04);
    --cas-hnav-panel-bg: #ffffff;
    --cas-hnav-panel-border: #e5e7eb;
    --cas-hnav-panel-shadow: 0 10px 30px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.04);
    --cas-hnav-active-bg: rgba(99, 102, 241, 0.08);
    --cas-hnav-transition: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cas-hnav {
    position: sticky;
    top: 0;
    z-index: 25;
    background: var(--cas-hnav-bg);
    border-bottom: 1px solid var(--cas-hnav-border);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
}

.cas-hnav__inner {
    display: flex;
    align-items: center;
    padding: 0 12px;
    min-height: 48px;
    flex-wrap: wrap;
    /* overflow:visible is critical — .cas-hnav__panel is absolutely
       positioned relative to each <li>, and if the container
       clipped it the dropdowns would render but be invisible.
       On narrow viewports the items wrap to a second row instead
       of scrolling horizontally. */
    overflow: visible;
}

.cas-hnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2px;
}

.cas-hnav__item {
    position: relative;
}

.cas-hnav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    color: var(--cas-hnav-text);
    font-size: 14px;
    font-weight: 500;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.cas-hnav__trigger:hover,
.cas-hnav__trigger:focus-visible {
    background: var(--cas-hnav-hover);
    color: var(--cas-hnav-text-active);
    outline: none;
}

.cas-hnav__item--open > .cas-hnav__trigger,
.cas-hnav__item--active > .cas-hnav__trigger {
    color: var(--cas-hnav-accent);
    background: var(--cas-hnav-active-bg);
    font-weight: 600;
}

.cas-hnav__caret {
    width: 12px;
    height: 12px;
    opacity: 0.7;
    transition: transform var(--cas-hnav-transition);
}

.cas-hnav__item--open > .cas-hnav__trigger .cas-hnav__caret {
    transform: rotate(180deg);
}

.cas-hnav__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    max-width: 320px;
    background: var(--cas-hnav-panel-bg);
    border: 1px solid var(--cas-hnav-panel-border);
    border-radius: 10px;
    box-shadow: var(--cas-hnav-panel-shadow);
    z-index: 30;
    /* The panel itself never scrolls or clips — scrolling lives on
       the inner .cas-hnav__panel-scroll, and the open flyout is a
       SIBLING of that scroll area (see HorizontalNav.razor), so the
       flyout escapes the overflow clip while the list keeps its
       fixed-height scrollbar at all times. */
    animation: cas-hnav-fadeIn 160ms ease-out;
}

/* The scrollable body of a panel/flyout. Caps tall menus (e.g.
   Reports) at a fixed height with an internal scrollbar. Because
   flyouts are rendered outside this element, the cap never needs
   to be lifted when a submenu opens. */
.cas-hnav__panel-scroll {
    max-height: 400px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border-radius: inherit;
}

@keyframes cas-hnav-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cas-hnav__panel-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

/* Submenus fly out beside their parent panel (cascading menu)
   instead of expanding nested/indented inside it — mirrors the
   legacy app. Scoped to .cas-hnav__* (the horizontal top nav
   only); the sidebar uses its own .cas-sb classes and keeps its
   nested/under-parent behaviour. The flyout is rendered as a
   sibling of .cas-hnav__panel-scroll and anchors to the panel
   (its nearest positioned ancestor), top-aligned with it and
   offset just past its right edge. It contains its own
   .cas-hnav__panel-scroll, so every tier keeps the same 400px
   cap + scrollbar; tier-3+ flyouts cascade further right the
   same way. */
.cas-hnav__flyout {
    position: absolute;
    top: 0;
    left: calc(100% + 4px);
    min-width: 240px;
    max-width: 320px;
    background: var(--cas-hnav-panel-bg);
    border: 1px solid var(--cas-hnav-panel-border);
    border-radius: 10px;
    box-shadow: var(--cas-hnav-panel-shadow);
    z-index: 1;
    animation: cas-hnav-fadeIn 160ms ease-out;
}

.cas-hnav__panel-item {
    position: relative;
}

.cas-hnav__panel-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    color: var(--cas-hnav-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease, color 120ms ease;
}

.cas-hnav__panel-link:hover,
.cas-hnav__panel-link:focus-visible {
    background: var(--cas-hnav-hover);
    color: var(--cas-hnav-text-active);
    text-decoration: none;
    outline: none;
}

.cas-hnav__panel-item--active > .cas-hnav__panel-link {
    color: var(--cas-hnav-accent);
    background: var(--cas-hnav-active-bg);
    font-weight: 600;
}

.cas-hnav__panel-caret {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    opacity: 0.6;
    transition: transform var(--cas-hnav-transition);
}

/* Flyout menu: the parent caret stays pointing right (it already
   signals "submenu opens to the side"), and the parent item gets
   the active highlight while its flyout panel is open. */
.cas-hnav__panel-item--open > .cas-hnav__panel-link {
    background: var(--cas-hnav-hover);
    color: var(--cas-hnav-text-active);
}

.cas-hnav__scrim {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 20;
}

.cas-hnav__loading,
.cas-hnav__empty {
    padding: 14px 16px;
    color: var(--cas-hnav-text-muted);
    font-size: 13px;
}

/* Horizontal-mode layout adjustments: no sidebar means no shift,
   full-width content, wider container. */
.cas-layout--horizontal .cas-sb,
.cas-layout--horizontal .cas-sb-backdrop {
    display: none !important;
}

.cas-layout__main--horizontal {
    margin-left: 0 !important;
}

/* ---------- Hamburger button --------------------------------- */

.cas-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #4a5270;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.cas-hamburger:hover,
.cas-hamburger:focus-visible {
    background: rgba(17, 24, 39, 0.06);
    color: #0f172a;
    outline: none;
}

.cas-hamburger__svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ---------- Mobile (<= 991.98px) ----------------------------- */

@media (max-width: 991.98px) {
    /* No shift on mobile — sidebar overlays the content. */
    .cas-layout__main,
    .cas-layout__main--shift {
        margin-left: 0 !important;
    }

    .cas-sb {
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
    }
}

/* Mobile backdrop: tapping it closes the sidebar. Desktop
   ignores the backdrop entirely (pointer-events:none). */
.cas-sb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 19, 33, 0.55);
    z-index: calc(var(--cas-sb-z) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cas-sb-transition);
}

@media (max-width: 991.98px) {
    .cas-sb-backdrop--visible {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------- Theme suppression -------------------------------- */

/* If a stale component still renders .app-sidebar (old class)
   hide it — our sidebar uses .cas-sb only. */
aside.app-sidebar:not(.cas-sb) {
    display: none !important;
}

/* Header dropdowns (profile menu, etc.) — ensure Bootstrap's
   .dropdown-menu inside the app-header renders above the
   horizontal nav. Header itself is z-index: 40; the dropdown
   inside the header inherits that stacking context, but we set
   a high z-index explicitly too so a nested positioned wrapper
   (e.g. simplebar, theme's .sticky) can't accidentally clip it. */
.cas-layout__main > .app-header .dropdown-menu,
.cas-layout__main > header.app-header .dropdown-menu {
    z-index: 1060;
}

/* In Sidebar mode the brand lives in the sidebar's header and
   duplicating it inside the app-header would double-print the
   logo AND push the hamburger off the left edge. Hide it. */
.cas-layout--sidebar .horizontal-logo {
    display: none !important;
}

/* In Horizontal mode there's no sidebar, so the header IS the
   place the brand must live. Show only the main desktop-logo
   variant (the theme also ships dark/white/toggle variants for
   sidebar-collapsed states we don't use). */
.cas-layout--horizontal .horizontal-logo {
    display: flex !important;
    align-items: center;
    margin-right: 16px;
    /* Kill the theme's base `.horizontal-logo { padding: 1.25rem 0 }`
       — 40px of vertical padding around an already-40px logo, which
       overflowed the header bar. With padding removed the logo
       centers cleanly inside the 64px header. */
    padding: 0;
}

.cas-layout--horizontal .horizontal-logo .header-logo {
    display: inline-flex;
    align-items: center;
}

.cas-layout--horizontal .horizontal-logo .desktop-dark,
.cas-layout--horizontal .horizontal-logo .desktop-white,
.cas-layout--horizontal .horizontal-logo .toggle-logo,
.cas-layout--horizontal .horizontal-logo .toggle-dark {
    display: none !important;
}

.cas-layout--horizontal .horizontal-logo .desktop-logo {
    display: block !important;
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

/* Re-enable the .header-element wrapper for the logo that we
   killed in Sidebar mode via :has(). In Horizontal mode we want
   the wrapper visible so the logo gets its normal padding. */
.cas-layout--horizontal .app-header .header-element:has(> .horizontal-logo) {
    display: flex !important;
}

/* Force the header's internal layout to a simple full-width
   flex row. Bootstrap + theme classes (.main-header-container,
   .container-fluid) kept centering the inner content and
   pushing the hamburger ~400px in; these rules override that so
   the hamburger sits flush at the left edge when the sidebar is
   closed and right at the content edge when the sidebar is open. */
.cas-layout__main .app-header .main-header-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cas-layout__main .app-header .header-content-left {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.cas-layout__main .app-header .header-content-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* In Sidebar mode, drop the .header-element whose only content
   is the hidden horizontal-logo — it was adding width/margin
   padding that pushed the hamburger to the right. In Horizontal
   mode we WANT this wrapper visible (it carries the brand), so
   the rule is scoped to sidebar only. */
.cas-layout--sidebar .app-header .header-element:has(> .horizontal-logo) {
    display: none !important;
}

/* ============================================================
   Dashboard cards — modern replacement for the menu-duplicate
   tile grid. Targets the dashboard's card pattern (a list of
   quick-access links to top-level pages). The app keeps its own
   card classes for other pages; these rules are scoped to
   .cas-dash so they don't bleed elsewhere.
   ============================================================ */

.cas-dash {
    --cas-dash-gap: 18px;
    --cas-dash-card-bg: #ffffff;
    --cas-dash-card-border: #e7e9f0;
    --cas-dash-card-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 1px 3px rgba(17, 24, 39, 0.04);
    --cas-dash-card-hover-border: #b9bffc;
    --cas-dash-card-hover-shadow: 0 2px 4px rgba(47, 56, 110, 0.06), 0 10px 28px rgba(47, 56, 110, 0.12);
    --cas-dash-accent: #6366f1;
    --cas-dash-muted: #6b7280;
    --cas-dash-title: #111827;
    --cas-dash-toolbar-bg: rgba(249, 250, 251, 0.92);
    --cas-dash-hit-bg: #fef3c7;
    --cas-dash-hit-fg: #111827;

    /* Top padding separates the toolbar from the header nav; the
       generous bottom padding stops the last card row from sitting
       flush against the footer. */
    padding: 20px 2px 48px;
}

/* Toolbar: transparent — no background, no underline, no blur.
   Emphasis goes to the pill-style tabs themselves. */
.cas-dash__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 0;
    margin-bottom: 28px;
    background: transparent;
}

.cas-dash__tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px;
    background: rgba(17, 24, 39, 0.04);
    border-radius: 999px;
}

/* Live filter — sits at the right edge of the toolbar, matched
   to the height of the pill-tab track so the row reads as one
   aligned toolbar. */
.cas-dash__filter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 240px;
    flex: 0 1 320px;
    padding: 0 10px 0 36px;
    height: 42px;
    background: #ffffff;
    border: 1px solid var(--cas-dash-card-border);
    border-radius: 999px;
    box-shadow: var(--cas-dash-card-shadow);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.cas-dash__filter:focus-within {
    border-color: var(--cas-dash-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.cas-dash__filter-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--cas-dash-muted);
    pointer-events: none;
}

.cas-dash__filter-input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--cas-dash-title);
    min-width: 0;
}

.cas-dash__filter-input::placeholder {
    color: var(--cas-dash-muted);
}

.cas-dash__filter-clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--cas-dash-muted);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.cas-dash__filter-clear svg {
    width: 14px;
    height: 14px;
}

.cas-dash__filter-clear:hover,
.cas-dash__filter-clear:focus-visible {
    background: rgba(17, 24, 39, 0.08);
    color: var(--cas-dash-title);
    outline: none;
}

.cas-dash__filter-summary {
    font-size: 12px;
    color: var(--cas-dash-muted);
    margin: 0 0 16px;
}

.cas-dash__hit {
    background: var(--cas-dash-hit-bg);
    color: var(--cas-dash-hit-fg);
    padding: 0 2px;
    border-radius: 3px;
}

.cas-dash__empty-action {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cas-dash-accent);
    background: rgba(99, 102, 241, 0.1);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.cas-dash__empty-action:hover,
.cas-dash__empty-action:focus-visible {
    background: rgba(99, 102, 241, 0.2);
    outline: none;
}

/* Segmented-control style pills — one of the cleanest modern
   tab patterns (used by Stripe, Linear, Vercel). Inactive tabs
   are transparent with muted text; active tab is a white pill
   with a subtle shadow that lifts it off the gray track. */
.cas-dash__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 0;
    background: transparent;
    color: var(--cas-dash-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 999px;
    transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
    white-space: nowrap;
}

/* Favorites tab — leading star icon + "Favorites" label + count
   chip. Without explicit sizing the raw <svg> falls back to the
   SVG default 300x150 viewport and blows out the whole tab row.
   These rules keep the icon at 16px and ensure the button is a
   compact pill like every other tab. */
.cas-dash__tab-star {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #f59e0b; /* amber — same warm gold used for card stars */
}

.cas-dash__tab--favorites {
    /* Slight left pad bump so the star has breathing room. */
    padding-left: 14px;
}

.cas-dash__tab--favorites.cas-dash__tab--active .cas-dash__tab-star {
    color: #fbbf24;
}

.cas-dash__tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--cas-dash-accent);
    background: rgba(99, 102, 241, 0.12);
    border-radius: 999px;
    margin-left: 2px;
}

.cas-dash__tab:hover {
    color: var(--cas-dash-title);
}

.cas-dash__tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.cas-dash__tab--active,
.cas-dash__tab--active:hover {
    color: var(--cas-dash-title);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08), 0 1px 3px rgba(17, 24, 39, 0.1);
    font-weight: 600;
}

.cas-dash__section {
    margin-bottom: 36px;
}

.cas-dash__section:last-child {
    margin-bottom: 0;
}

.cas-dash__section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cas-dash-card-border);
}

.cas-dash__section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cas-dash-muted);
    margin: 0;
}

.cas-dash__section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cas-dash-accent);
    background: rgba(99, 102, 241, 0.12);
    border-radius: 999px;
    line-height: 1;
}

.cas-dash__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--cas-dash-gap);
    /* Default stretch + flex wrapper below guarantee every card in
       a row is exactly the same height, regardless of how many
       lines its title wraps to. */
    align-items: stretch;
}

/* Wrapper lets the favorite star sit on top of the card as an
   overlay. Nested <button> inside <a> is invalid HTML, so the
   star is a sibling, absolutely positioned over the card.
   display:flex makes the anchor fill the wrapper's full (row)
   height so equal-height rows actually paint equal cards. */
.cas-dash__card-wrap {
    position: relative;
    display: flex;
}

.cas-dash__card {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    padding-right: 52px; /* leaves room for the star overlay */
    min-height: 92px;
    background: var(--cas-dash-card-bg);
    border: 1px solid var(--cas-dash-card-border);
    border-radius: 14px;
    box-shadow: var(--cas-dash-card-shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    position: relative;
    overflow: hidden;
}

.cas-dash__card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: transparent;
    transition: background-color 160ms ease;
}

.cas-dash__card:hover,
.cas-dash__card:focus-visible {
    border-color: var(--cas-dash-card-hover-border);
    box-shadow: var(--cas-dash-card-hover-shadow);
    text-decoration: none;
    transform: translateY(-2px);
    outline: none;
}

.cas-dash__card:hover::before,
.cas-dash__card:focus-visible::before {
    background: var(--cas-dash-accent);
}

.cas-dash__card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cas-dash__card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cas-dash-title);
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.01em;
    /* Clamp long names to two lines so no card outgrows its row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cas-dash__card-arrow {
    flex-shrink: 0;
    align-self: center;
    width: 18px;
    height: 18px;
    color: var(--cas-dash-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
}

.cas-dash__card:hover .cas-dash__card-arrow,
.cas-dash__card:focus-visible .cas-dash__card-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--cas-dash-accent);
}

.cas-dash__empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--cas-dash-muted);
    font-size: 14px;
    border: 1px dashed var(--cas-dash-card-border);
    border-radius: 12px;
}

.cas-dash__empty--favorites {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: left;
    padding: 40px 24px;
}

.cas-dash__empty--favorites svg {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    color: #d1d5db;
}

.cas-dash__empty--favorites strong {
    display: block;
    color: var(--cas-dash-title);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
}

.cas-dash__empty-hint {
    display: block;
    font-size: 13px;
    color: var(--cas-dash-muted);
}

/* ---------- Card star (favorites) ---------------------------
   Sits in the top-right of each card. Outlined when not
   favorited, filled gold when favorited. Subtle transparency
   when the card isn't hovered so it doesn't compete with the
   card title — hover lifts it to full opacity. */
.cas-dash__card-star {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #cbd5e1;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 140ms ease, color 140ms ease, background-color 140ms ease, transform 120ms ease;
}

.cas-dash__card-star svg {
    width: 18px;
    height: 18px;
}

.cas-dash__card-wrap:hover .cas-dash__card-star {
    opacity: 1;
}

.cas-dash__card-star:hover,
.cas-dash__card-star:focus-visible {
    background: rgba(17, 24, 39, 0.06);
    /* Warm gold on hover previews the favorite action — matches the
       card-star gold documented on .cas-dash__tab-star. (This rule
       was previously truncated mid-declaration at end of file.) */
    color: #f59e0b;
}

/* Favorited state — filled gold star at full opacity, visible even
   when the card isn't hovered. Placed after the hover rule so the
   gold also wins while hovering an already-favorited card. */
.cas-dash__card-star--on,
.cas-dash__card-star--on:hover,
.cas-dash__card-star--on:focus-visible {
    color: #f59e0b;
    opacity: 1;
}

[data-theme-mode=dark] .cas-dash__card-star--on,
[data-theme-mode=dark] .cas-dash__card-star--on:hover,
[data-theme-mode=dark] .cas-dash__card-star--on:focus-visible {
    /* Brighter gold reads better on the dark card surface. */
    color: #fbbf24;
}

/* ============================================================
   Alert contrast fix
   ============================================================ */

/* The vendored theme paints `.alert-warning` with a saturated
   amber background AND saturated amber text of the same hue, so
   the message is barely legible. Repaint the text near-black for
   a strong contrast ratio (~9:1) on the amber banner. sidebar.css
   loads after styles.css, so this wins. Applies to every
   .alert-warning app-wide (the Assessment import + Document
   preview modals today). The amber background is kept as-is. */
.alert-warning,
.alert-warning .alert-link,
.alert-warning .btn-close {
    color: #111827;
}