/* ==========================================================================
   CaseDesk — dashboard shell
   --------------------------------------------------------------------------
   Why global rather than CSS isolation: the dashboard is assembled from
   sibling components (DashboardTile, CasePipeline, Search) that render the
   card and tile markup themselves. A scoped Dashboard.razor.css would never
   reach them, because the scope attribute only lands on Dashboard's own
   elements. Same constraint that forced auth.css to be global.

   Every class here is `cd-` prefixed on purpose. The markup this replaces
   used bare `.card`, `.container`, `.progress`, `.header` and `.tile`, which
   collide with Bootstrap and silently restyled the rest of the app for as
   long as the dashboard was mounted.

   Colours come from casedesk-tokens.css. No raw hex below except where a
   value is genuinely one-off (heatmap ramp).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.cd-dash {
    /* min-width:0 so the grid children below can shrink inside the flex
       `.main-content` column instead of forcing it to overflow. */
    min-width: 0;
    /* No top padding: the sticky toolbar below supplies it. Padding here would
       leave an uncovered strip above the toolbar for content to scroll through. */
    padding: 0 var(--cd-space-6) var(--cd-space-8);
    background-color: var(--cd-bg);
    min-height: 100%;
    font-family: var(--cd-font-sans);
}

@media (max-width: 767.98px) {
    .cd-dash {
        padding: 0 var(--cd-space-4) var(--cd-space-7);
    }
}

/* --------------------------------------------------------------------------
   Toolbar — greeting, date, quick actions, identity
   `.main-content` is the scroll container (overflow:auto in
   MainLayout.razor.css), so sticky resolves against it, not the window.
   Full-bleed: negative margins cancel the page padding so the white bar
   runs edge to edge like an app header, then padding puts content back.
   -------------------------------------------------------------------------- */

.cd-dash-head {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cd-space-4);
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--cd-space-6)) var(--cd-space-5);
    padding: var(--cd-space-4) var(--cd-space-6);
    /* Must be opaque, or scrolled content shows through. */
    background-color: var(--cd-surface);
    border-bottom: 1px solid var(--cd-border);
}

@media (max-width: 767.98px) {
    .cd-dash-head {
        margin: 0 calc(-1 * var(--cd-space-4)) var(--cd-space-4);
        padding: var(--cd-space-3) var(--cd-space-4);
    }
}

.cd-dash-greet {
    min-width: 0;
    flex: 1 1 200px;
}

.cd-dash-eyebrow {
    margin: 0 0 2px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd-text-muted);
}

.cd-dash-title {
    margin: 0;
    font-size:  1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cd-text-heading);
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-dash-tools {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    flex-wrap: wrap;
}

/* Quick actions — plain links styled as buttons. */
.cd-actions {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    flex-wrap: wrap;
}

.cd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    background-color: var(--cd-surface);
    color: var(--cd-text);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--cd-shadow-sm);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--cd-transition), border-color var(--cd-transition), box-shadow var(--cd-transition), color var(--cd-transition);
}

.cd-btn:hover {
    background-color: var(--cd-surface-alt);
    border-color: var(--cd-border-hover);
    color: var(--cd-text-heading);
    text-decoration: none;
}

.cd-btn:focus-visible {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: 2px;
}

.cd-btn i {
    font-size: 0.8125rem;
    color: var(--cd-text-muted);
}

.cd-btn--primary {
    background-color: var(--cd-primary-700);
    border-color: var(--cd-primary-700);
    color: var(--cd-text-inverse);
}

.cd-btn--primary i {
    color: var(--cd-text-inverse);
    opacity: 0.85;
}

.cd-btn--primary:hover {
    background-color: var(--cd-primary-800);
    border-color: var(--cd-primary-800);
    color: var(--cd-text-inverse);
    box-shadow: var(--cd-shadow-primary);
}

/* Secondary actions are icon-only circles; the title attribute carries the
   label. Keeps the hero compact enough for the quick-search panel. */
.cd-btn--ghost .cd-btn-label {
    display: none;
}

