/* =============================================================================
   OS.Blazor.Web.Internal — Global Styles
   Strategy: define OS brand tokens once in :root, then bridge them into each
   library's own CSS variable namespace so MudBlazor, Radzen, and AntDesign
   all pull from the same source of truth without touching component markup.
   ============================================================================= */


/* ── 1. OS BRAND TOKENS ─────────────────────────────────────────────────────── */

:root {
    /* Backgrounds — matches AppTheme.cs Background / Surface / Dark values */
    --os-bg:        #070A10;   /* main page background                */
    --os-surf:      #0D1120;   /* cards, drawer, panels               */
    --os-surf-2:    #141928;   /* nested surfaces, table hdrs, tooltips */

    /* Borders */
    --os-border:    rgba(90, 120, 200, 0.13);
    --os-border-hi: rgba(90, 120, 200, 0.26);

    /* Brand Colors — source of truth from overstreet-brand-kit.html */
    --os-primary:       #5580FF;   /* Accent Blue                  */
    --os-primary-deep:  #3450C8;   /* Deep Blue — AppBar           */
    --os-primary-glow:  rgba(85, 128, 255, 0.15);
    --os-secondary:     #FF7B3D;   /* Warm Orange                  */
    --os-secondary-deep:#E66B2D;   /* darker orange for hover / committed-slot accents */
    --os-green:         #5CF09A;   /* Brand Green — decorative / accent (low-contrast with white text) */
    --os-green-deep:    #4AA074;   /* Darker green used for success states so white text remains legible */
    --os-error:         #FF4D6A;   /* Error Red                    */

    /* Text */
    --os-text:     #E2E8F8;   /* primary text              */
    --os-muted:    #7888AA;   /* secondary text            */
    --os-dim-text: #A0AACC;   /* de-emphasized / subdued   */
    --os-dim:      #3D4560;   /* disabled / placeholder    */

    /* Typography — matches OS Vue client main.css font stack */
    --os-font:       'DM Sans', sans-serif;
    --os-font-mono:  'JetBrains Mono', monospace;
    --os-font-serif: 'Instrument Serif', Georgia, serif;

    /* ── MudBlazor CSS Variable Fallbacks ────────────────────────────────────── */
    /* MudBlazor.min.css uses body { background-color: var(--mud-palette-background) }
       and body { color: var(--mud-palette-text-primary) }. MudThemeProvider sets those
       variables at runtime via an inline <style> in the component tree. These fallback
       declarations ensure the page renders with the correct OS dark colors during SSR
       (before the Blazor circuit connects and MudThemeProvider renders its <style>).
       Once MudThemeProvider renders, its values (from Theme.Palette.*) override these. */
    --mud-palette-background:        #070A10;
    --mud-palette-background-grey:   #0D1120;
    --mud-palette-surface:           #0D1120;
    --mud-palette-text-primary:      #E2E8F8;
    --mud-palette-text-secondary:    #7888AA;
    --mud-palette-text-disabled:     #3D4560;
    --mud-palette-primary:           #5580FF;
    --mud-palette-secondary:         #FF7B3D;
    --mud-palette-tertiary:          #5CF09A;
    --mud-palette-appbar-background: #3450C8;
    --mud-palette-appbar-text:       #E2E8F8;
    --mud-palette-drawer-background: #0D1120;
    --mud-palette-drawer-text:       #E2E8F8;
    --mud-palette-drawer-icon:       #7888AA;
    --mud-palette-divider:           rgba(90, 120, 200, 0.13);
    --mud-palette-divider-light:     rgba(90, 120, 200, 0.26);
    --mud-palette-lines-default:     rgba(90, 120, 200, 0.13);
    --mud-palette-lines-inputs:      rgba(90, 120, 200, 0.26);
    --mud-palette-table-lines:       rgba(90, 120, 200, 0.13);
    --mud-palette-table-hover:       rgba(85, 128, 255, 0.08);
    --mud-palette-table-striped:     rgba(85, 128, 255, 0.04);
    --mud-palette-success:           #4AA074;
    --mud-palette-error:             #FF4D6A;
    --mud-palette-warning:           #FF7B3D;
    --mud-palette-info:              #5580FF;
    --mud-palette-dark:              #141928;
    --mud-palette-action-default:    #7888AA;
    --mud-palette-action-disabled:   #3D4560;
    --mud-palette-action-disabled-background: rgba(90, 120, 200, 0.08);


    /* ── 2. RADZEN CSS VARIABLE BRIDGE ──────────────────────────────────────── */
    /* Radzen's default-base.css exposes --rz-* tokens at :root.
       Overriding them here applies to all Radzen components (Scheduler,
       DataGrid, Dialog, etc.) without changing any component markup. */
    --rz-primary:                               #5580FF;
    --rz-primary-darker:                        #3450C8;
    --rz-primary-lighter:                       rgba(85, 128, 255, 0.15);
    --rz-secondary:                             #FF7B3D;
    --rz-secondary-darker:                      #e05e20;
    --rz-secondary-lighter:                     rgba(255, 123, 61, 0.15);
    --rz-success:                               #4AA074;
    --rz-success-darker:                        #3A825D;
    --rz-success-lighter:                       rgba(74, 160, 116, 0.15);
    --rz-warning:                               #FF7B3D;
    --rz-danger:                                #FF4D6A;
    --rz-danger-darker:                         #e0294a;
    --rz-info:                                  #5580FF;
    --rz-body-background-color:                 #070A10;
    --rz-base-background-color:                 #0D1120;
    --rz-text-color:                            #E2E8F8;
    --rz-text-disabled-color:                   #3D4560;
    --rz-secondary-text-color:                  #7888AA;
    --rz-border-color:                          rgba(90, 120, 200, 0.13);
    --rz-header-background-color:               #0D1120;
    --rz-navigation-background-color:           #0D1120;
    --rz-panel-background-color:                #0D1120;
    --rz-sidebar-background-color:              #0D1120;
    --rz-overlay-background-color:              rgba(7, 10, 16, 0.75);
    --rz-tooltip-background-color:              #141928;
    --rz-tooltip-color:                         #E2E8F8;
    --rz-table-row-hover-background-color:      rgba(85, 128, 255, 0.08);
    --rz-table-row-selected-background-color:   rgba(85, 128, 255, 0.15);
    /* Scheduler: available-slot blocks default to teal; remap to brand blue */
    --rz-scheduler-appointment-background:      #5580FF;
    --rz-scheduler-appointment-color:           #E2E8F8;
    --rz-scheduler-view-button-border:           1px solid var(--os-border-hi);
    --rz-scheduler-view-button-color:            var(--os-text);
    --rz-scheduler-view-button-background-color: transparent;


    /* ── 3. ANTDESIGN CSS VARIABLE BRIDGE ───────────────────────────────────── */
    /* Requires ant-design-blazor.variable.css loaded in App.razor (NOT the
       compiled ant-design-blazor.css which has no variable hooks).
       These --ant-* tokens are injected at :root and consumed by AntDesign's
       variable stylesheet, giving us brand-aligned colors across all Ant components. */
    --ant-primary-color:                #5580FF;
    --ant-primary-color-hover:          #6b92ff;
    --ant-primary-color-active:         #3450C8;
    --ant-primary-color-outline:        rgba(85, 128, 255, 0.20);
    --ant-success-color:                #4AA074;
    --ant-warning-color:                #FF7B3D;
    --ant-error-color:                  #FF4D6A;
    --ant-info-color:                   #5580FF;
    --ant-link-color:                   #5580FF;
    --ant-link-hover-color:             #6b92ff;
    --ant-link-active-color:            #3450C8;
    --ant-font-family:                  'DM Sans', sans-serif;
    --ant-font-size-base:               14px;
    --ant-text-color:                   #E2E8F8;
    --ant-text-color-secondary:         #7888AA;
    --ant-disabled-color:               #3D4560;
    --ant-heading-color:                #E2E8F8;
    --ant-body-background:              #070A10;
    --ant-component-background:         #0D1120;
    --ant-background-color-base:        #141928;
    --ant-popover-background:           #141928;
    --ant-border-color-base:            rgba(90, 120, 200, 0.26);
    --ant-border-color-split:           rgba(90, 120, 200, 0.13);
    --ant-item-hover-bg:                rgba(85, 128, 255, 0.08);
    --ant-item-active-bg:               rgba(85, 128, 255, 0.15);
    --ant-layout-body-background:       #070A10;
    --ant-layout-header-background:     #0D1120;
    --ant-layout-sider-background:      #0D1120;
    --ant-card-background:              #0D1120;
    --ant-modal-content-bg:             #141928;
    --ant-modal-header-bg:              #141928;
    --ant-input-bg:                     #141928;
    --ant-input-border-color:           rgba(90, 120, 200, 0.26);
    --ant-select-dropdown-bg:           #141928;
    --ant-dropdown-menu-bg:             #141928;
    --ant-table-bg:                     #0D1120;
    --ant-table-header-bg:              #141928;
    --ant-table-row-hover-bg:           rgba(85, 128, 255, 0.08);
    --ant-table-border-color:           rgba(90, 120, 200, 0.13);
    --ant-tag-default-bg:               rgba(85, 128, 255, 0.10);
    --ant-tag-default-color:            #E2E8F8;
    --ant-badge-color:                  #5580FF;
    --ant-switch-color:                 #5580FF;
    --ant-checkbox-color:               #5580FF;
    --ant-slider-rail-background-color: #141928;
    --ant-slider-track-background-color:#5580FF;
    --ant-progress-default-color:       #5580FF;
    --ant-progress-remaining-color:     #141928;
    --ant-pagination-item-bg:           #0D1120;
    --ant-pagination-item-active-bg:    rgba(85, 128, 255, 0.15);
    --ant-tabs-card-bg:                 #141928;
    --ant-tabs-active-color:            #5580FF;
    --ant-notification-bg:              #141928;
    --ant-message-notice-content-bg:    #141928;
    --ant-skeleton-color:               #141928;
    --ant-skeleton-to-color:            #0D1120;
    --ant-spin-dot-default:             #5580FF;
}


