/* ============================================================================
   DesignKit — shared look for Blazor apps (exported 2026-10-09 from Time Entry).
   Load AFTER Bootstrap 5.3: it re-points Bootstrap's own CSS variables, so every
   stock class (.btn-primary, .card, .form-control, .table...) picks the theme up.

   Themes are switched by <html data-bs-theme="light|dark|brand"> — see
   js/designkit-theme-init.js (applies the saved choice before first paint) and
   Components/ThemeToggle.razor (the button). Use the --app-* and --bs-* tokens
   in your own CSS instead of raw colors, so all three themes keep working.
   ============================================================================ */

:root,
[data-bs-theme="light"] {
    --bs-primary: #5d87ff;
    --bs-primary-rgb: 93, 135, 255;
    --bs-secondary: #49beff;
    --bs-secondary-rgb: 73, 190, 255;
    --bs-success: #13deb9;
    --bs-success-rgb: 19, 222, 185;
    --bs-warning: #f6b51e;
    --bs-warning-rgb: 246, 181, 30;
    --bs-danger: #ef4444;
    --bs-danger-rgb: 239, 68, 68;
    --bs-info: #8754ec;
    --bs-info-rgb: 135, 84, 236;

    --bs-body-bg: #ffffff;
    --bs-body-color: #1c2536;
    --bs-secondary-bg: #f5f5f5;
    --bs-tertiary-bg: #f5f8fa;
    --bs-border-color: #dfe5ef;
    --bs-border-color-translucent: #dfe5ef;
    --bs-card-bg: #ffffff;
    --bs-card-border-color: #dfe5ef;
    --bs-emphasis-color: #1c2536;
    --bs-link-color: #5d87ff;
    --bs-link-color-rgb: 93, 135, 255;
    --bs-link-hover-color: #4570e0;

    --bs-border-radius: 7px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 7px;
    --bs-box-shadow: 0 1px 4px rgba(133, 146, 173, 0.2);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    /* App shell tokens (2026-09-27 redesign from the person's own mock): neutral
       "ink" for the main button and brand mark, hairlines, the dotted backdrop
       and the soft status pills. */
    --app-backdrop: #eef0f3;
    --app-backdrop-dot: #d5d9e0;
    --app-hairline: #eaecf0;
    --app-subtle: #f2f4f7;
    --app-ink: #111318;
    --app-ink-hover: #2a2e37;
    --app-ink-contrast: #ffffff;
    --app-muted: #667085;
    --app-faint: #98a2b3;
    --app-positive: #079455;
    --app-positive-bg: #ecfdf3;
    --app-positive-text: #067647;
    --app-neutral-bg: #f2f4f7;
    --app-neutral-text: #475467;
    --app-draft-bg: #fffaeb;
    --app-draft-text: #b54708;
    --app-draft-dot: #f79009;
    /* Table rows: alternate (zebra) stripe and hover, hover a step stronger than the stripe. */
    --app-zebra: #f9fafb;
    --app-row-hover: #f2f4f7;
    /* Button colors (2026-10-08). Bootstrap's .btn-primary/.btn-danger/... carry their own
       hard-coded colors and ignore --bs-primary/--bs-danger above, so the button rules further
       down read these instead. Solid fills keep white text at 4.5:1 or better; the outline
       variants' text is tuned per theme for the same reason. */
    --app-primary: #4570e0;
    --app-primary-hover: #3b63d6;
    --app-primary-text: #4570e0;
    /* Highlights that aren't buttons (progress bars). Same as primary except in the brand
       theme, where buttons are navy but highlights stay teal. */
    --app-accent: #4570e0;
    --app-danger: #d92d20;
    --app-danger-hover: #b42318;
    --app-danger-text: #d92d20;
    --app-secondary-text: #475467;
    --app-secondary-border: #d0d5dd;
}

[data-bs-theme="dark"] {
    --bs-primary: #5d87ff;
    --bs-primary-rgb: 93, 135, 255;
    --bs-secondary: #49beff;
    --bs-secondary-rgb: 73, 190, 255;
    --bs-success: #13deb9;
    --bs-success-rgb: 19, 222, 185;
    --bs-warning: #f6b51e;
    --bs-warning-rgb: 246, 181, 30;
    --bs-danger: #ef4444;
    --bs-danger-rgb: 239, 68, 68;
    --bs-info: #8754ec;
    --bs-info-rgb: 135, 84, 236;

    --bs-body-bg: #1c2536;
    --bs-body-color: #ffffff;
    --bs-secondary-bg: #2a3851;
    --bs-tertiary-bg: #253247;
    --bs-border-color: #333f55;
    --bs-border-color-translucent: #333f55;
    --bs-card-bg: #1c2536;
    --bs-card-border-color: #333f55;
    --bs-emphasis-color: #ffffff;
    --bs-link-color: #7c9dff;
    --bs-link-color-rgb: 124, 157, 255;
    --bs-link-hover-color: #99b3ff;

    --bs-border-radius: 7px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 7px;
    --bs-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);

    /* App shell tokens, dark values. */
    --app-backdrop: #111827;
    --app-backdrop-dot: #243044;
    --app-hairline: #2b3649;
    --app-subtle: #253247;
    --app-ink: #f2f4f7;
    --app-ink-hover: #d0d5dd;
    --app-ink-contrast: #111318;
    --app-muted: #98a2b3;
    --app-faint: #667085;
    --app-positive: #47cd89;
    --app-positive-bg: rgba(71, 205, 137, 0.14);
    --app-positive-text: #75e0a7;
    --app-neutral-bg: rgba(152, 162, 179, 0.16);
    --app-neutral-text: #d0d5dd;
    --app-draft-bg: rgba(247, 144, 9, 0.14);
    --app-draft-text: #fec84b;
    --app-draft-dot: #fdb022;
    --app-zebra: rgba(255, 255, 255, 0.025);
    --app-row-hover: rgba(255, 255, 255, 0.055);
    --app-primary-text: #7c9dff;
    --app-danger-text: #f87171;
    --app-secondary-text: #d0d5dd;
    --app-secondary-border: #475467;
}

