/* /Components/AI/AiChatDrawer.razor.rz.scp.css */
/* ── SmartTextArea styling to match MudBlazor ────────────────────────── */
[b-h2fct1r15f] .smart-textarea-wrapper {
    position: relative;
}

[b-h2fct1r15f] .ai-smart-textarea,
[b-h2fct1r15f] .smart-textarea-wrapper textarea {
    width: 100%;
    min-height: 44px;
    max-height: 140px;
    resize: none;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 10px 14px;
    font-family: var(--mud-typography-body2-family), Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

[b-h2fct1r15f] .ai-smart-textarea:focus,
[b-h2fct1r15f] .smart-textarea-wrapper textarea:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

[b-h2fct1r15f] .ai-smart-textarea::placeholder,
[b-h2fct1r15f] .smart-textarea-wrapper textarea::placeholder {
    color: var(--mud-palette-text-disabled);
}

[b-h2fct1r15f] .ai-smart-textarea:disabled,
[b-h2fct1r15f] .smart-textarea-wrapper textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Message text wrapping ────────────────────────────────────────────── */
[b-h2fct1r15f] .msg-bubble {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ── Copy button appears on hover ────────────────────────────────────── */
[b-h2fct1r15f] .msg-bubble .msg-copy-btn {
    opacity: 0 !important;
    transition: opacity 0.2s;
}

[b-h2fct1r15f] .msg-bubble:hover .msg-copy-btn {
    opacity: 0.6 !important;
}

[b-h2fct1r15f] .msg-copy-btn:hover {
    opacity: 1 !important;
}

/* ── Markdown content within chat bubble ─────────────────────────────── */
[b-h2fct1r15f] .ai-markdown-container {
    word-break: break-word;
    overflow-wrap: anywhere;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body {
    font-size: 0.875rem;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body h1,
[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body h2,
[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body h1 {
    font-size: 1.1rem;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body p {
    margin-bottom: 0.5rem;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body p:last-child {
    margin-bottom: 0;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body pre {
    font-size: 0.8rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5rem 0;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body code:not(pre code) {
    background-color: var(--mud-palette-background-grey);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.82em;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body table {
    font-size: 0.82rem;
    width: 100%;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body ul,
[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body ol {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body li {
    margin-bottom: 0.2rem;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 12px;
    margin: 0.5rem 0;
    opacity: 0.85;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body strong {
    font-weight: 600;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

[b-h2fct1r15f] .ai-markdown-container .mud-markdown-body a:hover {
    text-decoration: underline;
}
/* /Components/Elements/Signage/LibraryPickerDialog.razor.rz.scp.css */
/* Card chips ride at the bottom of a 140px column — names of profiles and
   customers can run long. Truncate inside the chip while the chip stays
   within the column width; the full name is in the title attribute (hover). */
.picker-chip[b-qb96c3gdws] {
    max-width: 100%;
    min-width: 0;
}

.picker-chip-text[b-qb96c3gdws] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/Elements/Signage/MediaCard.razor.rz.scp.css */
/* Reserved-height chip row keeps every card the same height regardless of
   how many chips render (0, 1, or 2). nowrap + overflow:hidden stops a long
   customer name from pushing chips onto a second line. */
.sc-card-chips[b-9ow7kay5tc] {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}

/* Truncate the inside-chip label; min-width:0 on the chip lets the flex
   parent shrink it below content width so ellipsis kicks in. */
.sc-card-chip-profile[b-9ow7kay5tc],
.sc-card-chip-customer[b-9ow7kay5tc] {
  min-width: 0;
  max-width: 100%;
}

.sc-card-chip-text[b-9ow7kay5tc] {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Compact profile chip — icon only when both axes are populated. The icon
   is rendered as the chip's ChildContent (a MudIcon in our own markup) so
   scoped CSS can actually target it; passing it as MudChip's Icon arg
   wouldn't get the scope attribute and the styles would silently no-op. */
.sc-card-chip-profile-compact[b-9ow7kay5tc],
.sc-card-chip-schedule-compact[b-9ow7kay5tc] {
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  padding: 0 !important;
  justify-content: center;
  align-items: center;
}

.sc-card-chip-compact-icon[b-9ow7kay5tc] {
  display: block;
  margin: 0;
}

/* Library-only sentinel — sits in the same row height as the others so
   empty cards align vertically with populated ones. */
.sc-card-chip-library[b-9ow7kay5tc] {
  max-width: 100%;
}
/* /Components/Elements/Signage/MediaUploadDialog.razor.rz.scp.css */
/* The locked-destination row prints a workspace or customer name verbatim;
   a long name would push the dialog wider. Truncate within a flex row so
   the prefix label stays anchored and the name takes whatever's left. */
.sc-upload-locked[b-xnvj42ke7n] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.sc-upload-locked-label[b-xnvj42ke7n] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.sc-upload-locked-name[b-xnvj42ke7n] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* MudSelect dropdown items wrap by default; with long names they make the
   popover absurdly wide. Cap width per row and truncate. */
.sc-upload-dest-item[b-xnvj42ke7n] {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/Elements/Signage/SchedulePlanner.razor.rz.scp.css */
/* Resolved weekly timeline, TV-guide layout: day rows × 24h horizontal axis. Colors use
   MudBlazor palette vars so light/dark and the app accent are inherited. Segments are
   absolutely positioned by percent-of-day inside each row track. */

.spt[b-q6p3py1u6x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spt-legend[b-q6p3py1u6x] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.spt-legend__item[b-q6p3py1u6x] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.spt-swatch[b-q6p3py1u6x] {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    display: inline-block;
}

.spt-swatch--rotation[b-q6p3py1u6x] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 9px;
    line-height: 13px;
    text-align: center;
    color: var(--mud-palette-text-primary);
}

.spt-swatch--off[b-q6p3py1u6x] {
    background: repeating-linear-gradient(45deg,
        var(--mud-palette-action-disabled-background) 0 3px, transparent 3px 6px);
    border: 1px solid var(--mud-palette-lines-default);
}

.spt-swatch--nothing[b-q6p3py1u6x] {
    background: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--mud-palette-error) 25%, transparent) 0 3px, transparent 3px 6px);
    border: 1px solid var(--mud-palette-lines-default);
}

.spt-ruler[b-q6p3py1u6x] {
    display: flex;
}

.spt-ruler__track[b-q6p3py1u6x] {
    flex: 1 1 0;
    position: relative;
    height: 18px;
}

.spt-ruler__tick[b-q6p3py1u6x] {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.spt-ruler__tick:first-child[b-q6p3py1u6x] {
    transform: none;
}

.spt-row[b-q6p3py1u6x] {
    display: flex;
    align-items: stretch;
}

.spt-row__label[b-q6p3py1u6x] {
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
}

.spt-row__track[b-q6p3py1u6x] {
    flex: 1 1 0;
    position: relative;
    height: 52px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--mud-palette-background-gray);
    /* faint gridline every 3 hours */
    background-image: repeating-linear-gradient(
        to right,
        var(--mud-palette-lines-inputs) 0 1px,
        transparent 1px 12.5%);
}

.spt-seg[b-q6p3py1u6x] {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 3px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 6px;
    overflow: hidden;
    /* native <button> resets — segments are real buttons so Enter/Space/Tab behave */
    appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    margin: 0;
}

.spt-seg:focus-visible[b-q6p3py1u6x] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.spt-seg--playing[b-q6p3py1u6x] {
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.55);
}

.spt-seg--off[b-q6p3py1u6x] {
    background: repeating-linear-gradient(45deg,
        var(--mud-palette-action-disabled-background) 0 4px, transparent 4px 8px);
}

.spt-seg--nothing[b-q6p3py1u6x] {
    background: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--mud-palette-error) 25%, transparent) 0 4px, transparent 4px 8px);
}

.spt-seg__label[b-q6p3py1u6x] {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Click-opened detail panel (custom, not MudDrawer, so it needs no layout host). */

.spt-panel-backdrop[b-q6p3py1u6x] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1399;
    animation: spt-fade-in-b-q6p3py1u6x 200ms ease-out;
}

.spt-panel[b-q6p3py1u6x] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 92vw);
    z-index: 1400;
    background: var(--mud-palette-surface);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
    padding: 16px;
    overflow-y: auto;
    /* Keyframes rather than a transition: the panel mounts on open, and transitions
       don't fire on newly inserted elements without a forced reflow. */
    animation: spt-slide-in-b-q6p3py1u6x 200ms ease-out;
}

@keyframes spt-slide-in-b-q6p3py1u6x {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes spt-fade-in-b-q6p3py1u6x {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .spt-panel[b-q6p3py1u6x],
    .spt-panel-backdrop[b-q6p3py1u6x] {
        animation: none;
    }
}

.spt-panel__head[b-q6p3py1u6x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.spt-panel__title[b-q6p3py1u6x] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.spt-panel__state[b-q6p3py1u6x] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.spt-panel__section[b-q6p3py1u6x] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin: 14px 0 4px;
}

.spt-panel__note[b-q6p3py1u6x] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.spt-panel__item[b-q6p3py1u6x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-primary);
}

.spt-panel__item--muted .spt-panel__name[b-q6p3py1u6x] {
    opacity: 0.65;
}

.spt-panel__name[b-q6p3py1u6x] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spt-panel__kind[b-q6p3py1u6x] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.spt-dot[b-q6p3py1u6x] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-5az5aev2lx] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-5az5aev2lx] {
    flex: 1;
}

.sidebar[b-5az5aev2lx] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-5az5aev2lx] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-5az5aev2lx]  a, .top-row[b-5az5aev2lx]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-5az5aev2lx]  a:hover, .top-row[b-5az5aev2lx]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-5az5aev2lx]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-5az5aev2lx] {
        justify-content: space-between;
    }

    .top-row[b-5az5aev2lx]  a, .top-row[b-5az5aev2lx]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-5az5aev2lx] {
        flex-direction: row;
    }

    .sidebar[b-5az5aev2lx] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-5az5aev2lx] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-5az5aev2lx]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-5az5aev2lx], article[b-5az5aev2lx] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

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

    #blazor-error-ui .dismiss[b-5az5aev2lx] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-raz1zbvlxe],