/* ── 4. BASE ELEMENT STYLES ─────────────────────────────────────────────────── */

/* AntDesign variable.css hardcodes color: rgba(0,0,0,0.85) on h1–h6 — not a
   CSS variable, so --ant-heading-color has no effect. Override it here. */
h1, h2, h3, h4, h5, h6 { color: var(--os-text); }

html, body {
    font-family: var(--os-font);
    margin: 0;
    padding: 0;
}

/* Dark scrollbar to match OS dark background */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--os-bg); }
::-webkit-scrollbar-thumb { background: var(--os-dim); border-radius: 3px; }

h1:focus { outline: none; }




/* ── 5. FORM VALIDATION ─────────────────────────────────────────────────────── */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--os-green); }
.invalid                             { outline: 1px solid var(--os-error); }
.validation-message                  { color: var(--os-error); }


/* ── 6. BLAZOR ERROR UI ─────────────────────────────────────────────────────── */

.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." }

#blazor-error-ui {
    background: var(--os-surf-2);
    color: var(--os-text);
    border-top: 1px solid var(--os-border);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    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;
}

.darker-border-checkbox.form-check-input { border-color: var(--os-muted); }


/* ── 7. LOGIN PAGE ──────────────────────────────────────────────────────────── */

.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(ellipse 80% 80% at 60% 40%, rgba(85, 128, 255, 0.07), transparent 65%),
                linear-gradient(135deg, var(--os-bg) 0%, var(--os-surf) 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    border-radius: 12px !important;
}