/* Brand theme (added 2026-10-09 from the company brand palette): a light theme with teal
   (0,131,115) and aqua (34,195,187) as the main colors. Buttons and the brand mark are the brand
   navy (5,55,71), chosen 2026-10-09; teal carries links, the focus ring and accents such as the
   Close % bar (white text on it still passes 4.5:1); aqua carries the tints (hover, active tab,
   stripes, backdrop). Text is navy too,
   danger the brand magenta (184,9,103), warnings the brand yellow (254,205,35), info the brand
   purple (123,78,145). Not an override of light: <html> is still :root, so Bootstrap's light
   defaults and the light block above apply first and this replaces only what differs. */
[data-bs-theme="brand"] {
    color-scheme: light;

    --bs-primary: #008373;
    --bs-primary-rgb: 0, 131, 115;
    --bs-secondary: #22c3bb;
    --bs-secondary-rgb: 34, 195, 187;
    --bs-success: #008373;
    --bs-success-rgb: 0, 131, 115;
    --bs-warning: #fecd23;
    --bs-warning-rgb: 254, 205, 35;
    --bs-danger: #b80967;
    --bs-danger-rgb: 184, 9, 103;
    --bs-info: #7b4e91;
    --bs-info-rgb: 123, 78, 145;

    --bs-body-bg: #ffffff;
    --bs-body-color: #053747;
    --bs-body-color-rgb: 5, 55, 71;
    --bs-emphasis-color: #053747;
    --bs-emphasis-color-rgb: 5, 55, 71;
    --bs-secondary-color: rgba(5, 55, 71, 0.75);
    --bs-tertiary-color: rgba(5, 55, 71, 0.5);
    --bs-secondary-bg: #eef7f6;
    --bs-tertiary-bg: #f5fbfa;
    --bs-border-color: #cfe1df;
    --bs-border-color-translucent: #cfe1df;
    --bs-card-bg: #ffffff;
    --bs-card-border-color: #cfe1df;
    --bs-link-color: #00705f;
    --bs-link-color-rgb: 0, 112, 95;
    --bs-link-hover-color: #005a4d;
    --bs-link-hover-color-rgb: 0, 90, 77;
    --bs-focus-ring-color: rgba(34, 195, 187, 0.35);

    --app-backdrop: #e8f5f4;
    --app-backdrop-dot: #b9e2de;
    --app-hairline: #d8e9e7;
    --app-subtle: #e3f5f3;
    --app-ink: #053747;
    --app-ink-hover: #0b4d61;
    --app-ink-contrast: #ffffff;
    --app-muted: #4d6a72;
    --app-faint: #8aa3a8;
    --app-positive: #008373;
    --app-positive-bg: #ddf3f0;
    --app-positive-text: #006b5e;
    --app-neutral-bg: #edf1f1;
    --app-neutral-text: #575756;
    --app-draft-bg: #fff6d3;
    --app-draft-text: #8a5d00;
    --app-draft-dot: #fecd23;
    --app-zebra: #f6fbfb;
    --app-row-hover: #e3f5f3;
    --app-primary: #053747;
    --app-primary-hover: #0b4d61;
    --app-primary-text: #053747;
    --app-accent: #008373;
    --app-danger: #b80967;
    --app-danger-hover: #950552;
    --app-danger-text: #b80967;
    --app-secondary-text: #3f5a62;
    --app-secondary-border: #b9d3d0;
}

/* Square icon button used in the top bar (refresh, theme). */
.app-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--app-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .app-icon-btn:hover:not(:disabled) {
        background: var(--app-subtle);
        color: var(--bs-emphasis-color);
    }

