/* _content/Blazor.M3.Pro/Components/M3Accordion.razor.rz.scp.css */
.m3-accordion[b-r2yet7oy5k] {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--m3-sys-color-surface);
    border: 1px solid var(--m3-sys-color-outline-variant);
    border-radius: 12px;
    overflow: hidden;
}

.m3-accordion[b-r2yet7oy5k] >  .m3-accordion-item:not(:last-child) {
    border-bottom: 1px solid var(--m3-sys-color-outline-variant);
}
/* _content/Blazor.M3.Pro/Components/M3AccordionItem.razor.rz.scp.css */
.m3-accordion-item[b-2nxwgfour3] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.m3-accordion-item__header[b-2nxwgfour3] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    position: relative;
    color: var(--m3-sys-color-on-surface);
    transition: background-color 0.2s ease;
}

.m3-accordion-item__state-layer[b-2nxwgfour3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: var(--m3-sys-color-on-surface);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.m3-accordion-item__header:hover .m3-accordion-item__state-layer[b-2nxwgfour3] {
    opacity: 0.08;
}

.m3-accordion-item__header:active .m3-accordion-item__state-layer[b-2nxwgfour3] {
    opacity: 0.12;
}

.m3-accordion-item__icon[b-2nxwgfour3] {
    margin-right: 16px;
    color: var(--m3-sys-color-on-surface-variant);
}

.m3-accordion-item__text[b-2nxwgfour3] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.m3-accordion-item__headline[b-2nxwgfour3] {
    font-size: 16px;
    font-weight: 500;
}

.m3-accordion-item__supporting-text[b-2nxwgfour3] {
    font-size: 14px;
    color: var(--m3-sys-color-on-surface-variant);
}

.m3-accordion-item__trailing[b-2nxwgfour3] {
    margin-left: 16px;
    display: flex;
    align-items: center;
}

[b-2nxwgfour3] .m3-accordion-item__expand-icon {
    transition: transform 0.3s ease;
}

[b-2nxwgfour3] .m3-accordion-item__expand-icon--expanded {
    transform: rotate(180deg);
}

.m3-accordion-item__content-container[b-2nxwgfour3] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
    background-color: var(--m3-sys-color-surface-container-low);
}

.m3-accordion-item__content-container--expanded[b-2nxwgfour3] {
    grid-template-rows: 1fr;
}

.m3-accordion-item__content[b-2nxwgfour3] {
    min-height: 0;
    padding: 0 16px;
    opacity: 0;
    transition: opacity 0.3s ease, padding 0.3s ease;
}

.m3-accordion-item__content-container--expanded .m3-accordion-item__content[b-2nxwgfour3] {
    padding: 16px;
    opacity: 1;
}
/* _content/Blazor.M3.Pro/Components/M3BottomSheet.razor.rz.scp.css */
/* ========================================================================= */
/* BOTTOM SHEET SCRIM */
/* ========================================================================= */
.m3-bottom-sheet-scrim[b-a52awpwz7o] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--m3-sys-color-scrim);
    opacity: 0;
    z-index: 4000;
    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
}

.m3-bottom-sheet-scrim--visible[b-a52awpwz7o] {
    /* MD3 Scrim standard opacity is 32% */
    opacity: 0.32;
    pointer-events: auto;
}

/* ========================================================================= */
/* BOTTOM SHEET CONTAINER */
/* ========================================================================= */
.m3-bottom-sheet[b-a52awpwz7o] {
    position: fixed;
    bottom: 0;
    left: 50%;
    /* Start out of bounds to slide UP into view */
    transform: translate(-50%, 100%);
    width: 100%;
    /* Bottom sheets are heavily capped in width on large screens */
    max-width: 640px;
    max-height: 100vh;
    background-color: var(--m3-sys-color-surface-container-low);
    color: var(--m3-sys-color-on-surface);
    display: flex;
    flex-direction: column;
    z-index: 4001;

    /* Expressive 28dp top corners */
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;

    /* Elevation layer 1 */
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);

    /* MD3 Emphasized deceleration ease */
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
}

.m3-bottom-sheet--open[b-a52awpwz7o] {
    /* Slide into view resting on the absolute bottom edge */
    transform: translate(-50%, 0%);
}

/* ========================================================================= */
/* DRAG HANDLE */
/* ========================================================================= */
.m3-bottom-sheet__drag-handle-container[b-a52awpwz7o] {
    width: 100%;
    padding: 22px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Extra padding up top allows users to 'grab' the bar easier */
    cursor: pointer;
    /* Optional: helps when dismissing by clicking the top */
    -webkit-tap-highlight-color: transparent;
}

.m3-bottom-sheet__drag-handle[b-a52awpwz7o] {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--m3-sys-color-outline-variant);
    opacity: 0.4;
}

/* ========================================================================= */
/* CONTENT CONTAINER */
/* ========================================================================= */
.m3-bottom-sheet__content[b-a52awpwz7o] {
    /* Protects against long content overflowing the screen height */
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    width: 100%;
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.m3-bottom-sheet--dragging[b-a52awpwz7o] {
    transition: none !important;
}
/* _content/Blazor.M3.Pro/Components/M3Carousel.razor.rz.scp.css */
.m3-carousel[b-elel65gqli] {
    display: block;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* The actual scrollable strip */
.m3-carousel__scroll-container[b-elel65gqli] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    
    /* Hide scrollbars */
    scrollbar-width: none;
    -ms-overflow-style: none;
    
    padding: 12px 16px; 
    margin: -12px -16px; 
    
    -webkit-overflow-scrolling: touch;
}

.m3-carousel__scroll-container[b-elel65gqli]::-webkit-scrollbar {
    display: none;
}

/* Navigation Buttons */
.m3-carousel__nav[b-elel65gqli] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}

.m3-carousel:hover .m3-carousel__nav[b-elel65gqli] {
    opacity: 1;
    pointer-events: auto;
}

.m3-carousel__nav--prev[b-elel65gqli] { left: 8px; transform: translateY(-50%) translateX(-4px); }
.m3-carousel__nav--next[b-elel65gqli] { right: 8px; transform: translateY(-50%) translateX(4px); }

.m3-carousel:hover .m3-carousel__nav--prev[b-elel65gqli] { transform: translateY(-50%) translateX(0); }
.m3-carousel:hover .m3-carousel__nav--next[b-elel65gqli] { transform: translateY(-50%) translateX(0); }

/* --- Variants --- */

/* Hero: Items are large and centered */
.m3-carousel--hero .m3-carousel-item[b-elel65gqli] {
    flex: 0 0 85%;
    max-width: 600px;
}

/* Multi-browse: Standard sizing with peeking */
.m3-carousel--multibrowse .m3-carousel-item[b-elel65gqli] {
    flex: 0 0 auto;
}

/* Uncontained: No horizontal padding on container */
.m3-carousel--uncontained .m3-carousel__scroll-container[b-elel65gqli] {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* --- Item Styling --- */
.m3-carousel-item[b-elel65gqli] {
    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-inline: 16px;
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--m3-sys-color-surface-container);
}

.m3-carousel-item__image[b-elel65gqli] {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
    pointer-events: none;
}

.m3-carousel-item__overlay[b-elel65gqli] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
}
/* _content/Blazor.M3.Pro/Components/M3CodeSnippet.razor.rz.scp.css */
.m3-code-snippet[b-vmmxva6w0w] {
    --m3-code-bg: var(--m3-sys-color-surface-container-lowest);
    --m3-code-fg: var(--m3-sys-color-on-surface);
    --m3-code-comment: var(--m3-sys-color-outline);
    --m3-code-keyword: var(--m3-sys-color-primary);
    --m3-code-control: var(--m3-sys-color-secondary);
    --m3-code-string: var(--m3-sys-color-tertiary);
    --m3-code-number: #005cc5;
    --m3-code-member: var(--m3-sys-color-primary);
    --m3-code-type: var(--m3-sys-color-secondary);
    --m3-code-function: #6f42c1;
    --m3-code-tag: var(--m3-sys-color-primary);
    --m3-code-attr: var(--m3-sys-color-secondary);
    --m3-code-operator: var(--m3-sys-color-on-surface);

    background-color: var(--m3-code-bg);
    color: var(--m3-code-fg);
    border-radius: 12px;
    padding: 0;
    margin: 0;
    font-family: 'Roboto Mono', 'MS Gothic', 'Cascadia Code', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--m3-sys-color-outline-variant);
}

/* Sizing Overrides */
.m3-code-snippet--extrasmall[b-vmmxva6w0w] { font-size: 10px; }
.m3-code-snippet--small[b-vmmxva6w0w]      { font-size: 12px; }
.m3-code-snippet--medium[b-vmmxva6w0w]     { font-size: 14px; }
.m3-code-snippet--large[b-vmmxva6w0w]      { font-size: 18px; }
.m3-code-snippet--extralarge[b-vmmxva6w0w] { font-size: 24px; }

.m3-code-header[b-vmmxva6w0w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: var(--m3-sys-color-surface-container-high);
    border-bottom: 1px solid var(--m3-sys-color-outline-variant);
}

.m3-code-snippet--extrasmall .m3-code-header[b-vmmxva6w0w] { padding: 4px 8px; }
.m3-code-snippet--small      .m3-code-header[b-vmmxva6w0w] { padding: 6px 12px; }
.m3-code-snippet--large      .m3-code-header[b-vmmxva6w0w] { padding: 12px 24px; }
.m3-code-snippet--extralarge .m3-code-header[b-vmmxva6w0w] { padding: 16px 32px; }

.m3-code-language[b-vmmxva6w0w] {
    color: var(--vscode-fg);
    opacity: 0.6;
    font-family: var(--m3-sys-typescale-plain-font-family);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.m3-code-copy-button[b-vmmxva6w0w] {
    background: transparent;
    border: none;
    color: var(--m3-code-fg);
    opacity: 0.5;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.m3-code-copy-button[b-vmmxva6w0w]  .material-symbols-rounded {
    font-size: 18px;
}

.m3-code-snippet--extrasmall .m3-code-copy-button[b-vmmxva6w0w]  .material-symbols-rounded { font-size: 12px; }
.m3-code-snippet--small      .m3-code-copy-button[b-vmmxva6w0w]  .material-symbols-rounded { font-size: 14px; }
.m3-code-snippet--large      .m3-code-copy-button[b-vmmxva6w0w]  .material-symbols-rounded { font-size: 24px; }
.m3-code-snippet--extralarge .m3-code-copy-button[b-vmmxva6w0w]  .material-symbols-rounded { font-size: 32px; }

.m3-code-copy-button:hover[b-vmmxva6w0w] {
    opacity: 1;
    background-color: var(--m3-sys-color-surface-variant);
}

.m3-code-copy-button--floating[b-vmmxva6w0w] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    background: var(--m3-sys-color-surface-container-high);
    border: 1px solid var(--m3-sys-color-outline-variant);
    border-radius: 8px;
    padding: 6px;
}

.m3-code-content[b-vmmxva6w0w] {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: var(--m3-sys-color-outline-variant) transparent;
}

.m3-code-snippet--extrasmall .m3-code-content[b-vmmxva6w0w] { padding: 8px; }
.m3-code-snippet--small      .m3-code-content[b-vmmxva6w0w] { padding: 12px; }
.m3-code-snippet--large      .m3-code-content[b-vmmxva6w0w] { padding: 24px; }
.m3-code-snippet--extralarge .m3-code-content[b-vmmxva6w0w] { padding: 32px; }

.m3-code-content[b-vmmxva6w0w]::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.m3-code-content[b-vmmxva6w0w]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.m3-code-content[b-vmmxva6w0w]::-webkit-scrollbar-track {
    background: transparent;
}

/* Syntax Tokens */
.m3-token-comment[b-vmmxva6w0w] { color: var(--m3-code-comment); font-style: italic; }
.m3-token-keyword[b-vmmxva6w0w] { color: var(--m3-code-keyword); font-weight: 600; }
.m3-token-control[b-vmmxva6w0w] { color: var(--m3-code-control); font-weight: 600; }
.m3-token-string[b-vmmxva6w0w] { color: var(--m3-code-string); }
.m3-token-number[b-vmmxva6w0w] { color: var(--m3-code-number); }
.m3-token-member[b-vmmxva6w0w] { color: var(--m3-code-member); }
.m3-token-type[b-vmmxva6w0w] { color: var(--m3-code-type); }
.m3-token-function[b-vmmxva6w0w] { color: var(--m3-code-function); }
.m3-token-tag[b-vmmxva6w0w] { color: var(--m3-code-tag); }
.m3-token-attr[b-vmmxva6w0w] { color: var(--m3-code-attr); }
.m3-token-operator[b-vmmxva6w0w] { color: var(--m3-code-operator); }
/* _content/Blazor.M3.Pro/Components/M3DataTable.razor.rz.scp.css */
.m3-data-table[b-0a3umuxba2] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    background-color: var(--m3-sys-color-surface);
    border-radius: 12px;
    border: 1px solid var(--m3-sys-color-outline-variant);
}