.login-header {
    text-align: center;
    margin-bottom: 1rem;
}


/* ── 8. DEV CARDS ───────────────────────────────────────────────────────────── */

.dev-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dev-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* ── 9. OVERRRIDES ───────────────────────────────────────────────────────────── */

/* ── Tertiary contrast fix ────────────────────────────────────────────────────
   --mud-palette-tertiary is the bright brand green (#5CF09A). MudBlazor's
   default chip / button text-on-tertiary is white, which is unreadable against
   that mint background. Force a dark text color on every Tertiary surface so
   the brand green stays decorative without sacrificing legibility. */

.mud-chip-color-tertiary,
.mud-chip-color-tertiary .mud-chip-content,
.mud-chip-color-tertiary .mud-chip-icon,
.mud-button-tertiary,
.mud-button-text-tertiary,
.mud-button-outlined-tertiary,
.mud-button-filled-tertiary,
.mud-icon-button-color-tertiary,
.mud-tertiary-text,
.mud-alert-text-tertiary {
    color: #0D1120 !important;
}

.mud-button-outlined-tertiary,
.mud-button-text-tertiary,
.mud-icon-button-color-tertiary {
    color: var(--os-green) !important;       /* outlined / text variants keep the green */
}

/* FileViewer — inline document viewer modal */
.file-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 10, 16, 0.88);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.file-viewer-modal {
    width: 90vw;
    max-width: 1100px;
    height: 90vh;
    background: var(--os-surf);
    border: 1px solid var(--os-border-hi);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.file-viewer-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: var(--os-surf-2);
    border-bottom: 1px solid var(--os-border);
    flex-shrink: 0;
}

