/* UI parity addendum: see docs/planning/42-ui-parity-full-batch-runbook.md; extracted from _new-app cosurgcore-app.css */

/* MudFileUpload drop-zone overlay (MudBlazor 9 canonical pattern).
   Apply via InputClass="csc-file-upload-input" on a <MudFileUpload Hidden="false">.
   The hidden <input type="file"> is absolutely positioned at opacity:0 over the
   visible CustomContent so a single click anywhere on the zone triggers the
   native picker AND drag-drop fires the file events on the input directly. */
.csc-file-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
}
.csc-file-upload-zone-active {
    border-color: var(--mud-palette-primary) !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}


/* EMR data tables: horizontal row lines only, no vertical column grid. Use Class="csc-mudtable-data" on <MudTable> (and page-specific classes for width). */
.csc-mudtable-data .mud-table-container table {
    border-collapse: separate;
    border-spacing: 0;
}

.csc-mudtable-data .mud-table-container thead th,
.csc-mudtable-data .mud-table-container thead .mud-th {
    border: none !important;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e2e8f0) !important;
    box-shadow: none !important;
}

.csc-mudtable-data .mud-table-container tbody .mud-table-cell,
.csc-mudtable-data .mud-table-container tbody td {
    border: none !important;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e2e8f0) !important;
    box-shadow: none !important;
}

.csc-mudtable-data .mud-table-container tfoot .mud-table-cell,
.csc-mudtable-data .mud-table-container tfoot td {
    border: none !important;
    border-top: 1px solid var(--mud-palette-lines-default, #e2e8f0) !important;
    box-shadow: none !important;
}

/*
 * Data table — initials avatar next to a name (Leads, Prospects, etc.): uses theme primary.
 * Put Class="csc-table-name-avatar" on MudAvatar; pair with Size.Small in dense tables.
 */
.csc-table-name-avatar {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

/* CoSurgCore EMR shell - reference app (MudBlazor overrides) */

/* Context / breadcrumbs — same flex as _new-app cosurgcore-app.css (overrides cosurgcore-shell) */
.csc-context-primary-row {
    flex: 1 1 auto;
    min-width: 0;
}

.csc-context-breadcrumbs {
    flex: 1 1 160px;
    min-width: 0;
    padding: 0 !important;
}

.csc-context-breadcrumbs .mud-breadcrumb-item {
    font-size: 0.8125rem;
}

.csc-context-bar {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.csc-breadcrumbs {
    background: transparent !important;
    padding: 4px 0 !important;
}

/* Bordered surface mode (user preference): outline-style; flatten elevation shadows */
.csc-bordered-mode .mud-paper,
.csc-bordered-mode .mud-card {
    box-shadow: none !important;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0) !important;
}

/* Data density: compact (shell class from UserEmrThemePreferencesService) */
.csc-ui-density-compact .csc-page-container {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
}

.csc-ui-density-compact .mud-input-control {
    margin-top: 2px;
    margin-bottom: 2px;
}

.csc-ui-density-compact .mud-table-dense .mud-table-row,
.csc-ui-density-compact .csc-mudtable-data .mud-table-row {
    height: auto;
    min-height: 36px;
}

.csc-ui-density-compact .csc-mudtable-data .mud-table-cell,
.csc-ui-density-compact .csc-mudtable-data td {
    padding-top: 4px;
    padding-bottom: 4px;
}

.csc-ui-density-compact .mud-expand-panel .mud-expand-panel-header {
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Appearance page: side-by-side density preview (mimics list + field tightness) */
.csc-appearance-mock-row {
    font-size: 0.8rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e2e8f0);
}

.csc-appearance-mock-field {
    margin-top: 8px;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-inputs, rgba(15, 23, 42, 0.14));
    border-radius: var(--mud-default-borderradius, 8px);
    font-size: 0.8rem;
}

.csc-ui-density-compact .csc-appearance-mock-row {
    padding: 3px 0;
    font-size: 0.75rem;
}

.csc-ui-density-compact .csc-appearance-mock-field {
    margin-top: 4px;
    padding: 3px 6px;
    font-size: 0.72rem;
}

.csc-appearance-preview-tile--active {
    outline: 2px solid var(--mud-palette-primary, #6366f1);
    outline-offset: 2px;
    border-radius: 8px;
}

.csc-appearance-surface-tile--selected {
    outline: 2px solid var(--mud-palette-primary, #6366f1);
    outline-offset: 2px;
    border-radius: 8px;
}

.csc-appearance-surface-tile--large {
    padding: 10px 12px 12px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    background: var(--mud-palette-surface, #fff);
    min-height: 168px;
}

.csc-appearance-surface-demo {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    background: var(--mud-palette-background, #f8fafc);
    border-radius: 8px;
}

.csc-appearance-surface-demo--shadow .csc-appearance-surface-demo__label {
    min-width: 70%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius, 8px);
    padding: 12px 16px;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.2),
        0 2px 8px rgba(15, 23, 42, 0.1);
    border: none;
}

.csc-appearance-surface-demo--bordered .csc-appearance-surface-demo__label {
    min-width: 70%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius, 8px);
    padding: 12px 16px;
    box-shadow: none !important;
    border: 2px solid var(--mud-palette-lines-default, #94a3b8);
}

/* Settings: scrollbar preview strips */
.csc-scrollbar-preview-strip {
    max-height: 88px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 0.7rem;
    line-height: 1.45;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-secondary, #64748b);
}

.csc-scrollbar-preview--system {
    scrollbar-color: auto;
}

.csc-scrollbar-preview--themed {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-primary) var(--mud-palette-surface, #f1f5f9);
}

.csc-scrollbar-preview--themed::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.csc-scrollbar-preview--themed::-webkit-scrollbar-track {
    background: var(--mud-palette-surface, #f1f5f9);
    border-radius: 4px;
}

.csc-scrollbar-preview--themed::-webkit-scrollbar-thumb {
    background: var(--mud-palette-primary);
    border-radius: 4px;
}

/* When user enables styled scrollbars: primary thumb (overrides Mud's gray custom scrollbar) */
.csc-scrollbar--styled * {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-primary) color-mix(in srgb, var(--mud-palette-surface) 90%, var(--mud-palette-text-primary) 2%);
}

.csc-scrollbar--styled *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.csc-scrollbar--styled *::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-background) 8%);
    border-radius: 4px;
}