.m3-data-table__table[b-0a3umuxba2] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--m3-sys-typescale-body-medium-font);
    color: var(--m3-sys-color-on-surface);
}

.m3-data-table__header-row[b-0a3umuxba2] {
    height: 56px;
    border-bottom: 1px solid var(--m3-sys-color-outline-variant);
}

.m3-data-table__header-cell[b-0a3umuxba2] {
    padding: 0 16px;
    text-align: start;
    font-family: var(--m3-sys-typescale-label-large-font);
    font-weight: 500;
    color: var(--m3-sys-color-on-surface-variant);
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--m3-sys-color-surface);
    box-shadow: inset 0 -1px 0 var(--m3-sys-color-outline-variant);
    box-sizing: border-box;
}

.m3-data-table__table-wrapper[b-0a3umuxba2] {
    width: 100%;
    overflow-x: auto;
}

.m3-data-table__header-cell--sortable[b-0a3umuxba2] {
    cursor: pointer;
    user-select: none;
}

.m3-data-table__header-cell--sortable:hover[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container-high);
}

.m3-data-table__header-content[b-0a3umuxba2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m3-data-table__row[b-0a3umuxba2] {
    height: 52px;
    border-bottom: 1px solid var(--m3-sys-color-outline-variant);
    transition: background-color 0.2s;
}

.m3-data-table__row:last-child[b-0a3umuxba2] {
    border-bottom: none;
}

/* Table Footer / Aggregates */
.m3-data-table__footer[b-0a3umuxba2] {
    border-top: 1px solid var(--m3-sys-color-outline-variant);
    background-color: var(--m3-sys-color-surface);
}

.m3-data-table__footer-cell[b-0a3umuxba2] {
    padding: 8px 16px;
    height: 48px;
    vertical-align: middle;
    box-sizing: border-box;
}

.m3-data-table__aggregate[b-0a3umuxba2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m3-data-table__aggregate-label[b-0a3umuxba2] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--m3-sys-color-on-surface-variant);
    opacity: 0.7;
}

.m3-data-table__aggregate-value[b-0a3umuxba2] {
    font-size: 14px;
    font-weight: 500;
    color: var(--m3-sys-color-primary);
}

.m3-data-table__row:hover[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container-low);
}

.m3-data-table__row--editing[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container) !important;
}

.m3-data-table__row--selected[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-secondary-container) !important;
    color: var(--m3-sys-color-on-secondary-container);
}

.m3-data-table--alternating .m3-data-table__row:nth-child(even)[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container-lowest);
}

.m3-data-table__cell[b-0a3umuxba2] {
    padding: 0;
    vertical-align: middle;
    box-sizing: border-box;
}

.m3-data-table__cell-content--viewing[b-0a3umuxba2] {
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
}

.m3-data-table__cell-content--editing[b-0a3umuxba2] {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.m3-data-table__header-cell--checkbox[b-0a3umuxba2],
.m3-data-table__cell--checkbox[b-0a3umuxba2] {
    width: 48px;
    padding-inline-start: 16px;
}

/* Odoo-style inline edit inputs */
.m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-text-field,
.m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-menu,
.m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-menu__anchor {
    --m3-text-field-container-height: 40px;
    margin: 4px 0;
    width: 100% !important;
    min-width: 0 !important;
}

.m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-text-field__content {
    height: 40px !important;
    width: 100% !important;
}

.m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-text-field__input {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    width: 100% !important;
}

/* Pagination */
.m3-data-table__pagination[b-0a3umuxba2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    height: 56px;
    padding: 0 16px;
    border-top: 1px solid var(--m3-sys-color-outline-variant);
    font-family: var(--m3-sys-typescale-label-large-font);
    color: var(--m3-sys-color-on-surface-variant);
    font-size: 14px;
}

.m3-data-table__pagination-rows[b-0a3umuxba2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m3-data-table__pagination-info[b-0a3umuxba2] {
    user-select: none;
}

.m3-data-table__pagination-actions[b-0a3umuxba2] {
    display: flex;
    gap: 4px;
}

.m3-data-table__pagination-selector[b-0a3umuxba2] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
}

.m3-data-table__pagination-selector:hover[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container-high);
}

.m3-data-table__toolbar[b-0a3umuxba2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    height: 64px;
}

.m3-data-table__sort-indicator[b-0a3umuxba2] {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--m3-sys-color-primary);
}

.m3-data-table__sort-index[b-0a3umuxba2] {
    font-size: 10px;
    font-weight: 700;
    margin-left: -4px;
    margin-top: -8px;
    background: var(--m3-sys-color-primary-container);
    color: var(--m3-sys-color-on-primary-container);
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--m3-sys-color-surface);
}

.m3-data-table__settings[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface);
}

.m3-data-table__column-toggle[b-0a3umuxba2] {
    transition: background-color 0.2s;
    padding: 0 4px;
    border-radius: 4px;
}

.m3-data-table__column-toggle:hover[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container-high);
}

.m3-data-table__sort-rules[b-0a3umuxba2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.m3-data-table__aggregate-selector[b-0a3umuxba2] {
    transition: all 0.2s ease-in-out;
}

.m3-data-table__aggregate-option[b-0a3umuxba2] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    font-weight: 500;
}

.m3-data-table__aggregate-option:hover[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container-high) !important;
    border-color: var(--m3-sys-color-primary) !important;
}

.m3-data-table__aggregate-option--selected[b-0a3umuxba2] {
    box-shadow: var(--m3-sys-elevation-1);
}

/* Ensure the toolbar title container does not clip the search bar shadow */
[b-0a3umuxba2] .m3-toolbar__title {
    overflow: visible !important;
}

/* Bulk Action Toolbar */
.m3-data-table__bulk-toolbar[b-0a3umuxba2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    height: 64px;
    background: linear-gradient(135deg, var(--m3-sys-color-secondary-container) 0%, var(--m3-sys-color-primary-container) 100%);
    color: var(--m3-sys-color-on-secondary-container);
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    border-bottom: 1px solid var(--m3-sys-color-outline-variant);
    box-sizing: border-box;
    position: relative;
    z-index: 15;
    animation: m3BulkToolbarSlideDown-b-0a3umuxba2 0.2s cubic-bezier(0.05, 0.7, 0.1, 1.0);
}

@keyframes m3BulkToolbarSlideDown-b-0a3umuxba2 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.m3-data-table__bulk-toolbar-left[b-0a3umuxba2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m3-data-table__bulk-toolbar-actions[b-0a3umuxba2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Comfortable Density --- */
.m3-data-table--density-comfortable .m3-data-table__header-row[b-0a3umuxba2] {
    height: 64px;
}

.m3-data-table--density-comfortable .m3-data-table__row[b-0a3umuxba2] {
    height: 64px;
}

.m3-data-table--density-comfortable .m3-data-table__header-cell[b-0a3umuxba2],
.m3-data-table--density-comfortable .m3-data-table__cell-content--viewing[b-0a3umuxba2] {
    padding-left: 24px;
    padding-right: 24px;
}

.m3-data-table--density-comfortable .m3-data-table__header-cell--checkbox[b-0a3umuxba2],
.m3-data-table--density-comfortable .m3-data-table__cell--checkbox[b-0a3umuxba2] {
    padding-inline-start: 24px;
    width: 56px;
}

/* --- Dense Density --- */
.m3-data-table--density-dense .m3-data-table__header-row[b-0a3umuxba2] {
    height: 44px;
}

.m3-data-table--density-dense .m3-data-table__row[b-0a3umuxba2] {
    height: 40px;
}

.m3-data-table--density-dense .m3-data-table__header-cell[b-0a3umuxba2],
.m3-data-table--density-dense .m3-data-table__cell-content--viewing[b-0a3umuxba2] {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
}

.m3-data-table--density-dense .m3-data-table__header-cell--checkbox[b-0a3umuxba2],
.m3-data-table--density-dense .m3-data-table__cell--checkbox[b-0a3umuxba2] {
    padding-inline-start: 12px;
    width: 44px;
}

.m3-data-table--density-dense .m3-data-table__cell-content--viewing[b-0a3umuxba2] {
    font-size: 13px;
}

/* Dense Inline Edit scaling */
.m3-data-table--density-dense .m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-text-field,
.m3-data-table--density-dense .m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-menu,
.m3-data-table--density-dense .m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-menu__anchor {
    --m3-text-field-container-height: 32px;
    margin: 2px 0;
}

.m3-data-table--density-dense .m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-text-field__content {
    height: 32px !important;
}

.m3-data-table--density-dense .m3-data-table__cell-content--editing[b-0a3umuxba2]  .m3-text-field__input {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 13px !important;
}

/* Frozen / Sticky Columns Support */
.m3-data-table__cell--frozen[b-0a3umuxba2],
.m3-data-table__cell--checkbox-frozen[b-0a3umuxba2] {
    position: sticky;
    z-index: 2;
    background-color: var(--m3-sys-color-surface);
}

.m3-data-table__header-cell--frozen[b-0a3umuxba2],
.m3-data-table__header-cell--checkbox-frozen[b-0a3umuxba2] {
    position: sticky;
    z-index: 12;
    background-color: var(--m3-sys-color-surface);
}

.m3-data-table__cell--frozen-last[b-0a3umuxba2],
.m3-data-table__header-cell--frozen-last[b-0a3umuxba2] {
    border-right: 1px solid var(--m3-sys-color-outline-variant);
    box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.15);
}

/* Ensure background colors align correctly on frozen cells for various states */
.m3-data-table__row:hover .m3-data-table__cell--frozen[b-0a3umuxba2],
.m3-data-table__row:hover .m3-data-table__cell--checkbox-frozen[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container-low);
}