.cd-btn--ghost {
    width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.cd-btn--ghost i {
    font-size: 1rem;
}

.cd-dash-ident {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding-left: var(--cd-space-3);
    border-left: 1px solid var(--cd-border);
}

@media (max-width: 767.98px) {
    .cd-dash-ident {
        display: none;
    }
}

.cd-firm {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.cd-firm-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cd-text);
}

.cd-role {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd-text-muted);
}

.cd-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--cd-primary-700);
    color: var(--cd-text-inverse);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Search panel
   The rules under `.cd-search` and the `.searchbar` / `.search-*` family
   used to live in an inline <style> inside Search.razor. They are global
   either way — the component is rendered on the dashboard and on
   DocumentCenter — so they belong in a stylesheet, not a component body.
   -------------------------------------------------------------------------- */

.cd-search {
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    padding: var(--cd-space-4) var(--cd-space-4) var(--cd-space-3);
    margin-bottom: var(--cd-space-6);
}

.cd-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cd-space-3);
    margin-bottom: var(--cd-space-3);
}

.heading-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cd-text);
}

.heading-search::before {
    content: "\f002"; /* fa-magnifying-glass */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--cd-text-muted);
}

.search-icon {
    display: none;
    cursor: pointer;
    color: var(--cd-text-muted);
    font-size: 0.875rem;
}

.cd-search .searchbar {
    row-gap: var(--cd-space-3);
}

.search-panel {
    padding: 0 6px;
}

.search-loading {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    user-select: none;
    color: var(--cd-primary-700);
    font-size: 1rem;
    cursor: pointer;
}

.searchbar .list-group {
    border-radius: var(--cd-radius-sm) !important;
    border: 1px solid var(--cd-border);
    box-shadow: var(--cd-shadow-lg);
    background: var(--cd-surface);
}

.searchbar .list-group-item {
    border: none !important;
    padding: 8px 12px !important;
    cursor: pointer;
    color: var(--cd-text);
}

.searchbar .list-group-item:hover {
    background: var(--cd-surface-alt);
    font-weight: 600 !important;
}

.searchbar .list-group::-webkit-scrollbar {
    width: 5px;
}

.searchbar .list-group::-webkit-scrollbar-thumb {
    background: var(--cd-border);
    border-radius: 10px;
}

/* The submit button in Search.razor. */
.searchbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--cd-control-height);
    padding: 8px 16px;
    border: 0;
    border-radius: var(--cd-radius-sm);
    background-color: var(--cd-primary-700);
    color: var(--cd-text-inverse);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--cd-transition), box-shadow var(--cd-transition);
}

.searchbtn:hover {
    background-color: var(--cd-primary-800);
    box-shadow: var(--cd-shadow-primary);
}

.searchbtn:focus-visible {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: 2px;
}

@media only screen and (max-width: 567.98px) {
    .search-icon {
        display: block;
    }

    .cd-search .form-control {
        font-size: 12px !important;
    }

    .cd-search .form-control.pe-5 {
        padding-right: 40px;
    }

    .searchbar .col-12 {
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .searchbar input {
        font-size: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.cd-section {
    margin-bottom: var(--cd-space-6);
}

.cd-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cd-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--cd-space-3);
}

.cd-section-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd-text-muted);
}

.cd-section-hint {
    font-size: 0.75rem;
    color: var(--cd-text-muted);
}

/* --------------------------------------------------------------------------
   Metric tiles
   Two weights: `--focus` for the time-sensitive counts that should pull the
   eye, and the default compact tile for standing firm numbers. Each tile
   also carries a `--tone-*` for its icon chip.
   -------------------------------------------------------------------------- */