.csc-scrollbar--styled *::-webkit-scrollbar-thumb {
    background: var(--mud-palette-primary) !important;
    border-radius: 4px;
}

.csc-scrollbar--styled *::-webkit-scrollbar-thumb:hover {
    filter: brightness(0.95);
}

/* Reduce motion (OS preference): limit transitions/animations under the EMR shell */
@media (prefers-reduced-motion: reduce) {
    .csc-emr-root,
    .csc-emr-root * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* App bar search: full cluster (md+) vs compact icon (below md) */
.csc-appbar-search-full {
    display: none !important;
}

.csc-appbar-search-compact {
    display: flex !important;
}

@media (min-width: 960px) {
    .csc-appbar-search-full {
        display: flex !important;
    }

    .csc-appbar-search-compact {
        display: none !important;
    }
}

.csc-appbar-search-full .csc-appbar-search.csc-search-shell {
    max-width: min(560px, 46vw);
}

.csc-appbar-clock-outside {
    padding: 0 4px;
    min-height: 40px;
    align-items: center;
}

.csc-appbar-clock-long,
.csc-appbar-clock-short {
    font-weight: 600;
    font-size: 0.7rem !important;
    line-height: 1.25;
    white-space: nowrap;
}

@media (min-width: 600px) {
    .csc-appbar-clock-long {
        font-size: 0.75rem !important;
    }
}

.csc-appbar-clock-outside--compact {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csc-brand-title {
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.csc-brand-sub {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.csc-search-shell {
    border-radius: 999px !important;
    background: var(--mud-palette-surface) !important;
    align-items: center;
    overflow: hidden;
}

/* Keep underline / ripple inside the pill; Text fields without underline */
.csc-search-field-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-inline: 4px 0;
}

.csc-global-search {
    width: 100%;
}

.csc-global-search .mud-input-control,
.csc-global-search .mud-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.csc-global-search .mud-input-slot {
    font-size: 0.9rem;
}

.csc-global-search .mud-input-underline,
.csc-global-search .mud-input-control:after {
    display: none !important;
}

.csc-search-vdivider {
    align-self: stretch;
    min-height: 28px;
    border-color: var(--mud-palette-lines-default) !important;
}

/* Quick add is last control inside pill when clock is outside (md+) */
.csc-appbar-search-full .csc-search-quick-add-btn {
    border-radius: 0 999px 999px 0 !important;
}

/* Compact app bar: flyout search (clock hidden while open) */
.csc-appbar-search-compact-placeholder {
    pointer-events: none;
    min-height: 1px;
}

.csc-appbar-search-compact--open {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.csc-narrow-search-flyout {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.csc-narrow-search-flyout-paper {
    box-shadow: 0 4px 24px color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent) !important;
}

.csc-compact-quick-add--flyout {
    flex-shrink: 0;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
}

.csc-narrow-search-trigger {
    flex-shrink: 0;
}

@media (min-width: 960px) {
    .csc-narrow-search-scrim {
        display: none !important;
    }
}

.csc-narrow-search-scrim {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    backdrop-filter: blur(1px);
}

.csc-appbar--narrow-search-open.mud-appbar {
    z-index: 1105 !important;
}

.csc-search-shell--popout {
    overflow: visible !important;
    max-width: 100%;
}

.csc-narrow-search-field {
    padding-left: 10px;
    min-width: 0;
}

.csc-narrow-search-field .mud-input-root,
.csc-narrow-search-field .mud-input-slot,
.csc-narrow-search-field .mud-input {
    overflow: visible !important;
    min-width: 0;
}

.csc-narrow-search-input .mud-input-slot,
.csc-narrow-search-input input {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: var(--mud-palette-text-primary) !important;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
    caret-color: var(--mud-palette-primary);
}

.csc-narrow-search-close {
    border-radius: 0 999px 999px 0 !important;
    margin-right: 4px;
    flex-shrink: 0;
}

.csc-compact-quick-add {
    flex-shrink: 0;
}

/* Page headers - accent rail, trail, icon tile */
.csc-page-header {
    border-radius: 14px !important;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 8px;
}

.csc-page-header-surface {
    display: flex;
    align-items: stretch;
    min-height: 100%;
    min-width: 0;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(125deg,
        color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)) 0%,
        var(--mud-palette-surface) 42%,
        color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-lines-default));
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent),
        0 12px 40px -18px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.csc-page-header-accent {
    width: 4px;
    flex-shrink: 0;
    background: linear-gradient(180deg,
        var(--mud-palette-primary) 0%,
        color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-secondary)) 100%);
}