.file-viewer-body {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--os-bg);
}


/* AppBar logo — <OS> SVG mark + "Internal" label */
.os-appbar-logo {
    display: block;
    flex-shrink: 0;
}

.os-appbar-title {
    font-family: var(--os-font);
    font-weight: 300;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* Drawer header logo */
.os-drawer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    width: 100%;
}

.os-drawer-wordmark {
    font-family: var(--os-font);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--os-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
    flex: 1;
    text-align: center;
}

.ant-result-title {
    color: var(--os-text);
}

.ant-result-subtitle {
    color: var(--os-text);
}

.ant-notification {
    z-index: 2000 !important;
}


/* ── 10. RADZEN SCHEDULER BRANDING ──────────────────────────────────────────── */
/* The --rz-* token bridge in :root handles most Radzen components, but the
   Scheduler uses hardcoded structural selectors that don't fully inherit those
   tokens. These overrides bring every scheduler zone into alignment with the
   OS dark theme and brand palette. */

/* Container */
.rz-scheduler {
    background: var(--os-surf);
    border: 1px solid var(--os-border);
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--os-font);
    color: var(--os-text);
}

/* Navigation bar (prev/next, title, view toggles) */
.rz-scheduler-nav {
    background: var(--os-surf-2);
    border-bottom: 1px solid var(--os-border);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rz-scheduler-nav-title {
    color: var(--os-text) !important;
    font-weight: 500;
    font-family: var(--os-font);
    flex: 1;
    text-align: center;
}

/* Prev / Next / Today navigation buttons */
.rz-scheduler .rz-button.rz-prev,
.rz-scheduler .rz-button.rz-next,
.rz-scheduler .rz-button.rz-today {
    background: transparent;
    border: 1px solid var(--os-border-hi);
    color: var(--os-text);
    font-family: var(--os-font);
    border-radius: 5px;
    transition: background 0.15s, border-color 0.15s;
}
.rz-scheduler .rz-button.rz-prev:hover,
.rz-scheduler .rz-button.rz-next:hover,
.rz-scheduler .rz-button.rz-today:hover {
    background: var(--os-primary-glow);
    border-color: var(--os-primary);
    color: var(--os-primary);
}

/* View toggle buttons (Day / Week / Month) */
.rz-scheduler-nav-views .rz-button {
    background: transparent;
    border: 1px solid var(--os-border-hi);
    color: var(--os-muted);
    font-family: var(--os-font);
    border-radius: 5px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rz-scheduler-nav-views .rz-button:hover {
    background: var(--os-primary-glow);
    border-color: var(--os-primary);
    color: var(--os-primary);
}
.rz-scheduler-nav-views .rz-button.rz-state-active {
    background: var(--os-primary);
    border-color: var(--os-primary);
    color: #fff;
}

/* Column/day header row */
.rz-view-header {
    background: var(--os-surf-2);
    border-bottom: 1px solid var(--os-border);
    border-block-start-color: var(--os-border-hi);
    border-block-end-color: var(--os-border-hi);
    color: var(--os-muted);
}
.rz-view-header .rz-slot-header {
    background: var(--os-surf-2);
    color: var(--os-muted);
    border-right: 1px solid var(--os-border);
    font-family: var(--os-font);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Empty corner cell in the view header */
.rz-slot-hour-header {
    background: var(--os-surf-2);
    border-right: 1px solid var(--os-border);
    border-bottom: 1px solid var(--os-border);
}

/* Time (hour) column headers */
.rz-slot-hours .rz-slot-header {
    background: var(--os-surf-2);
    color: var(--os-dim-text);
    border-right: 1px solid var(--os-border);
    font-family: var(--os-font-mono);
    font-size: 0.7rem;
}

/* Soften white column/row dividers from Radzen's base stylesheet */
.rz-scheduler .rz-view  { border-color: var(--os-border-hi); }
.rz-scheduler .rz-slots { border-color: var(--os-border-hi); }

/* Grid slots */
.rz-slot {
    border-right: 1px solid var(--os-border-hi);
    border-bottom: 1px solid var(--os-border-hi);
    border-inline-start-color: var(--os-border-hi);
    border-block-start-color: var(--os-border-hi);
    background: var(--os-surf);
}
.rz-slot.rz-slot-minor {
    border-bottom-color: rgba(90, 120, 200, 0.06);
}
.rz-slot:hover {
    background: var(--os-primary-glow);
    cursor: pointer;
}

/* Month view cells */
.rz-month-view .rz-slot {
    background: var(--os-surf);
    border-color: var(--os-border);
}

/* Event blocks
   `.rz-event` here gets the blue Available background; `:not(.os-event-committed)`
   excludes the committed-slot variant so the orange override in the
   .os-event-committed block below isn't competing against blue on the outer
   wrapper. Without the exclusion, the blue from this rule shows through the
   outer wrapper's padding as a thin rim around the inner orange .rz-event-content. */
.rz-event:not(.os-event-committed) {
    background: var(--os-primary);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: var(--os-font);
    font-size: 0.75rem;
}
.rz-event-content {
    color: #fff;
    padding: 2px 6px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rz-event:not(.os-event-committed):hover {
    background: var(--os-primary-deep);
    cursor: pointer;
}

/* Phase 22.D / 23.M.10 — committed-slot variant. Stamped via OnAppointmentRender in
   ScheduleView.razor when AvailabilitySlot.IsUnavailable == true. Hardcoded hex
   (#FF7B3D, matches --os-secondary) so the orange resolves even in render scopes
   where Radzen's chip element doesn't inherit our :root CSS variables.

   Radzen 5.5.4 splits the chip into two layers: `.rz-event` is the outer
   positioned wrapper, and `.rz-event-content` is the inner element that actually
   carries the background color (via `--rz-scheduler-event-background-color`).
   args.Attributes["class"] lands on the outer .rz-event, so we MUST also override
   the inner .rz-event-content — otherwise the inner keeps its default blue and
   shows through the outer wrapper's padding as a thin blue rim around the
   orange. Covers focus / hover / state-* descendants too so any Radzen "selected"
   styling can't reintroduce blue. */
.os-event-committed,
.os-event-committed .rz-event-content,
.rz-event.os-event-committed,
.rz-event.os-event-committed .rz-event-content,
.os-event-committed.rz-state-focused .rz-event-content,
.rz-event.os-event-committed.rz-state-focused .rz-event-content {
    background: #FF7B3D !important;
    background-color: #FF7B3D !important;
    border-color: #FF7B3D !important;
    border: 0 none transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
}
.os-event-committed:hover,
.os-event-committed:hover .rz-event-content,
.rz-event.os-event-committed:hover,
.rz-event.os-event-committed:hover .rz-event-content {
    background: #E66B2D !important;
    background-color: #E66B2D !important;
}

/* Today highlight */
.rz-today .rz-slot,
.rz-today.rz-slot {
    background: rgba(85, 128, 255, 0.06);
}
.rz-today .rz-slot-header,
.rz-today.rz-slot-header {
    color: var(--os-primary);
}

/* ── ConvertLeadDialog progress indicator ─────────────────────────────────────
   Replaces MudStepper for the 3-step lead-conversion wizard. MudStepper renders
   non-functional default action buttons that conflict with the dialog's own
   <DialogActions>; this is a simple visual-only progress strip. */
.convert-lead-progress {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.convert-lead-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.convert-lead-step-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--os-border);
    transition: background 200ms ease;
}
.convert-lead-step.is-active .convert-lead-step-bar {
    background: var(--os-primary);
}
.convert-lead-step.is-current .convert-lead-step-bar {
    background: var(--os-primary);
    opacity: 0.75;
}
.convert-lead-step-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--os-muted);
}
.convert-lead-step.is-active .convert-lead-step-label {
    color: var(--os-text);
}