.m3-data-table--alternating .m3-data-table__row:nth-child(even) .m3-data-table__cell--frozen[b-0a3umuxba2],
.m3-data-table--alternating .m3-data-table__row:nth-child(even) .m3-data-table__cell--checkbox-frozen[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container-lowest);
}

.m3-data-table__row--selected .m3-data-table__cell--frozen[b-0a3umuxba2],
.m3-data-table__row--selected .m3-data-table__cell--checkbox-frozen[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-secondary-container) !important;
}

.m3-data-table__row--editing .m3-data-table__cell--frozen[b-0a3umuxba2],
.m3-data-table__row--editing .m3-data-table__cell--checkbox-frozen[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-surface-container) !important;
}

/* Resizing Columns Handle */
.m3-data-table__resizer[b-0a3umuxba2] {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 15;
    user-select: none;
}

.m3-data-table__resizer:hover[b-0a3umuxba2],
.m3-data-table__resizer--active[b-0a3umuxba2] {
    background-color: var(--m3-sys-color-primary) !important;
    opacity: 0.5;
    width: 4px;
    right: -2px;
}


/* _content/Blazor.M3.Pro/Components/M3DatePicker.razor.rz.scp.css */
/* Base Picker Container */
.m3-date-picker[b-txa8daj5i8] {
    display: flex;
    flex-direction: column;
    width: 360px;
    background-color: var(--m3-sys-color-surface-container-high);
    border-radius: 28px;
    padding: 0;
    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
    /* Elevation 3 */
    overflow: hidden;
    font-family: inherit;
    /* MD3 Pickers have no explicit border, rely on shadow */
}

/* --- Header --- */
.m3-date-picker-header[b-txa8daj5i8] {
    display: flex;
    flex-direction: column;
    padding: 20px 24px 14px 24px;
    border-bottom: 1px solid var(--m3-sys-color-outline-variant);
}

.m3-date-picker-header__label[b-txa8daj5i8] {
    font-size: 14px;
    /* label-medium */
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--m3-sys-color-on-surface-variant);
}

.m3-date-picker-header__selected-date[b-txa8daj5i8] {
    font-size: 32px;
    /* headline-large */
    font-weight: 400;
    line-height: 40px;
    color: var(--m3-sys-color-on-surface);
    margin-top: 32px;
}

/* --- Controls (Month/Year & Chevrons) --- */
.m3-date-picker-controls[b-txa8daj5i8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-top: 20px;
    padding-inline-start: 24px;
    padding-inline-end: 12px;
}

.m3-date-picker-controls__month-year[b-txa8daj5i8] {
    font-size: 14px;
    /* body-large */
    font-weight: 500;
    color: var(--m3-sys-color-on-surface);
}

.m3-date-picker-controls__nav[b-txa8daj5i8] {
    display: flex;
    gap: 8px;
}

[dir="rtl"] .m3-date-picker-controls__nav .m3-icon-button[b-txa8daj5i8] {
    transform: rotate(180deg);
}

/* --- Calendar Grid --- */
.m3-date-picker-calendar[b-txa8daj5i8] {
    padding-block: 12px;
    padding-inline: 24px;
}

.m3-date-picker-calendar__weekdays[b-txa8daj5i8] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}

.m3-date-picker-calendar__weekdays span[b-txa8daj5i8] {
    font-size: 14px;
    /* body-large-ish */
    font-weight: 500;
    color: var(--m3-sys-color-on-surface-variant);
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.m3-date-picker-calendar__days[b-txa8daj5i8] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 4px;
}

/* Day Button */
.m3-date-picker-day[b-txa8daj5i8] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Circle */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--m3-sys-color-on-surface);
    font-family: inherit;
    font-size: 14px;
    /* body-large */
    font-weight: 400;
}

.m3-date-picker-day--empty[b-txa8daj5i8] {
    visibility: hidden;
    pointer-events: none;
}

.m3-date-picker-day__state-layer[b-txa8daj5i8] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background-color: var(--m3-sys-color-on-surface);
    transition: opacity 0.15s linear;
}

.m3-date-picker-day:hover .m3-date-picker-day__state-layer[b-txa8daj5i8] {
    opacity: 0.08;
}

.m3-date-picker-day__text[b-txa8daj5i8] {
    position: relative;
    z-index: 1;
}

/* Today */
.m3-date-picker-day--today[b-txa8daj5i8] {
    border: 1px solid var(--m3-sys-color-primary);
    color: var(--m3-sys-color-primary);
}

/* Selected */
.m3-date-picker-day--selected[b-txa8daj5i8] {
    background-color: var(--m3-sys-color-primary);
    color: var(--m3-sys-color-on-primary);
    border: none;
}

.m3-date-picker-day--selected .m3-date-picker-day__state-layer[b-txa8daj5i8] {
    background-color: var(--m3-sys-color-on-primary);
}

.m3-date-picker-day--selected:hover .m3-date-picker-day__state-layer[b-txa8daj5i8] {
    opacity: 0.08;
}

/* --- Actions --- */
.m3-date-picker-actions[b-txa8daj5i8] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-block: 8px 12px;
    padding-inline: 12px;
}
/* _content/Blazor.M3.Pro/Components/M3DatePickerInput.razor.rz.scp.css */
.m3-picker-input[b-5xarxx0ds6] {
    position: relative;
    display: inline-block;
    width: 250px;
    outline: none;
}

/* Simulated Text Field */
.m3-picker-input-field[b-5xarxx0ds6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 56px;
    padding: 0 16px;
    border: 1px solid var(--m3-sys-color-outline);
    border-radius: 4px;
    /* Extralight radius for outlined text field */
    background-color: transparent;
    cursor: pointer;
    position: relative;
    transition: border-color 0.1s linear;
}

.m3-picker-input-field:hover[b-5xarxx0ds6] {
    border-color: var(--m3-sys-color-on-surface);
}

.m3-picker-input-field--active[b-5xarxx0ds6] {
    border-color: var(--m3-sys-color-primary);
    border-width: 2px;
    padding: 0 15px;
    /* adjust for border width */
}

.m3-picker-input-field__label[b-5xarxx0ds6] {
    position: absolute;
    top: 18px;
    /* Centered visually */
    left: 12px;
    padding: 0 4px;
    background-color: var(--m3-sys-color-background);
    color: var(--m3-sys-color-on-surface-variant);
    font-size: 16px;
    /* body-large */
    font-weight: 400;
    transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
    pointer-events: none;
}

/* Move label to top when active or populated */
.m3-picker-input-field--active .m3-picker-input-field__label[b-5xarxx0ds6],
.m3-picker-input-field__label--populated[b-5xarxx0ds6] {
    top: -8px;
    font-size: 12px;
    /* body-small */
    color: var(--m3-sys-color-primary);
}

.m3-picker-input-field__label--populated:not(.m3-picker-input-field--active .m3-picker-input-field__label)[b-5xarxx0ds6] {
    color: var(--m3-sys-color-on-surface-variant);
}

.m3-picker-input-field__text[b-5xarxx0ds6] {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    color: var(--m3-sys-color-on-surface);
    margin-top: 8px;
    /* Push down to clear space for floated label */
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-family: inherit;
}


.m3-picker-input-field__icon[b-5xarxx0ds6] {
    color: var(--m3-sys-color-on-surface-variant);
    font-size: 24px;
    flex-shrink: 0;
    margin-left: 12px;
}

.m3-picker-input-field--active .m3-picker-input-field__icon[b-5xarxx0ds6] {
    color: var(--m3-sys-color-primary);
}

/* Popup & Scrim */
.m3-picker-input-scrim[b-5xarxx0ds6] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    /* Match menu scrim */
    background: transparent;
}

.m3-picker-input-popup[b-5xarxx0ds6] {
    position: absolute;
    top: calc(100% + 4px);
    /* Dropdown below input */
    left: 0;
    z-index: 2001;
    /* Match menu panel */

    /* Animation (fade/slide down) */
    animation: m3-picker-popup-in-b-5xarxx0ds6 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes m3-picker-popup-in-b-5xarxx0ds6 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/Blazor.M3.Pro/Components/M3FabMenu.razor.rz.scp.css */
/* Positioning Anchor */
.m3-fab-menu-container[b-bc1fzbfcio] {
    position: relative;
    display: inline-flex;
    flex-direction: column-reverse;
    /* Menu opens upwards from FAB */
    align-items: flex-end;
    /* Align to the trailing edge */
    /* Ensure the container doesn't block clicks when menu is closed */
    pointer-events: none;
}

/* Allow clicks on the active inner components.
   ::deep is required because .m3-fab is on M3Fab's <button>, which is
   a child component with its own CSS-isolation scope. */
[b-bc1fzbfcio] .m3-fab,
.m3-fab-menu__panel[b-bc1fzbfcio] {
    pointer-events: auto;
}

/* Base FAB Customizations for rotational animations */
[b-bc1fzbfcio] .m3-fab-menu__toggle {
    z-index: 2;
    /* Keep FAB above the panel */
}

/* Icon container and icons are rendered as child content inside M3Fab,
   so they also need ::deep to pierce the isolation boundary. */
[b-bc1fzbfcio] .m3-fab-menu__icon-container {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-bc1fzbfcio] .m3-fab-menu__icon-default,
[b-bc1fzbfcio] .m3-fab-menu__icon-close {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1),
        opacity 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

[b-bc1fzbfcio] .m3-fab-menu__icon-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    /* Hide and shrink initially */
}

[b-bc1fzbfcio] .m3-fab-menu__icon-default {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Toggle Open Animations */
[b-bc1fzbfcio] .m3-fab-menu__toggle--open .m3-fab-menu__icon-default {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
    /* Rotate out */
}

[b-bc1fzbfcio] .m3-fab-menu__toggle--open .m3-fab-menu__icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
    /* Rotate in */
}


/* --- The Expandable Menu Panel --- */

.m3-fab-menu__panel[b-bc1fzbfcio] {
    position: absolute;
    bottom: calc(100% + 16px);
    /* Float 16px above the FAB */
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align right */
    gap: 16px;
    /* Space out the items like individual FABs */
    padding: 0;

    background: transparent;
    box-shadow: none;
    border-radius: 0;

    /* Animation defaults (Hidden) */
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    transform-origin: bottom right;
    transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1),
        visibility 0.2s;
    visibility: hidden;
    z-index: 1;
}

.m3-fab-menu__panel--open[b-bc1fzbfcio] {
    opacity: 1;
    transform: scale(1) translateY(0);
    visibility: visible;
}
/* _content/Blazor.M3.Pro/Components/M3FabMenuItem.razor.rz.scp.css */
.m3-fab-menu-item-wrapper[b-het91xfpvg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    width: max-content;
    pointer-events: auto;
}