.csc-page-header-row {
    row-gap: 0.5rem;
    column-gap: 0.75rem;
}

.csc-page-header-lead--fill {
    flex: 1 1 200px;
}

.csc-page-header-lead--compact {
    flex: 0 1 400px;
}

.csc-page-header-center {
    flex: 1 1 200px;
    min-width: 180px;
    padding: 0.5rem 0.25rem;
}

.csc-page-header-inner {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.35rem 1.35rem 1.25rem;
}

@media (min-width: 600px) {
    .csc-page-header-inner {
        padding: 1.5rem 1.65rem 1.65rem 1.35rem;
    }
}

.csc-page-header-trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.csc-page-header-trail-text {
    color: var(--mud-palette-text-secondary);
}

.csc-page-header-trail-sep {
    color: var(--mud-palette-text-disabled) !important;
    opacity: 0.85;
}

.csc-page-header-trail-current {
    color: var(--mud-palette-primary);
}

.csc-page-header-eyebrow {
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--mud-palette-primary) !important;
    opacity: 0.92;
}

.csc-page-header-title {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.18;
    font-size: clamp(1.35rem, 2.5vw, 1.65rem) !important;
}

.csc-page-header-subtitle {
    max-width: 56ch;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary) !important;
}

.csc-page-header-meta {
    display: inline-block;
    margin-top: 0.75rem !important;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary) !important;
}

.csc-page-header-icon-wrap {
    flex-shrink: 0;
    padding-left: 16px;
}

.csc-page-header-icon-tile {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.csc-page-header-icon-glyph {
    font-size: 1.65rem !important;
    color: var(--mud-palette-primary) !important;
}

/* Leading slot: View lead initials — same 52px tile + fill as .csc-page-header-icon-tile (Leads, etc.); no separate gradient. */
.csc-page-header-leading-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mud-palette-primary) !important;
    letter-spacing: 0.04em;
    line-height: 1;
    user-select: none;
}

.csc-page-header-row--end-actions .csc-page-header-actions {
    margin-left: auto;
}

.csc-page-header-actions {
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .csc-page-header-row--end-actions .csc-page-header-actions {
        margin-left: 0;
    }

    .csc-page-header-actions,
    .csc-page-header-center,
    .csc-page-header-lead--compact {
        width: 100%;
    }
}

/* -- Split-panel login layout -- */
.csc-login-split {
    /* position: fixed locks the split to the full viewport regardless of MudMainContent's
       default padding-top (which was leaving a white bar above the brand panel and pushing the
       footer below the fold). Form column has its own overflow-y: auto so it scrolls inside;
       brand column footer is always at the visible bottom. */
    position: fixed;
    inset: 0;
    display: flex;
    overflow: hidden;
    z-index: 1;
}

/* Left branding panel */
/* Refined "professional SaaS" login background — 2026-05-12 polish.
   Deep midnight-navy base with a brand-gold radial glow behind the headline,
   a fine gold dot grid for texture, and a thin gold spine on the right edge.
   Stays dark in both light and dark theme modes (the form panel on the right
   still themes normally; only this colored panel is intentionally consistent). */
.csc-login-split__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Parent .csc-login-split is now height: 100vh + overflow: hidden, so this column
       automatically inherits that height via flex. The footer sits at the bottom of THIS
       column, which equals the viewport bottom, so no page scroll is ever required to see
       the copyright. */
    height: 100%;
    width: 42%;
    min-width: 360px;
    overflow: hidden;
    /* Texture option D — soft vignette, tinted with the THEME primary color so the brand panel
       harmonizes with whatever the app's --mud-palette-primary is (no hard-coded navy). Three
       layers (top to bottom):
       1. Vignette: transparent center fading to dark outer edge for visual focus on the content.
       2. Gold halo behind the headline — the only intentional brand-gold accent on the panel.
       3. Symmetric three-stop gradient (darker → primary → darker) using color-mix to derive
          the darker edges from the theme primary itself. Replacing the primary in MudBlazor's
          theme automatically restyles the panel to match. */
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0%, rgba(0, 0, 0, 0.35) 100%),
        radial-gradient(ellipse 80% 50% at 50% 22%, rgba(212, 168, 67, 0.16), transparent 70%),
        linear-gradient(165deg,
            color-mix(in srgb, var(--mud-palette-primary) 60%, #000 40%) 0%,
            var(--mud-palette-primary) 50%,
            color-mix(in srgb, var(--mud-palette-primary) 60%, #000 40%) 100%);
    color: #fff;
}

.csc-login-split__brand::before {
    /* Texture overlay slot. Previous dot-grid created a striped moiré pattern at common display
       zooms, so it's been removed. Left as an empty pseudo-element hook in case we want to swap
       in a different texture (subtle noise PNG, gradient mesh) later without touching markup. */
    content: none;
}

.csc-login-split__brand::after {
    /* Thin gold accent on the right edge — the "spine" */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(212, 168, 67, 0.45), transparent);
    pointer-events: none;
}

.csc-login-split__brand-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.85);
}

.csc-login-split__brand-content {
    position: relative;
    z-index: 1;
    /* flex: 1 lets the content row grow to fill all space between the top of the panel and the
       footer; justify-content: center then vertically centers the text inside that space. Net
       effect: no more "text jammed at top" — the org title / EMR tag / bullets sit in the middle
       of the panel regardless of viewport height. overflow-y: auto means that on a really short
       viewport (e.g. 600px tall) the content scrolls inside the panel rather than pushing the
       footer below the fold — footer stays pinned at the bottom no matter what. */
    flex: 1 1 0;
    min-height: 0;          /* required for flex children to allow overflow */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 32px 24px;
    text-align: center;
}