.cd-metrics {
    display: grid;
    gap: var(--cd-space-3);
    /* minmax(0,1fr) rather than 1fr: an auto minimum resolves to the track's
       min-content width, which refuses to shrink once a long label lands. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
    .cd-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479.98px) {
    .cd-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cd-metric {
    --tone: var(--cd-primary-700);
    --tone-bg: var(--cd-primary-100);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    min-width: 0;
    padding: var(--cd-space-4);
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--cd-transition);
}

.cd-metric:hover {
    border-color: var(--cd-border-hover);
    color: inherit;
    text-decoration: none;
}

.cd-metric:focus-visible {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: 2px;
}

.cd-metric--tone-gold {
    --tone: var(--cd-accent-text);
    --tone-bg: var(--cd-accent-bg);
}

.cd-metric--tone-green {
    --tone: var(--cd-success);
    --tone-bg: var(--cd-success-bg);
}

.cd-metric--tone-red {
    --tone: var(--cd-danger);
    --tone-bg: var(--cd-danger-bg);
}

.cd-metric--tone-blue {
    --tone: var(--cd-info);
    --tone-bg: var(--cd-info-bg);
}

.cd-metric-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--cd-radius-sm);
    background-color: var(--tone-bg);
    color: var(--tone);
    font-size: 1rem;
    line-height: 1;
}

.cd-metric-body {
    min-width: 0;
    flex: 1 1 auto;
}

.cd-metric-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--cd-text-heading);
    font-variant-numeric: tabular-nums;
}

.cd-metric-label {
    font-size: 0.8125rem;
    color: var(--cd-text-muted);
    line-height: 1.35;
}

/* Chevron affordance: the tile is a link. Fades in on hover / focus. */
.cd-metric-go {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--cd-text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--cd-transition), transform var(--cd-transition);
}

.cd-metric:hover .cd-metric-go,
.cd-metric:focus-visible .cd-metric-go {
    opacity: 1;
    transform: translateX(0);
}

/* Focus variant — the counts that mean "someone has to do something today". */
.cd-metric--focus {
    padding: var(--cd-space-5) var(--cd-space-4);
}

.cd-metric--focus .cd-metric-value {
    font-size: 2rem;
}

.cd-metric--focus .cd-metric-icon {
    width: 48px;
    height: 48px;
    font-size: 1.125rem;
}

/* Attention state. Purely presentational — driven by whether the existing
   DisplayValue is a zero, not by any new data source. */
.cd-metric.is-attention {
    border-color: var(--cd-accent);
    background-image: linear-gradient(135deg, var(--cd-surface) 60%, var(--cd-accent-bg));
}

.cd-metric.is-attention::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--cd-radius-md) 0 0 var(--cd-radius-md);
    background-color: var(--cd-accent);
}

.cd-metric.is-attention .cd-metric-value {
    color: var(--cd-text-heading);
}

/* Marks the tile as actionable without relying on colour alone. */
.cd-metric-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 8px;
    border-radius: var(--cd-radius-pill);
    background-color: var(--cd-accent-bg);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cd-accent-text);
}

.cd-metric.is-clear .cd-metric-value {
    color: var(--cd-text-muted);
}

/* Skeleton shown until identityUser resolves. */
.cd-metric.is-loading {
    pointer-events: none;
}

.cd-metric.is-loading .cd-metric-icon {
    background-color: var(--cd-border);
    color: transparent;
}

.cd-metric.is-loading .cd-metric-value,
.cd-metric.is-loading .cd-metric-label {
    color: transparent;
    background-color: var(--cd-border);
    border-radius: var(--cd-radius-sm);
    animation: cd-pulse 1.4s ease-in-out infinite;
}

.cd-metric.is-loading .cd-metric-value {
    width: 3ch;
    height: 1.5rem;
    margin-bottom: 6px;
}

.cd-metric.is-loading .cd-metric-label {
    width: 11ch;
    height: 0.8125rem;
}

@keyframes cd-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* --------------------------------------------------------------------------
   Tabs — segmented control
   Blazor drives `activeTab` and only the selected panel renders.
   -------------------------------------------------------------------------- */

.cd-tabs {
    display: inline-flex;
    gap: 2px;
    margin-bottom: var(--cd-space-4);
    padding: 4px;
    max-width: 100%;
    background-color: var(--cd-surface-alt);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    overflow-x: auto;
    scrollbar-width: none;
}

.cd-tabs::-webkit-scrollbar {
    display: none;
}

.cd-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--cd-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--cd-transition), background-color var(--cd-transition), box-shadow var(--cd-transition);
}