.components-reconnect-repeated-attempt-visible[b-raz1zbvlxe],
.components-reconnect-failed-visible[b-raz1zbvlxe],
.components-pause-visible[b-raz1zbvlxe],
.components-resume-failed-visible[b-raz1zbvlxe],
.components-rejoining-animation[b-raz1zbvlxe] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-raz1zbvlxe],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-raz1zbvlxe],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-raz1zbvlxe],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-raz1zbvlxe],
#components-reconnect-modal.components-reconnect-retrying[b-raz1zbvlxe],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-raz1zbvlxe],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-raz1zbvlxe],
#components-reconnect-modal.components-reconnect-failed[b-raz1zbvlxe],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-raz1zbvlxe] {
    display: block;
}


#components-reconnect-modal[b-raz1zbvlxe] {
    background-color: var(--mud-palette-surface, white);
    color: var(--mud-palette-text-primary, #333);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--mud-palette-divider, rgba(0,0,0,0.12));
    border-radius: 8px;
    box-shadow: none;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-raz1zbvlxe 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-raz1zbvlxe 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-raz1zbvlxe 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-raz1zbvlxe]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-raz1zbvlxe 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-raz1zbvlxe {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-raz1zbvlxe {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-raz1zbvlxe {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-raz1zbvlxe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-raz1zbvlxe] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-raz1zbvlxe] {
    border: 0;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 6px 24px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    transition: background-color 0.15s;
}

    #components-reconnect-modal button:hover[b-raz1zbvlxe] {
        background-color: var(--mud-palette-primary-darken);
    }

    #components-reconnect-modal button:active[b-raz1zbvlxe] {
        background-color: var(--mud-palette-primary);
    }