.csc-login-brand__halo {
    position: absolute;
    width: 140px;
    height: 140px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -20%);
    border-radius: 50%;
    /* Gold halo — ties the headline to the brand accent without overpowering. */
    background: radial-gradient(circle, rgba(212, 168, 67, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

/* ─── Login pitch + bullets + panel footer (2026-05-12) ─────────────────── */

.csc-login-split__pitch {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 0.95rem !important;
    max-width: 380px;
    line-height: 1.5;
    text-wrap: balance;
}

.csc-login-split__bullets {
    list-style: none !important;
    margin: 28px auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 360px;
    width: 100%;
    text-align: left;
}

.csc-login-split__bullets li,
.csc-login-split__bullet {
    list-style: none !important;
    list-style-type: none !important;
}

.csc-login-split__bullets li::marker {
    /* Belt-and-suspenders: kill the default disc marker even if a parent ul rule wins */
    content: "";
}

.csc-login-split__bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: left;
}

.csc-login-split__bullet strong {
    color: #fff;
    font-weight: 600;
}

.csc-login-split__bullet-icon {
    flex-shrink: 0;
    color: #d4a843 !important; /* brand gold */
    margin-top: 1px;
}

.csc-login-split__brand-footer {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 18px 32px 28px;
    margin-top: auto;          /* push to the bottom of the brand column regardless of content height */
    flex-shrink: 0;            /* never compress the footer if content + footer exceed viewport */
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.csc-login-split__copyright,
.csc-login-split__developed-by {
    display: block;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

.csc-login-split__developed-by {
    color: rgba(212, 168, 67, 0.7) !important; /* subtle gold accent on the dev-by line */
    margin-top: 2px;
}

.csc-login-split__org-title {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.25 !important;
    text-wrap: balance;
    color: #fff;
}

.csc-login-split__tagline {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    max-width: 320px;
}

.csc-login-split__headline {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    font-size: 0.875rem !important;
}

.csc-login-split__brand .csc-login-platform-attribution {
    text-align: center;
}

.csc-emr-tagline--login {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.52);
    text-wrap: balance;
}

/* Right form panel */
.csc-login-split__form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: var(--mud-palette-surface);
    overflow-y: auto;
}

.csc-login-split__form-inner {
    width: 100%;
    max-width: 440px;
}

/* Entry animation */
.csc-login-card--enter {
    animation: csc-login-card-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes csc-login-card-rise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* -- Login form styling -- */
.csc-login-form {
    width: 100%;
}

.csc-login-form__header {
    margin-bottom: 28px;
}

.csc-login-form__title {
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
}

.csc-login-form__link {
    font-weight: 600;
}

/* Social icon buttons row */
.csc-login-form__social {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 4px;
}

.csc-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.csc-social-icon:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-background));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.csc-social-icon .external-login-icon {
    margin-right: 0;
    width: 24px;
    height: 24px;
}

/* Divider between form sections */
.csc-login-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.csc-login-divider::before,
.csc-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

/* Form fields */
.csc-login-form__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 8px;
}

.csc-login-form__input .mud-input-outlined-border {
    border-radius: 12px !important;
}

.csc-login-form__input .mud-input {
    font-size: 0.9375rem;
}

/* Forgot password link */
.csc-login-form__forgot {
    font-weight: 500;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.csc-login-form__forgot:hover {
    opacity: 1;
}

/* Submit button */
.csc-login-submit {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent) !important;
    transition: all 0.2s ease !important;
}

.csc-login-submit:hover {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent) !important;
    transform: translateY(-1px);
}

.csc-login-submit .mud-progress-circular-circle {
    stroke: #fff !important;
}

/* Form footer */
.csc-login-form__footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* -- Mobile: stack panels vertically -- */
@media (max-width: 959.98px) {
    /* Drop the desktop "fixed full-viewport, no scroll" layout. On phones the brand panel
       + form columns stack into one document; let the whole thing scroll naturally so the
       login fields are always reachable. */
    .csc-login-split {
        position: static;
        inset: auto;
        height: auto;
        min-height: 100vh;
        overflow: visible;
        flex-direction: column;
    }

    .csc-login-split__brand {
        width: 100%;
        min-width: unset;
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 48px 24px 32px;
    }

    .csc-login-split__brand-content {
        flex: 0 0 auto;
        overflow: visible;
        padding: 16px;
    }

    /* Hide the marketing bullets on small screens — they crowd the form out of view. */
    .csc-login-split__bullets {
        display: none;
    }

    /* Let the footer flow naturally at the bottom of the brand column rather than being
       pushed by margin-top: auto inside a fixed-height container. With the parent now
       height: auto on mobile, the footer simply lands after the content. */
    .csc-login-split__brand-footer {
        margin-top: 16px;
        padding: 12px 24px 0;
    }

    .csc-login-split__form {
        height: auto;
        overflow: visible;
        padding: 32px 20px 48px;
    }

    .csc-social-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
}

/* Right entity preview drawer */
.csc-entity-drawer.mud-drawer {
    max-width: 100%;
    --mud-drawer-width-right: 420px;
}