.cd-tab i {
    font-size: 0.75rem;
}

.cd-tab:hover {
    color: var(--cd-text);
}

.cd-tab[aria-selected="true"] {
    background-color: var(--cd-surface);
    color: var(--cd-primary-700);
    box-shadow: var(--cd-shadow-sm);
}

.cd-tab:focus-visible {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: -2px;
}

.cd-panel:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Cards + grid
   -------------------------------------------------------------------------- */

.cd-grid {
    display: grid;
    gap: var(--cd-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cd-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cd-grid + .cd-grid {
    margin-top: var(--cd-space-4);
}

@media (max-width: 1199.98px) {
    .cd-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 899.98px) {
    .cd-grid,
    .cd-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cd-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
}

.cd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cd-space-3);
    padding: var(--cd-space-4) var(--cd-space-4) var(--cd-space-3);
    border-bottom: 1px solid var(--cd-border);
    margin-bottom: var(--cd-space-3);
}

.cd-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cd-text-heading);
    line-height: 1.3;
}

.cd-card-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cd-text-muted);
}

.cd-card-body {
    padding: 0 var(--cd-space-4) var(--cd-space-4);
    min-width: 0;
}

/* Charts render fixed-width SVG; let the card scroll rather than the page. */
.cd-card-scroll {
    overflow-x: auto;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Disclosure
   -------------------------------------------------------------------------- */

.cd-disclose {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    color: var(--cd-text);
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: var(--cd-shadow-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--cd-transition), border-color var(--cd-transition);
}

.cd-disclose:hover {
    background-color: var(--cd-surface-alt);
    border-color: var(--cd-border-hover);
}

.cd-disclose:focus-visible {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: 2px;
}

.cd-disclose i {
    font-size: 0.625rem;
    transition: transform var(--cd-transition);
}

.cd-disclose[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Feed rows
   -------------------------------------------------------------------------- */

.cd-feed {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cd-feed-item {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--cd-border);
    min-width: 0;
}

.cd-feed-item:last-child {
    border-bottom: 0;
}

.cd-feed-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--cd-radius-sm);
    background-color: var(--cd-primary-100);
    color: var(--cd-primary-700);
    font-size: 0.75rem;
    font-weight: 600;
}

.cd-feed-body {
    min-width: 0;
}

.cd-feed-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cd-text);
    line-height: 1.35;
}

.cd-feed-meta {
    font-size: 0.75rem;
    color: var(--cd-text-muted);
}

/* --------------------------------------------------------------------------
   Task rows + status pills
   -------------------------------------------------------------------------- */

.cd-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cd-space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--cd-border);
    font-size: 0.875rem;
    color: var(--cd-text);
}

.cd-task:last-child {
    border-bottom: 0;
}

.cd-pill {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--cd-radius-pill);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cd-pill--overdue {
    background-color: var(--cd-danger-bg);
    color: var(--cd-danger);
}

.cd-pill--due {
    background-color: var(--cd-accent-bg);
    color: var(--cd-accent-text);
}

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

.cd-progress {
    height: 8px;
    width: 100%;
    background-color: var(--cd-border);
    border-radius: var(--cd-radius-pill);
    overflow: hidden;
}

.cd-progress-bar {
    height: 100%;
    border-radius: inherit;
    background-color: var(--cd-primary-700);
    transition: width 500ms ease;
}

.cd-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cd-space-3);
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--cd-text-muted);
}

.cd-progress-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cd-text-heading);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Chart legend
   -------------------------------------------------------------------------- */

.cd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cd-space-3) var(--cd-space-4);
    margin-top: var(--cd-space-3);
    font-size: 0.8125rem;
    color: var(--cd-text-muted);
}

.cd-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cd-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Calendar heatmap
   -------------------------------------------------------------------------- */

.cd-heat {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.cd-heat-dow {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd-text-muted);
    text-align: center;
    padding-bottom: 2px;
}

.cd-heat-cell {
    aspect-ratio: 1;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: transform var(--cd-transition), border-color var(--cd-transition);
}

.cd-heat-cell:hover {
    transform: scale(1.12);
    border-color: var(--cd-primary-700);
}