.m3-fab-menu-item__label[b-het91xfpvg] {
    background-color: var(--m3-sys-color-surface-container-high);
    color: var(--m3-sys-color-on-surface);
    padding: 6px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

.m3-fab-menu-item-wrapper[disabled] .m3-fab-menu-item__label[b-het91xfpvg] {
    opacity: 0.38;
}
/* _content/Blazor.M3.Pro/Components/M3FloatingToolbar.razor.rz.scp.css */
.m3-floating-toolbar[b-dyivnownlq] {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    background-color: var(--m3-sys-color-surface-container-high);
    color: var(--m3-sys-color-on-surface);
    box-shadow: var(--m3-sys-elevation-3);
    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
    z-index: 99;
}

/* Horizontal default */
.m3-floating-toolbar--horizontal[b-dyivnownlq] {
    flex-direction: row;
    height: 56px;
    border-radius: 28px;
    padding: 0 8px;
    gap: 8px;
}

/* Vertical alternative */
.m3-floating-toolbar--vertical[b-dyivnownlq] {
    flex-direction: column;
    width: 56px;
    border-radius: 28px;
    padding: 8px 0;
    gap: 8px;
}

/* Vibrant Scheme */
.m3-floating-toolbar--vibrant[b-dyivnownlq] {
    background-color: var(--m3-sys-color-primary-container);
    color: var(--m3-sys-color-on-primary-container);
}

/* Dividers */
.m3-floating-toolbar--horizontal .m3-floating-toolbar__divider[b-dyivnownlq] {
    width: 1px;
    height: 24px;
    background-color: var(--m3-sys-color-outline-variant);
    margin: 0 4px;
}

.m3-floating-toolbar--vertical .m3-floating-toolbar__divider[b-dyivnownlq] {
    width: 24px;
    height: 1px;
    background-color: var(--m3-sys-color-outline-variant);
    margin: 4px 0;
}

/* Actions lists layout */
.m3-floating-toolbar__actions[b-dyivnownlq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m3-floating-toolbar--vertical .m3-floating-toolbar__actions[b-dyivnownlq] {
    flex-direction: column;
}

/* Fixed float positioning rules */
.m3-floating-toolbar--fixed-bottom-center[b-dyivnownlq] {
    position: fixed !important;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.m3-floating-toolbar--fixed-bottom-right[b-dyivnownlq] {
    position: fixed !important;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

.m3-floating-toolbar--fixed-bottom-left[b-dyivnownlq] {
    position: fixed !important;
    bottom: 24px;
    left: 24px;
    z-index: 1000;
}

.m3-floating-toolbar--fixed-top-center[b-dyivnownlq] {
    position: fixed !important;
    top: 80px; /* offset top app bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.m3-floating-toolbar--fixed-top-right[b-dyivnownlq] {
    position: fixed !important;
    top: 80px;
    right: 24px;
    z-index: 1000;
}

.m3-floating-toolbar__fab-container[b-dyivnownlq] {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* _content/Blazor.M3.Pro/Components/M3Pager.razor.rz.scp.css */
.m3-pager[b-rmr8wmyra9] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    height: 56px;
    padding: 0 16px;
    font-family: var(--m3-sys-typescale-label-large-font);
    color: var(--m3-sys-color-on-surface-variant);
    font-size: 14px;
}

.m3-pager__rows[b-rmr8wmyra9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m3-pager__info[b-rmr8wmyra9] {
    user-select: none;
    min-width: 80px;
    text-align: center;
}

.m3-pager__actions[b-rmr8wmyra9] {
    display: flex;
    gap: 4px;
}

.m3-pager__selector[b-rmr8wmyra9] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    user-select: none;
}

.m3-pager__selector:hover[b-rmr8wmyra9] {
    background-color: var(--m3-sys-color-surface-container-high);
}
/* _content/Blazor.M3.Pro/Components/M3RangeSlider.razor.rz.scp.css */
.m3-slider[b-h7p77w65yy] {
    position: relative;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    touch-action: none;

    /* Default (M) Size Variables */
    --m3-slider-track-height: 40px;
    --m3-slider-handle-height: 44px;
}

.m3-slider--extrasmall[b-h7p77w65yy] { --m3-slider-track-height: 16px; --m3-slider-handle-height: 20px; }
.m3-slider--small[b-h7p77w65yy]      { --m3-slider-track-height: 24px; --m3-slider-handle-height: 28px; }
.m3-slider--medium[b-h7p77w65yy]     { --m3-slider-track-height: 40px; --m3-slider-handle-height: 44px; }
.m3-slider--large[b-h7p77w65yy]      { --m3-slider-track-height: 56px; --m3-slider-handle-height: 60px; }
.m3-slider--extralarge[b-h7p77w65yy] { --m3-slider-track-height: 96px; --m3-slider-handle-height: 100px; }

.m3-slider__track-container[b-h7p77w65yy] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: var(--m3-slider-track-height);
    pointer-events: none;
    /* Masking disabled */
}

/* Segmented Pill Design for Range Slider specifically */
.m3-slider__segment[b-h7p77w65yy] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    border-radius: 999px;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.m3-slider__segment--first[b-h7p77w65yy] {
    background-color: var(--m3-sys-color-surface-container-highest);
    border-radius: 999px 2px 2px 999px;
}

.m3-slider__segment--middle[b-h7p77w65yy] {
    background: var(--m3-sys-color-primary, #6750A4) !important;
    border-radius: 2px;
    z-index: 5 !important;
}

.m3-slider__segment--last[b-h7p77w65yy] {
    background-color: var(--m3-sys-color-surface-container-highest);
    border-radius: 2px 999px 999px 2px;
}

/* Range dots */
.m3-slider__track-container[b-h7p77w65yy]::before,
.m3-slider__track-container[b-h7p77w65yy]::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--m3-sys-color-outline);
    z-index: 1;
}

.m3-slider__track-container[b-h7p77w65yy]::before {
    left: 4px;
}

.m3-slider__track-container[b-h7p77w65yy]::after {
    right: 4px;
}

/* Native Input Styling (Crucial to override the blue circle) */
.m3-slider__native-input[b-h7p77w65yy] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--m3-slider-handle-height);
    background: transparent;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin: 0;
    cursor: pointer;
    z-index: 2;
    pointer-events: none; /* Only the thumb should be interactive */
}

.m3-slider__native-input:focus[b-h7p77w65yy] {
    outline: none;
}

/* --- Webkit Thumb Styling (Vertical Bar) --- */
.m3-slider__native-input[b-h7p77w65yy]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: var(--m3-slider-handle-height);
    width: 4px;
    border-radius: 2px;
    background: var(--m3-sys-color-primary);
    transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 0 0 0 var(--m3-sys-color-primary);
    pointer-events: auto;
}

.m3-slider:hover .m3-slider--active[b-h7p77w65yy]::-webkit-slider-thumb,
.m3-slider--active:active[b-h7p77w65yy]::-webkit-slider-thumb,
.m3-slider--active:focus[b-h7p77w65yy]::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--m3-sys-color-primary) 12%, transparent);
}

/* --- Firefox Thumb Styling --- */
.m3-slider__native-input[b-h7p77w65yy]::-moz-range-thumb {
    height: var(--m3-slider-handle-height);
    width: 4px;
    border-radius: 2px;
    background: var(--m3-sys-color-primary);
    border: none;
    pointer-events: auto;
    transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.m3-slider:hover .m3-slider--active[b-h7p77w65yy]::-moz-range-thumb,
.m3-slider--active:active[b-h7p77w65yy]::-moz-range-thumb,
.m3-slider--active:focus[b-h7p77w65yy]::-moz-range-thumb {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--m3-sys-color-primary) 12%, transparent);
}

/* Active/Ghost states are managed by blazor-m3.js proximity logic */
.m3-slider--active[b-h7p77w65yy] {
    z-index: 3 !important;
    pointer-events: auto !important;
}

/* --- Predictive Hover Label --- */
.m3-slider__predictive-label[b-h7p77w65yy] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: var(--m3-slider-hover-percent, 0);
    transform: translateX(-50%) scale(0);
    transform-origin: bottom center;
    background-color: var(--m3-sys-color-surface-container-high);
    color: var(--m3-sys-color-on-surface);
    border: 1px solid var(--m3-sys-color-outline-variant);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 15;
    transition: transform 0.1s ease;
    opacity: 0.8;
}

.m3-slider:hover .m3-slider__predictive-label[b-h7p77w65yy] {
    transform: translateX(-50%) scale(1);
}

.m3-slider__predictive-value[b-h7p77w65yy]::after {
    content: var(--m3-slider-hover-value, '0');
}

/* _content/Blazor.M3.Pro/Components/M3Rating.razor.rz.scp.css */
.m3-rating[b-1zrye8b1gn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.m3-rating--interactive[b-1zrye8b1gn] {
    cursor: pointer;
}

/* Base styles for rating stars */
[b-1zrye8b1gn] .m3-rating__star {
    transition: transform 150ms ease;
}

/* Icon variation settings */
[b-1zrye8b1gn] .m3-rating__star .m3-icon {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

[b-1zrye8b1gn] .m3-rating__star--active .m3-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.m3-rating--interactive .m3-item-container:hover .m3-rating__star[b-1zrye8b1gn] {
    transform: scale(1.1);
}

.m3-rating--readonly[b-1zrye8b1gn] {
    pointer-events: none;
}

[b-1zrye8b1gn] .m3-rating .m3-icon-button {
    /* Use the rating color for the ripple/state layer too if possible */
    --m3-icon-button-state-layer-color: var(--m3-rating-color, #f9dd24);
}
/* _content/Blazor.M3.Pro/Components/M3Ribbon.razor.rz.scp.css */
.m3-ribbon-wrapper[b-sasnoccfg5] {
    position: relative;
    display: inline-block;
}

.m3-ribbon-content[b-sasnoccfg5] {
    overflow: visible;
}

.m3-ribbon-clip[b-sasnoccfg5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 100;
    border-radius: inherit;
}

.m3-ribbon[b-sasnoccfg5] {
    position: absolute;
    width: 150px;
    padding: 6px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    z-index: 101;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    pointer-events: none;
    letter-spacing: 0.05em;
    user-select: none;
}

.m3-ribbon__text[b-sasnoccfg5] {
    display: block;
}

.m3-ribbon--topright[b-sasnoccfg5] {
    top: 25px;
    right: -42px;
    transform: rotate(45deg);
}

.m3-ribbon--topleft[b-sasnoccfg5] {
    top: 25px;
    left: -42px;
    transform: rotate(-45deg);
}

.m3-ribbon--bottomright[b-sasnoccfg5] {
    bottom: 25px;
    right: -42px;
    transform: rotate(-45deg);
}

.m3-ribbon--bottomleft[b-sasnoccfg5] {
    bottom: 25px;
    left: -42px;
    transform: rotate(45deg);
}

/* Small variant offsets */
.m3-ribbon--small.m3-ribbon--topright[b-sasnoccfg5] { top: 15px; right: -45px; }
.m3-ribbon--small.m3-ribbon--topleft[b-sasnoccfg5] { top: 15px; left: -45px; }
.m3-ribbon--small.m3-ribbon--bottomright[b-sasnoccfg5] { bottom: 15px; right: -45px; }
.m3-ribbon--small.m3-ribbon--bottomleft[b-sasnoccfg5] { bottom: 15px; left: -45px; }

.m3-ribbon--small[b-sasnoccfg5] {
    width: 120px;
    font-size: 10px;
    padding: 4px 0;
}
/* _content/Blazor.M3.Pro/Components/M3SearchBar.razor.rz.scp.css */
.m3-search-bar[b-bx6pe43tl6] {
    display: inline-flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    /* recommended max width */
    height: 56px;
    border-radius: 28px;
    /* Stadium shape */
    background-color: var(--m3-sys-color-surface-container-high);
    color: var(--m3-sys-color-on-surface);
    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
    /* Elevation level 3 as recommended for active search, level 0 for rest. But default is usually flat on Surface, so we will keep flat and elevate on focus/hover */
}

/* State Layer for Hover/Focus mapping */
.m3-search-bar__state-layer[b-bx6pe43tl6] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;
    background-color: var(--m3-sys-color-on-surface);
    opacity: 0;
    transition: opacity 200ms linear;
}

.m3-search-bar:hover .m3-search-bar__state-layer[b-bx6pe43tl6] {
    opacity: 0.08;
    /* hover state */
}

.m3-search-bar:focus-within[b-bx6pe43tl6] {
    /* When active, elevate to level 3 */
    background-color: var(--m3-sys-color-surface-container-high);
    box-shadow: var(--m3-sys-elevation-3);
    z-index: 2;
}

.m3-search-bar:focus-within .m3-search-bar__state-layer[b-bx6pe43tl6] {
    opacity: 0;
    /* typically state layers fade on deep active focus to let elevation do the work */
}

/* Leading Icon Area */
.m3-search-bar__leading-icon[b-bx6pe43tl6] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-left: 4px;
    color: var(--m3-sys-color-on-surface-variant);
}

/* Internal Native Input */
.m3-search-bar__input[b-bx6pe43tl6] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 0 16px 0 0;
    /* padding right, padding left handled by leading icon */
    height: 100%;
    color: var(--m3-sys-color-on-surface);
    font-family: var(--m3-sys-typescale-body-large-font);
    font-weight: var(--m3-sys-typescale-body-large-weight);
    font-size: var(--m3-sys-typescale-body-large-size);
    letter-spacing: var(--m3-sys-typescale-body-large-tracking);
    line-height: var(--m3-sys-typescale-body-large-height);
}