@media (max-width: 959.98px) {
    .csc-entity-drawer.mud-drawer.mud-drawer-temporary.mud-drawer-pos-right {
        --mud-drawer-width-right: 100vw;
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* Fully hide when closed; avoids sliver when Mud width math is not the viewport */
.csc-entity-drawer.mud-drawer.mud-drawer-temporary.mud-drawer-pos-right.mud-drawer--closed {
    transform: translateX(105%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.csc-entity-drawer.mud-drawer.mud-drawer-temporary.mud-drawer-pos-right.mud-drawer--open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.csc-entity-drawer-body {
    flex: 1 1 0;
    overflow-y: auto;
}

.csc-entity-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ===== NavMenu wrapper (scrollable content + fixed footer) ===== */
.csc-nav-menu-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.csc-nav-menu-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.csc-nav-menu-content::-webkit-scrollbar {
    width: 5px;
}

.csc-nav-menu-content::-webkit-scrollbar-track {
    background: transparent;
}

.csc-nav-menu-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.csc-nav-menu-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.mud-theme-dark .csc-nav-menu-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.mud-theme-dark .csc-nav-menu-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.csc-nav-menu-footer {
    flex-shrink: 0;
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface));
}

.csc-nav-group-label {
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.65rem !important;
    color: var(--mud-palette-primary) !important;
    opacity: 0.75;
}

.csc-nav-system-label {
    color: var(--mud-palette-warning) !important;
    letter-spacing: 0.1em;
    opacity: 0.9;
}

.csc-drawer .csc-nav-menu .mud-nav-link {
    border-radius: 10px;
    margin: 2px 0;
    padding: 10px 12px !important;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.csc-drawer .csc-nav-menu .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.csc-drawer .csc-nav-menu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--mud-palette-primary) 20%, transparent) 0%,
        color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) 100%);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.csc-drawer .csc-nav-menu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.csc-drawer .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link {
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
    min-height: 34px !important;
    color: var(--mud-palette-text-secondary) !important;
    border-radius: 6px !important;
    margin: 1px 0 !important;
}

.csc-drawer .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link .mud-nav-link-icon {
    font-size: 1.1rem !important;
    opacity: 0.65;
    margin-right: 8px;
}

.csc-drawer .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-text-primary) !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) !important;
}

.csc-drawer .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link:hover .mud-nav-link-icon {
    opacity: 1;
}

.csc-drawer .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary) !important;
    font-weight: 600 !important;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--mud-palette-primary) 14%, transparent) 0%,
        color-mix(in srgb, var(--mud-palette-primary) 5%, transparent) 100%) !important;
    box-shadow: inset 2px 0 0 var(--mud-palette-primary) !important;
}

.csc-drawer .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link.active .mud-nav-link-icon {
    opacity: 1;
    color: var(--mud-palette-primary) !important;
}

.csc-drawer .mud-nav-group .mud-navmenu {
    margin-left: 18px !important;
    padding-left: 8px !important;
    border-left: 1px solid var(--mud-palette-primary);
}

.csc-search-field-wrap,
.csc-search-field-wrap .mud-input-control,
.csc-global-search .mud-input-root {
    min-height: 32px;
}

.csc-appbar-search-full .csc-appbar-search.csc-search-shell,
.csc-narrow-search-flyout .csc-search-shell {
    min-height: 36px;
    max-height: 40px;
    margin-block: 5px;
    align-self: center;
}

.csc-appbar-search.csc-search-shell.d-flex {
    align-items: center !important;
}

/* Production entity preview drawer — width controlled by the theme via
   LayoutProperties.DrawerWidthRight (Appearance settings, safe range
   360–720px). max-width here just keeps mobile sane. */
.csc-entity-preview-drawer.mud-drawer.mud-drawer-temporary.mud-drawer-pos-right {
    max-width: 100%;
}