/* Main call-to-action (e.g. "+ New Entry"): near-black in light mode, near-white in dark. */
.btn-ink {
    --bs-btn-color: var(--app-ink-contrast);
    --bs-btn-bg: var(--app-ink);
    --bs-btn-border-color: var(--app-ink);
    --bs-btn-hover-color: var(--app-ink-contrast);
    --bs-btn-hover-bg: var(--app-ink-hover);
    --bs-btn-hover-border-color: var(--app-ink-hover);
    --bs-btn-active-color: var(--app-ink-contrast);
    --bs-btn-active-bg: var(--app-ink-hover);
    --bs-btn-active-border-color: var(--app-ink-hover);
    --bs-btn-disabled-color: var(--app-ink-contrast);
    --bs-btn-disabled-bg: var(--app-ink);
    --bs-btn-disabled-border-color: var(--app-ink);
    font-weight: 600;
}

/* Quiet outlined button (e.g. "Today"), matching the hairline borders. */
.btn-quiet {
    --bs-btn-color: var(--bs-emphasis-color);
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--app-hairline);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--app-subtle);
    --bs-btn-hover-border-color: var(--app-hairline);
    --bs-btn-active-bg: var(--app-subtle);
    --bs-btn-active-border-color: var(--app-hairline);
    font-weight: 500;
}

/* Bootstrap's stock buttons, re-pointed at the theme's button tokens (2026-10-08) so they
   follow light/dark like everything else. Outline variants fill solid on hover. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-primary-text);
    --bs-btn-border-color: var(--app-primary-text);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-disabled-color: var(--app-primary-text);
    --bs-btn-disabled-border-color: var(--app-primary-text);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-danger);
    --bs-btn-border-color: var(--app-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-danger-hover);
    --bs-btn-hover-border-color: var(--app-danger-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-danger-hover);
    --bs-btn-active-border-color: var(--app-danger-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--app-danger);
    --bs-btn-disabled-border-color: var(--app-danger);
}

.btn-outline-danger {
    --bs-btn-color: var(--app-danger-text);
    --bs-btn-border-color: var(--app-danger-text);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-danger);
    --bs-btn-hover-border-color: var(--app-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-danger-hover);
    --bs-btn-active-border-color: var(--app-danger-hover);
    --bs-btn-disabled-color: var(--app-danger-text);
    --bs-btn-disabled-border-color: var(--app-danger-text);
}

/* Neutral outline: hovers like .btn-quiet (soft fill) rather than going solid gray. */
.btn-outline-secondary {
    --bs-btn-color: var(--app-secondary-text);
    --bs-btn-border-color: var(--app-secondary-border);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--app-subtle);
    --bs-btn-hover-border-color: var(--app-secondary-border);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--app-subtle);
    --bs-btn-active-border-color: var(--app-secondary-border);
    --bs-btn-disabled-color: var(--app-secondary-text);
    --bs-btn-disabled-border-color: var(--app-secondary-border);
}

html, body {
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem var(--bs-primary);
}

.card {
    box-shadow: var(--bs-box-shadow);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bs-success);
}

.invalid {
    outline: 1px solid var(--bs-danger);
}

.validation-message {
    color: var(--bs-danger);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--bs-border-color);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--bs-primary);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: var(--bs-info);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* ============================================================================
   Reports (added 2026-10-06) — header, filter row, summary and the User/Team picker,
   shared by every report page under Pages/Reports (moved here from the Billing entries
   page's scoped CSS when the D365 report reused them). The table itself is the
   ReportPreviewTable component's scoped CSS. Tokens only, so light and dark both work.
   ============================================================================ */

.rpt-header {
    padding-top: 0.25rem;
}

.rpt-title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.rpt-lede {
    margin: 0;
    font-size: 0.875rem;
    color: var(--app-muted);
}

.rpt-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--app-hairline);
    border-radius: 10px;
}

.rpt-field .form-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.rpt-field .form-control,
.rpt-field .form-select {
    min-width: 9.5rem;
}

.rpt-checks {
    display: flex;
    gap: 1rem;
    min-height: calc(1.5em + 0.5rem + 2px); /* lines up with the small inputs beside it */
    align-items: center;
    font-size: 0.875rem;
}

    .rpt-checks .form-check {
        margin: 0;
    }

.rpt-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.rpt-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 0;
    color: var(--app-muted);
    font-size: 0.9rem;
}

.rpt-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0 0.6rem;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

.rpt-muted {
    color: var(--app-muted);
}

@media (max-width: 767.98px) {
    .rpt-actions {
        margin-left: 0;
        width: 100%;
    }

        .rpt-actions .btn {
            flex: 1;
        }
}

.rpt-user-select {
    min-width: 14rem;
}

.rpt-hint {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-danger);
}

/* Report multi-select (ReportMultiSelect, added 2026-10-06 with the Relativity report). */

.rpt-multi {
    position: relative;
}

.rpt-multi-toggle {
    min-width: 14rem;
    max-width: 20rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rpt-multi-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.rpt-multi-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1041;
    width: max(100%, 18rem);
    margin-top: 0.25rem;
    padding: 0.6rem;
    border: 1px solid var(--app-hairline);
    border-radius: 10px;
    background: var(--bs-body-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 0.875rem;
}

.rpt-multi-list {
    max-height: 16rem;
    overflow-y: auto;
}

.rpt-multi-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--app-hairline);
}