.m3-search-bar__input[b-bx6pe43tl6]::placeholder {
    color: var(--m3-sys-color-on-surface-variant);
}

/* Modifier if no leading icon is used (fallback padding) */
.m3-search-bar:not(:has(.m3-search-bar__leading-icon)) .m3-search-bar__input[b-bx6pe43tl6] {
    padding-left: 16px;
}

/* Trailing Content Area (Avatar or Clear button) */
.m3-search-bar__trailing-content[b-bx6pe43tl6] {
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 4px;
}

/* Disabled State */
.m3-search-bar--disabled[b-bx6pe43tl6] {
    background-color: transparent !important;
    border: 1px solid var(--m3-sys-color-on-surface);
    opacity: 0.38;
    pointer-events: none;
    box-shadow: none !important;
}

.m3-search-bar--disabled .m3-search-bar__state-layer[b-bx6pe43tl6] {
    display: none;
}
/* _content/Blazor.M3.Pro/Components/M3SegmentedButton.razor.rz.scp.css */
.m3-segmented-button-group[b-g947jxl6ll] {
    display: inline-flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 40px;
    border: 1px solid var(--m3-sys-color-outline);
    border-radius: 20px;
    overflow: visible;
}

/* Individual Segment Items - Using ::deep to target child components */
[b-g947jxl6ll] .m3-segmented-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    padding: 0 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;

    background: none;
    border: 0;
    border-radius: 0;
    outline: none;

    background-color: var(--m3-sys-color-surface);
    color: var(--m3-sys-color-on-surface);

    border-right: 1px solid var(--m3-sys-color-outline);

    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: background-color 0.1s linear, color 0.1s linear;
    flex-grow: 1;
}

[b-g947jxl6ll] .m3-segmented-button:focus-visible {
    z-index: 2;
}

/* Remove border on the last item to prevent double-thick outer borders */
[b-g947jxl6ll] .m3-segmented-button:last-child {
    border-right: none;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Duplicated radiuses to fix WebKit compositor bleeding */
[b-g947jxl6ll] .m3-segmented-button:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

[b-g947jxl6ll] .m3-segmented-button:only-child {
    border-radius: 20px;
    border-right: none;
}

/* Base interactive overlay for hover/focus ripples */
[b-g947jxl6ll] .m3-segmented-button__state-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-color: transparent;
    transition: background-color 0.1s linear;
    border-radius: inherit;
}

/* Hover States */
[b-g947jxl6ll] .m3-segmented-button:hover .m3-segmented-button__state-layer {
    background-color: var(--m3-sys-color-on-surface);
    opacity: 0.08;
}

/* Selected State */
[b-g947jxl6ll] .m3-segmented-button--selected {
    background-color: var(--m3-sys-color-secondary-container);
    color: var(--m3-sys-color-on-secondary-container);
}

[b-g947jxl6ll] .m3-segmented-button--selected:hover .m3-segmented-button__state-layer {
    background-color: var(--m3-sys-color-on-secondary-container);
    opacity: 0.08;
}

/* Icon & Label Layout */
[b-g947jxl6ll] .m3-segmented-button__label {
    white-space: nowrap;
    z-index: 1;
}

[b-g947jxl6ll] .m3-segmented-button__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    z-index: 1;
    margin-right: 8px;
}

[b-g947jxl6ll] .m3-segmented-button__icon svg {
    width: 100%;
    height: 100%;
}

[b-g947jxl6ll] .m3-segmented-button--icon-only {
    padding: 0 12px;
}

[b-g947jxl6ll] .m3-segmented-button--icon-only .m3-segmented-button__icon {
    margin-right: 0;
}

/* Disabled State */
[b-g947jxl6ll] .m3-segmented-button--disabled {
    cursor: default;
    background-color: transparent;
    border-color: rgba(var(--m3-sys-color-on-surface-rgb, 0, 0, 0), 0.12);
    color: rgba(var(--m3-sys-color-on-surface-rgb, 0, 0, 0), 0.38);
}

[b-g947jxl6ll] .m3-segmented-button--disabled.m3-segmented-button--selected {
    background-color: rgba(var(--m3-sys-color-on-surface-rgb, 0, 0, 0), 0.12);
}

[b-g947jxl6ll] .m3-segmented-button--disabled .m3-segmented-button__state-layer {
    display: none;
}
/* _content/Blazor.M3.Pro/Components/M3SideSheet.razor.rz.scp.css */
/* ========================================================================= */
/* SIDE SHEET SCRIM */
/* ========================================================================= */
.m3-side-sheet-scrim[b-m6661w4p5g] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--m3-sys-color-scrim);
    opacity: 0;
    z-index: 4000;
    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
}

.m3-side-sheet-scrim--visible[b-m6661w4p5g] {
    opacity: 0.32;
    pointer-events: auto;
}

/* ========================================================================= */
/* SIDE SHEET CONTAINER */
/* ========================================================================= */
.m3-side-sheet[b-m6661w4p5g] {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100%;
    max-width: 400px;
    background-color: var(--m3-sys-color-surface-container-low);
    color: var(--m3-sys-color-on-surface);
    display: flex;
    flex-direction: column;
    z-index: 4001;

    /* Decelerating fly-in transition */
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), border-radius 300ms ease;

    /* Shadow applies to both variants implicitly if they overlap content */
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

/* ========================================================================= */
/* POSITIONAL EDGE DOCKING */
/* ========================================================================= */
.m3-side-sheet--right[b-m6661w4p5g] {
    right: 0;
    transform: translateX(100%);
    /* Rounded inner corners, sharp edge on the window frame */
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.m3-side-sheet--left[b-m6661w4p5g] {
    left: 0;
    transform: translateX(-100%);
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Activate transforms when open state is active */
.m3-side-sheet--right.m3-side-sheet--open[b-m6661w4p5g] {
    transform: translateX(0%);
}

.m3-side-sheet--left.m3-side-sheet--open[b-m6661w4p5g] {
    transform: translateX(0%);
}

/* ========================================================================= */
/* STRUCTURAL CONTENT SLOTS */
/* ========================================================================= */
.m3-side-sheet__header[b-m6661w4p5g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px 24px;
}

.m3-side-sheet__headline[b-m6661w4p5g] {
    margin: 0;
    font-family: var(--m3-sys-typescale-font-family);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 28px;
    color: var(--m3-sys-color-on-surface);
}

.m3-side-sheet__content[b-m6661w4p5g] {
    padding: 0 24px 24px 24px;
    overflow-y: auto;
    flex: 1;
}
/* _content/Blazor.M3.Pro/Components/M3Snackbar.razor.rz.scp.css */
/* ========================================================================= */
/* MD3 SNACKBAR                                                            */
/* ========================================================================= */
.m3-snackbar[b-12oww7r6vw] {
    /* Base positioning */
    position: fixed;
    z-index: 8000;

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 16px;
    min-height: 48px;
    width: max-content;
    max-width: 600px;

    /* MD3 Inverted Theming Specs */
    background-color: var(--m3-sys-color-inverse-surface);
    color: var(--m3-sys-color-inverse-on-surface);
    border-radius: 4px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);

    /* Smooth animations */
    opacity: 0;
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), opacity 300ms linear;
}

/* Base states before triggering transitions */
.m3-snackbar--bottom-center[b-12oww7r6vw],
.m3-snackbar--bottom-left[b-12oww7r6vw],
.m3-snackbar--bottom-right[b-12oww7r6vw] {
    bottom: 24px;
}

.m3-snackbar--top-center[b-12oww7r6vw],
.m3-snackbar--top-left[b-12oww7r6vw],
.m3-snackbar--top-right[b-12oww7r6vw] {
    top: 24px;
}

/* Modifiers */
.m3-snackbar--bottom-center[b-12oww7r6vw] {
    left: 50%;
    transform: translate(-50%, 150%);
}

.m3-snackbar--bottom-center.m3-snackbar--open[b-12oww7r6vw] {
    transform: translate(-50%, 0);
    opacity: 1;
}

.m3-snackbar--bottom-left[b-12oww7r6vw] {
    left: 24px;
    transform: translateY(150%);
}

.m3-snackbar--bottom-left.m3-snackbar--open[b-12oww7r6vw] {
    transform: translateY(0);
    opacity: 1;
}

.m3-snackbar--bottom-right[b-12oww7r6vw] {
    right: 24px;
    transform: translateY(150%);
}

.m3-snackbar--bottom-right.m3-snackbar--open[b-12oww7r6vw] {
    transform: translateY(0);
    opacity: 1;
}

.m3-snackbar--top-center[b-12oww7r6vw] {
    left: 50%;
    transform: translate(-50%, -150%);
}

.m3-snackbar--top-center.m3-snackbar--open[b-12oww7r6vw] {
    transform: translate(-50%, 0);
    opacity: 1;
}

.m3-snackbar--top-left[b-12oww7r6vw] {
    left: 24px;
    transform: translateY(-150%);
}

.m3-snackbar--top-left.m3-snackbar--open[b-12oww7r6vw] {
    transform: translateY(0);
    opacity: 1;
}

.m3-snackbar--top-right[b-12oww7r6vw] {
    right: 24px;
    transform: translateY(-150%);
}

.m3-snackbar--top-right.m3-snackbar--open[b-12oww7r6vw] {
    transform: translateY(0);
    opacity: 1;
}