@media (max-width: 959.98px) {
    .csc-entity-preview-drawer.mud-drawer.mud-drawer-temporary.mud-drawer-pos-right {
        --mud-drawer-width-right: 100vw;
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

.csc-entity-preview-drawer.mud-drawer.mud-drawer-temporary.mud-drawer-pos-right.mud-drawer--closed {
    transform: translateX(105%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.csc-entity-preview-drawer.mud-drawer.mud-drawer-temporary.mud-drawer-pos-right.mud-drawer--open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Let header + scroll body + action bar column layout get real height (Mud child is .mud-drawer-content). */
.csc-entity-preview-drawer.csc-entity-detail .mud-drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100dvh;
    max-height: 100dvh;
}

/* -------------------------------------------------------------------------- */
/* App-wide surfaces (same vocabulary everywhere — drawers, registries, forms) */
/* Use on any feature: pair csc-entity-preview-drawer + csc-entity-detail on     */
/* MudDrawer; csc-dialog-compose / csc-dialog-readonly on rich MudDialogs.    */
/* -------------------------------------------------------------------------- */

.csc-entity-detail .drawer-header {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    padding: 24px;
    position: relative;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.csc-entity-detail .drawer-nav-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.csc-entity-detail .drawer-nav-buttons.left {
    left: 16px;
}

.csc-entity-detail .drawer-nav-buttons.right {
    right: 16px;
}

.csc-entity-detail .drawer-avatar {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, var(--mud-palette-lines-default));
    margin: 0 auto 12px;
}

/* Entity side drawer: column flex so header + actions stay fixed and body scrolls (no fixed height calc) */
.csc-entity-preview-drawer.csc-entity-detail .csc-entity-drawer-column,
.csc-notes-thread-drawer .csc-entity-drawer-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
}

.csc-entity-detail .drawer-header,
.csc-notes-thread-drawer .drawer-header {
    flex-shrink: 0;
}

.csc-entity-detail .csc-entity-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.csc-entity-detail .info-section {
    background: var(--mud-palette-background-gray, #f8fafc);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
}

.csc-entity-detail .info-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.csc-entity-detail .info-section-subtitle {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary, #64748b);
    margin-bottom: 12px;
    margin-left: 26px;
}

.csc-entity-detail .info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e2e8f0);
}

.csc-entity-detail .info-row:last-child {
    border-bottom: none;
}

.csc-entity-detail .info-label {
    color: var(--mud-palette-text-secondary, #64748b);
    font-size: 0.875rem;
}

.csc-entity-detail .info-value {
    color: var(--mud-palette-text-primary, #1e293b);
    font-weight: 500;
    font-size: 0.875rem;
}

.csc-entity-detail .drawer-actions {
    background: var(--mud-palette-surface);
    padding: 16px;
    border-top: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    flex-shrink: 0;
}

.csc-entity-detail .action-btn {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

.csc-entity-detail .csc-entity-drawer-nav-icon {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent) !important;
    border-radius: 8px;
}

.csc-entity-detail .csc-entity-rich-block {
    background: var(--mud-palette-background-gray, #f8fafc) !important;
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid var(--mud-palette-primary);
}

.csc-entity-detail .csc-entity-drawer-inline-load {
    border-radius: 4px;
}

/* BMI badge inside the drawer body (Leads + Prospects). Hoisted from page-scoped
   CSS so the shared ProspectPreviewDrawer renders correctly regardless of which
   page hosts it (pipeline, calendar, etc.). */
.csc-entity-detail .bmi-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.csc-entity-detail .bmi-underweight {
    background: color-mix(in srgb, var(--mud-palette-info) 18%, var(--mud-palette-surface));
    color: var(--mud-palette-info);
}

.csc-entity-detail .bmi-normal {
    background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface));
    color: var(--mud-palette-success);
}

.csc-entity-detail .bmi-overweight {
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-surface));
    color: var(--mud-palette-warning);
}

.csc-entity-detail .bmi-obese {
    background: color-mix(in srgb, var(--mud-palette-error) 18%, var(--mud-palette-surface));
    color: var(--mud-palette-error);
}

/* Patient image gallery inside the drawer body (Leads / Prospects). Originally
   page-scoped under .csc-page-leads / .csc-njf-funnel--prospects; hoisted here
   so every entity-preview drawer renders images at the same constrained size.  */
.csc-entity-detail .image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.csc-entity-detail .image-thumb {
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background-gray, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.csc-entity-detail .image-thumb .mud-image,
.csc-entity-detail .image-thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: min(420px, 55vh);
    object-fit: contain !important;
}