.components-rejoining-animation[b-raz1zbvlxe] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-raz1zbvlxe] {
        position: absolute;
        border: 3px solid var(--mud-palette-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-raz1zbvlxe 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-raz1zbvlxe] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-raz1zbvlxe {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/MySubscription/CheckoutPage.razor.rz.scp.css */
/* Billing-cycle segmented control.

   Built from plain <button>s rather than MudButtonGroup/MudToggleGroup so we own
   the active + hover states and the inline "save %" badge stays legible on BOTH
   the filled (active) and the muted segment. All colors come from MudBlazor
   palette variables, so it tracks the active theme and dark mode automatically.
   Scoped CSS only reaches elements declared in CheckoutPage.razor — these
   buttons/spans are ours, so the styles bind correctly. */

.sc-bcyc[b-aiiopbfk2a] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--mud-palette-background-grey);
  border: 1px solid var(--mud-palette-lines-default);
}

.sc-bcyc-opt[b-aiiopbfk2a] {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mud-palette-text-secondary);
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sc-bcyc-opt:hover:not(.sc-bcyc-active)[b-aiiopbfk2a] {
  color: var(--mud-palette-text-primary);
  background: var(--mud-palette-action-default-hover);
}

.sc-bcyc-opt:focus-visible[b-aiiopbfk2a] {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: 2px;
}