/* ========================================================================= */
/* LABEL SEGMENT                                                           */
/* ========================================================================= */
.m3-snackbar__label[b-12oww7r6vw] {
    font-family: var(--m3-sys-typescale-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    padding: 14px 0;
    flex-grow: 1;
}

/* ========================================================================= */
/* ACTION GROUPS                                                            */
/* ========================================================================= */
.m3-snackbar__actions[b-12oww7r6vw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: -8px;
}

/* Override the injected M3Button to respect Inverse color palettes */
.m3-snackbar__action-button[b-12oww7r6vw] {
    color: var(--m3-sys-color-inverse-primary) !important;
}

.m3-snackbar__action-button:hover[b-12oww7r6vw]::before {
    background-color: var(--m3-sys-color-inverse-primary);
    opacity: 0.08;
}

/* Override the injected M3IconButton's icon color */
[b-12oww7r6vw] .m3-snackbar__close-icon {
    color: var(--m3-sys-color-inverse-on-surface) !important;
    opacity: 1 !important;
}

[b-12oww7r6vw] .m3-snackbar__close-icon .m3-icon-button-icon {
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24 !important;
    color: var(--m3-sys-color-inverse-on-surface) !important;
}
/* _content/Blazor.M3.Pro/Components/M3SplitButton.razor.rz.scp.css */
.m3-split-button[b-c12322fh9v] {
    display: inline-flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 40px; /* Default Medium */
    gap: 2px; /* Standard 2dp gap */
    position: relative;
}

/* Sizing Variables & Overrides */
.m3-split-button--extrasmall[b-c12322fh9v] { height: 16px; }
.m3-split-button--small[b-c12322fh9v]      { height: 24px; }
.m3-split-button--medium[b-c12322fh9v]     { height: 40px; }
.m3-split-button--large[b-c12322fh9v]      { height: 56px; }
.m3-split-button--extralarge[b-c12322fh9v] { height: 96px; }

/* Base interactive reset for both halves */
.m3-split-button__primary[b-c12322fh9v],
.m3-split-button__dropdown[b-c12322fh9v] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: background-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, border-radius 200ms cubic-bezier(0.2, 0, 0, 1);
}

.m3-split-button__primary[b-c12322fh9v] {
    padding-left: 24px;
    padding-right: 16px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    flex-grow: 1;
}

/* Primary Padding/Radius scaling */
.m3-split-button--extrasmall .m3-split-button__primary[b-c12322fh9v] { padding-left: 12px; padding-right: 8px; border-radius: 16px 2px 2px 16px; }
.m3-split-button--small      .m3-split-button__primary[b-c12322fh9v] { padding-left: 16px; padding-right: 12px; border-radius: 16px 4px 4px 16px; }
.m3-split-button--large      .m3-split-button__primary[b-c12322fh9v] { padding-left: 32px; padding-right: 24px; border-radius: 28px 8px 8px 28px; }
.m3-split-button--extralarge .m3-split-button__primary[b-c12322fh9v] { padding-left: 48px; padding-right: 32px; border-radius: 48px 12px 12px 48px; }

.m3-split-button--icon-only .m3-split-button__primary[b-c12322fh9v] {
    padding-left: 16px;
    padding-right: 16px;
}
.m3-split-button--extrasmall.m3-split-button--icon-only .m3-split-button__primary[b-c12322fh9v] { padding-left: 8px; padding-right: 8px; }
.m3-split-button--small.m3-split-button--icon-only      .m3-split-button__primary[b-c12322fh9v] { padding-left: 12px; padding-right: 12px; }

.m3-split-button__dropdown[b-c12322fh9v] {
    aspect-ratio: 1 / 1;
    padding: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    flex-shrink: 0;
}

/* Dropdown Radius scaling */
.m3-split-button--extrasmall .m3-split-button__dropdown[b-c12322fh9v] { border-radius: 2px 16px 16px 2px; }
.m3-split-button--small      .m3-split-button__dropdown[b-c12322fh9v] { border-radius: 4px 16px 16px 4px; }
.m3-split-button--large      .m3-split-button__dropdown[b-c12322fh9v] { border-radius: 8px 28px 28px 8px; }
.m3-split-button--extralarge .m3-split-button__dropdown[b-c12322fh9v] { border-radius: 12px 48px 48px 12px; }

.m3-split-button__dropdown--expanded[b-c12322fh9v] {
    border-radius: 50% !important;
}

/* Base interactive overlay for hover/focus ripples */
.m3-split-button__state-layer[b-c12322fh9v] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;
    background-color: transparent;
    transition: background-color 0.1s linear;
}

/* The vertical separator line removed in favor of gap */

/* Icon & Label Layout */
.m3-split-button__label[b-c12322fh9v] {
    white-space: nowrap;
    z-index: 1;
}

/* Label Font-size scaling */
.m3-split-button--extrasmall .m3-split-button__label[b-c12322fh9v] { font-size: 10px; line-height: 12px; }
.m3-split-button--small      .m3-split-button__label[b-c12322fh9v] { font-size: 13px; line-height: 16px; }
.m3-split-button--large      .m3-split-button__label[b-c12322fh9v] { font-size: 18px; line-height: 24px; }
.m3-split-button--extralarge .m3-split-button__label[b-c12322fh9v] { font-size: 32px; line-height: 40px; font-weight: 700; }

.m3-split-button__icon[b-c12322fh9v] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    z-index: 1;
    margin-right: 8px;
}

/* Icon Size scaling */
.m3-split-button--extrasmall .m3-split-button__icon[b-c12322fh9v] { width: 12px; height: 12px; margin-right: 4px; }
.m3-split-button--small      .m3-split-button__icon[b-c12322fh9v] { width: 16px; height: 16px; margin-right: 6px; }
.m3-split-button--large      .m3-split-button__icon[b-c12322fh9v] { width: 24px; height: 24px; margin-right: 12px; }
.m3-split-button--extralarge .m3-split-button__icon[b-c12322fh9v] { width: 48px; height: 48px; margin-right: 24px; }

.m3-split-button__icon[b-c12322fh9v]  svg,
.m3-split-button__icon[b-c12322fh9v]  .m3-icon {
    width: 100% !important;
    height: 100% !important;
    font-size: 100% !important;
}

.m3-split-button__dropdown-icon[b-c12322fh9v] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    z-index: 1;
}

/* Dropdown Icon scaling */
.m3-split-button--extrasmall .m3-split-button__dropdown-icon[b-c12322fh9v] { width: 12px; height: 12px; }
.m3-split-button--small      .m3-split-button__dropdown-icon[b-c12322fh9v] { width: 18px; height: 18px; }
.m3-split-button--large      .m3-split-button__dropdown-icon[b-c12322fh9v] { width: 32px; height: 32px; }
.m3-split-button--extralarge .m3-split-button__dropdown-icon[b-c12322fh9v] { width: 64px; height: 64px; }

.m3-split-button__dropdown-icon svg[b-c12322fh9v] {
    width: 100%;
    height: 100%;
}


/* --- VARIANT COMBINATIONS --- */

/* 1. Filled */
.m3-split-button--filled .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--filled .m3-split-button__dropdown[b-c12322fh9v] {
    background-color: var(--m3-sys-color-primary);
    color: var(--m3-sys-color-on-primary);
}

.m3-split-button--filled .m3-split-button__primary:hover .m3-split-button__state-layer[b-c12322fh9v],
.m3-split-button--filled .m3-split-button__dropdown:hover .m3-split-button__state-layer[b-c12322fh9v] {
    background-color: var(--m3-sys-color-on-primary);
    opacity: 0.08;
}

/* Divider removed */


/* 2. Elevated */
.m3-split-button--elevated[b-c12322fh9v] {
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    /* Elevation Level 1 */
    transition: box-shadow 0.1s linear;
}

.m3-split-button--elevated:hover[b-c12322fh9v] {
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    /* Elevation Level 2 */
}

.m3-split-button--elevated .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--elevated .m3-split-button__dropdown[b-c12322fh9v] {
    background-color: var(--m3-sys-color-surface-container-low);
    color: var(--m3-sys-color-primary);
}

.m3-split-button--elevated .m3-split-button__primary:hover .m3-split-button__state-layer[b-c12322fh9v],
.m3-split-button--elevated .m3-split-button__dropdown:hover .m3-split-button__state-layer[b-c12322fh9v] {
    background-color: var(--m3-sys-color-primary);
    opacity: 0.08;
}

/* Divider removed */


/* 3. Tonal */
.m3-split-button--tonal .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--tonal .m3-split-button__dropdown[b-c12322fh9v] {
    background-color: var(--m3-sys-color-secondary-container);
    color: var(--m3-sys-color-on-secondary-container);
}

.m3-split-button--tonal .m3-split-button__primary:hover .m3-split-button__state-layer[b-c12322fh9v],
.m3-split-button--tonal .m3-split-button__dropdown:hover .m3-split-button__state-layer[b-c12322fh9v] {
    background-color: var(--m3-sys-color-on-secondary-container);
    opacity: 0.08;
}

/* Divider removed */


/* 4. Outlined */
.m3-split-button--outlined[b-c12322fh9v] {
    /* To prevent inner border doubling we apply the bounding border to the container, 
       but we must use 'box-shadow: inset' to maintain identical sizing across variants without flex-shrink fighting */
    box-shadow: none;
}

.m3-split-button--outlined .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--outlined .m3-split-button__dropdown[b-c12322fh9v] {
    background-color: transparent;
    color: var(--m3-sys-color-primary);
    border: 1px solid var(--m3-sys-color-outline);
}

.m3-split-button--outlined .m3-split-button__primary:hover .m3-split-button__state-layer[b-c12322fh9v],
.m3-split-button--outlined .m3-split-button__dropdown:hover .m3-split-button__state-layer[b-c12322fh9v] {
    background-color: var(--m3-sys-color-primary);
    opacity: 0.08;
}

/* Removed divider rule */


/* 5. Text */
.m3-split-button--text .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--text .m3-split-button__dropdown[b-c12322fh9v] {
    background-color: transparent;
    color: var(--m3-sys-color-primary);
}

.m3-split-button--text .m3-split-button__primary:hover .m3-split-button__state-layer[b-c12322fh9v],
.m3-split-button--text .m3-split-button__dropdown:hover .m3-split-button__state-layer[b-c12322fh9v] {
    background-color: var(--m3-sys-color-primary);
    opacity: 0.08;
}

/* Divider removed */


/* --- DISABLED STATE --- */
.m3-split-button--disabled[b-c12322fh9v] {
    box-shadow: none !important;
    /* Override elevated/outlined */
}

/* For Filled, Tonal, Elevated */
.m3-split-button--disabled.m3-split-button--filled .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--disabled.m3-split-button--filled .m3-split-button__dropdown[b-c12322fh9v],
.m3-split-button--disabled.m3-split-button--tonal .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--disabled.m3-split-button--tonal .m3-split-button__dropdown[b-c12322fh9v],
.m3-split-button--disabled.m3-split-button--elevated .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--disabled.m3-split-button--elevated .m3-split-button__dropdown[b-c12322fh9v] {
    background-color: rgba(var(--m3-sys-color-on-surface-rgb, 0, 0, 0), 0.12);
    color: rgba(var(--m3-sys-color-on-surface-rgb, 0, 0, 0), 0.38);
}

/* For Outlined Disabled - using segment borders */
.m3-split-button--disabled.m3-split-button--outlined .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--disabled.m3-split-button--outlined .m3-split-button__dropdown[b-c12322fh9v] {
    border: 1px solid rgba(var(--m3-sys-color-on-surface-rgb, 0, 0, 0), 0.12) !important;
}