/* Data registries: wide MudTable in a raised surface (list pages) */
.csc-surface-table-card {
    background: var(--mud-palette-surface, #fff) !important;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

.csc-registry-mudtable .mud-table-container .mud-table-head .mud-th,
.csc-registry-mudtable thead th {
    background: var(--mud-palette-table-hover, var(--mud-palette-background-gray, #f8fafc)) !important;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.csc-registry-mudtable .mud-table-container .mud-table-head .csc-registry-mudth--center,
.csc-registry-mudtable thead th.csc-registry-mudth--center {
    text-align: center;
}

.csc-registry-mudth--end {
    text-align: right;
}

.csc-registry-mudth--w-actions {
    width: 100px;
}

/* Data grid / table host — _new-app LeadList: outlined shell, popover-friendly overflow */
.csc-datagrid-shell {
    border-radius: 12px !important;
    overflow: visible !important;
}

.csc-grid-quickfilter {
    max-width: min(280px, 46vw);
}

.csc-grid-actions-cell {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    padding-right: 12px !important;
}

/* Rich HTML compose dialog (lead response, similar flows) + portal fallbacks */
.csc-dialog-compose,
.mud-dialog .csc-dialog-compose {
    min-width: min(100%, 640px);
}

.csc-dialog-compose .procedure-card {
    background: var(--mud-palette-background-gray, #f8fafc);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
}

.csc-dialog-compose .template-editor-container {
    border: 1px solid var(--mud-palette-lines-inputs, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface, #fff);
}

.csc-dialog-compose .audio-section {
    background: linear-gradient(
        135deg,
        var(--mud-palette-warning) 0%,
        color-mix(in srgb, var(--mud-palette-warning) 75%, #fde68a) 100%
    );
    border-radius: 12px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 50%, #fbbf24);
}

.csc-dialog-compose .audio-section-empty {
    background: var(--mud-palette-background-gray, #f8fafc);
    border-radius: 12px;
    padding: 16px;
    border: 1px dashed var(--mud-palette-lines-default, #cbd5e1);
}

.csc-dialog-compose .prioritized-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.csc-dialog-compose .standard-badge {
    background: var(--mud-palette-background-gray, #e2e8f0);
    color: var(--mud-palette-text-secondary, #475569);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.csc-dialog-compose .section-title {
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.csc-dialog-compose .info-alert {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, var(--mud-palette-surface, #eff6ff));
    border-left: 4px solid var(--mud-palette-info, #3b82f6);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
}

.csc-dialog-compose .response-dialog-lead-images {
    margin: 0 0 16px 0;
    padding: 12px 0 0 0;
    background: transparent;
    border-bottom: none;
}

.response-dialog-images-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.response-dialog-image-cell {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background-gray, #e2e8f0);
    aspect-ratio: 4 / 3;
    border: 1px solid var(--mud-palette-lines-default, #cbd5e1);
}

.response-dialog-image-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.response-dialog-image-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(transparent, rgba(15, 23, 42, 0.75));
    text-align: center;
}

.response-dialog-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled, #94a3b8);
    font-size: 0.75rem;
}

.csc-dialog-compose audio {
    width: 100%;
    border-radius: 8px;
    margin-top: 8px;
}

.csc-dialog-compose audio::-webkit-media-controls-panel {
    background: var(--mud-palette-surface, #fff);
}

.csc-dialog-readonly,
.mud-dialog .csc-dialog-readonly {
    min-width: min(100%, 640px);
}

.csc-dialog-readonly .response-html,
.mud-dialog .csc-dialog-readonly .response-html {
    line-height: 1.6;
    word-wrap: break-word;
}

.csc-dialog-readonly .response-html p,
.mud-dialog .csc-dialog-readonly .response-html p {
    margin: 0 0 0.75em 0;
}

.csc-dialog-readonly .response-html p:last-child,
.mud-dialog .csc-dialog-readonly .response-html p:last-child {
    margin-bottom: 0;
}

.csc-dialog-readonly .response-html ul,
.csc-dialog-readonly .response-html ol,
.mud-dialog .csc-dialog-readonly .response-html ul,
.mud-dialog .csc-dialog-readonly .response-html ol {
    margin: 0.5em 0;
    padding-left: 1.25em;
}

.csc-dialog-readonly .response-html a,
.mud-dialog .csc-dialog-readonly .response-html a {
    color: var(--mud-palette-primary);
    word-break: break-word;
}

/* Simple stacked form in MudDialog (transfer, assign, etc.) */
.csc-dialog-form,
.mud-dialog .csc-dialog-form {
    min-width: min(100%, 420px);
    color: var(--mud-palette-text-primary);
}

/* Threaded notes side drawer (prospects; reusable elsewhere).
   No z-index override here — MudBlazor's defaults already lift the drawer
   above its backdrop overlay. Forcing z-index 1200 (as a previous version
   did) put the drawer *under* the overlay, which dimmed the drawer along
   with the back page and made every click close it via OverlayAutoClose. */

.csc-notes-thread-drawer .notes-drawer-header {
    background: linear-gradient(
        135deg,
        var(--mud-palette-primary) 0%,
        var(--mud-palette-secondary, #7c3aed) 100%
    );
    color: var(--mud-palette-primary-text, #fff);
    padding: 20px;
    position: relative;
}

.csc-notes-thread-drawer .notes-drawer-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.csc-notes-thread-drawer .notes-drawer-subtitle {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 4px;
}

.csc-notes-thread-drawer .notes-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--mud-palette-background-gray, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.csc-notes-thread-drawer .note-bubble {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 16px;
    position: relative;
    word-wrap: break-word;
}

.csc-notes-thread-drawer .note-bubble-own {
    align-self: flex-end;
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, var(--mud-palette-surface, #fff));
    border-bottom-right-radius: 4px;
}

.csc-notes-thread-drawer .note-bubble-other {
    align-self: flex-start;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    border-bottom-left-radius: 4px;
}

.csc-notes-thread-drawer .note-bubble-own .note-author {
    color: var(--mud-palette-primary);
}

.csc-notes-thread-drawer .note-bubble-other .note-author {
    color: var(--mud-palette-text-secondary, #64748b);
}

.csc-notes-thread-drawer .note-author {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.csc-notes-thread-drawer .note-content {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary, #1e293b);
    white-space: pre-wrap;
}

.csc-notes-thread-drawer .note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-disabled, #94a3b8);
}

.csc-notes-thread-drawer .note-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.csc-notes-thread-drawer .note-bubble:hover .note-actions {
    opacity: 1;
}

.csc-notes-thread-drawer .note-action-btn {
    padding: 2px !important;
    min-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

.csc-notes-thread-drawer .notes-input-container {
    background: var(--mud-palette-surface, #fff);
    border-top: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    padding: 16px;
}

.csc-notes-thread-drawer .notes-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.csc-notes-thread-drawer .notes-input-field {
    flex: 1;
}

.csc-notes-thread-drawer .send-btn {
    border-radius: 50% !important;
    min-width: 48px !important;
    width: 48px !important;
    height: 48px !important;
}

.csc-notes-thread-drawer .empty-notes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--mud-palette-text-disabled, #94a3b8);
    text-align: center;
    padding: 32px;
}

.csc-notes-thread-drawer .empty-notes-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.csc-notes-thread-drawer .edit-input {
    background: var(--mud-palette-surface, #fff);
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
}

.csc-notes-thread-drawer .csc-notes-close {
    background: color-mix(in srgb, var(--mud-palette-primary-text, #fff) 20%, transparent) !important;
    border-radius: 8px;
}

/* Page actions: consistent with shell / _new-app (no all-caps buttons) */
.csc-btn-action {
    border-radius: 10px !important;
    text-transform: none !important;
}

/* HTTP / route loading chip (LoadingOverlay) */
.csc-global-http-loader__brand {
    margin-bottom: 0.5rem;
}

.csc-global-http-loader__logo {
    display: block;
    margin: 0 auto;
    max-width: min(400px, 86vw);
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 2px 12px rgba(15, 23, 42, 0.2));
}

.csc-global-http-loader__logo--placeholder {
    min-height: 100px;
    min-width: 200px;
    max-width: min(400px, 86vw);
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.csc-global-http-loader__logo--dark {
    display: none;
}

.csc-global-http-loader__brand--dark .csc-global-http-loader__logo--light,
.mud-theme-dark .csc-global-http-loader__logo--light {
    display: none;
}

.csc-global-http-loader__brand--dark .csc-global-http-loader__logo--dark,
.mud-theme-dark .csc-global-http-loader__logo--dark {
    display: block;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}

/* AppLoadingScreen.razor: match Mud dark theme (Authorizing) */
.mud-theme-dark .app-loading-screen {
    background: linear-gradient(165deg, #0f172a 0%, #1e293b 45%, #0f172a 100%) !important;
}

.mud-theme-dark .app-loading-screen::before {
    background: radial-gradient(ellipse 80% 50% at 50% 40%, rgba(99, 102, 241, 0.12) 0%, transparent 60%) !important;
}

.mud-theme-dark .app-loading-subtitle {
    color: #94a3b8 !important;
}

.mud-theme-dark .app-loading-bar {
    background: #334155 !important;
}

.mud-theme-dark .app-loading-logo--light {
    display: none !important;
}

.mud-theme-dark .app-loading-logo--dark {
    display: block !important;
}

/* In-page loading stack (not the global LoadingOverlay) */
.csc-app-loading-tall {
    min-height: 60vh;
}

/* Small MudDialogs: full-bleed footer bar (patient documents, media, credits, etc.).
   Negative margins were authored for a parent (.mud-dialog-actions) with 24px padding,
   but the global reset above zeroes that padding — so -24px margins pushed the footer
   24px past the dialog edges and forced horizontal scroll on every Save / Delete /
   Remove confirmation. Pin margins to 0 so the footer sits flush with the dialog
   content area; visual bleed is preserved by .mud-dialog being padding-free already. */
.csc-dialog-actions-styled {
    width: 100%;
    margin: 8px 0 0 0;
    padding: 16px 24px;
    background: var(--mud-palette-background-gray, #f8fafc);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-sizing: border-box;
}

/* ── Canonical MudDialog header (port from _new-app cosurgcore-app.css:1835-1961) ──
   Use as: <TitleContent>
              <div class="csc-dialog-header">
                <div class="csc-dialog-header-row">
                  <div class="csc-dialog-header-icon"><MudIcon Icon="..." /></div>
                  <div class="csc-dialog-header-text">
                    <div class="csc-dialog-header-title">Title</div>
                    <div class="csc-dialog-header-subtitle">Subtitle</div>
                  </div>
                </div>
              </div>
            </TitleContent>
   Pairs with .csc-dialog-actions wrapper for the footer (also from _new-app). */

/* Always remove MudBlazor's default padding on title/actions — our own classes
   (or the inner content) handle their own spacing. This lets background colors
   extend edge-to-edge without a white gap around them. */
.mud-dialog-title {
    padding: 0 !important;
    margin: 0 !important;
}

.mud-dialog-actions {
    padding: 0 !important;
    margin: 0 !important;
}

/* Default styling for dialogs that DON'T use csc-dialog-header — restore sensible
   title padding via a direct child rule (exclude close button and our custom header) */
.mud-dialog-title > *:not(.csc-dialog-header):not(.mud-button-root):not(button) {
    padding: 20px 24px 12px;
    display: block;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Default styling for dialogs that DON'T use csc-dialog-actions — restore sensible
   footer padding and background */
.mud-dialog-actions > *:not(.csc-dialog-actions):not(.csc-dialog-actions-styled):not(.mud-button-root):not(button) {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background) 50%, var(--mud-palette-surface));
}

/* Dialog header — subtle gradient with icon tile + title + subtitle. */
.csc-dialog-header {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface)));
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.csc-dialog-header-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.csc-dialog-header-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--mud-default-borderradius, 10px);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-primary);
}

/* Severity variants for the icon tile (Error for destructive, Success for confirmations,
   Warning for caution flows). Default is Primary above. */
.csc-dialog-header-icon--error {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error);
}

.csc-dialog-header-icon--success {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
}

.csc-dialog-header-icon--warning {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning);
}

.csc-dialog-header-text {
    flex: 1;
    min-width: 0;
}

.csc-dialog-header-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.csc-dialog-header-subtitle {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* Dialog form sections — outlined cards used inside DialogContent to group fields
   into "Scheduling" / "Date & Time" / "Notes" / etc. Single-column layout: each
   .csc-dialog-section is a full-width block with a MudGrid inside for the fields. */
.csc-dialog-section {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius, 10px);
    padding: 16px;
    margin-bottom: 16px;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s;
}

.csc-dialog-section:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
}

.csc-dialog-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.csc-dialog-section-label .mud-icon-root {
    font-size: 1rem;
    opacity: 0.8;
}

/* Dialog actions footer — extends edge-to-edge with subtle background tint */
.csc-dialog-actions {
    width: 100%;
    padding: 12px 24px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background) 50%, var(--mud-palette-surface));
    box-sizing: border-box;
}

/* Dialog narrow width override (single-column dialogs cap at 520px to keep the
   read line tight; pair with sm="6" inside MudGrid for two-up form rows). */
.csc-dialog-narrow {
    max-width: 520px !important;
}

/* Compact "Filter by coordinator" select used inline in CscPageHeader CenterContent
   on Prospects, Quotes, and ContactAppointment. Replaces the old filter-card +
   subtitle + boxed MudSelect chrome with a single bounded-width input. */
.csc-coordinator-filter {
    min-width: 240px;
    max-width: 320px;
}