.cd-heat-scale {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--cd-space-3);
    font-size: 0.6875rem;
    color: var(--cd-text-muted);
}

.cd-heat-scale span {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.cd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--cd-space-6) var(--cd-space-4);
    text-align: center;
    color: var(--cd-text-muted);
    font-size: 0.875rem;
}

.cd-empty i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--cd-surface-alt);
    font-size: 1.125rem;
    color: var(--cd-placeholder);
}

/* --------------------------------------------------------------------------
   Reminder modal (kept Bootstrap, retokened)
   -------------------------------------------------------------------------- */

.cd-modal .modal-content {
    border-radius: var(--cd-radius-md);
    overflow: hidden;
}

.cd-modal-head {
    background-color: var(--cd-primary-700);
    color: var(--cd-text-inverse);
    border-bottom: 0;
}

.cd-modal-head .modal-title {
    font-size: 1rem;
    font-weight: 600;
}

.cd-reminder-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cd-space-3);
    padding: var(--cd-space-3);
    margin-bottom: var(--cd-space-2);
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    cursor: pointer;
    transition: border-color var(--cd-transition), background-color var(--cd-transition);
}

.cd-reminder-card:hover {
    border-color: var(--cd-primary-500);
    background-color: var(--cd-primary-050);
}

.cd-btn-go {
    padding: 6px 14px;
    border: 0;
    border-radius: var(--cd-radius-sm);
    background-color: var(--cd-primary-700);
    color: var(--cd-text-inverse);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.cd-btn-go:hover {
    background-color: var(--cd-primary-800);
}

.cd-reminder-row {
    padding: var(--cd-space-3);
    margin-bottom: var(--cd-space-2);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
}

.cd-reminder-actions {
    display: flex;
    gap: var(--cd-space-4);
}

.cd-linkish {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.75rem;
    color: var(--cd-primary-700);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cd-linkish:hover {
    color: var(--cd-primary-900);
}

@media (prefers-reduced-motion: reduce) {
    .cd-metric,
    .cd-card,
    .cd-heat-cell,
    .cd-progress-bar,
    .cd-metric-go,
    .cd-metric.is-loading .cd-metric-value,
    .cd-metric.is-loading .cd-metric-label {
        transition: none;
        animation: none;
    }

    .cd-metric:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Tabler widget rows (TablerOverview / TablerWidgets)
   Tabler's own classes do the card work and ApexCharts sizes itself; these
   cover the pieces the template drew inline.
   -------------------------------------------------------------------------- */

.tb-illustration {
    max-height: 200px;
    width: auto;
}

/* The template's sponsor card: primary tint over the surface. */
.tb-help-card {
    background: color-mix(in srgb, var(--cd-primary-700) 4%, var(--cd-surface));
    text-decoration: none;
}

/* Tabler's `.row-cards` gutter inside the dashboard section spacing. */
.cd-section .row-cards {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Quick search — collapsible pill in the hero (Search.razor, Collapsible)
   Collapsed: a 44px round pill. Open: the panel slides out to the left over
   the empty part of the hero; the greeting truncates rather than reflows.
   -------------------------------------------------------------------------- */

.cd-qs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    width: auto;
    min-width: 44px;
    transition: width 220ms ease;
}

/* Open: the wrapper grows in flow so nothing is covered; the greeting column
   shrinks and its title truncates instead. */
.cd-qs.is-open {
    width: clamp(300px, 38vw, 540px);
}

.cd-qs-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-pill);
    background-color: var(--cd-surface);
    color: var(--cd-text);
    font-size: 1.125rem;
    cursor: pointer;
    box-shadow: var(--cd-shadow-sm);
    transition: background-color var(--cd-transition), border-color var(--cd-transition), opacity 120ms ease;
}

.cd-qs-pill:hover {
    background-color: var(--cd-surface-alt);
    border-color: var(--cd-border-hover);
}

.cd-qs-pill:focus-visible {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: 2px;
}

.cd-qs-kbd {
    white-space: nowrap;
    font-size: 0.6875rem;
    font-family: inherit;
    color: var(--cd-text-muted);
    background-color: var(--cd-surface-alt);
    border: 1px solid var(--cd-border);
    border-radius: 4px;
    padding: 1px 5px;
}

.cd-qs-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--cd-radius-pill);
    background-color: var(--cd-primary-700);
    color: var(--cd-text-inverse);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.cd-qs.is-open .cd-qs-pill {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* Panel */
.cd-qs-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity 160ms ease 60ms, transform 220ms ease;
    z-index: 40;
}