.m3-split-button--disabled.m3-split-button--outlined .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--disabled.m3-split-button--outlined .m3-split-button__dropdown[b-c12322fh9v],
.m3-split-button--disabled.m3-split-button--text .m3-split-button__primary[b-c12322fh9v],
.m3-split-button--disabled.m3-split-button--text .m3-split-button__dropdown[b-c12322fh9v] {
    background-color: transparent;
    color: rgba(var(--m3-sys-color-on-surface-rgb, 0, 0, 0), 0.38);
}

/* Divider removed */

.m3-split-button--disabled .m3-split-button__state-layer[b-c12322fh9v] {
    display: none;
}
/* _content/Blazor.M3.Pro/Components/M3Stepper.razor.rz.scp.css */
.m3-stepper[b-4yf4e08pre] {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* Stepper Header Layout */
.m3-stepper__header[b-4yf4e08pre] {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
    box-sizing: border-box;
}

.m3-stepper__header--horizontal[b-4yf4e08pre] {
    flex-direction: row;
    justify-content: space-between;
}

.m3-stepper__header--vertical[b-4yf4e08pre] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Individual Step Buttons */
.m3-stepper__step[b-4yf4e08pre] {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 8px 16px;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    border-radius: 16px;
    position: relative;
    box-sizing: border-box;
    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.m3-stepper__step:hover[b-4yf4e08pre] {
    background-color: var(--m3-sys-color-surface-container-high);
}

.m3-stepper__step:focus-visible[b-4yf4e08pre] {
    outline: 2px solid var(--m3-sys-color-primary);
    outline-offset: 2px;
}

.m3-stepper__step--disabled[b-4yf4e08pre] {
    cursor: default;
    pointer-events: none;
    opacity: 0.38;
}

/* Step Circle Indicator */
.m3-stepper__circle-container[b-4yf4e08pre] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.m3-stepper__circle[b-4yf4e08pre] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    box-sizing: border-box;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Circle state variations */
.m3-stepper__step--future .m3-stepper__circle[b-4yf4e08pre] {
    border: 1px solid var(--m3-sys-color-outline);
    color: var(--m3-sys-color-outline);
    background-color: transparent;
}

.m3-stepper__step--active .m3-stepper__circle[b-4yf4e08pre] {
    background-color: var(--m3-sys-color-primary);
    color: var(--m3-sys-color-on-primary);
    border: 1px solid var(--m3-sys-color-primary);
}

.m3-stepper__step--completed .m3-stepper__circle[b-4yf4e08pre] {
    background-color: var(--m3-sys-color-primary-container);
    color: var(--m3-sys-color-on-primary-container);
    border: 1px solid var(--m3-sys-color-primary-container);
}

/* Hover ripple state layer inside circle */
.m3-stepper__circle-state-layer[b-4yf4e08pre] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.1s linear;
}

.m3-stepper__step:hover .m3-stepper__circle-state-layer[b-4yf4e08pre] {
    background-color: var(--m3-sys-color-on-surface);
    opacity: 0.08;
}

/* Step Text (Title, Supporting, Optional) */
.m3-stepper__text[b-4yf4e08pre] {
    display: flex;
    flex-direction: column;
}

.m3-stepper__title[b-4yf4e08pre] {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: var(--m3-sys-color-on-surface);
}

.m3-stepper__step--future .m3-stepper__title[b-4yf4e08pre] {
    color: var(--m3-sys-color-on-surface-variant);
}

.m3-stepper__description[b-4yf4e08pre] {
    font-size: 12px;
    line-height: 16px;
    color: var(--m3-sys-color-on-surface-variant);
}

.m3-stepper__optional[b-4yf4e08pre] {
    font-size: 11px;
    font-style: italic;
    color: var(--m3-sys-color-on-surface-variant);
    opacity: 0.8;
}

/* Connectors */
.m3-stepper__connector[b-4yf4e08pre] {
    background-color: var(--m3-sys-color-outline-variant);
    transition: background-color 0.2s;
    box-sizing: border-box;
}

.m3-stepper__header--horizontal .m3-stepper__connector[b-4yf4e08pre] {
    flex-grow: 1;
    height: 1px;
    margin: 0 16px;
    min-width: 32px;
}

.m3-stepper__header--vertical .m3-stepper__connector[b-4yf4e08pre] {
    width: 1px;
    height: 24px;
    margin-left: 32px; /* Centers connector line under the 32px circle (16px + padding offset) */
    margin-top: 4px;
    margin-bottom: 4px;
}

.m3-stepper__connector--active[b-4yf4e08pre] {
    background-color: var(--m3-sys-color-primary);
}

/* Stepper Content Area */
.m3-stepper__content-container[b-4yf4e08pre] {
    padding: 16px;
    border-radius: 12px;
    background-color: var(--m3-sys-color-surface-container-low);
    border: 1px solid var(--m3-sys-color-outline-variant);
    margin-bottom: 24px;
    box-sizing: border-box;
}

/* Stepper Navigation Actions Area */
.m3-stepper__actions[b-4yf4e08pre] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    box-sizing: border-box;
}
/* _content/Blazor.M3.Pro/Components/M3TimePicker.razor.rz.scp.css */
.m3-time-picker[b-k3ywyvp3z5] {
    display: flex;
    flex-direction: column;
    width: 330px;
    background-color: var(--m3-sys-color-surface-container-high);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-family: inherit;
}

.m3-time-picker-header[b-k3ywyvp3z5] {
    margin-bottom: 20px;
}

.m3-time-picker-title[b-k3ywyvp3z5] {
    font-size: 14px;
    font-weight: 500;
    color: var(--m3-sys-color-on-surface-variant);
    letter-spacing: 0.1px;
}

/* --- Display Section --- */
.m3-time-picker-display[b-k3ywyvp3z5] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    margin-bottom: 36px;
}

.m3-time-picker-time[b-k3ywyvp3z5] {
    display: flex;
    align-items: flex-start;
    background-color: transparent;
}

.m3-time-picker-time__block[b-k3ywyvp3z5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 80px;
    border-radius: 8px;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 57px;
    font-weight: 400;
    font-family: inherit;
    background-color: var(--m3-sys-color-surface-container-highest);
    color: var(--m3-sys-color-on-surface);
    transition: background-color 0.2s, color 0.2s;
}

.m3-time-picker-time__block--active[b-k3ywyvp3z5] {
    background-color: var(--m3-sys-color-primary-container);
    color: var(--m3-sys-color-on-primary-container);
}

.m3-time-picker-time__colon[b-k3ywyvp3z5] {
    font-size: 57px;
    font-weight: 400;
    margin: 0 4px;
    color: var(--m3-sys-color-on-surface);
    height: 80px;
    display: flex;
    align-items: center;
}

.m3-time-picker-ampm[b-k3ywyvp3z5] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--m3-sys-color-outline);
    border-radius: 8px;
    overflow: hidden;
}

.m3-time-picker-ampm__btn[b-k3ywyvp3z5] {
    width: 52px;
    height: 40px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--m3-sys-color-on-surface-variant);
}

.m3-time-picker-ampm__btn:first-child[b-k3ywyvp3z5] {
    border-bottom: 1px solid var(--m3-sys-color-outline);
}

.m3-time-picker-ampm__btn--active[b-k3ywyvp3z5] {
    background-color: var(--m3-sys-color-tertiary-container);
    color: var(--m3-sys-color-on-tertiary-container);
}

/* --- Body & Footer Layout --- */
.m3-time-picker-body[b-k3ywyvp3z5] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--m3-sys-motion-easing-emphasized);
    width: 100%;
}

.m3-time-picker-body--active[b-k3ywyvp3z5] {
    grid-template-rows: 1fr;
    margin-top: 36px; /* Spacing only when dial is visible */
}

.m3-time-picker-body-inner[b-k3ywyvp3z5] {
    overflow: hidden;
    display: flex;
    justify-content: center;
}

/* --- Dial Animation --- */
.m3-time-picker-dial[b-k3ywyvp3z5] {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 256px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.4s var(--m3-sys-motion-easing-emphasized);
}

.m3-time-picker-body--active .m3-time-picker-dial[b-k3ywyvp3z5] {
    opacity: 1;
    transform: scale(1);
}

.m3-time-picker-footer[b-k3ywyvp3z5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}

.m3-time-picker-actions[b-k3ywyvp3z5] {
    display: flex;
    gap: 8px;
}


.m3-time-picker-dial__face[b-k3ywyvp3z5] {
    position: relative;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    background-color: var(--m3-sys-color-surface-container-highest);
}

.m3-time-picker-dial__center-dot[b-k3ywyvp3z5] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--m3-sys-color-primary);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.m3-time-picker-dial__hand[b-k3ywyvp3z5] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 96px;
    transform-origin: bottom center;
    margin-top: -96px;
    margin-left: -1px;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.m3-time-picker-dial__hand-line[b-k3ywyvp3z5] {
    width: 2px;
    height: 100%;
    background-color: var(--m3-sys-color-primary);
}

.m3-time-picker-dial__hand-circle[b-k3ywyvp3z5] {
    position: absolute;
    top: -24px;
    left: -23px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--m3-sys-color-primary);
    opacity: 0;
}

.m3-time-picker-dial__number[b-k3ywyvp3z5] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
    color: var(--m3-sys-color-on-surface);
    transition: background-color 0.2s, color 0.2s;
    z-index: 3;
}

.m3-time-picker-dial__number--selected[b-k3ywyvp3z5] {
    background-color: var(--m3-sys-color-primary);
    color: var(--m3-sys-color-on-primary);
}