.sc-bcyc-active[b-aiiopbfk2a] {
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* "Save X%" badge — green to draw the eye while Monthly is selected; on the
   active (filled) Yearly segment it switches to a translucent chip so it stays
   readable against the primary fill. */
.sc-bcyc-save[b-aiiopbfk2a] {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mud-palette-success);
  color: #fff;
  white-space: nowrap;
}

.sc-bcyc-active .sc-bcyc-save[b-aiiopbfk2a] {
  background: rgba(255, 255, 255, 0.26);
  color: var(--mud-palette-primary-text);
}
/* /Components/Shared/CommandPalette.razor.rz.scp.css */
/* Search trigger in the app bar — looks like a fake search field with kbd
   hints for the Ctrl+K shortcut. Hidden by `d-md-none` on the icon-only
   mobile version (set in the .razor markup).

   Selectors qualified with `.mud-button` to outrank MudBlazor's outlined
   styles (specifically `.mud-button { text-transform: uppercase }` and
   `.mud-button-outlined { border: 1px solid currentColor }` which would
   otherwise force "SEARCH" all-caps and a 100%-opacity border).

   All colours derive from `currentColor` (= AppBar text colour) via
   color-mix, so the trigger reads correctly on both dark and light themes
   without redefining variables per mode. */

.mud-button.cmd-palette-trigger[b-r60j8st0wz] {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.875rem;
    padding: 4px 8px 4px 12px;
    min-width: 220px;
    justify-content: flex-start;
    background: transparent;
    border-color: color-mix(in srgb, currentColor 15%, transparent);
}

.mud-button.cmd-palette-trigger:hover[b-r60j8st0wz] {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 28%, transparent);
}

.cmd-palette-label[b-r60j8st0wz] {
    flex: 1 1 auto;
    text-align: start;
    opacity: 0.6;
    margin-inline-end: 24px;
}

.cmd-palette-kbd[b-r60j8st0wz] {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Each <kbd> styled like a small keycap, deriving from currentColor so it
   sits correctly on whatever appbar background (light, dark, branded). */
.cmd-palette-kbd kbd[b-r60j8st0wz] {
    display: inline-block;
    padding: 1px 6px;
    min-width: 20px;
    text-align: center;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 3px;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.5;
    color: inherit;
    opacity: 0.75;
}
/* /Components/Shared/TimeRangeSlider.razor.rz.scp.css */
/* Dual-thumb time-range slider. Two native range inputs stacked on one track;
   each input's track is transparent so only the shared .trs-track shows, and
   pointer-events are disabled on the inputs but re-enabled on the thumbs so
   both handles stay grabbable where they overlap. Colors come from MudBlazor
   palette vars, so light/dark themes and the app accent are inherited. */

.trs[b-mz296may6j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}

.trs-track[b-mz296may6j] {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
}

/* The neutral rail. */
.trs-track[b-mz296may6j]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--mud-palette-lines-inputs, rgba(0, 0, 0, 0.26));
}

/* Highlighted span between the thumbs — the signature element. */
.trs-fill[b-mz296may6j] {
    position: absolute;
    height: 4px;
    border-radius: 2px;
    background: var(--mud-palette-primary, #594ae2);
}

.trs-input[b-mz296may6j] {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    height: 24px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    /* Let clicks fall through the input body to the track; the thumbs opt back in. */
    pointer-events: none;
}

/* WebKit / Blink thumb. */
.trs-input[b-mz296may6j]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mud-palette-surface, #fff);
    border: 2px solid var(--mud-palette-primary, #594ae2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: box-shadow 120ms ease;
}

/* Firefox thumb. */
.trs-input[b-mz296may6j]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mud-palette-surface, #fff);
    border: 2px solid var(--mud-palette-primary, #594ae2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.trs-input[b-mz296may6j]::-webkit-slider-runnable-track {
    background: transparent;
    height: 24px;
}

.trs-input[b-mz296may6j]::-moz-range-track {
    background: transparent;
    height: 24px;
}

/* Visible keyboard focus (quality floor). */
.trs-input:focus-visible[b-mz296may6j]::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--mud-palette-primary-hover, rgba(89, 74, 226, 0.3));
}

.trs-input:focus-visible[b-mz296may6j]::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--mud-palette-primary-hover, rgba(89, 74, 226, 0.3));
}

.trs-readout[b-mz296may6j] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
    font-variant-numeric: tabular-nums;
}

.trs-readout__value[b-mz296may6j] {
    font-weight: 600;
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
}

@media (prefers-reduced-motion: reduce) {
    .trs-input[b-mz296may6j]::-webkit-slider-thumb {
        transition: none;
    }
}