.cd-qs.is-open .cd-qs-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.cd-qs-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 44px;
    padding: 4px 6px 4px 12px;
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow-sm);
}

.cd-qs.is-open .cd-qs-box:focus-within {
    border-color: var(--cd-primary-700);
    box-shadow: var(--cd-focus-ring);
}

.cd-qs-icon {
    color: var(--cd-text-muted);
    font-size: 1.125rem;
}

.cd-qs-input {
    flex: 1 1 140px;
    min-width: 0;
    height: 34px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--cd-text);
}

.cd-qs-input::placeholder {
    color: var(--cd-placeholder);
}

.cd-qs-spin {
    color: var(--cd-primary-700);
}

/* Selected-value chips inside the box */
.cd-qs-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 200px;
    padding: 3px 4px 3px 8px;
    border: 1px solid var(--cd-primary-300);
    border-radius: var(--cd-radius-pill);
    background-color: var(--cd-primary-050);
    color: var(--cd-primary-700);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.cd-qs-chip.is-text {
    border-style: dashed;
}

.cd-qs-chip > i {
    font-size: 0.875rem;
}

.cd-qs-chip button {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.cd-qs-chip button:hover {
    background-color: var(--cd-primary-100);
}

/* Footer: scope chips + Search */
.cd-qs-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.cd-qs-scopes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cd-qs-scope {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-pill);
    background-color: var(--cd-surface);
    color: var(--cd-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color var(--cd-transition), border-color var(--cd-transition), color var(--cd-transition);
}

.cd-qs-scope i {
    color: var(--cd-text-muted);
}

.cd-qs-scope:hover {
    background-color: var(--cd-surface-alt);
}

.cd-qs-scope.is-active {
    border-color: var(--cd-primary-700);
    background-color: var(--cd-primary-050);
    color: var(--cd-primary-700);
}

.cd-qs-scope.is-active i {
    color: var(--cd-primary-700);
}

.cd-qs-go {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--cd-primary-700);
    border-radius: 50%;
    background-color: var(--cd-primary-700);
    color: var(--cd-text-inverse);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--cd-shadow-sm);
}

.cd-qs-go:hover {
    background-color: var(--cd-primary-800);
}

/* Grouped suggestions */
.cd-qs-results {
    margin-top: 6px;
    max-height: 280px;
    overflow-y: auto;
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow-lg);
}

.cd-qs-results-head {
    padding: 8px 12px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd-text-muted);
    background-color: var(--cd-surface-alt);
    border-bottom: 1px solid var(--cd-border);
}

.cd-qs-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--cd-border);
    background: none;
    color: var(--cd-text);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.cd-qs-result:last-child {
    border-bottom: 0;
}

.cd-qs-result:hover,
.cd-qs-result:focus-visible {
    background-color: var(--cd-primary-050);
    outline: none;
}

.cd-qs-result-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--cd-radius-sm);
    background-color: var(--cd-surface-alt);
    border: 1px solid var(--cd-border);
    color: var(--cd-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
}

.cd-qs-result-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-qs-result-meta {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--cd-text-muted);
}

.cd-qs-empty {
    padding: 14px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--cd-text-muted);
}

/* Phones: the panel drops below the greeting and takes the full width. */
@media (max-width: 767.98px) {
    .cd-qs.is-open {
        position: static;
        width: auto;
    }

    .cd-qs.is-open .cd-qs-panel {
        left: var(--cd-space-4);
        right: var(--cd-space-4);
        top: calc(100% + 4px);
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-qs,
    .cd-qs-panel {
        transition: none;
    }
}