/* --- Input View Styling --- */
.m3-time-picker-input-view[b-k3ywyvp3z5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.m3-time-picker-input-view__inputs[b-k3ywyvp3z5] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.m3-time-field[b-k3ywyvp3z5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.m3-time-field__input[b-k3ywyvp3z5] {
    width: 96px;
    height: 80px;
    border-radius: 8px;
    border: none;
    background-color: var(--m3-sys-color-surface-container-highest);
    color: var(--m3-sys-color-on-surface);
    font-size: 57px;
    font-weight: 400;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.m3-time-field__input[b-k3ywyvp3z5]::-webkit-outer-spin-button,
.m3-time-field__input[b-k3ywyvp3z5]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.m3-time-field__label[b-k3ywyvp3z5] {
    font-size: 12px;
    font-weight: 500;
    color: var(--m3-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
}
/* _content/Blazor.M3.Pro/Components/M3TimePickerInput.razor.rz.scp.css */
.m3-picker-input[b-kbpcggtx9q] {
    position: relative;
    display: inline-block;
    width: 250px;
    outline: none;
}

/* Simulated Text Field */
.m3-picker-input-field[b-kbpcggtx9q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 56px;
    padding: 0 16px;
    border: 1px solid var(--m3-sys-color-outline);
    border-radius: 4px;
    /* Extralight radius for outlined text field */
    background-color: transparent;
    cursor: pointer;
    position: relative;
    transition: border-color 0.1s linear;
}

.m3-picker-input-field:hover[b-kbpcggtx9q] {
    border-color: var(--m3-sys-color-on-surface);
}

.m3-picker-input-field--active[b-kbpcggtx9q] {
    border-color: var(--m3-sys-color-primary);
    border-width: 2px;
    padding: 0 15px;
    /* adjust for border width */
}

.m3-picker-input-field__label[b-kbpcggtx9q] {
    position: absolute;
    top: 18px;
    /* Centered visually */
    left: 12px;
    padding: 0 4px;
    background-color: var(--m3-sys-color-background);
    color: var(--m3-sys-color-on-surface-variant);
    font-size: 16px;
    /* body-large */
    font-weight: 400;
    transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
    pointer-events: none;
}

/* Move label to top when active or populated */
.m3-picker-input-field--active .m3-picker-input-field__label[b-kbpcggtx9q],
.m3-picker-input-field__label--populated[b-kbpcggtx9q] {
    top: -8px;
    font-size: 12px;
    /* body-small */
    color: var(--m3-sys-color-primary);
}

.m3-picker-input-field__label--populated:not(.m3-picker-input-field--active .m3-picker-input-field__label)[b-kbpcggtx9q] {
    color: var(--m3-sys-color-on-surface-variant);
}

.m3-picker-input-field__text[b-kbpcggtx9q] {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    color: var(--m3-sys-color-on-surface);
    margin-top: 8px;
    /* Push down to clear space for floated label */
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-family: inherit;
}


.m3-picker-input-field__icon[b-kbpcggtx9q] {
    color: var(--m3-sys-color-on-surface-variant);
    font-size: 24px;
    flex-shrink: 0;
    margin-left: 12px;
}

.m3-picker-input-field--active .m3-picker-input-field__icon[b-kbpcggtx9q] {
    color: var(--m3-sys-color-primary);
}

/* Popup & Scrim */
.m3-picker-input-scrim[b-kbpcggtx9q] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    /* Match menu scrim */
    background: transparent;
}

.m3-picker-input-popup[b-kbpcggtx9q] {
    position: absolute;
    top: calc(100% + 4px);
    /* Dropdown below input */
    left: 0;
    z-index: 2001;
    /* Match menu panel */

    /* Animation (fade/slide down) */
    animation: m3-picker-popup-in-b-kbpcggtx9q 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes m3-picker-popup-in-b-kbpcggtx9q {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/Blazor.M3.Pro/Components/M3VerticalRangeSlider.razor.rz.scp.css */
.m3-slider-vertical[b-jt0ospb4b4] {
    --m3-slider-track-width: 4px;
    --m3-slider-handle-width: 44px;
    position: relative;
    height: 300px;
    width: var(--m3-slider-handle-width);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    user-select: none;
    touch-action: none;
}

/* Sizing Classes */
.m3-slider-vertical--extrasmall[b-jt0ospb4b4] { --m3-slider-track-width: 4px; --m3-slider-handle-width: 24px; }
.m3-slider-vertical--small[b-jt0ospb4b4]      { --m3-slider-track-width: 4px; --m3-slider-handle-width: 32px; }
.m3-slider-vertical--medium[b-jt0ospb4b4]     { --m3-slider-track-width: 40px; --m3-slider-handle-width: 44px; }
.m3-slider-vertical--large[b-jt0ospb4b4]      { --m3-slider-track-width: 56px; --m3-slider-handle-width: 60px; }
.m3-slider-vertical--extralarge[b-jt0ospb4b4] { --m3-slider-track-width: 96px; --m3-slider-handle-width: 100px; }

.m3-slider-vertical__track-container[b-jt0ospb4b4] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: var(--m3-slider-handle-width);
    pointer-events: none;
}

.m3-slider-vertical__track-container[b-jt0ospb4b4]::before,
.m3-slider-vertical__track-container[b-jt0ospb4b4]::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--m3-sys-color-outline);
    z-index: 1;
}

.m3-slider-vertical__track-container[b-jt0ospb4b4]::before {
    top: 4px;
}

.m3-slider-vertical__track-container[b-jt0ospb4b4]::after {
    bottom: 4px;
}

.m3-slider-vertical__segment[b-jt0ospb4b4] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: var(--m3-slider-track-width);
    border-radius: 999px;
    transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.m3-slider-vertical__segment--inactive[b-jt0ospb4b4] {
    background-color: var(--m3-sys-color-surface-container-highest);
}

.m3-slider-vertical__segment--active[b-jt0ospb4b4] {
    background-color: var(--m3-sys-color-primary);
}

.m3-slider-vertical__segment--active--first[b-jt0ospb4b4] {
    border-radius: 2px 2px 0 0 !important;
    background: var(--m3-sys-color-primary, #6750A4) !important;
    z-index: 5 !important;
}

.m3-slider-vertical__segment--active--last[b-jt0ospb4b4] {
    border-radius: 0 0 2px 2px !important;
    background: var(--m3-sys-color-primary, #6750A4) !important;
    z-index: 5 !important;
}

/* Rounding rules for vertical segments (Top-to-Bottom) */
.m3-slider-vertical__segment:first-child[b-jt0ospb4b4] {
    border-radius: 8px 8px 2px 2px !important; /* Top extreme end */
}

.m3-slider-vertical__segment:last-child[b-jt0ospb4b4] {
    border-radius: 2px 2px 8px 8px !important; /* Bottom extreme end */
}

.m3-slider-vertical__segment--active[b-jt0ospb4b4] {
    /* Middle parts keep minimal rounding to meet ends smoothly */
    border-radius: 2px; 
}

/* Native Input Styling (Modern Vertical Approach) */
.m3-slider-vertical__native-input[b-jt0ospb4b4] {
    -webkit-appearance: none;
    appearance: none;
    width: 48px;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    writing-mode: vertical-lr;
    direction: rtl; /* Puts 0 at the bottom */
    margin: 0;
    cursor: pointer;
    z-index: 2;
    pointer-events: auto;
}

.m3-slider-vertical__native-input:focus[b-jt0ospb4b4] {
    outline: none;
}

/* --- Webkit Thumb Styling --- */
.m3-slider-vertical__native-input[b-jt0ospb4b4]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--m3-slider-handle-width);
    height: 4px;
    border-radius: 2px;
    background-color: var(--m3-sys-color-primary);
    transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 0 0 0 var(--m3-sys-color-primary);
    pointer-events: auto;
}

.m3-slider-vertical:hover .m3-slider--active[b-jt0ospb4b4]::-webkit-slider-thumb,
.m3-slider--active:active[b-jt0ospb4b4]::-webkit-slider-thumb,
.m3-slider--active:focus[b-jt0ospb4b4]::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--m3-sys-color-primary) 12%, transparent);
}

.m3-slider-vertical:hover .m3-slider--active[b-jt0ospb4b4]::-moz-range-thumb,
.m3-slider--active:active[b-jt0ospb4b4]::-moz-range-thumb,
.m3-slider--active:focus[b-jt0ospb4b4]::-moz-range-thumb {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--m3-sys-color-primary) 12%, transparent);
}

.m3-slider-vertical__native-input[b-jt0ospb4b4]::-moz-range-thumb {
    width: var(--m3-slider-handle-width);
    height: 4px;
    border-radius: 2px;
    background-color: var(--m3-sys-color-primary);
    border: none;
    pointer-events: auto;
    transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.m3-slider-vertical--disabled[b-jt0ospb4b4] {
    opacity: 0.38;
}

/* Active/Ghost states are managed by blazor-m3.js proximity logic */
.m3-slider--active[b-jt0ospb4b4] {
    z-index: 3 !important;
    pointer-events: auto !important;
}
/* _content/Blazor.M3.Pro/Components/M3VerticalSlider.razor.rz.scp.css */
.m3-slider-vertical[b-64ecjfscza] {
    --m3-slider-track-width: 4px;
    --m3-slider-handle-width: 44px;
    position: relative;
    height: 300px;
    width: var(--m3-slider-handle-width);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    user-select: none;
}

/* Sizing Classes */
.m3-slider-vertical--extrasmall[b-64ecjfscza] { --m3-slider-track-width: 4px; --m3-slider-handle-width: 24px; }
.m3-slider-vertical--small[b-64ecjfscza]      { --m3-slider-track-width: 4px; --m3-slider-handle-width: 32px; }
.m3-slider-vertical--medium[b-64ecjfscza]     { --m3-slider-track-width: 40px; --m3-slider-handle-width: 44px; }
.m3-slider-vertical--large[b-64ecjfscza]      { --m3-slider-track-width: 56px; --m3-slider-handle-width: 60px; }
.m3-slider-vertical--extralarge[b-64ecjfscza] { --m3-slider-track-width: 96px; --m3-slider-handle-width: 100px; }

.m3-slider-vertical__track-container[b-64ecjfscza] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: var(--m3-slider-handle-width);
    pointer-events: none;
}

.m3-slider-vertical__track-container[b-64ecjfscza]::before,
.m3-slider-vertical__track-container[b-64ecjfscza]::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--m3-sys-color-outline);
    z-index: 1;
}

.m3-slider-vertical__track-container[b-64ecjfscza]::before {
    top: 4px;
}

.m3-slider-vertical__track-container[b-64ecjfscza]::after {
    bottom: 4px;
}

.m3-slider-vertical__segment[b-64ecjfscza] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: var(--m3-slider-track-width);
    border-radius: 999px;
    transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.m3-slider-vertical__segment--inactive[b-64ecjfscza] {
    background-color: var(--m3-sys-color-surface-container-highest);
}

.m3-slider-vertical__segment--active[b-64ecjfscza] {
    background-color: var(--m3-sys-color-primary);
}

/* Rounding rules for vertical segments (Top-to-Bottom) */
.m3-slider-vertical__segment:first-child[b-64ecjfscza] {
    border-radius: 8px 8px 2px 2px !important; /* Top extreme end */
}

.m3-slider-vertical__segment:last-child[b-64ecjfscza] {
    border-radius: 2px 2px 8px 8px !important; /* Bottom extreme end */
}

.m3-slider-vertical__segment--active[b-64ecjfscza] {
    /* Middle parts keep minimal rounding to meet ends smoothly */
    border-radius: 2px; 
}

/* Native Input Styling (Modern Vertical Approach) */
.m3-slider-vertical__native-input[b-64ecjfscza] {
    -webkit-appearance: none;
    appearance: none;
    width: 48px;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    writing-mode: vertical-lr;
    direction: rtl; /* Puts 0 at the bottom */
    margin: 0;
    cursor: pointer;
    z-index: 2;
    pointer-events: auto;
}

.m3-slider-vertical__native-input:focus[b-64ecjfscza] {
    outline: none;
}

/* --- Webkit Thumb Styling --- */
.m3-slider-vertical__native-input[b-64ecjfscza]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--m3-slider-handle-width);
    height: 4px;
    border-radius: 2px;
    background-color: var(--m3-sys-color-primary);
    transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 0 0 0 var(--m3-sys-color-primary);
    pointer-events: auto;
}

.m3-slider-vertical:hover .m3-slider-vertical__native-input[b-64ecjfscza]::-webkit-slider-thumb,
.m3-slider-vertical__native-input:active[b-64ecjfscza]::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--m3-sys-color-primary) 12%, transparent);
}

/* --- Firefox Thumb Styling --- */
.m3-slider-vertical__native-input[b-64ecjfscza]::-moz-range-thumb {
    width: var(--m3-slider-handle-width);
    height: 4px;
    border-radius: 2px;
    background-color: var(--m3-sys-color-primary);
    border: none;
    pointer-events: auto;
    transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.m3-slider-vertical:hover .m3-slider-vertical__native-input[b-64ecjfscza]::-moz-range-thumb,
.m3-slider-vertical__native-input:active[b-64ecjfscza]::-moz-range-thumb {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--m3-sys-color-primary) 12%, transparent);
}

.m3-slider-vertical--disabled[b-64ecjfscza] {
    opacity: 0.38;
    pointer-events: none;
}