@import '_content/BlazorDateRangePicker/BlazorDateRangePicker.iitr8bszy4.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/Blazorise.RichTextEdit/Blazorise.RichTextEdit.ujcws5bfym.bundle.scp.css';
@import '_content/PGMS.BlazorComponents/PGMS.BlazorComponents.bx4gkdwcdf.bundle.scp.css';
@import '_content/Zaddons.BlazorComponents/Zaddons.BlazorComponents.yn2thabq71.bundle.scp.css';

/* _content/ScheduleCompass.Blazor/Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
.admin-dashboard-container[b-j6bixhyf9o] {
    padding: 0;
}

.page-header[b-j6bixhyf9o] {
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.page-title[b-j6bixhyf9o] {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.page-subtitle[b-j6bixhyf9o] {
    font-size: 14px;
    color: #2196F3;
    margin: 4px 0 0 0;
}

.tab-placeholder[b-j6bixhyf9o] {
    padding: 24px;
    color: #666;
}

.header[b-j6bixhyf9o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.header-title[b-j6bixhyf9o] {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.header-btn[b-j6bixhyf9o] {
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-btn:hover[b-j6bixhyf9o] {
    background-color: #f5f5f5;
}

.setup-section[b-j6bixhyf9o] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.section-header[b-j6bixhyf9o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.section-number[b-j6bixhyf9o] {
    width: 32px;
    height: 32px;
    background-color: #2196F3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title[b-j6bixhyf9o] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.section-body[b-j6bixhyf9o] {
    padding: 24px;
}

.form-label[b-j6bixhyf9o] {
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.form-control[b-j6bixhyf9o] {
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 14px;
}

.form-control:focus[b-j6bixhyf9o] {
    border-color: #2196F3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

/* _content/ScheduleCompass.Blazor/Components/Pages/Admin/GlobalSetup.razor.rz.scp.css */
.global-setup-container[b-sicrs6a07n] {
    padding: 24px;
    max-width: 1200px;
}

.setup-step[b-sicrs6a07n] {
    background-color: var(--N0, #ffffff);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.step-header[b-sicrs6a07n] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.step-number[b-sicrs6a07n] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--B100, #e3f2fd);
    color: var(--B600, #1976d2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

.step-title[b-sicrs6a07n] {
    font-size: 18px;
    font-weight: 600;
    color: var(--N900, #1a1a1a);
    margin: 0;
    line-height: 40px;
}

.step-description[b-sicrs6a07n] {
    font-size: 14px;
    font-weight: 400;
    color: var(--N600, #666666);
    margin: 0 0 16px 0;
    padding-left: 56px;
}

.step-body[b-sicrs6a07n] {
    padding-left: 56px;
}

.toggle-row[b-sicrs6a07n] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toggle-wrapper[b-sicrs6a07n] {
    flex-shrink: 0;
}

.info-section[b-sicrs6a07n] {
    display: flex;
    align-items: center;
}

.info-icon[b-sicrs6a07n] {
    font-size: 20px;
    color: var(--N900, #1a1a1a);
    cursor: help;
}

.preference-row[b-sicrs6a07n] {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.preference-row:last-child[b-sicrs6a07n] {
    margin-bottom: 0;
}

.preference-label-section[b-sicrs6a07n] {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 250px;
}

.preference-label[b-sicrs6a07n] {
    font-size: 14px;
    font-weight: 500;
    color: var(--N900, #1a1a1a);
    margin: 0;
}

.preference-input[b-sicrs6a07n] {
    flex: 1;
    max-width: 350px;
}

.path-length-input[b-sicrs6a07n] {
    width: 100px;
    padding: 8px 12px;
    border: 1px solid var(--N300, #d1d1d1);
    border-radius: 4px;
    font-size: 14px;
}

.shift-display-select[b-sicrs6a07n] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--N300, #d1d1d1);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--N0, #ffffff);
}

.setup--margin-top-section[b-sicrs6a07n] {
    margin-top: 24px;
    padding-left: 56px;
}

@media (max-width: 1200px) {
    .global-setup-container[b-sicrs6a07n] {
        padding: 16px;
    }

    .setup-step[b-sicrs6a07n] {
        padding: 16px;
        margin-bottom: 16px;
    }

    .step-description[b-sicrs6a07n],
    .step-body[b-sicrs6a07n],
    .setup--margin-top-section[b-sicrs6a07n] {
        padding-left: 0;
    }

    .preference-row[b-sicrs6a07n] {
        gap: 16px;
        margin-bottom: 16px;
    }

    .preference-label-section[b-sicrs6a07n] {
        min-width: 200px;
    }

    .preference-input[b-sicrs6a07n] {
        max-width: 320px;
    }
}

@media (max-width: 992px) {
    .global-setup-container[b-sicrs6a07n] {
        padding: 12px;
    }

    .setup-step[b-sicrs6a07n] {
        padding: 12px;
    }

    .preference-row[b-sicrs6a07n] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .preference-label-section[b-sicrs6a07n] {
        min-width: 0;
        flex: 1 1 100%;
    }

    .preference-input[b-sicrs6a07n] {
        max-width: none;
        flex: 1 1 100%;
    }
}

/* _content/ScheduleCompass.Blazor/Components/Pages/Admin/Tabs/ScheduleCompassSetups/ActionForms/CreateScheduleCompassSetup.razor.rz.scp.css */
.setup-container[b-520n7pgqjz] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.setup-section[b-520n7pgqjz] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.section-header[b-520n7pgqjz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.section-number[b-520n7pgqjz] {
    width: 28px;
    height: 28px;
    background-color: #4169E1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.section-title[b-520n7pgqjz] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.section-body[b-520n7pgqjz] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Floating label styles */
.form-floating[b-520n7pgqjz] {
    position: relative;
}

.form-floating > .form-control[b-520n7pgqjz] {
    height: 56px;
    padding: 16px 12px 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}

.form-floating > .textarea-control[b-520n7pgqjz] {
    height: auto;
    min-height: 100px;
    padding-top: 24px;
}

.form-floating > label[b-520n7pgqjz] {
    position: absolute;
    top: 0;
    left: 12px;
    padding: 0 4px;
    font-size: 12px;
    color: #666;
    background-color: white;
    transform: translateY(-50%);
    pointer-events: none;
}

.form-control:focus[b-520n7pgqjz] {
    border-color: #4169E1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(65, 105, 225, 0.1);
}

.helper-text[b-520n7pgqjz] {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.info-icon[b-520n7pgqjz] {
    font-size: 18px;
    color: #1a1a1a;
    cursor: help;
    margin-left: 6px;
}

.field-label-with-icon[b-520n7pgqjz] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: var(--N700);
    font-weight: 500;
}

/* Step 4 - Subsection and spacing styles */
.subsection-label[b-520n7pgqjz] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.setup--margin-top-selector[b-520n7pgqjz] {
    margin-top: 12px;
}

.setup--margin-top-section[b-520n7pgqjz] {
    margin-top: 24px;
}

.transfer-list--label[b-520n7pgqjz] {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
    display: block;
}

/* Toggle with info icon */
.toggle-with-icon[b-520n7pgqjz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-with-icon__content[b-520n7pgqjz]  label {
    margin-top: 0;
}

@media (max-width: 1200px) {
    .setup-container[b-520n7pgqjz] {
        padding: 16px;
        gap: 16px;
    }

    .section-header[b-520n7pgqjz] {
        padding: 12px 16px;
    }

    .section-body[b-520n7pgqjz] {
        padding: 16px;
    }

    .setup--margin-top-section[b-520n7pgqjz] {
        margin-top: 16px;
    }
}

@media (max-width: 992px) {
    .setup-container[b-520n7pgqjz] {
        padding: 12px;
        gap: 12px;
    }

    .section-header[b-520n7pgqjz] {
        padding: 10px 12px;
    }

    .section-body[b-520n7pgqjz] {
        padding: 12px;
    }

    .form-floating > .form-control[b-520n7pgqjz] {
        height: 52px;
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Admin/Tabs/ScheduleCompassSetups/ActionForms/DuplicateScheduleCompassSetup.razor.rz.scp.css */
.setup-container[b-ixeopxlxil] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.setup-section[b-ixeopxlxil] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.section-header[b-ixeopxlxil] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.section-number[b-ixeopxlxil] {
    width: 28px;
    height: 28px;
    background-color: #4169E1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.section-title[b-ixeopxlxil] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.section-body[b-ixeopxlxil] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Floating label styles */
.form-floating[b-ixeopxlxil] {
    position: relative;
}

.form-floating > .form-control[b-ixeopxlxil] {
    height: 56px;
    padding: 16px 12px 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}

.form-floating > .textarea-control[b-ixeopxlxil] {
    height: auto;
    min-height: 100px;
    padding-top: 24px;
}

.form-floating > label[b-ixeopxlxil] {
    position: absolute;
    top: 0;
    left: 12px;
    padding: 0 4px;
    font-size: 12px;
    color: #666;
    background-color: white;
    transform: translateY(-50%);
    pointer-events: none;
}

.form-control:focus[b-ixeopxlxil] {
    border-color: #4169E1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(65, 105, 225, 0.1);
}

.helper-text[b-ixeopxlxil] {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.info-icon[b-ixeopxlxil] {
    font-size: 18px;
    color: #1a1a1a;
    cursor: help;
    margin-left: 6px;
}

.field-label-with-icon[b-ixeopxlxil] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: var(--N700);
    font-weight: 500;
}

.access-profile-field[b-ixeopxlxil] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.access-profile-dropdown[b-ixeopxlxil] {
    flex: 1;
    min-width: 0;
}

.warning-icon[b-ixeopxlxil] {
    font-size: 22px;
    color: var(--O400);
    cursor: help;
    flex-shrink: 0;
}

.access-profile-field--warning[b-ixeopxlxil]  .dropdown-select {
    border-color: var(--R400);
}

.access-profile-warning-message[b-ixeopxlxil] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--R400);
}

/* Step 4 - Subsection and spacing styles */
.subsection-label[b-ixeopxlxil] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.setup--margin-top-selector[b-ixeopxlxil] {
    margin-top: 12px;
}

.setup--margin-top-section[b-ixeopxlxil] {
    margin-top: 24px;
}

.transfer-list--label[b-ixeopxlxil] {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
    display: block;
}

/* Toggle with info icon */
.toggle-with-icon[b-ixeopxlxil] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-with-icon__content[b-ixeopxlxil]  label {
    margin-top: 0;
}

@media (max-width: 1200px) {
    .setup-container[b-ixeopxlxil] {
        padding: 16px;
        gap: 16px;
    }

    .section-header[b-ixeopxlxil] {
        padding: 12px 16px;
    }

    .section-body[b-ixeopxlxil] {
        padding: 16px;
    }

    .setup--margin-top-section[b-ixeopxlxil] {
        margin-top: 16px;
    }
}

@media (max-width: 992px) {
    .setup-container[b-ixeopxlxil] {
        padding: 12px;
        gap: 12px;
    }

    .section-header[b-ixeopxlxil] {
        padding: 10px 12px;
    }

    .section-body[b-ixeopxlxil] {
        padding: 12px;
    }

    .form-floating > .form-control[b-ixeopxlxil] {
        height: 52px;
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Admin/Tabs/ScheduleCompassSetups/ActionForms/UpdateScheduleCompassSetup.razor.rz.scp.css */
.setup-container[b-ozgsclnv17] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.setup-section[b-ozgsclnv17] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.section-header[b-ozgsclnv17] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.section-number[b-ozgsclnv17] {
    width: 28px;
    height: 28px;
    background-color: #4169E1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.section-title[b-ozgsclnv17] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.section-body[b-ozgsclnv17] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Floating label styles */
.form-floating[b-ozgsclnv17] {
    position: relative;
}

.form-floating > .form-control[b-ozgsclnv17] {
    height: 56px;
    padding: 16px 12px 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}

.form-floating > .textarea-control[b-ozgsclnv17] {
    height: auto;
    min-height: 100px;
    padding-top: 24px;
}

.form-floating > label[b-ozgsclnv17] {
    position: absolute;
    top: 0;
    left: 12px;
    padding: 0 4px;
    font-size: 12px;
    color: #666;
    background-color: white;
    transform: translateY(-50%);
    pointer-events: none;
}

.form-control:focus[b-ozgsclnv17] {
    border-color: #4169E1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(65, 105, 225, 0.1);
}

.helper-text[b-ozgsclnv17] {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.info-icon[b-ozgsclnv17] {
    font-size: 18px;
    color: #1a1a1a;
    cursor: help;
    margin-left: 6px;
}

.field-label-with-icon[b-ozgsclnv17] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: var(--N700);
    font-weight: 500;
}

.access-profile-field[b-ozgsclnv17] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.access-profile-dropdown[b-ozgsclnv17] {
    flex: 1;
    min-width: 0;
}

.warning-icon[b-ozgsclnv17] {
    font-size: 22px;
    color: var(--O400);
    cursor: help;
    flex-shrink: 0;
}

.access-profile-field--warning[b-ozgsclnv17]  .dropdown-select {
    border-color: var(--R400);
}

.access-profile-warning-message[b-ozgsclnv17] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--R400);
}

/* Step 4 - Subsection and spacing styles */
.subsection-label[b-ozgsclnv17] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.setup--margin-top-selector[b-ozgsclnv17] {
    margin-top: 12px;
}

.setup--margin-top-section[b-ozgsclnv17] {
    margin-top: 24px;
}

.transfer-list--label[b-ozgsclnv17] {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
    display: block;
}

/* Toggle with info icon */
.toggle-with-icon[b-ozgsclnv17] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-with-icon__content[b-ozgsclnv17]  label {
    margin-top: 0;
}

.setup-active-checkBox[b-ozgsclnv17] {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

.setup-active-checkBox input[type="checkbox"][b-ozgsclnv17] {
    accent-color: var(--B400);
}

.setup-active-text[b-ozgsclnv17] {
    margin: 0 10px;
}

@media (max-width: 1200px) {
    .setup-container[b-ozgsclnv17] {
        padding: 16px;
        gap: 16px;
    }

    .section-header[b-ozgsclnv17] {
        padding: 12px 16px;
    }

    .section-body[b-ozgsclnv17] {
        padding: 16px;
    }

    .setup--margin-top-section[b-ozgsclnv17] {
        margin-top: 16px;
    }
}

@media (max-width: 992px) {
    .setup-container[b-ozgsclnv17] {
        padding: 12px;
        gap: 12px;
    }

    .section-header[b-ozgsclnv17] {
        padding: 10px 12px;
    }

    .section-body[b-ozgsclnv17] {
        padding: 12px;
    }

    .form-floating > .form-control[b-ozgsclnv17] {
        height: 52px;
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/Preferences/ManagerPreferencesSidePanel.razor.rz.scp.css */
/* ===== PANEL HOST ===== */
.si-pref-panel-host[b-hrw6luqat3]  aside.sp-sm {
    width: 320px !important;
}

/* ===== HEADER ===== */
.pref-header[b-hrw6luqat3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 8px;
    width: 100%;
    height: 64px;
    box-sizing: border-box;
}

.pref-header-close[b-hrw6luqat3] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
}

.pref-header-close:hover[b-hrw6luqat3] {
    background: #F4F5F9;
}

.pref-header-close-icon[b-hrw6luqat3] {
    font-size: 16px;
    color: #696F8C;
}

.pref-header-title[b-hrw6luqat3] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #001233;
}

/* ===== BODY ===== */
.pref-body[b-hrw6luqat3] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 24px 16px 80px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}

.pref-content[b-hrw6luqat3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    border-radius: 6px;
}

/* ===== PREFERENCE ITEM ===== */
.pref-item[b-hrw6luqat3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pref-item-header[b-hrw6luqat3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pref-item-title[b-hrw6luqat3] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #001233;
}

.pref-item-desc[b-hrw6luqat3] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #8F95B2;
}

.pref-item-list[b-hrw6luqat3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== SEPARATOR ===== */
.pref-sep[b-hrw6luqat3] {
    padding: 8px 0;
}

.pref-sep-line[b-hrw6luqat3] {
    height: 1px;
    background: #E6E8F0;
}

/* ===== SELECT / DROPDOWN ===== */
.pref-select[b-hrw6luqat3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 6px 6px 12px;
    gap: 8px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
}

.pref-select-value[b-hrw6luqat3] {
    flex: 1;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #33415C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pref-select-arrow[b-hrw6luqat3] {
    font-size: 20px;
    color: #696F8C;
}

/* ===== CUSTOM DROPDOWN ===== */
.pref-dropdown[b-hrw6luqat3] {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #EDEFF5;
    box-shadow: 0px 4px 8px rgba(16, 24, 64, 0.08);
    border-radius: 6px;
    z-index: 10;
    padding: 8px 0 0;
    box-sizing: border-box;
}

.pref-dropdown-scroll[b-hrw6luqat3] {
    max-height: 216px;
    overflow-y: auto;
    padding-bottom: 8px;
}

.pref-dropdown-row[b-hrw6luqat3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
    height: 40px;
    background: #FFFFFF;
    cursor: pointer;
    box-sizing: border-box;
}

.pref-dropdown-row:hover[b-hrw6luqat3] {
    background: #F3F6FF;
}

.pref-dropdown-label[b-hrw6luqat3] {
    flex: 1;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #33415C;
}

.pref-dropdown-label--selected[b-hrw6luqat3] {
    color: #3366FF;
}

.pref-dropdown-check[b-hrw6luqat3] {
    font-size: 16px;
    color: #3366FF;
}

.pref-dropdown-check--hidden[b-hrw6luqat3] {
    opacity: 0;
}

/* ===== DISABLED SCAFFOLD ===== */
.pref-disabled[b-hrw6luqat3] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== SEARCH INPUT ===== */
.pref-input-search[b-hrw6luqat3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 6px 6px 12px;
    gap: 8px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    box-sizing: border-box;
}

.pref-input-search-icon[b-hrw6luqat3] {
    font-size: 16px;
    color: #696F8C;
}

.pref-input-placeholder[b-hrw6luqat3] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #8F95B2;
}

/* ===== RADIO CARD LIST ===== */
.pref-radio-list[b-hrw6luqat3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pref-radio-card[b-hrw6luqat3] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
}

.pref-radio-card--selected[b-hrw6luqat3] {
    background: #F3F6FF;
    border-color: #3366FF;
}

.pref-radio[b-hrw6luqat3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    background: #FFFFFF;
    border: 2px solid #D8DAE5;
    border-radius: 8px;
    box-sizing: border-box;
}

.pref-radio--selected[b-hrw6luqat3] {
    background: #3366FF;
    border-color: #3366FF;
}

.pref-radio-dot[b-hrw6luqat3] {
    width: 8px;
    height: 8px;
    background: #FFFFFF;
    border-radius: 4px;
}

.pref-radio-label[b-hrw6luqat3] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #33415C;
}

/* ===== TOGGLE LIST ===== */
.pref-toggle-list[b-hrw6luqat3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pref-toggle-row[b-hrw6luqat3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.pref-toggle-label[b-hrw6luqat3] {
    flex: 1;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #33415C;
}

.pref-toggle[b-hrw6luqat3] {
    position: relative;
    width: 32px;
    height: 20px;
    min-width: 32px;
    background: #D8DAE5;
    border: 1px solid #D8DAE5;
    border-radius: 10px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s;
}

.pref-toggle--on[b-hrw6luqat3] {
    background: #3366FF;
    border-color: #3366FF;
}

.pref-toggle-knob[b-hrw6luqat3] {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 1px;
    left: 1px;
    background: #FFFFFF;
    border-radius: 8px;
    transition: left 0.15s;
}

.pref-toggle--on .pref-toggle-knob[b-hrw6luqat3] {
    left: 13px;
}

/* ===== FOOTER ===== */
.pref-footer[b-hrw6luqat3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 24px;
    width: 100%;
    height: 64px;
    box-sizing: border-box;
}

.pref-footer-left[b-hrw6luqat3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.pref-footer-right[b-hrw6luqat3] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    gap: 4px;
}

.pref-btn-cancel[b-hrw6luqat3] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #33415C;
    box-sizing: border-box;
}

.pref-btn-cancel:hover[b-hrw6luqat3] {
    background: #F9FAFC;
}

.pref-btn-save[b-hrw6luqat3] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    height: 32px;
    background: #3366FF;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
    box-sizing: border-box;
    white-space: nowrap;
}

.pref-btn-save:hover[b-hrw6luqat3] {
    background: #2952CC;
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/AddCommentSidePanel.razor.rz.scp.css */
/* AddCommentSidePanel — pixel-perfect from Figma node 9529:513610 (SidePanel.AddComment) */

/* bug-6651 polish: AddComment side panel matches the 400px ShiftDayDetailPanel width.
   The lib renders <aside class="sp-sm"> at 350px by default; the wrapper carries our
   scope attribute so this rule compiles to `.si-comment-panel-host[b-scope] aside.sp-sm`.
   ::deep MUST come AFTER the host class — see ShiftDayDetailPanel.razor.css for the
   detailed rationale. */
.si-comment-panel-host[b-7cqgjnaali]  aside.sp-sm {
    width: 400px !important;
}

@media (max-width: 1200px) {
    .si-comment-panel-host[b-7cqgjnaali]  aside.sp-sm {
        width: 360px !important;
    }
}

@media (max-width: 992px) {
    .si-comment-panel-host[b-7cqgjnaali]  aside.sp-sm {
        width: 320px !important;
    }
}

/* ===== HEADER ===== */
/* Header: 64px, white bg, bottom border — matches SidePanel.Header pattern */
.si-comment-panel-header[b-7cqgjnaali] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #EDEFF5;
    min-height: 64px;
    box-sizing: border-box;
}

/* Close button: 32x32 target area, centered icon */
.si-comment-panel-close[b-7cqgjnaali] {
    background: none;
    border: none;
    cursor: pointer;
    color: #696F8C;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.si-comment-panel-close:hover[b-7cqgjnaali] {
    background-color: #F9FAFC;
}

.si-comment-panel-close .material-icons[b-7cqgjnaali] {
    font-size: 16px;
}

/* Title: "Add Comment" — 16px Semibold #001233 */
.si-comment-panel-title[b-7cqgjnaali] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.si-comment-panel-title-text[b-7cqgjnaali] {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #001233;
    white-space: nowrap;
}

/* ===== EMPLOYEE IDENTITY BAR ===== */
/* Second header row: employee name + ID + "..." menu — white bg, bottom border */
.si-comment-panel-identity[b-7cqgjnaali] {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #EDEFF5;
    min-height: 64px;
    box-sizing: border-box;
}

.si-comment-panel-identity-info[b-7cqgjnaali] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    min-width: 0;
    padding: 0 8px;
}

/* Employee name — 14px Bold #001233 */
.si-comment-panel-identity-name[b-7cqgjnaali] {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: #001233;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "ID : 514658" — 14px Regular #696F8C */
.si-comment-panel-identity-id[b-7cqgjnaali] {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #696F8C;
}

/* "..." menu button */
.si-comment-panel-identity-menu[b-7cqgjnaali] {
    background: none;
    border: none;
    cursor: pointer;
    color: #696F8C;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0px 1px 1px 0px rgba(16, 24, 64, 0.04);
}

.si-comment-panel-identity-menu:hover[b-7cqgjnaali] {
    background-color: #F9FAFC;
}

.si-comment-panel-identity-menu .material-icons[b-7cqgjnaali] {
    font-size: 16px;
}

/* ===== SCROLLABLE BODY ===== */
/* Body: #F9FAFC background, scrollable */
.si-comment-panel-body[b-7cqgjnaali] {
    padding: 16px 16px 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #F9FAFC;
    min-height: 100%;
    overflow-y: auto;
}

/* Section container */
.si-comment-panel-section[b-7cqgjnaali] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== SHIFT DETAILS CARD ===== */
/* Card: white bg, border, rounded — matches existing card pattern */
.si-comment-panel-card[b-7cqgjnaali] {
    background: #FFFFFF;
    border: 1px solid #E6E8F0;
    border-radius: 8px;
    overflow: hidden;
}

/* Shift details area: padding 16px */
.si-comment-panel-shift-details[b-7cqgjnaali] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

/* Badge row */
.si-comment-panel-badges[b-7cqgjnaali] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Shift badge — 12px Medium, rounded */
.si-comment-panel-badge[b-7cqgjnaali] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    text-align: center;
    white-space: nowrap;
}

/* Shift badge: blue */
.si-comment-panel-badge-shift[b-7cqgjnaali] {
    background-color: #EBF0FF;
    color: #2952CC;
}

/* Paycode badge: green */
.si-comment-panel-badge-paycode[b-7cqgjnaali] {
    background-color: #DCF2EA;
    color: #317159;
}

/* Open Shift badge: red */
.si-comment-panel-badge-openshift[b-7cqgjnaali] {
    background-color: #FFDCE5;
    color: #A73636;
}

/* Shift date/time/location */
.si-comment-panel-shift-header[b-7cqgjnaali] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Date — 12px Regular #696F8C */
.si-comment-panel-shift-date[b-7cqgjnaali] {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #696F8C;
}

/* Time row: time text + transfer icon */
.si-comment-panel-shift-time-row[b-7cqgjnaali] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Time — 16px Bold #001233 */
.si-comment-panel-shift-time[b-7cqgjnaali] {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #001233;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Transfer icon */
.si-comment-panel-transfer-icon[b-7cqgjnaali] {
    font-size: 20px;
    color: #696F8C;
}

/* Location path — 12px Regular #696F8C */
.si-comment-panel-shift-location[b-7cqgjnaali] {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #696F8C;
}

/* ===== DASHED DIVIDER ===== */
/* Dashed border between shift details and form — matches Figma Shift.Details.Card bottom border */
.si-comment-panel-divider[b-7cqgjnaali] {
    border-bottom: 1px dashed #E6E8F0;
    margin: 0 16px;
}

/* ===== FORM AREA ===== */
/* Comment tag dropdown + Notes — padding 16px, gap 24px between groups */
.si-comment-panel-form[b-7cqgjnaali] {
    display: flex;
    flex-direction: column;
    /* Bug #6436 polish: 32px gap (au lieu de 24px) pour empecher le floating
       label "Comment" du DropdownSelect de chevaucher le label "Notes". */
    gap: 32px;
    padding: 16px;
}

/* Field group wrapper */
.si-comment-panel-field-group[b-7cqgjnaali] {
    display: flex;
    align-items: flex-start;
}

/* Input group: label + input */
.si-comment-panel-input-group[b-7cqgjnaali] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 8px;
    max-width: 240px;
    min-width: 0;
}

/* Input header */
.si-comment-panel-input-header[b-7cqgjnaali] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Label — 14px Semibold #33415C */
.si-comment-panel-input-label[b-7cqgjnaali] {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
}

/* DropdownSelect styling is handled by the shared component */

/* ===== NOTES SECTION ===== */
.si-comment-panel-notes-section[b-7cqgjnaali] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Notes list */
.si-comment-panel-notes-list[b-7cqgjnaali] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Single note row: input + delete button */
.si-comment-panel-note[b-7cqgjnaali] {
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

/* Note input wrapper (may include max-chars warning) */
.si-comment-panel-note-input-wrapper[b-7cqgjnaali] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Note input — 32px height, border, rounded */
.si-comment-panel-note-input[b-7cqgjnaali] {
    width: 100%;
    height: 32px;
    padding: 6px 12px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #33415C;
    box-sizing: border-box;
}

.si-comment-panel-note-input:focus[b-7cqgjnaali] {
    outline: none;
    border-color: #3366FF;
    box-shadow: 0 0 0 1px #3366FF;
}

/* Placeholder input — lighter text */
.si-comment-panel-note-placeholder[b-7cqgjnaali]::placeholder {
    color: #8F95B2;
    font-weight: 500;
}

/* Note textarea — auto-expanding, matches input styling */
.si-comment-panel-note-textarea[b-7cqgjnaali] {
    width: 100%;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #33415C;
    box-sizing: border-box;
    resize: vertical;
    min-height: 32px;
    font-family: inherit;
}

.si-comment-panel-note-textarea:focus[b-7cqgjnaali] {
    outline: none;
    border-color: #3366FF;
    box-shadow: 0 0 0 1px #3366FF;
}

/* Max characters warning — 10px Regular #A73636 (Red/500) */
.si-comment-panel-note-maxchars[b-7cqgjnaali] {
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    color: #A73636;
}

/* Note delete button — 32x32 target area, trash icon */
.si-comment-panel-note-delete[b-7cqgjnaali] {
    background: none;
    border: none;
    cursor: pointer;
    color: #696F8C;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.si-comment-panel-note-delete:hover[b-7cqgjnaali] {
    background-color: #F9FAFC;
    color: #A73636;
}

.si-comment-panel-note-delete .material-icons-outlined[b-7cqgjnaali] {
    font-size: 16px;
}

/* Invisible spacer to maintain alignment when no delete button */
.si-comment-panel-note-delete-spacer[b-7cqgjnaali] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* ===== DELETE COMMENT BUTTON ===== */
.si-comment-panel-delete-section[b-7cqgjnaali] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 24px;
}

.si-comment-panel-delete-btn[b-7cqgjnaali] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
    text-align: center;
}

.si-comment-panel-delete-btn:hover[b-7cqgjnaali] {
    background-color: #FFDCE5;
    color: #A73636;
}

.si-comment-panel-delete-btn .material-icons-outlined[b-7cqgjnaali] {
    font-size: 16px;
}

/* ===== ERROR MESSAGE ===== */
.si-comment-panel-error[b-7cqgjnaali] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #FFF8F7;
    border: 1px solid #FFD4D4;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #A73636;
}

.si-comment-panel-error .material-icons-outlined[b-7cqgjnaali] {
    font-size: 16px;
    flex-shrink: 0;
}

/* ===== FOOTER ===== */
/* Footer: 64px, white bg, top border — matches SidePanel.Footer pattern */
.si-comment-panel-footer[b-7cqgjnaali] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

.si-comment-panel-footer-left[b-7cqgjnaali] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.si-comment-panel-footer-right[b-7cqgjnaali] {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

/* Cancel button — outlined style */
.si-comment-panel-btn-cancel[b-7cqgjnaali] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
    text-align: center;
    white-space: nowrap;
}

.si-comment-panel-btn-cancel:hover[b-7cqgjnaali] {
    background-color: #F9FAFC;
}

.si-comment-panel-btn-cancel:disabled[b-7cqgjnaali] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Save button — primary blue */
.si-comment-panel-btn-save[b-7cqgjnaali] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: #3366FF;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
}

.si-comment-panel-btn-save:hover[b-7cqgjnaali] {
    background: #2952CC;
}

.si-comment-panel-btn-save:disabled[b-7cqgjnaali] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== LOADING SPINNER ===== */
.si-comment-panel-spinner[b-7cqgjnaali] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: si-comment-spin-b-7cqgjnaali 0.6s linear infinite;
}

@keyframes si-comment-spin-b-7cqgjnaali {
    to {
        transform: rotate(360deg);
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/AddRemoveSegmentTagsSidePanel.razor.rz.scp.css */
/* bug-6651 polish: 400px to match the other manager-side side panels (lib default sp-sm = 350px). */
.si-segpanel-host[b-1vpntscdwi]  aside.sp-sm {
    width: 400px !important;
}

@media (max-width: 1200px) {
    .si-segpanel-host[b-1vpntscdwi]  aside.sp-sm {
        width: 360px !important;
    }
}

@media (max-width: 992px) {
    .si-segpanel-host[b-1vpntscdwi]  aside.sp-sm {
        width: 320px !important;
    }
}

/* AddRemoveSegmentTagsSidePanel — Figma node 9434:577739
   Component: SidePanel.AddSegmentTags (instance 9439:437297, 400×960px)
   Tokens extracted from Figma get_variable_defs:
     Neutral/000 #FFFFFF · Neutral/075 #F9FAFC · Neutral/200 #EDEFF5
     Neutral/300 #E6E8F0 · Neutral/400 #D8DAE5 · Neutral/500 #C1C4D6
     Neutral/600 #8F95B2 · Neutral/700 #696F8C · Neutral/800 #33415C · Neutral/900 #001233
     Blue/400 #3366FF · Shadow/SM 0 4px 8px rgba(16,24,64,0.08)
     Text/SM-Medium 12/14/500 · Text/SM-Semibold 12/14/600
     Text/MD-Medium 14/16/500 · Text/MD-Semibold 14/16/600 · Text/LG-Semibold 16/20/600
   Font: SF Pro Display (project default fallback) */

/* ===== HEADER (64px tall, white bg, bottom border Neutral/200) ===== */
.si-segpanel-header[b-1vpntscdwi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 64px;
    background: var(--white, #ffffff);
    border-bottom: 1px solid var(--N200, #edeff5);
}

.si-segpanel-close[b-1vpntscdwi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--N800, #33415c);
}

.si-segpanel-close:hover[b-1vpntscdwi] {
    background: var(--N100, #f4f6fa);
}

.si-segpanel-close .material-icons[b-1vpntscdwi] {
    font-size: 16px;
}

.si-segpanel-title[b-1vpntscdwi] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--N900, #001233);
}

/* ===== BODY (Neutral/075 panel surface) ===== */
.si-segpanel-body[b-1vpntscdwi] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--N075, #f9fafc);
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===== YELLOW BANNER (AllSegments mode only) =====
   Figma uses a peach/cream warning band at the top of the body */
.si-segpanel-banner[b-1vpntscdwi] {
    background: #fff5e6;
    border: 1px solid #f3b341;
    color: #6b4a18;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    padding: 8px 12px;
    margin: 12px 16px 0;
    border-radius: 6px;
}

/* ===== TABS (segmented pill, track Neutral/400 @ 24% alpha) ===== */
.si-segpanel-tabs[b-1vpntscdwi] {
    display: flex;
    margin: 16px 16px 12px;
    padding: 2px;
    gap: 4px;
    background: rgba(216, 218, 229, 0.24);
    border-radius: 6px;
}

.si-segpanel-tab[b-1vpntscdwi] {
    flex: 1;
    padding: 5px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: var(--N700, #696f8c);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.si-segpanel-tab:hover[b-1vpntscdwi] {
    color: var(--N800, #33415c);
}

/* Active tab: white bg + Neutral/400 border (pill effect) */
.si-segpanel-tab--active[b-1vpntscdwi] {
    background: var(--white, #ffffff);
    border-color: var(--N400, #d8dae5);
    color: var(--N800, #33415c);
}

/* ===== SEARCH INPUT (32px height, Neutral/400 border) ===== */
.si-segpanel-search[b-1vpntscdwi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 12px;
    padding: 6px 6px 6px 12px;
    height: 32px;
    background: var(--white, #ffffff);
    border: 1px solid var(--N400, #d8dae5);
    border-radius: 6px;
}

.si-segpanel-search:focus-within[b-1vpntscdwi] {
    border-color: var(--B400, #3366ff);
}

.si-segpanel-search-icon[b-1vpntscdwi] {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: var(--N600, #8f95b2);
}

.si-segpanel-search-input[b-1vpntscdwi] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--N800, #33415c);
}

.si-segpanel-search-input[b-1vpntscdwi]::placeholder {
    color: var(--N600, #8f95b2);
}

/* ===== TAG LIST (rows white, 12/8 padding, Text/MD-Medium name) ===== */
.si-segpanel-list[b-1vpntscdwi] {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
}

.si-segpanel-loading[b-1vpntscdwi],
.si-segpanel-empty[b-1vpntscdwi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    color: var(--N600, #8f95b2);
    font-size: 12px;
    text-align: center;
}

.si-segpanel-row[b-1vpntscdwi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease;
}

.si-segpanel-row:hover[b-1vpntscdwi] {
    background: var(--N100, #f4f6fa);
}

/* Checkbox: 16×16, 2px Neutral/500 border, 4px radius */
.si-segpanel-checkbox[b-1vpntscdwi] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--B400, #3366ff);
}

.si-segpanel-dot[b-1vpntscdwi] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.si-segpanel-name[b-1vpntscdwi] {
    flex: 1;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--N800, #33415c);
}

/* ===== ERROR ===== */
.si-segpanel-error[b-1vpntscdwi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 16px;
    padding: 10px 12px;
    background: #fef2f2;
    border-left: 3px solid var(--color-modal-danger, #d14343);
    color: #991b1b;
    font-size: 12px;
    border-radius: 4px;
}

.si-segpanel-error .material-icons-outlined[b-1vpntscdwi] {
    font-size: 18px;
}

/* ===== FOOTER ===== */
.si-segpanel-footer[b-1vpntscdwi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 16px 16px 40px;
}

/* Cancel button: white bg + Neutral/400 border (NOT text-only — confirmed via Figma extraction) */
.si-segpanel-btn-cancel[b-1vpntscdwi] {
    flex: 1;
    height: 44px;
    padding: 12px 16px;
    background: var(--white, #ffffff);
    border: 1px solid var(--N400, #d8dae5);
    border-radius: 6px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: var(--N800, #33415c);
    cursor: pointer;
    transition: background 120ms ease;
}

.si-segpanel-btn-cancel:hover:not(:disabled)[b-1vpntscdwi] {
    background: var(--N100, #f4f6fa);
}

/* Apply button: Blue/400 #3366FF (the actual Figma brand blue, not #2563EB) */
.si-segpanel-btn-apply[b-1vpntscdwi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    height: 44px;
    padding: 12px 16px;
    background: var(--B400, #3366ff);
    border: none;
    border-radius: 6px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: var(--white, #ffffff);
    cursor: pointer;
    transition: background 120ms ease;
}

.si-segpanel-btn-apply:hover:not(:disabled)[b-1vpntscdwi] {
    background: #2851d6; /* darker shade of Blue/400 for hover */
}

.si-segpanel-btn-cancel:disabled[b-1vpntscdwi],
.si-segpanel-btn-apply:disabled[b-1vpntscdwi] {
    opacity: 0.5;
    cursor: not-allowed;
}

.si-segpanel-spinner[b-1vpntscdwi] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--white, #ffffff);
    border-radius: 50%;
    animation: si-segpanel-spin-b-1vpntscdwi 0.7s linear infinite;
}

@keyframes si-segpanel-spin-b-1vpntscdwi {
    to { transform: rotate(360deg); }
}

/* Tablet touch targets: tag rows and search input need ≥44px */
@media (max-width: 1200px) {
    .si-segpanel-row[b-1vpntscdwi] {
        min-height: 44px;
        padding: 12px 12px;
    }

    .si-segpanel-search[b-1vpntscdwi] {
        height: 44px;
    }

    .si-segpanel-close[b-1vpntscdwi] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/AddScheduleTagSidePanel.razor.rz.scp.css */
/* AddCommentSidePanel — pixel-perfect from Figma node 9529:513610 (SidePanel.AddComment) */

/* bug-6651 polish: 400px to match the other manager-side side panels. */
.si-tagpanel-host[b-0uhlcsubj0]  aside.sp-sm {
    width: 400px !important;
}

@media (max-width: 1200px) {
    .si-tagpanel-host[b-0uhlcsubj0]  aside.sp-sm {
        width: 360px !important;
    }
}

@media (max-width: 992px) {
    .si-tagpanel-host[b-0uhlcsubj0]  aside.sp-sm {
        width: 320px !important;
    }
}

/* ===== HEADER ===== */
/* Header: 64px, white bg, bottom border — matches SidePanel.Header pattern */
.si-comment-panel-header[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #EDEFF5;
    min-height: 64px;
    box-sizing: border-box;
}

/* Close button: 32x32 target area, centered icon */
.si-comment-panel-close[b-0uhlcsubj0] {
    background: none;
    border: none;
    cursor: pointer;
    color: #696F8C;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.si-comment-panel-close:hover[b-0uhlcsubj0] {
    background-color: #F9FAFC;
}

.si-comment-panel-close .material-icons[b-0uhlcsubj0] {
    font-size: 16px;
}

/* Title: "Add Comment" — 16px Semibold #001233 */
.si-comment-panel-title[b-0uhlcsubj0] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.si-comment-panel-title-text[b-0uhlcsubj0] {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #001233;
    white-space: nowrap;
}

/* ===== EMPLOYEE IDENTITY BAR ===== */
/* Second header row: employee name + ID + "..." menu — white bg, bottom border */
.si-comment-panel-identity[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #EDEFF5;
    min-height: 64px;
    box-sizing: border-box;
}

.si-comment-panel-identity-info[b-0uhlcsubj0] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    min-width: 0;
    padding: 0 8px;
}

/* Employee name — 14px Bold #001233 */
.si-comment-panel-identity-name[b-0uhlcsubj0] {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: #001233;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "ID : 514658" — 14px Regular #696F8C */
.si-comment-panel-identity-id[b-0uhlcsubj0] {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #696F8C;
}

/* "..." menu button */
.si-comment-panel-identity-menu[b-0uhlcsubj0] {
    background: none;
    border: none;
    cursor: pointer;
    color: #696F8C;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0px 1px 1px 0px rgba(16, 24, 64, 0.04);
}

.si-comment-panel-identity-menu:hover[b-0uhlcsubj0] {
    background-color: #F9FAFC;
}

.si-comment-panel-identity-menu .material-icons[b-0uhlcsubj0] {
    font-size: 16px;
}

/* ===== SCROLLABLE BODY ===== */
/* Body: #F9FAFC background, scrollable */
.si-comment-panel-body[b-0uhlcsubj0] {
    padding: 16px 16px 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #F9FAFC;
    min-height: 100%;
    overflow-y: auto;
}

/* Section container */
.si-comment-panel-section[b-0uhlcsubj0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== SHIFT DETAILS CARD ===== */
/* Card: white bg, border, rounded — matches existing card pattern */
.si-comment-panel-card[b-0uhlcsubj0] {
    background: #FFFFFF;
    border: 1px solid #E6E8F0;
    border-radius: 8px;
    overflow: hidden;
}

/* Shift details area: padding 16px */
.si-comment-panel-shift-details[b-0uhlcsubj0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

/* Badge row */
.si-comment-panel-badges[b-0uhlcsubj0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Shift badge — 12px Medium, rounded */
.si-comment-panel-badge[b-0uhlcsubj0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    text-align: center;
    white-space: nowrap;
}

/* Shift badge: blue */
.si-comment-panel-badge-shift[b-0uhlcsubj0] {
    background-color: #EBF0FF;
    color: #2952CC;
}

/* Paycode badge: green */
.si-comment-panel-badge-paycode[b-0uhlcsubj0] {
    background-color: #DCF2EA;
    color: #317159;
}

/* Open Shift badge: red */
.si-comment-panel-badge-openshift[b-0uhlcsubj0] {
    background-color: #FFDCE5;
    color: #A73636;
}

/* Shift date/time/location */
.si-comment-panel-shift-header[b-0uhlcsubj0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Date — 12px Regular #696F8C */
.si-comment-panel-shift-date[b-0uhlcsubj0] {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #696F8C;
}

/* Time row: time text + transfer icon */
.si-comment-panel-shift-time-row[b-0uhlcsubj0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Time — 16px Bold #001233 */
.si-comment-panel-shift-time[b-0uhlcsubj0] {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #001233;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Transfer icon */
.si-comment-panel-transfer-icon[b-0uhlcsubj0] {
    font-size: 20px;
    color: #696F8C;
}

/* Location path — 12px Regular #696F8C */
.si-comment-panel-shift-location[b-0uhlcsubj0] {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #696F8C;
}

/* ===== DASHED DIVIDER ===== */
/* Dashed border between shift details and form — matches Figma Shift.Details.Card bottom border */
.si-comment-panel-divider[b-0uhlcsubj0] {
    border-bottom: 1px dashed #E6E8F0;
    margin: 0 16px;
}

/* ===== FORM AREA ===== */
/* Comment tag dropdown + Notes — padding 16px, gap 24px between groups */
.si-comment-panel-form[b-0uhlcsubj0] {
    display: flex;
    flex-direction: column;
    /* Bug #6436 polish: 32px gap (au lieu de 24px) pour empecher le floating
       label "Comment" du DropdownSelect de chevaucher le label "Notes". */
    gap: 32px;
    padding: 16px;
}

/* Field group wrapper */
.si-comment-panel-field-group[b-0uhlcsubj0] {
    display: flex;
    align-items: flex-start;
}

/* Input group: label + input */
.si-comment-panel-input-group[b-0uhlcsubj0] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 8px;
    max-width: 240px;
    min-width: 0;
}

/* Input header */
.si-comment-panel-input-header[b-0uhlcsubj0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Label — 14px Semibold #33415C */
.si-comment-panel-input-label[b-0uhlcsubj0] {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
}

/* DropdownSelect styling is handled by the shared component */

/* ===== NOTES SECTION ===== */
.si-comment-panel-notes-section[b-0uhlcsubj0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Notes list */
.si-comment-panel-notes-list[b-0uhlcsubj0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Single note row: input + delete button */
.si-comment-panel-note[b-0uhlcsubj0] {
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

/* Note input wrapper (may include max-chars warning) */
.si-comment-panel-note-input-wrapper[b-0uhlcsubj0] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Note input — 32px height, border, rounded */
.si-comment-panel-note-input[b-0uhlcsubj0] {
    width: 100%;
    height: 32px;
    padding: 6px 12px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #33415C;
    box-sizing: border-box;
}

.si-comment-panel-note-input:focus[b-0uhlcsubj0] {
    outline: none;
    border-color: #3366FF;
    box-shadow: 0 0 0 1px #3366FF;
}

/* Placeholder input — lighter text */
.si-comment-panel-note-placeholder[b-0uhlcsubj0]::placeholder {
    color: #8F95B2;
    font-weight: 500;
}

/* Note textarea — auto-expanding, matches input styling */
.si-comment-panel-note-textarea[b-0uhlcsubj0] {
    width: 100%;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #33415C;
    box-sizing: border-box;
    resize: vertical;
    min-height: 32px;
    font-family: inherit;
}

.si-comment-panel-note-textarea:focus[b-0uhlcsubj0] {
    outline: none;
    border-color: #3366FF;
    box-shadow: 0 0 0 1px #3366FF;
}

/* Max characters warning — 10px Regular #A73636 (Red/500) */
.si-comment-panel-note-maxchars[b-0uhlcsubj0] {
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    color: #A73636;
}

/* Note delete button — 32x32 target area, trash icon */
.si-comment-panel-note-delete[b-0uhlcsubj0] {
    background: none;
    border: none;
    cursor: pointer;
    color: #696F8C;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.si-comment-panel-note-delete:hover[b-0uhlcsubj0] {
    background-color: #F9FAFC;
    color: #A73636;
}

.si-comment-panel-note-delete .material-icons-outlined[b-0uhlcsubj0] {
    font-size: 16px;
}

/* Invisible spacer to maintain alignment when no delete button */
.si-comment-panel-note-delete-spacer[b-0uhlcsubj0] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* ===== DELETE COMMENT BUTTON ===== */
.si-comment-panel-delete-section[b-0uhlcsubj0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 24px;
}

.si-comment-panel-delete-btn[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
    text-align: center;
}

.si-comment-panel-delete-btn:hover[b-0uhlcsubj0] {
    background-color: #FFDCE5;
    color: #A73636;
}

.si-comment-panel-delete-btn .material-icons-outlined[b-0uhlcsubj0] {
    font-size: 16px;
}

/* ===== ERROR MESSAGE ===== */
.si-comment-panel-error[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #FFF8F7;
    border: 1px solid #FFD4D4;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #A73636;
}

.si-comment-panel-error .material-icons-outlined[b-0uhlcsubj0] {
    font-size: 16px;
    flex-shrink: 0;
}

/* ===== FOOTER ===== */
/* Footer: 64px, white bg, top border — matches SidePanel.Footer pattern */
.si-comment-panel-footer[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

.si-comment-panel-footer-left[b-0uhlcsubj0] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.si-comment-panel-footer-right[b-0uhlcsubj0] {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

/* Cancel button — outlined style */
.si-comment-panel-btn-cancel[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
    text-align: center;
    white-space: nowrap;
}

.si-comment-panel-btn-cancel:hover[b-0uhlcsubj0] {
    background-color: #F9FAFC;
}

.si-comment-panel-btn-cancel:disabled[b-0uhlcsubj0] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Save button — primary blue */
.si-comment-panel-btn-save[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: #3366FF;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
}

.si-comment-panel-btn-save:hover[b-0uhlcsubj0] {
    background: #2952CC;
}

.si-comment-panel-btn-save:disabled[b-0uhlcsubj0] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== LOADING SPINNER ===== */
.si-comment-panel-spinner[b-0uhlcsubj0] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: si-comment-spin-b-0uhlcsubj0 0.6s linear infinite;
}

@keyframes si-comment-spin-b-0uhlcsubj0 {
    to {
        transform: rotate(360deg);
    }
}

/* Tablet touch targets for AddComment panel */
@media (max-width: 1200px) {
    .si-comment-panel-close[b-0uhlcsubj0] {
        min-width: 44px;
        min-height: 44px;
    }

    .si-comment-panel-identity-menu[b-0uhlcsubj0] {
        min-width: 44px;
        min-height: 44px;
    }

    .si-comment-panel-note-delete[b-0uhlcsubj0] {
        min-width: 44px;
        min-height: 44px;
    }

    .si-comment-panel-note-input[b-0uhlcsubj0] {
        height: 44px;
    }
}

@media (max-width: 992px) {
    .si-comment-panel-input-group[b-0uhlcsubj0] {
        max-width: 100%;
    }
}

/* ============================================================================
   task-6444 — AddScheduleTagSidePanel layout per Figma node 9434-568760.
   Distinct si-tagpanel-* class set so the styling stays decoupled from the
   AddCommentSidePanel rules above. The panel has no shift-details card and no
   SidePanel footer — Cancel/Save sit inline at the bottom of the content card.
   ============================================================================ */

.si-tagpanel-header[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #EDEFF5;
    min-height: 64px;
    box-sizing: border-box;
}

.si-tagpanel-close[b-0uhlcsubj0] {
    background: none;
    border: none;
    cursor: pointer;
    color: #696F8C;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.si-tagpanel-close:hover[b-0uhlcsubj0] {
    background-color: #F9FAFC;
}

.si-tagpanel-close .material-icons[b-0uhlcsubj0] {
    font-size: 16px;
}

.si-tagpanel-title[b-0uhlcsubj0] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.si-tagpanel-title-text[b-0uhlcsubj0] {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #001233;
    white-space: nowrap;
}

/* Identity bar — same shape as AddCommentSidePanel for visual consistency. */
.si-tagpanel-identity[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #EDEFF5;
    min-height: 64px;
    box-sizing: border-box;
}

.si-tagpanel-identity-info[b-0uhlcsubj0] {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 0;
    padding: 0 8px;
}

.si-tagpanel-identity-name[b-0uhlcsubj0] {
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: #001233;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.si-tagpanel-identity-id[b-0uhlcsubj0] {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #696F8C;
}

.si-tagpanel-identity-menu[b-0uhlcsubj0] {
    background: none;
    border: none;
    cursor: pointer;
    color: #696F8C;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0px 1px 1px 0px rgba(16, 24, 64, 0.04);
}

.si-tagpanel-identity-menu:hover[b-0uhlcsubj0] {
    background-color: #F9FAFC;
}

.si-tagpanel-identity-menu .material-icons[b-0uhlcsubj0] {
    font-size: 16px;
}

/* Body — Neutral/075 background, contains a single white card with the form. */
.si-tagpanel-body[b-0uhlcsubj0] {
    padding: 16px;
    background-color: #F9FAFC;
    min-height: 100%;
    box-sizing: border-box;
}

.si-tagpanel-card[b-0uhlcsubj0] {
    background: #FFFFFF;
    border: 1px solid #E6E8F0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Field — label on top, control below. */
.si-tagpanel-field[b-0uhlcsubj0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}

.si-tagpanel-label[b-0uhlcsubj0] {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
}

.si-tagpanel-hint[b-0uhlcsubj0] {
    font-size: 12px;
    line-height: 14px;
    color: #6c757d;
    margin-top: 4px;
}

/* Date / Time field — input + leading icon, same shape as Figma date picker. */
.si-tagpanel-input-with-icon[b-0uhlcsubj0] {
    position: relative;
    display: flex;
    align-items: center;
}

.si-tagpanel-input-icon[b-0uhlcsubj0] {
    position: absolute;
    left: 10px;
    font-size: 16px;
    color: #696F8C;
    pointer-events: none;
}

.si-tagpanel-input[b-0uhlcsubj0] {
    width: 100%;
    height: 36px;
    padding: 6px 12px 6px 32px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #33415C;
    box-sizing: border-box;
    font-family: inherit;
}

.si-tagpanel-input:focus[b-0uhlcsubj0] {
    outline: none;
    border-color: #3366FF;
    box-shadow: 0 0 0 1px #3366FF;
}

/* All-day toggle — checkbox + label inline. */
.si-tagpanel-field-checkbox[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.si-tagpanel-field-checkbox input[type="checkbox"][b-0uhlcsubj0] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3366FF;
}

.si-tagpanel-field-checkbox label[b-0uhlcsubj0] {
    font-size: 14px;
    font-weight: 500;
    color: #33415C;
    cursor: pointer;
}

/* Start/End row — two equal columns. */
.si-tagpanel-time-row[b-0uhlcsubj0] {
    display: flex;
    gap: 12px;
}

/* Inline action buttons — Cancel + Save sit inside the card. */
.si-tagpanel-actions[b-0uhlcsubj0] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.si-tagpanel-btn-cancel[b-0uhlcsubj0] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
    white-space: nowrap;
    font-family: inherit;
}

.si-tagpanel-btn-cancel:hover[b-0uhlcsubj0] {
    background-color: #F9FAFC;
}

.si-tagpanel-btn-cancel:disabled[b-0uhlcsubj0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.si-tagpanel-btn-save[b-0uhlcsubj0] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    height: 36px;
    background: #3366FF;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #FFFFFF;
    white-space: nowrap;
    font-family: inherit;
}

.si-tagpanel-btn-save:hover[b-0uhlcsubj0] {
    background: #2952CC;
}

.si-tagpanel-btn-save:disabled[b-0uhlcsubj0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.si-tagpanel-spinner[b-0uhlcsubj0] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: si-comment-spin-b-0uhlcsubj0 0.6s linear infinite;
}

/* Delete button (edit mode only) */
.si-tagpanel-delete-section[b-0uhlcsubj0] {
    display: flex;
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px solid #EDEFF5;
}

.si-tagpanel-delete-btn[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #33415C;
    font-family: inherit;
}

.si-tagpanel-delete-btn:hover[b-0uhlcsubj0] {
    background-color: #FFDCE5;
    color: #A73636;
}

.si-tagpanel-delete-btn .material-icons-outlined[b-0uhlcsubj0] {
    font-size: 16px;
}

/* Error message */
.si-tagpanel-error[b-0uhlcsubj0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #FFF8F7;
    border: 1px solid #FFD4D4;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #A73636;
}

.si-tagpanel-error .material-icons-outlined[b-0uhlcsubj0] {
    font-size: 16px;
    flex-shrink: 0;
}

/* Tablet touch targets for AddScheduleTag panel */
@media (max-width: 1200px) {
    .si-tagpanel-btn-cancel[b-0uhlcsubj0],
    .si-tagpanel-btn-save[b-0uhlcsubj0] {
        height: 44px;
        min-height: 44px;
    }

    .si-tagpanel-input[b-0uhlcsubj0] {
        height: 44px;
    }

    .si-tagpanel-close[b-0uhlcsubj0] {
        min-width: 44px;
        min-height: 44px;
    }

    .si-tagpanel-identity-menu[b-0uhlcsubj0] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/ConfirmDeleteDialog.razor.rz.scp.css */
/* ConfirmDeleteDialog — pixel-spec from Figma node 9422-479140.
   Icon stays Blue/100 background + Blue/500 icon (NOT red) per user direction. */

.si-confirm-overlay[b-1cp6iv29t5] {
    position: fixed;
    inset: 0;
    background-color: rgba(16, 24, 64, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.si-confirm-dialog[b-1cp6iv29t5] {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 8px 16px rgba(16, 24, 64, 0.16);
    padding: 24px;
    width: 320px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.si-confirm-close[b-1cp6iv29t5] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--N700, #696F8C);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.si-confirm-close:hover[b-1cp6iv29t5] {
    background-color: var(--N75, #F9FAFC);
}

.si-confirm-close .material-icons[b-1cp6iv29t5] {
    font-size: 18px;
}

.si-confirm-header[b-1cp6iv29t5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Circular icon container — Blue/100 background, Blue/500 icon. Same shape as the
   Figma "Print Schedule" modal but with the trash icon. */
.si-confirm-icon[b-1cp6iv29t5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #EBF0FF;
    color: #2952CC;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.si-confirm-icon .material-icons[b-1cp6iv29t5],
.si-confirm-icon .material-icons-outlined[b-1cp6iv29t5] {
    font-size: 20px;
}

.si-confirm-title[b-1cp6iv29t5] {
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--N900, #001233);
}

.si-confirm-message[b-1cp6iv29t5] {
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 14px;
    line-height: 18px;
    color: var(--N700, #696F8C);
    /* Respect line breaks embedded in the resx string (between paragraphs of the
       confirmation message) — without pre-line they collapse to a single space. */
    white-space: pre-line;
}

.si-confirm-actions[b-1cp6iv29t5] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.si-confirm-btn-cancel[b-1cp6iv29t5] {
    padding: 8px 14px;
    background-color: #FFFFFF;
    border: 1px solid var(--N400, #D8DAE5);
    border-radius: 6px;
    cursor: pointer;
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--N800, #33415C);
}

.si-confirm-btn-cancel:hover[b-1cp6iv29t5] {
    background-color: var(--N75, #F9FAFC);
}

.si-confirm-btn-delete[b-1cp6iv29t5] {
    padding: 8px 14px;
    background-color: #3366FF;
    border: 1px solid #3366FF;
    border-radius: 6px;
    cursor: pointer;
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
}

.si-confirm-btn-delete:hover[b-1cp6iv29t5] {
    background-color: #2952CC;
    border-color: #2952CC;
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/EmployeeInfoPopover.razor.rz.scp.css */
/* Employee Info Popover Styles — pixel-perfect from Figma node 9429:606362 */

.si-emp-popover-anchor[b-986c9d44tb] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Popover card: 320px wide, padding 16px, border-radius 8px */
.si-emp-popover[b-986c9d44tb] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 320px;
    max-width: min(320px, calc(100vw - 32px));
    background: #FFFFFF;
    border: 1px solid #E6E8F0;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(16, 24, 64, 0.08);
    padding: 16px;
    margin-top: 4px;
}

/* Main content: flex column, gap 16px between Header / List / Buttons */
.si-emp-popover-content[b-986c9d44tb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Header: "Employee" label, name, ID — gap 8px between label and name block */
.si-emp-popover-header[b-986c9d44tb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* "Employee" label — 12px Regular #696F8C */
.si-emp-popover-label[b-986c9d44tb] {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #696F8C;
}

/* Name + ID block — gap 2px */
.si-emp-popover-identity[b-986c9d44tb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Employee name — 14px Bold #001233, ellipsis */
.si-emp-popover-name[b-986c9d44tb] {
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: #001233;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "ID : xxx" — 12px Regular #696F8C */
.si-emp-popover-id[b-986c9d44tb] {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #696F8C;
}

/* Preview section: "Preview" label + field rows, gap 8px */
.si-emp-popover-section[b-986c9d44tb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* "Preview" label — 12px Semibold #33415C */
.si-emp-popover-section-label[b-986c9d44tb] {
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: #33415C;
}

/* Dataset field rows — gap 8px between rows */
.si-emp-popover-fields[b-986c9d44tb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each field row: flex, gap 8px, two equal columns */
.si-emp-popover-field[b-986c9d44tb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Field label — 14px Regular #8F95B2, flex 1, ellipsis */
.si-emp-popover-field-label[b-986c9d44tb] {
    flex: 1 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #8F95B2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Field value — 14px Medium #33415C, flex 1, ellipsis */
.si-emp-popover-field-value[b-986c9d44tb] {
    flex: 1 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #33415C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer buttons row: flex, gap 4px */
.si-emp-popover-footer[b-986c9d44tb] {
    display: flex;
    gap: 4px;
}

/* "See all employee information" button — bordered, 12px Semibold #33415C */
.si-emp-popover-btn[b-986c9d44tb] {
    flex: 1 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    box-shadow: 0px 1px 1px rgba(16, 24, 64, 0.04);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: #33415C;
    cursor: pointer;
    white-space: nowrap;
}

.si-emp-popover-btn:hover[b-986c9d44tb] {
    background: #F9FAFC;
}

/* "..." more options button — square, icon-only, same border style */
.si-emp-popover-more[b-986c9d44tb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    box-shadow: 0px 1px 1px rgba(16, 24, 64, 0.04);
    cursor: pointer;
    flex-shrink: 0;
}

.si-emp-popover-more .material-icons[b-986c9d44tb] {
    font-size: 16px;
    color: #33415C;
}

.si-emp-popover-more:hover[b-986c9d44tb] {
    background: #F9FAFC;
}

/* Tablet touch targets */
@media (max-width: 1200px) {
    .si-emp-popover-btn[b-986c9d44tb] {
        min-height: 44px;
        padding: 10px 12px;
    }

    .si-emp-popover-more[b-986c9d44tb] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/EmployeeInfoSidePanel.razor.rz.scp.css */
/* Employee Info Side Panel Styles — pixel-perfect from Figma node 9429:606425 */

.si-emp-panel-footer[b-btf3alkmgq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

.si-emp-panel-btn-close[b-btf3alkmgq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
    text-align: center;
    white-space: nowrap;
}

.si-emp-panel-btn-close:hover[b-btf3alkmgq] {
    background-color: #F9FAFC;
}


/* bug-6651 polish: 400px to match the other manager-side side panels. */
.si-emp-panel-host[b-btf3alkmgq]  aside.sp-sm {
    width: 400px !important;
}

@media (max-width: 1200px) {
    .si-emp-panel-host[b-btf3alkmgq]  aside.sp-sm {
        width: 360px !important;
    }
}

@media (max-width: 992px) {
    .si-emp-panel-host[b-btf3alkmgq]  aside.sp-sm {
        width: 320px !important;
    }
}

/* Header: contains close button + employee identity */
.si-emp-panel-header[b-btf3alkmgq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #EDEFF5;
    min-height: 64px;
    box-sizing: border-box;
}

/* Close button: 32x32 target area, icon centered */
.si-emp-panel-close[b-btf3alkmgq] {
    background: none;
    border: none;
    cursor: pointer;
    color: #696F8C;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.si-emp-panel-close:hover[b-btf3alkmgq] {
    background-color: #F9FAFC;
}

.si-emp-panel-close .material-icons[b-btf3alkmgq] {
    font-size: 16px;
}

/* Identity block inside header: name + ID, gap 2px */
.si-emp-panel-identity[b-btf3alkmgq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Employee name — 16px Semibold #001233, ellipsis */
.si-emp-panel-identity-name[b-btf3alkmgq] {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #001233;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "ID: xxx" — 14px Regular #696F8C */
.si-emp-panel-identity-id[b-btf3alkmgq] {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #696F8C;
}

/* Panel body: muted background #F9FAFC, scroll */
.si-emp-panel-body[b-btf3alkmgq] {
    padding: 16px 16px 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #F9FAFC;
    min-height: 100%;
    overflow-y: auto;
}

/* Section container — gap 8px between header and card */
.si-emp-panel-section[b-btf3alkmgq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Section header: "Employee Information" — padding 8px all sides, bottom border */
.si-emp-panel-section-header[b-btf3alkmgq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #EDEFF5;
}

/* Section title — 16px Medium #001233 */
.si-emp-panel-section-title[b-btf3alkmgq] {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #001233;
}

/* Card wrapper: white bg, border, rounded */
.si-emp-panel-card[b-btf3alkmgq] {
    background: #FFFFFF;
    border: 1px solid #E6E8F0;
    border-radius: 8px;
    overflow: hidden;
}

/* Card inner: padding around content */
.si-emp-panel-card-inner[b-btf3alkmgq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

/* "Dataview" label inside card — 12px Semibold #33415C */
.si-emp-panel-fields-label[b-btf3alkmgq] {
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: #33415C;
}

/* Dataset field rows — gap 12px between rows */
.si-emp-panel-fields[b-btf3alkmgq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Each field row: flex, gap 8px, two equal columns */
.si-emp-panel-field[b-btf3alkmgq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Field label — 14px Regular #8F95B2, flex 1, ellipsis */
.si-emp-panel-field-label[b-btf3alkmgq] {
    flex: 1 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #8F95B2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Field value — 14px Medium #33415C, flex 1, ellipsis */
.si-emp-panel-field-value[b-btf3alkmgq] {
    flex: 1 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #33415C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/EmployeeScheduleCellsComponent.razor.rz.scp.css */
/* Schedule Cell Styles - rendered directly in unified row */

/* Desktop: 220px width for 7 days visible without scrolling */
.si-schedule-cell[b-3kc9y59z2e] {
    width: 220px;
    min-width: 220px;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    border-right: 1px solid var(--si-neutral-200, #EDEFF5);
    flex-shrink: 0;
    /* bug-6656: needed so the day-cell ⋯ overflow can position itself in the corner. */
    position: relative;
}

.si-schedule-cell:last-child[b-3kc9y59z2e] {
    border-right: none;
}

/* Figma: Weekend columns use Neutral/075 (#F9FAFC) */
.si-schedule-cell.si-weekend[b-3kc9y59z2e] {
    background-color: var(--si-neutral-075, #F9FAFC);
}

/* Figma: Today column - no background color override */
.si-schedule-cell.si-today[b-3kc9y59z2e] {
    /* background-color intentionally removed */
}

/* Shift Item - Figma style: 155px × 34px with left accent bar (6px borderRadius) */
.si-shift-item[b-3kc9y59z2e] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 6px; /* Figma: 6px borderRadius */
    font-size: 12px; /* Figma: Text/SM */
    background-color: #ffffff;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    color: var(--si-neutral-800);
    overflow: hidden;
    width: 100%;
    height: 34px; /* Figma: 34px height for shift item */
}

.si-shift-item.si-shift-clickable[b-3kc9y59z2e] {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
    .si-shift-item.si-shift-clickable:hover[b-3kc9y59z2e] {
        transform: translateY(-1px);
        box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }
}

/* Accent bar on the left */
.si-shift-accent[b-3kc9y59z2e] {
    width: 6px;
    flex-shrink: 0;
    background-color: var(--si-teal-500);
}

/* Regular shift - teal accent */
.si-shift-regular .si-shift-accent[b-3kc9y59z2e] {
    background-color: var(--si-teal-500);
}

/* Paycode - orange accent */
.si-shift-paycode .si-shift-accent[b-3kc9y59z2e] {
    background-color: var(--si-orange-500);
}

/* Edited shift - red striped accent */
.si-shift-edited .si-shift-accent[b-3kc9y59z2e] {
    background: repeating-linear-gradient(
        -45deg,
        #ffffff,
        #ffffff 2.5px,
        var(--si-red-400) 2.5px,
        var(--si-red-400) 5px
    );
}

/* Main content area */
.si-shift-content[b-3kc9y59z2e] {
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    flex: 1;
    min-width: 0;
}

/* Top row with label, time and icons */
.si-shift-top[b-3kc9y59z2e] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.si-shift-label[b-3kc9y59z2e] {
    font-weight: 700;
    color: var(--si-neutral-900);
}

.si-shift-time[b-3kc9y59z2e] {
    font-weight: 400;
    color: var(--si-neutral-700);
    white-space: nowrap;
}

.si-shift-icons[b-3kc9y59z2e] {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

/* Bottom row with location */
.si-shift-bottom[b-3kc9y59z2e] {
    display: flex;
    align-items: center;
}

.si-shift-location[b-3kc9y59z2e] {
    font-size: 11px;
    color: var(--si-neutral-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Override GridShift accent bar color for paycodes.
   GridShift.GetBorderColorStyleClass() always returns gs-blue for non-open-shifts,
   so we override the accent bar color using ::deep to avoid modifying the Zaddons library. */
[b-3kc9y59z2e] .si-paycode.gs-blue .gs-accent-bar {
    background-color: var(--G400, #52BD94);
}

/* bug-6662 / bug-6660 — Figma deleted shift spec (nodes 9428-580257, 9428-580260, 9428-580263):
   - opacity 0.5 on the whole card (NOT 0.45 + grayscale — that combo was unreadable on tablet)
   - 1px dashed border (Neutral/300 #E6E8F0 — inherited from the base shift card)
   - filter: none (no grayscale)
   - cursor: pointer (clickable to open the history detail panel — bug-6660: not "not-allowed")
   - the accent bar keeps the SHIFT TYPE color: blue for regular Shift, red for OpenShift, green
     for Paycode. We don't override it — letting the lib's per-type rules win is the correct
     behavior per Figma. The lib paints solid color via .gs-blue/.gs-red/.gs-green .gs-accent-bar.
   !important is required because the lib's .gs-deleted[b-…] selector and our scoped override
   share the same specificity (0,2,0) — without !important the lib wins by load order. */
[b-3kc9y59z2e] .si-shift-deleted {
    opacity: 0.5 !important;
    filter: none !important;
    cursor: pointer !important;
    border-style: dashed !important;
    position: relative;
}

/* bug-6662 — Figma keeps the type color on the accent bar even when deleted, but the Zaddons
   lib's `.gs-deleted .gs-accent-bar` rule forces it to grey (Neutral/400 #D8DAE5). Restore the
   per-type color: blue for regular Shift, red for OpenShift, green for Paycode (.si-paycode is
   the project's paycode class — gs-blue is the lib's default for non-open-shifts). */
[b-3kc9y59z2e] .si-shift-deleted.gs-blue .gs-accent-bar {
    background-color: var(--si-blue-400, #3366FF) !important;
}
[b-3kc9y59z2e] .si-shift-deleted.gs-red .gs-accent-bar {
    background-color: var(--si-red-400, #D14343) !important;
}
[b-3kc9y59z2e] .si-shift-deleted.gs-green .gs-accent-bar {
    background-color: var(--si-green-400, #52BD94) !important;
}
[b-3kc9y59z2e] .si-shift-deleted.si-paycode .gs-accent-bar {
    background-color: var(--si-green-400, #52BD94) !important;
}

/* Empty cell placeholder */
.si-no-shift[b-3kc9y59z2e] {
    color: var(--si-neutral-400);
    font-size: 14px;
}

/* Shift container - wraps GridShift and schedule tags */
.si-shift-container[b-3kc9y59z2e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Bug #6140 — Schedule tags pill style aligne sur Figma (node 9084:882344).
   Container: flex row + wrap pour remplir la cellule horizontalement et
   passer a la ligne suivante automatiquement quand l'espace manque.
   Pill: fond blanc, bordure Neutral/200, radius 4px, icone 12px coloree. */
.si-schedule-tags[b-3kc9y59z2e] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    padding: 0;
    width: 100%;
}

/* Badge individuel — specs Figma:
   - background: #FFFFFF
   - border: 1px solid Neutral/200 (#EDEFF5)
   - border-radius: 4px
   - padding: 1px 6px
   - gap icone/texte: 4px
   - font: SF Pro Display Medium 12px / line-height 14px / Neutral/800
   US #6451: pill is now a <span> inside a wrapper that triggers the hover popover. */
.si-schedule-tag[b-3kc9y59z2e] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--si-neutral-200, #EDEFF5);
    background-color: #FFFFFF;
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--si-neutral-800, #33415C);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

/* US #6451 — Schedule tag popover per Figma node 8401-1240032. Pure-CSS hover trigger:
   the popover sits inside .si-schedule-tag-wrapper and only shows when the wrapper is
   hovered. Critical: top: 100% (no gap) so the cursor can move from the pill into the
   popover without leaving the wrapper, which would close the popover mid-transit. The
   visual breathing room between pill and popover content comes from padding-top inside
   the popover. */
.si-schedule-tag-wrapper[b-3kc9y59z2e] {
    position: relative;
    display: inline-flex;
}

.si-schedule-tag-popover[b-3kc9y59z2e] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    width: 320px;
    max-width: min(320px, calc(100vw - 32px));
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(16, 24, 64, 0.08);
    padding: 16px;
    flex-direction: column;
    gap: 16px;
}

/* Hybrid: hover (desktop) OR click-driven open class (touch). The :hover on the popover
   itself keeps it visible while the cursor is inside, in case the wrapper hover state
   gets disabled mid-transit (some browsers under specific layout edge cases). */
.si-schedule-tag-wrapper:hover .si-schedule-tag-popover[b-3kc9y59z2e],
.si-schedule-tag-wrapper.si-tag-popover-open .si-schedule-tag-popover[b-3kc9y59z2e],
.si-schedule-tag-popover:hover[b-3kc9y59z2e] {
    display: flex;
}

/* US #6451: pill is a button now — restore button-like affordance. */
.si-schedule-tag[b-3kc9y59z2e] {
    cursor: pointer;
}

.si-schedule-tag:hover[b-3kc9y59z2e],
.si-schedule-tag-wrapper.si-tag-popover-open .si-schedule-tag[b-3kc9y59z2e] {
    background-color: var(--si-neutral-075, #F9FAFC);
    border-color: var(--si-neutral-400, #D8DAE5);
}

.si-schedule-tag-popover-header[b-3kc9y59z2e] {
    display: flex;
    align-items: center;
}

.si-schedule-tag-popover-pill[b-3kc9y59z2e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--si-neutral-200, #EDEFF5);
    background-color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--si-neutral-800, #33415C);
}

.si-schedule-tag-popover-body[b-3kc9y59z2e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.si-schedule-tag-popover-date[b-3kc9y59z2e] {
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.33em;
    color: var(--si-neutral-700, #696F8C);
}

.si-schedule-tag-popover-employee[b-3kc9y59z2e] {
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.29em;
    color: var(--si-neutral-900, #101840);
}

.si-schedule-tag-popover-name[b-3kc9y59z2e],
.si-schedule-tag-popover-time[b-3kc9y59z2e] {
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.33em;
    color: var(--si-neutral-700, #696F8C);
}

.si-schedule-tag-popover-meta[b-3kc9y59z2e] {
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.33em;
    color: var(--si-neutral-600, #8F95B2);
    margin-top: 4px;
}

.si-schedule-tag-popover-actions[b-3kc9y59z2e] {
    display: flex;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--si-neutral-200, #EDEFF5);
}

/* User feedback: Delete button takes the full popover width with centered text — looks
   more deliberate when there's only one action available. */
.si-schedule-tag-popover-delete[b-3kc9y59z2e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--si-neutral-400, #D8DAE5);
    border-radius: 6px;
    cursor: pointer;
    color: var(--si-neutral-800, #33415C);
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 600;
}

/* User direction: keep the hover affordance blue (pale) — Blue/100 background +
   Blue/500 text/border. The destructive intent comes from the confirm dialog, not
   from the button color. */
.si-schedule-tag-popover-delete:hover[b-3kc9y59z2e] {
    background-color: #EBF0FF;
    color: #2952CC;
    border-color: #B7C8FF;
}

/* Icone tag (toujours presente — fallback bi bi-tag-fill si aucune IconClass
   n'est fournie par le tag). La couleur est pilotee par la var --tag-color
   calculee cote serveur via ScheduleTagHelper. */
.si-schedule-tag-icon[b-3kc9y59z2e] {
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--tag-color, var(--si-neutral-700, #696F8C));
}

/* Nom du tag — ellipsis si trop long dans un pill isole */
.si-schedule-tag-name[b-3kc9y59z2e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* bug-6656 — Day cell hover ⋯ overflow per Figma node 9156-262129. The wrapper sits in the
   bottom-right corner of the cell; the ⋯ button is invisible by default and fades in on cell
   hover OR when the popover is open (so a click on the button doesn't immediately hide it
   while the menu is showing). */
.si-schedule-cell-overflow-wrapper[b-3kc9y59z2e] {
    position: absolute;
    bottom: 4px;
    right: 6px;
    z-index: 4;
}

.si-schedule-cell-overflow-btn[b-3kc9y59z2e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background-color: var(--N0, #FFFFFF);
    border: 1px solid var(--N300, #E6E8F0);
    border-radius: 4px;
    color: var(--N700, #696F8C);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease-in-out, background-color 0.12s ease-in-out;
    box-shadow: 0px 1px 2px rgba(16, 24, 64, 0.06);
}

.si-schedule-cell-overflow-btn .material-icons[b-3kc9y59z2e] {
    font-size: 16px;
}

/* Reveal the ⋯ on hover (desktop only). On touch devices the reveal is suppressed: a single
   tap anywhere on the cell opens the day panel directly (HandleCellBackgroundClick), so the
   hover ⋯ isn't needed and — being a new interactive element under the finger — would trigger
   the iOS sticky-hover double-tap that made shifts need two taps. */
@media (hover: hover) {
    .si-schedule-cell:hover .si-schedule-cell-overflow-btn[b-3kc9y59z2e] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Keep the ⋯ visible while its menu is open, regardless of hover capability. */
.si-schedule-cell-overflow-btn-open[b-3kc9y59z2e] {
    opacity: 1;
    pointer-events: auto;
}

.si-schedule-cell-overflow-btn:hover[b-3kc9y59z2e] {
    background-color: var(--N100, #F4F6FA);
}

/* Popover positioned below the ⋯, anchored right so it never overflows the cell on the
   left side of the row. Stacking context above shifts and tags. */
.si-schedule-cell-overflow-menu[b-3kc9y59z2e] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background-color: var(--N0, #FFFFFF);
    border: 1px solid var(--N300, #E6E8F0);
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0px 4px 8px rgba(16, 24, 64, 0.08);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.si-schedule-cell-overflow-item[b-3kc9y59z2e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--N800, #33415C);
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
}

.si-schedule-cell-overflow-item:hover[b-3kc9y59z2e] {
    background-color: var(--N75, #F9FAFC);
}

.si-schedule-cell-overflow-item .material-icons-outlined[b-3kc9y59z2e] {
    font-size: 16px;
    color: var(--N700, #696F8C);
}

/* Responsive: Tablet (matches ShiftHistoryPage header breakpoint) */
@media (max-width: 1200px) {
    .si-schedule-cell[b-3kc9y59z2e] {
        width: 160px;
        min-width: 160px;
    }

    .si-schedule-cell-overflow-btn[b-3kc9y59z2e] {
        width: 44px;
        height: 44px;
    }
}

/* Responsive: Small screens (matches ShiftHistoryPage header breakpoint) */
@media (max-width: 992px) {
    .si-schedule-cell[b-3kc9y59z2e] {
        width: 120px;
        min-width: 120px;
    }
}

/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/FavoriteFilterEditHeader.razor.rz.scp.css */
.fav-edit-header[b-d2s4m1uo4g] {
    padding: 0 12px;
}

.fav-edit-back[b-d2s4m1uo4g] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 4px;
    background: none;
    border: none;
    color: var(--N800, #33415C);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

.fav-edit-back:hover[b-d2s4m1uo4g] {
    color: #3366FF;
}

.fav-edit-form[b-d2s4m1uo4g] {
    padding: 0 4px 20px;
    margin-bottom: 20px;
}

.fav-edit-title[b-d2s4m1uo4g] {
    font-size: 16px;
    font-weight: 700;
    color: var(--N900, #1a1a1a);
    margin-bottom: 8px;
}

.fav-edit-name-input[b-d2s4m1uo4g] {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--N400, #D8DAE5);
    border-radius: 6px;
    font-size: 14px;
    color: var(--N900, #001233);
    outline: none;
    box-sizing: border-box;
}

.fav-edit-name-input:focus[b-d2s4m1uo4g] {
    border-color: #3366FF;
    box-shadow: 0 0 0 2px rgba(51, 102, 255, 0.15);
}

.fav-edit-name-input--error[b-d2s4m1uo4g] {
    border-color: var(--R400, #D14343);
}

.fav-edit-name-error[b-d2s4m1uo4g] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--R400, #D14343);
}

.fav-edit-actions[b-d2s4m1uo4g] {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.fav-edit-action-btn[b-d2s4m1uo4g] {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid var(--N400, #D8DAE5);
    color: var(--N800, #33415C);
}

.fav-edit-action-btn:hover[b-d2s4m1uo4g] {
    background: var(--N75, #F9FAFC);
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/FavoriteFilterListView.razor.rz.scp.css */
.fav-empty[b-tp9ux82mk4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 24px;
    text-align: center;
}

.fav-empty__icon[b-tp9ux82mk4] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: #EBF0FF;
    border-radius: 12px;
    color: #3366FF;
    font-size: 24px;
}

.fav-empty__title[b-tp9ux82mk4] {
    font-size: 14px;
    font-weight: 600;
    color: var(--N900, #1a1a1a);
    margin-bottom: 8px;
}

.fav-empty__desc[b-tp9ux82mk4] {
    font-size: 12px;
    color: var(--N600, #8F95B2);
    line-height: 1.4;
    margin-bottom: 24px;
    max-width: 280px;
}

.fav-list[b-tp9ux82mk4] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fav-item[b-tp9ux82mk4] {
    display: flex;
    align-items: center;
    padding: 2px;
    gap: 4px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.1s;
}

.fav-item:hover[b-tp9ux82mk4] {
    background: #EBF0FF;
}

.fav-item__star[b-tp9ux82mk4] {
    color: var(--N500, #A0A4B8);
    flex-shrink: 0;
}

.fav-item__star--active[b-tp9ux82mk4] {
    color: #3366FF;
}

.fav-item__name[b-tp9ux82mk4] {
    font-size: 14px;
    color: var(--N900, #1a1a1a);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-item__menu-wrapper[b-tp9ux82mk4] {
    position: relative;
    flex-shrink: 0;
    visibility: hidden;
}

.fav-item__menu-wrapper--visible[b-tp9ux82mk4] {
    visibility: visible;
}

.fav-item__menu-btn[b-tp9ux82mk4] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--N600, #8F95B2);
}

.fav-item__menu-btn:hover[b-tp9ux82mk4] {
    background-color: var(--N200, #EDEFF5);
    color: var(--N800, #33415C);
}

.fav-item__menu-dropdown[b-tp9ux82mk4] {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--N200, #E6E8F0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    min-width: 140px;
    padding: 4px 0;
}

.fav-item__menu-option[b-tp9ux82mk4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--N800, #33415C);
    cursor: pointer;
    transition: background-color 0.1s;
}

.fav-item__menu-option:hover[b-tp9ux82mk4] {
    background-color: var(--N75, #F5F6FA);
}

.fav-create-btn[b-tp9ux82mk4] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    margin-top: 8px;
    background: #FFFFFF;
    border: 1px solid var(--N300, #D8DAE5);
    border-radius: 6px;
    color: var(--N800, #33415C);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.fav-create-btn:hover:not(:disabled)[b-tp9ux82mk4] {
    background: var(--N75, #F9FAFC);
}

.fav-create-btn:disabled[b-tp9ux82mk4] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/OpenShiftScheduleCellsComponent.razor.rz.scp.css */
/* Open Shift Schedule Cell Styles - rendered directly in unified row */

/* Desktop: 220px width for 7 days visible without scrolling */
.si-schedule-cell[b-zf8c4os9t8] {
    width: 220px;
    min-width: 220px;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    border-right: 1px solid var(--si-neutral-200, #EDEFF5);
    flex-shrink: 0;
}

.si-schedule-cell:last-child[b-zf8c4os9t8] {
    border-right: none;
}

/* Figma: Weekend columns use Neutral/075 (#F9FAFC) */
.si-schedule-cell.si-weekend[b-zf8c4os9t8] {
    background-color: var(--si-neutral-075, #F9FAFC);
}

/* Figma: Today column - no background color override */
.si-schedule-cell.si-today[b-zf8c4os9t8] {
    /* background-color intentionally removed */
}

/* Shift Item - Figma style */
.si-shift-item[b-zf8c4os9t8] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 6px;
    font-size: 12px;
    background-color: #ffffff;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    color: var(--si-neutral-800);
    overflow: hidden;
    width: 100%;
    height: 34px;
}

.si-shift-item.si-shift-clickable[b-zf8c4os9t8] {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.si-shift-item.si-shift-clickable:hover[b-zf8c4os9t8] {
    transform: translateY(-1px);
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

/* Accent bar on the left */
.si-shift-accent[b-zf8c4os9t8] {
    width: 6px;
    flex-shrink: 0;
    background-color: var(--si-teal-500);
}

/* Open shift - teal accent */
.si-shift-open .si-shift-accent[b-zf8c4os9t8] {
    background-color: var(--si-teal-500);
}

/* Edited shift - red striped accent */
.si-shift-edited .si-shift-accent[b-zf8c4os9t8] {
    background: repeating-linear-gradient(
        -45deg,
        #ffffff,
        #ffffff 2.5px,
        var(--si-red-400) 2.5px,
        var(--si-red-400) 5px
    );
}

/* Main content area */
.si-shift-content[b-zf8c4os9t8] {
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    flex: 1;
    min-width: 0;
}

/* Top row with label, time and icons */
.si-shift-top[b-zf8c4os9t8] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.si-shift-label[b-zf8c4os9t8] {
    font-weight: 700;
    color: var(--si-neutral-900);
}

.si-shift-time[b-zf8c4os9t8] {
    font-weight: 400;
    color: var(--si-neutral-700);
    white-space: nowrap;
}

.si-shift-icons[b-zf8c4os9t8] {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

/* Bottom row with location */
.si-shift-bottom[b-zf8c4os9t8] {
    display: flex;
    align-items: center;
}

.si-shift-location[b-zf8c4os9t8] {
    font-size: 11px;
    color: var(--si-neutral-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* bug-6662 / bug-6660 — Figma deleted shift spec (nodes 9428-580257, 9428-580260, 9428-580263):
   - opacity 0.5 on the whole card (NOT 0.45 + grayscale — that combo was unreadable on tablet)
   - 1px dashed border (Neutral/300 #E6E8F0 — inherited from the base shift card)
   - filter: none (no grayscale)
   - cursor: pointer (clickable to open the history detail panel — bug-6660: not "not-allowed")
   - the accent bar keeps the SHIFT TYPE color: blue for regular Shift, red for OpenShift, green
     for Paycode. We don't override it — letting the lib's per-type rules win is the correct
     behavior per Figma. The lib paints solid color via .gs-blue/.gs-red/.gs-green .gs-accent-bar.
   !important is required because the lib's .gs-deleted[b-…] selector and our scoped override
   share the same specificity (0,2,0) — without !important the lib wins by load order. */
[b-zf8c4os9t8] .si-shift-deleted {
    opacity: 0.5 !important;
    filter: none !important;
    cursor: pointer !important;
    border-style: dashed !important;
    position: relative;
}

/* bug-6662 — Figma keeps the type color on the accent bar even when deleted, but the Zaddons
   lib's `.gs-deleted .gs-accent-bar` rule forces it to grey (Neutral/400 #D8DAE5). Restore the
   per-type color: blue for regular Shift, red for OpenShift, green for Paycode. */
[b-zf8c4os9t8] .si-shift-deleted.gs-blue .gs-accent-bar {
    background-color: var(--si-blue-400, #3366FF) !important;
}
[b-zf8c4os9t8] .si-shift-deleted.gs-red .gs-accent-bar {
    background-color: var(--si-red-400, #D14343) !important;
}
[b-zf8c4os9t8] .si-shift-deleted.gs-green .gs-accent-bar {
    background-color: var(--si-green-400, #52BD94) !important;
}
[b-zf8c4os9t8] .si-shift-deleted.si-paycode .gs-accent-bar {
    background-color: var(--si-green-400, #52BD94) !important;
}

/* Empty cell placeholder */
.si-no-shift[b-zf8c4os9t8] {
    color: var(--si-neutral-400);
    font-size: 14px;
}

/* Shift container - wraps GridShift and schedule tags */
.si-shift-container[b-zf8c4os9t8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Bug #6140 — Schedule tags pill style aligne sur Figma (node 9084:882344).
   Container: flex row + wrap pour remplir la cellule horizontalement et
   passer a la ligne suivante automatiquement quand l'espace manque.
   Pill: fond blanc, bordure Neutral/200, radius 4px, icone 12px coloree. */
.si-schedule-tags[b-zf8c4os9t8] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    padding: 0;
    width: 100%;
}

/* Badge individuel — specs Figma:
   - background: #FFFFFF
   - border: 1px solid Neutral/200 (#EDEFF5)
   - border-radius: 4px
   - padding: 1px 6px
   - gap icone/texte: 4px
   - font: SF Pro Display Medium 12px / line-height 14px / Neutral/800 */
.si-schedule-tag[b-zf8c4os9t8] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--si-neutral-200, #EDEFF5);
    background-color: #FFFFFF;
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--si-neutral-800, #33415C);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

/* Icone tag (toujours presente — fallback bi bi-tag-fill si aucune IconClass
   n'est fournie par le tag). La couleur est pilotee par la var --tag-color
   calculee cote serveur via ScheduleTagHelper. */
.si-schedule-tag-icon[b-zf8c4os9t8] {
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--tag-color, var(--si-neutral-700, #696F8C));
}

/* Nom du tag — ellipsis si trop long dans un pill isole */
.si-schedule-tag-name[b-zf8c4os9t8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive: Tablet (matches ShiftHistoryPage header breakpoint) */
@media (max-width: 1200px) {
    .si-schedule-cell[b-zf8c4os9t8] {
        width: 160px;
        min-width: 160px;
    }
}

/* Responsive: Small screens (matches ShiftHistoryPage header breakpoint) */
@media (max-width: 992px) {
    .si-schedule-cell[b-zf8c4os9t8] {
        width: 120px;
        min-width: 120px;
    }
}

/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/PrintScheduleDialog.razor.rz.scp.css */
/* Print Schedule modal — Figma 9418-441660. Shares the ConfirmDeleteDialog visual language
   (Blue/100 icon tile, bold title, right-aligned Cancel + primary buttons). */

.si-print-overlay[b-fnynrfjyrz] {
    position: fixed;
    inset: 0;
    background-color: rgba(16, 24, 64, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.si-print-dialog[b-fnynrfjyrz] {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 8px 16px rgba(16, 24, 64, 0.16);
    padding: 24px;
    width: 420px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.si-print-close[b-fnynrfjyrz] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--N700, #696F8C);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.si-print-close:hover[b-fnynrfjyrz] {
    background-color: var(--N75, #F9FAFC);
}

.si-print-close .material-icons[b-fnynrfjyrz] {
    font-size: 18px;
}

.si-print-header[b-fnynrfjyrz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Rounded-rectangle tile (matches the favorites empty-state star icon), not a circle. */
.si-print-icon[b-fnynrfjyrz] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: #EBF0FF;
    color: #3366FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.si-print-icon .material-icons[b-fnynrfjyrz] {
    font-size: 22px;
}

.si-print-title[b-fnynrfjyrz] {
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--N900, #001233);
}

.si-print-message[b-fnynrfjyrz] {
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 14px;
    line-height: 18px;
    color: var(--N700, #696F8C);
    padding: 8px 4px 12px;
}

.si-print-actions[b-fnynrfjyrz] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.si-print-btn-cancel[b-fnynrfjyrz] {
    padding: 8px 14px;
    background-color: #FFFFFF;
    border: 1px solid var(--N400, #D8DAE5);
    border-radius: 6px;
    cursor: pointer;
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--N800, #33415C);
}

.si-print-btn-cancel:hover[b-fnynrfjyrz] {
    background-color: var(--N75, #F9FAFC);
}

.si-print-btn-print[b-fnynrfjyrz] {
    padding: 8px 14px;
    background-color: #3366FF;
    border: 1px solid #3366FF;
    border-radius: 6px;
    cursor: pointer;
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
}

.si-print-btn-print:hover[b-fnynrfjyrz] {
    background-color: #2952CC;
    border-color: #2952CC;
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/ScheduleSkeleton.razor.rz.scp.css */
/* Tokens duplicated from ShiftHistoryPage's CSS rather than imported — visual drift on a future grid restyle is preferable to hard breakage. */
.si-skel[b-8pp3wal1lo] {
    --color-neutral-000: #FFFFFF;
    --color-neutral-075: #F9FAFC;
    --color-neutral-200: #EDEFF5;
    --color-neutral-300: #E6E8F0;
    --color-neutral-400: #D8DAE5;
    --color-neutral-700: #696F8C;
    --color-neutral-800: #33415C;
    --skel-base: var(--color-neutral-200);
    --skel-highlight: var(--color-neutral-000);
    --skel-radius: 4px;

    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: var(--color-neutral-000);
}

/* ===== Sections ===== */
.si-skel-section[b-8pp3wal1lo] {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-neutral-200);
    overflow: hidden;
    min-height: 0;
}

.si-skel-section--openshifts[b-8pp3wal1lo] {
    flex: 0 0 30%;
}

.si-skel-section--employees[b-8pp3wal1lo] {
    flex: 1 1 0;
}

.si-skel-section-header[b-8pp3wal1lo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--color-neutral-075);
    border-bottom: 1px solid var(--color-neutral-200);
}

/* ===== Table-ish layout ===== */
.si-skel-table[b-8pp3wal1lo] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.si-skel-table-header[b-8pp3wal1lo],
.si-skel-row[b-8pp3wal1lo] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-neutral-200);
    min-height: 40px;
}

.si-skel-table-header[b-8pp3wal1lo] {
    background-color: var(--color-neutral-075);
    height: 36px;
    min-height: 36px;
}

/* Sticky-ish fixed column. Width should track the real grid's
   --sticky-section-width when set; falls back to a reasonable default. */
.si-skel-fixed-cell[b-8pp3wal1lo] {
    width: var(--sticky-section-width, 280px);
    flex-shrink: 0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-right: 1px solid var(--color-neutral-200);
    background-color: var(--color-neutral-000);
}

.si-skel-fixed-cell--employee[b-8pp3wal1lo] {
    align-items: center;
}

.si-skel-stacked[b-8pp3wal1lo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* Day-cell widths must match `.si-header-date` at every breakpoint — drift here causes a layout shift on swap. */
.si-skel-day-header[b-8pp3wal1lo],
.si-skel-day-cell[b-8pp3wal1lo] {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-neutral-200);
}

.si-skel-day-header[b-8pp3wal1lo] {
    padding: 8px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.si-skel-day-cell[b-8pp3wal1lo] {
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    background-color: var(--color-neutral-000);
}

@media (min-width: 993px) and (max-width: 1200px) {
    .si-skel-day-header[b-8pp3wal1lo],
    .si-skel-day-cell[b-8pp3wal1lo] {
        width: 160px;
        min-width: 160px;
    }
}

@media (max-width: 992px) {
    .si-skel-day-header[b-8pp3wal1lo],
    .si-skel-day-cell[b-8pp3wal1lo] {
        width: 120px;
        min-width: 120px;
    }
}

.si-skel-bar[b-8pp3wal1lo] {
    display: inline-block;
    background-color: var(--skel-base);
    border-radius: var(--skel-radius);
    background-image: linear-gradient(
        90deg,
        var(--skel-base) 0%,
        var(--skel-highlight) 50%,
        var(--skel-base) 100%
    );
    background-size: 200% 100%;
    animation: si-skel-shimmer-b-8pp3wal1lo 1.4s ease-in-out infinite;
}

.si-skel-bar--title[b-8pp3wal1lo]       { width: 140px; height: 16px; }
.si-skel-bar--count[b-8pp3wal1lo]       { width: 36px;  height: 12px; }
.si-skel-bar--cell[b-8pp3wal1lo]        { width: 60%;   height: 12px; }
.si-skel-bar--day-label[b-8pp3wal1lo]   { width: 32px;  height: 12px; }
.si-skel-bar--text-md[b-8pp3wal1lo]     { width: 70%;   height: 12px; }
.si-skel-bar--text-sm[b-8pp3wal1lo]     { width: 45%;   height: 10px; }
.si-skel-bar--shift[b-8pp3wal1lo]       { width: 80%;   height: 14px; }
.si-skel-bar--shift-sm[b-8pp3wal1lo]    { width: 55%;   height: 10px; }

.si-skel-avatar[b-8pp3wal1lo] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--skel-base);
    background-image: linear-gradient(
        90deg,
        var(--skel-base) 0%,
        var(--skel-highlight) 50%,
        var(--skel-base) 100%
    );
    background-size: 200% 100%;
    animation: si-skel-shimmer-b-8pp3wal1lo 1.4s ease-in-out infinite;
}

/* Per-row stagger so the grid doesn't pulse in lockstep. */
.si-skel-row:nth-child(2n) .si-skel-bar[b-8pp3wal1lo],
.si-skel-row:nth-child(2n) .si-skel-avatar[b-8pp3wal1lo] {
    animation-delay: 0.18s;
}
.si-skel-row:nth-child(3n) .si-skel-bar[b-8pp3wal1lo],
.si-skel-row:nth-child(3n) .si-skel-avatar[b-8pp3wal1lo] {
    animation-delay: 0.36s;
}

@keyframes si-skel-shimmer-b-8pp3wal1lo {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .si-skel-bar[b-8pp3wal1lo],
    .si-skel-avatar[b-8pp3wal1lo] {
        animation: none;
        background-image: none;
        background-color: var(--skel-base);
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/ShiftDayDetailPanel.razor.rz.scp.css */
/* Day Detail Side Panel Styles */

.si-day-panel-footer[b-9809f9k18f] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

.si-day-panel-btn-close[b-9809f9k18f] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #D8DAE5;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #33415C;
    text-align: center;
    white-space: nowrap;
}

.si-day-panel-btn-close:hover[b-9809f9k18f] {
    background-color: #F9FAFC;
}


/* bug-6656 — Schedule Tags section card per Figma node 9429-607373 (ScheduleTag.Details.Card).
   White card on a Neutral/300 border with rounded corners; the tag name pill sits at the top
   left, optional time range and "Added on … by …" meta lines stack underneath. */
.si-day-panel-schedule-tag-card[b-9809f9k18f] {
    background-color: var(--N0, #FFFFFF);
    border: 1px solid var(--N300, #E6E8F0);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

/* task-6444 follow-up — Tag content stacks vertically inside the card; the Delete button
   stays right-aligned at the top via margin-left:auto. */
.si-day-panel-schedule-tag-content[b-9809f9k18f] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.si-day-panel-schedule-tag-time[b-9809f9k18f] {
    font-size: 12px;
    font-weight: 500;
    color: var(--N800, #33415C);
    line-height: 14px;
}

.si-day-panel-schedule-tag-meta[b-9809f9k18f] {
    font-size: 12px;
    color: var(--N600, #8F95B2);
    line-height: 14px;
}

/* US #6451: Delete button on schedule-tag card (only when IsOwnedByCurrentUser).
   Sits at the right of the card, ghost-style → red tint on hover for affordance. */
.si-day-panel-schedule-tag-delete[b-9809f9k18f] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--N700, #696F8C);
}

/* User direction: hover affordance reste bleu pâle, pas rouge. */
.si-day-panel-schedule-tag-delete:hover[b-9809f9k18f] {
    background-color: #EBF0FF;
    color: #2952CC;
}

.si-day-panel-schedule-tag-delete .material-icons[b-9809f9k18f],
.si-day-panel-schedule-tag-delete .material-icons-outlined[b-9809f9k18f] {
    font-size: 18px;
}

.si-day-panel-schedule-tag-card:last-child[b-9809f9k18f] {
    margin-bottom: 0;
}

.si-day-panel-schedule-tag-pill[b-9809f9k18f] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    background-color: var(--N0, #FFFFFF);
    border: 1px solid var(--N200, #EDEFF5);
    border-radius: 4px;
    align-self: flex-start;
}

.si-day-panel-schedule-tag-dot[b-9809f9k18f] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.si-day-panel-schedule-tag-name[b-9809f9k18f] {
    font-size: 12px;
    font-weight: 500;
    color: var(--N800, #33415C);
    line-height: 14px;
}


/* Header: close button + date with proper spacing */
.si-day-panel-header[b-9809f9k18f] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 16px;
}

.si-day-panel-close[b-9809f9k18f] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--N700, #696F8C);
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

.si-day-panel-close:hover[b-9809f9k18f] {
    background-color: var(--N100, #F4F6FA);
}

.si-day-panel-date[b-9809f9k18f] {
    font-size: 16px;
    font-weight: 600;
    color: var(--N900, #001233);
}

/* Panel body: muted background, all content sits on this */
.si-day-panel-body[b-9809f9k18f] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--N50, #FAFBFF);
    min-height: 100%;
}

/* Identity header: white background with border-bottom */
.si-day-panel-identity[b-9809f9k18f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--N200, #EDEFF5);
}

.si-day-panel-identity-name[b-9809f9k18f] {
    font-size: 16px;
    font-weight: 600;
    color: var(--N900, #001233);
}

.si-day-panel-section[b-9809f9k18f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.si-day-panel-section-header[b-9809f9k18f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--N200, #EDEFF5);
}

/* User direction (Figma 9506-516021): in the comment card overflow menu, "Delete Comment"
   stays grey like "Edit Comment" — the lib's GridShiftCommentCard CSS forces .gs-comment-
   action-delete to red (#A73636). Override via ::deep so the menu item picks up the
   neutral text color of its sibling action. */
.si-day-panel-host[b-9809f9k18f]  .gs-comment-action-delete {
    color: var(--N800, #33415C) !important;
}

.si-day-panel-section-title[b-9809f9k18f] {
    font-size: 14px;
    font-weight: 600;
    color: var(--N900, #001233);
}

/* Elevated card for each shift/paycode item */
.si-day-panel-card[b-9809f9k18f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background-color: #FFFFFF;
    border: 1px solid var(--N200, #EDEFF5);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Badges row — Figma 9429-607373 puts the type chip and the status text inline. */
.si-day-panel-badges-row[b-9809f9k18f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.si-day-panel-type-badge[b-9809f9k18f] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Status label (Edited / Deleted) — Figma: plain Neutral/600 12px Regular, no chrome.
   Sits inline beside the type chip. */
.si-day-panel-status-label[b-9809f9k18f] {
    font-family: "SF Pro Display", var(--font-family, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: var(--N600, #8F95B2);
}

.si-badge-paycode[b-9809f9k18f] {
    background-color: var(--G50, #DCF2EA);
    color: var(--G700, #317159);
}

.si-badge-shift[b-9809f9k18f] {
    background-color: var(--B50, #D6E0FF);
    color: var(--B700, #2952CC);
}

.si-badge-openshift[b-9809f9k18f] {
    background-color: var(--R50, #FEF0EF);
    color: var(--R700, #7D2828);
}

.si-day-panel-item-date[b-9809f9k18f] {
    font-size: 13px;
    color: var(--N700, #696F8C);
}

.si-day-panel-item-info[b-9809f9k18f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.si-day-panel-item-label[b-9809f9k18f] {
    font-size: 14px;
    font-weight: 500;
    color: var(--N900, #001233);
}

.si-day-panel-item-desc[b-9809f9k18f] {
    font-size: 12px;
    color: var(--N700, #696F8C);
}

/* View History button: full width, slim */
.si-day-panel-btn-history[b-9809f9k18f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: none;
    border: 1px solid var(--N300, #E6E8F0);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--N800, #474D66);
    transition: background-color 0.15s ease;
}

.si-day-panel-btn-history:hover[b-9809f9k18f] {
    background-color: var(--N100, #F4F6FA);
}

/* bug-6648: per Figma node 9418-354057 the SidePanel.ScheduleDetails is 400px wide.
   The lib's SidePanel renders <aside class="sp-sm"> at 350px by default. The razor wraps
   <SidePanel> in <div class="si-day-panel-host"> — the wrapper is the element that carries OUR
   scope attribute. The aside is rendered by the lib (with the lib's own scope) as a descendant.
   ::deep must come AFTER the host class so it compiles to
   `.si-day-panel-host[b-myScope] aside.sp-sm` (host has the scope, aside is any descendant).
   With `::deep` BEFORE the host, the rule would compile to
   `[b-myScope] .si-day-panel-host aside.sp-sm` which requires the host to be a descendant of
   another scoped element — and it isn't, so it never matches. */
.si-day-panel-host[b-9809f9k18f]  aside.sp-sm {
    width: 400px !important;
}

/* Action buttons container — column of "rows": View History (full width row 1) then a flex row
   with Add Comment + Add Segment Tags + overflow "..." (row 2). */
.si-day-panel-actions[b-9809f9k18f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* bug-6648: row that hosts Add Comment, Add Segment Tags, and the overflow menu inline. */
.si-day-panel-actions-row[b-9809f9k18f] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
}

/* bug-6648 — Per Figma node 9418-354057 the action buttons keep their natural width (Add Comment
   ~104px, Add Segment Tags (All) ~149px) and stay on a single line. flex: 0 0 auto + nowrap
   prevents the equal-share that was wrapping "Add Segment Tags (All)" on 2 lines. The overflow
   wrapper is pushed to the far right via margin-left:auto on its rule below. */
.si-day-panel-btn-action[b-9809f9k18f] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--N300, #E6E8F0);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--N800, #474D66);
    transition: background-color 0.15s ease;
}

.si-day-panel-btn-action:hover[b-9809f9k18f] {
    background-color: var(--N100, #F4F6FA);
}

.si-day-panel-btn-icon[b-9809f9k18f] {
    font-size: 16px;
    line-height: 1;
}

/* View details expandable row */
.si-day-panel-expandable[b-9809f9k18f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 0;
    cursor: pointer;
}

.si-day-panel-expandable-label[b-9809f9k18f] {
    font-size: 13px;
    font-weight: 500;
    color: var(--N900, #001233);
}

.si-day-panel-expandable-chevron[b-9809f9k18f] {
    font-size: 20px;
    color: var(--N700, #696F8C);
}

.si-day-panel-expandable:hover .si-day-panel-expandable-label[b-9809f9k18f] {
    color: var(--N800, #474D66);
}

/* Details section: expands inside the card, no sub-card border */
.si-day-panel-item-details[b-9809f9k18f] {
    padding-top: 8px;
    border-top: 1px solid var(--N200, #EDEFF5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.si-day-panel-detail-section[b-9809f9k18f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.si-day-panel-detail-section-header[b-9809f9k18f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.si-day-panel-detail-title[b-9809f9k18f] {
    font-size: 13px;
    font-weight: 600;
    color: var(--N800, #474D66);
}

/* Inline "Add" button in section headers (Comments, Tags) */
.si-day-panel-btn-add-inline[b-9809f9k18f] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: none;
    border: 1px solid var(--N400, #D8DAE5);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--B400, #3366FF);
    cursor: pointer;
    white-space: nowrap;
}

.si-day-panel-btn-add-inline:hover[b-9809f9k18f] {
    background-color: var(--B50, #EBF0FF);
}

/* bug-6683 follow-up — Removed the old ::deep override that wrapped each
   .gs-comment-card in a bordered white box with padding 8/12 + radius 6. Per
   Figma node 9418-353735 the comment frame has NO chrome of its own; the grey
   pill shows only on the inner note text (.gs-comment-note-card), not on the
   whole comment. The override below near the bottom of this file
   (.si-day-panel-host ::deep .gs-comment-note-card) drives the note pill. */

/* ===== US #6439: Custom segments list with per-row overflow ===== */
/* bug-6683 follow-up — Side panel segments section per Figma node 9418-353735.
   Was rendered as bordered + bg cards with 6/8 padding which didn't match the
   Figma "ShiftDetails.SegmentItem" spec (plain rows, no card chrome — gap 4
   between number/content and a centered overflow button). */
.si-day-panel-segments[b-9809f9k18f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.si-day-panel-segment-row[b-9809f9k18f] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
}

.si-day-panel-segment-index[b-9809f9k18f] {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--N800, #33415C);
    width: 16px;
    flex-shrink: 0;
    text-align: left;
}

.si-day-panel-segment-body[b-9809f9k18f] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.si-day-panel-segment-line[b-9809f9k18f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.si-day-panel-segment-time[b-9809f9k18f] {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--N800, #33415C);
}

.si-day-panel-segment-transfer[b-9809f9k18f] {
    font-size: 16px;
    color: #6c757d;
}

/* bug-6684: "Break" label inline next to segment time. Figma node 8453-546886
   renders this as plain text (no badge background) — Text/SM-Medium 12/14
   Neutral/800. Lives on the same line as the time/transfer icon thanks to the
   parent flex row. */
.si-day-panel-segment-break[b-9809f9k18f] {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #33415C;
}

.si-day-panel-segment-orgpath[b-9809f9k18f] {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: var(--N700, #696F8C);
    word-break: break-all;
}

/* bug-6683 follow-up: tag pills inside segments — Figma 9418-353735 spec.
   Was rounded 12 with grey background; Figma uses small bordered white badges
   with rounded 2 and tag-color icon. Parent body's gap: 4 already supplies the
   margin-top so the explicit margin-top on .si-day-panel-segment-tags can go. */
.si-day-panel-segment-tags[b-9809f9k18f] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.si-day-panel-segment-tag-pill[b-9809f9k18f] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    background: #FFFFFF;
    border: 1px solid var(--N200, #EDEFF5);
    border-radius: 2px;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    color: var(--N800, #33415C);
}

.si-day-panel-segment-tag-dot[b-9809f9k18f] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.si-day-panel-segment-tag-name[b-9809f9k18f] {
    line-height: 1;
}

/* Skill & Certification Profiles */
.si-day-panel-segment-scprofiles[b-9809f9k18f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.si-day-panel-segment-scprofiles-title[b-9809f9k18f] {
    font-weight: 600;
    font-size: 0.8rem;
    color: #333;
}

.si-day-panel-segment-scprofile-name[b-9809f9k18f] {
    font-size: 0.8rem;
    color: #555;
}

/* Per-segment overflow popover */
.si-day-panel-segment-overflow-wrapper[b-9809f9k18f] {
    position: relative;
}

.si-day-panel-segment-overflow-btn[b-9809f9k18f] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #6c757d;
}

.si-day-panel-segment-overflow-btn:hover[b-9809f9k18f] {
    background: #f3f4f6;
    color: #1f2329;
}

.si-day-panel-segment-overflow-btn .material-icons[b-9809f9k18f] {
    font-size: 18px;
}

.si-day-panel-segment-overflow-menu[b-9809f9k18f] {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 10;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid var(--N300, #E6E8F0);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 4px;
}

.si-day-panel-segment-overflow-item[b-9809f9k18f] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    color: #1f2329;
    cursor: pointer;
    text-align: left;
}

.si-day-panel-segment-overflow-item:hover[b-9809f9k18f] {
    background: #f3f4f6;
}

.si-day-panel-segment-overflow-item .material-icons-outlined[b-9809f9k18f] {
    font-size: 16px;
    color: #6c757d;
}

/* bug-6648: shift-level overflow popover (the "..." in the actions row).
   Mirrors the per-segment overflow above, sized 28x28 to match the surrounding action buttons.
   margin-left:auto pushes it to the far-right edge of the row (per Figma node 9418-354057). */
.si-day-panel-shift-overflow-wrapper[b-9809f9k18f] {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

.si-day-panel-shift-overflow-btn[b-9809f9k18f] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--N300, #E6E8F0);
    border-radius: 6px;
    cursor: pointer;
    color: #6c757d;
}

.si-day-panel-shift-overflow-btn:hover[b-9809f9k18f] {
    background: var(--N100, #F4F6FA);
    color: var(--N800, #474D66);
}

.si-day-panel-shift-overflow-btn .material-icons[b-9809f9k18f] {
    font-size: 18px;
}

.si-day-panel-shift-overflow-menu[b-9809f9k18f] {
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 10;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid var(--N300, #E6E8F0);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 4px;
}

.si-day-panel-shift-overflow-item[b-9809f9k18f] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    color: #1f2329;
    cursor: pointer;
    text-align: left;
}

.si-day-panel-shift-overflow-item:hover[b-9809f9k18f] {
    background: #f3f4f6;
}

.si-day-panel-shift-overflow-item .material-icons-outlined[b-9809f9k18f] {
    font-size: 16px;
    color: #6c757d;
}

/* ==========================================================================
   bug-6683 follow-up — Side panel comment cards (Figma node 9418-353735).
   Scoped overrides on .si-day-panel-host so the modal/tooltip versions of
   GridShiftCommentCard keep their existing styling. The side panel needs:
     - title 12px Medium #33415C (lib default is 14px Bold #001233)
     - meta colour Neutral/600 #8F95B2 (lib default uses #696F8C)
     - note pill bg Neutral/200 #EDEFF5 + text #696F8C 12px Regular
       (lib default has bg #F4F5F9 + text 14px #33415C)
   ========================================================================== */

.si-day-panel-host[b-9809f9k18f]  .gs-comment-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--N800, #33415C);
}

.si-day-panel-host[b-9809f9k18f]  .gs-comment-meta {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: var(--N600, #8F95B2);
    gap: 4px;
}

.si-day-panel-host[b-9809f9k18f]  .gs-comment-author {
    font-weight: 400;
}

.si-day-panel-host[b-9809f9k18f]  .gs-comment-note-card {
    padding: 6px;
    background-color: var(--N200, #EDEFF5);
    font-size: 12px;
    line-height: 14px;
    color: var(--N700, #696F8C);
}

@media (max-width: 1200px) {
    .si-day-panel-host[b-9809f9k18f]  aside.sp-sm {
        width: 360px !important;
    }

    .si-day-panel-header[b-9809f9k18f] {
        gap: 16px;
        padding: 10px 12px;
    }

    .si-day-panel-body[b-9809f9k18f] {
        padding: 12px;
        gap: 12px;
    }

    .si-day-panel-identity[b-9809f9k18f] {
        padding: 10px 12px;
    }

    .si-day-panel-card[b-9809f9k18f] {
        padding: 10px;
    }

    /* Tablet touch targets: ≥44px for all interactive elements */
    .si-day-panel-btn-action[b-9809f9k18f],
    .si-day-panel-btn-history[b-9809f9k18f] {
        min-height: 44px;
        padding: 10px 12px;
    }

    .si-day-panel-btn-add-inline[b-9809f9k18f] {
        min-height: 44px;
        padding: 10px 12px;
    }

    .si-day-panel-segment-overflow-btn[b-9809f9k18f],
    .si-day-panel-shift-overflow-btn[b-9809f9k18f] {
        width: 44px;
        height: 44px;
    }

    .si-day-panel-close[b-9809f9k18f] {
        min-width: 44px;
        min-height: 44px;
    }

    .si-day-panel-schedule-tag-delete[b-9809f9k18f] {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 992px) {
    .si-day-panel-host[b-9809f9k18f]  aside.sp-sm {
        width: 320px !important;
    }

    .si-day-panel-header[b-9809f9k18f] {
        gap: 12px;
        padding: 8px 10px;
    }

    .si-day-panel-body[b-9809f9k18f] {
        padding: 10px;
        gap: 10px;
    }

    .si-day-panel-actions-row[b-9809f9k18f] {
        flex-wrap: wrap;
    }

    .si-day-panel-shift-overflow-wrapper[b-9809f9k18f] {
        margin-left: auto;
    }

    .si-day-panel-segment-overflow-menu[b-9809f9k18f],
    .si-day-panel-shift-overflow-menu[b-9809f9k18f] {
        min-width: 180px;
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/ShiftHistoryModal.razor.rz.scp.css */
/* ================================================
   SHIFT HISTORY MODAL - FIGMA COMPLIANT STYLES
   Based on: Modal.ShiftHistory (Type=Timeline)
   Figma Node: 8504:578484
   Cache Date: 2026-02-03
   ================================================ */

/* CSS Variables from figma-modal-cache.json
   Note: Scoped to .si-modal-container instead of :root because
   Blazor CSS isolation rewrites :root to :root[b-xxx] which never matches <html>. */
.si-modal-container[b-k3035f13cw] {
    --modal-width: 1200px;
    --modal-height: 880px;
    --modal-border-radius: 16px;
    --header-height: 64px;
    --header-padding: 16px 24px;
    --content-padding: 24px;
    --content-gap: 16px;
    --table-border-radius: 8px;
    --table-header-height: 48px;
    --fixed-column-width: 200px;
    --table-column-width: 317.33px;
    --day-button-size: 32px;
    --color-modal-neutral-000: #FFFFFF;
    --color-modal-neutral-075: #F9FAFC;
    --color-modal-neutral-200: #EDEFF5;
    --color-modal-neutral-400: #D8DAE5;
    --color-modal-neutral-700: #696F8C;
    --color-modal-neutral-800: #33415C;
    --color-modal-neutral-900: #001233;
    --color-modal-overlay-100: rgba(0, 18, 51, 0.08);
    --color-modal-scroll-thumb: #A5A7AF;
    --shadow-modal-sm: 0px 4px 8px 0px rgba(16, 24, 64, 0.08);
    --font-modal-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Overlay */
.si-modal-overlay[b-k3035f13cw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 18, 51, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.si-modal-overlay.si-modal-visible[b-k3035f13cw] {
    opacity: 1;
    pointer-events: auto;
}

.si-modal-overlay.si-modal-hidden[b-k3035f13cw] {
    opacity: 0;
    pointer-events: none;
}

/* Modal Container - Figma: 1200x880, user prefers WIDER.
   Bug #5856: bumped max-width 1400→1600 so segments/comments columns have room
   to breathe without forcing horizontal scroll on typical shifts. */
.si-modal-container[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    border: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    border-radius: var(--modal-border-radius, 16px);
    box-shadow: var(--shadow-modal-sm, 0px 4px 8px 0px rgba(16, 24, 64, 0.08));
    width: 95%;
    max-width: 1600px;
    height: 95vh;
    max-height: 1050px;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.si-modal-visible .si-modal-container[b-k3035f13cw] {
    transform: scale(1);
}

/* ===== HEADER (Figma: SidePanelHeader - 8219:457801) ===== */
.si-modal-header[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height, 64px);
    padding: var(--header-padding, 16px 24px);
    gap: 8px;
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    flex-shrink: 0;
}

/* Figma: header.leftSection */
.si-modal-header-left[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1;
}

.si-modal-title-section[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Figma: header.title - Text/LG - Semibold (16px, 600, Neutral/900) */
.si-modal-title[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25em;
    text-align: left;
    color: var(--color-modal-neutral-900, #001233);
    margin: 0;
}

/* Figma: header.description - Text/MD - Regular (14px, 400, Neutral/700) */
.si-modal-subtitle[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14em;
    color: var(--color-modal-neutral-700, #696F8C);
}

/* Figma: header.rightSection */
.si-modal-header-right[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

/* ===== BUTTONS (Figma: Button - 6201:148884) ===== */
.si-modal-btn[b-k3035f13cw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.14em;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Ghost Button - Figma: Button.Ghost */
.si-modal-btn-ghost[b-k3035f13cw] {
    background-color: transparent;
    color: var(--color-modal-neutral-800, #33415C);
}

.si-modal-btn-ghost:hover[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-075, #F9FAFC);
}

/* Secondary Button - Figma: Button.Secondary */
.si-modal-btn-secondary[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    border: 1px solid var(--color-modal-neutral-400, #D8DAE5);
    color: var(--color-modal-neutral-800, #33415C);
}

.si-modal-btn-secondary:hover[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-075, #F9FAFC);
}

.si-modal-btn-secondary:disabled[b-k3035f13cw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon-only Button */
.si-modal-btn-icon[b-k3035f13cw] {
    width: var(--day-button-size, 32px);
    height: var(--day-button-size, 32px);
    padding: 8px;
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    border: 1px solid var(--color-modal-neutral-400, #D8DAE5);
    color: var(--color-modal-neutral-800, #33415C);
}

.si-modal-btn-icon:hover[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-075, #F9FAFC);
}

.si-modal-btn-icon:disabled[b-k3035f13cw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== CONTENT AREA (Figma: content) ===== */
.si-modal-content[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--content-gap, 16px);
    padding: var(--content-padding, 24px);
    overflow-y: auto;
    background: var(--color-modal-neutral-000, #FFFFFF);
}

/* ===== ACTION BAR (Figma: TableActionsShiftHistoryModal - 8504:576860) ===== */
.si-modal-action-bar[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    gap: 45px;
    flex-shrink: 0;
}

/* View Toggle Container - Figma: viewToggle */
.si-view-toggle[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 2px;
    background-color: var(--color-modal-neutral-075, #F9FAFC);
    border-radius: 6px;
}

/* Figma: viewToggle.inactiveButton */
.si-toggle-btn[b-k3035f13cw] {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-modal-neutral-800, #33415C);
    cursor: pointer;
    transition: all 0.15s ease;
}

.si-toggle-btn:hover[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-200, #EDEFF5);
}

/* Figma: viewToggle.activeButton */
.si-toggle-btn.si-toggle-active[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    border: 1px solid var(--color-modal-neutral-400, #D8DAE5);
    box-shadow: none;
}

/* Navigation Buttons - Figma: navigation */
[b-k3035f13cw] .si-modal-nav {
    flex: 1;
    justify-content: flex-end;
    /* Map paginator tokens to modal palette */
    --zp-border: var(--color-modal-neutral-400, #D8DAE5);
    --zp-bg: var(--color-modal-neutral-000, #FFFFFF);
    --zp-color: var(--color-modal-neutral-800, #33415C);
    --zp-bg-hover: var(--color-modal-neutral-075, #F9FAFC);
    --zp-border-hover: var(--color-modal-neutral-700, #696F8C);
    --zp-active-bg: var(--color-modal-neutral-200, #EDEFF5);
    --zp-active-color: var(--color-modal-neutral-800, #33415C);
    --zp-active-bg-hover: #E0E3EB;
    --zp-color-muted: var(--color-modal-neutral-700, #696F8C);
}

/* ===== TABLE (Figma: table) ===== */
.si-modal-table[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    border: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    border-radius: var(--table-border-radius, 8px);
    overflow: hidden;
}

/* Figma: tableRow */
.si-modal-table-row[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 8px;
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
}

.si-modal-table-row:last-child[b-k3035f13cw] {
    border-bottom: none;
}

/* Figma: tableHeader - 48px height */
.si-modal-table-header[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: var(--table-header-height, 48px);
    padding: 16px 8px;
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    flex-shrink: 0;
}

.si-modal-table-row-empty[b-k3035f13cw] {
    flex: 1;
    min-height: 100px;
}

/* Table Cells - Figma: tableRow padding 16px 8px */
.si-modal-table-cell[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 8px;
}

/* Figma: fixedColumn - 200px width */
.si-modal-cell-id[b-k3035f13cw] {
    width: var(--fixed-column-width, 200px);
    min-width: var(--fixed-column-width, 200px);
    padding: 0px 8px;
    border-right: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    background-color: var(--color-modal-neutral-000, #FFFFFF);
}

/* Figma: tableColumn - 317.33px width */
.si-modal-cell-content[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0px 8px;
    border-right: 1px solid var(--color-modal-neutral-200, #EDEFF5);
}

.si-modal-cell-content:last-child[b-k3035f13cw] {
    border-right: none;
}

/* Header Cell Text - Figma: Text/MD - Semibold (14px, 600, Neutral/800) */
.si-cell-header-text[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.14em;
    text-align: left;
    color: var(--color-modal-neutral-800, #33415C);
}

/* Employee Name in ID Column - Figma: Text/MD - Semibold */
.si-employee-name[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.14em;
    text-align: left;
    color: var(--color-modal-neutral-800, #33415C);
}

/* ===== SEGMENTS TIMELINE ===== */
.si-segments-timeline[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.si-segment-row[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

/* Figma: Text/MD - Semibold (14px, 600, Neutral/800) */
.si-segment-number[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
    min-width: 20px;
}

.si-segment-info[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.si-segment-title-row[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Figma: Text/MD - Semibold (14px, 600, Neutral/800) */
.si-segment-time-range[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
}

.si-segment-icon[b-k3035f13cw] {
    /* Applied via MaterialIconComponent CssClass */
    color: var(--color-modal-neutral-700, #696F8C);
}

/* Figma: Text/SM - Regular (12px, 400, Neutral/700) */
.si-segment-location[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    text-align: center;
    color: var(--color-modal-neutral-700, #696F8C);
}

/* ===== SCROLL STYLING (Figma: scrollThumb) ===== */
.si-modal-table[b-k3035f13cw]::-webkit-scrollbar {
    height: 12px;
}

.si-modal-table[b-k3035f13cw]::-webkit-scrollbar-track {
    flex: 1;
    height: 8px;
}

.si-modal-table[b-k3035f13cw]::-webkit-scrollbar-thumb {
    background: var(--color-modal-scroll-thumb, #A5A7AF);
    border-radius: 16px;
}

/* ===== DAY PICKER BUTTONS (Figma: navigation.dayButton) ===== */
.si-day-btn[b-k3035f13cw] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--day-button-size, 32px);
    height: var(--day-button-size, 32px);
    border-radius: 4px;
    border: none;
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-modal-neutral-800, #33415C);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.si-day-btn:hover[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-075, #F9FAFC);
}

/* Figma: navigation.dayButtonActive */
.si-day-btn.si-day-active[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-200, #EDEFF5);
}

/* Figma: DatePickerDay disabled state */
.si-day-btn:disabled[b-k3035f13cw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== AUDIT INFO STYLES ===== */
.si-audit-info[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    color: var(--color-modal-neutral-700, #696F8C);
    margin-top: 4px;
}

/* ===== LOADING STYLES ===== */
.si-loading-text[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-modal-neutral-700, #696F8C);
    font-style: italic;
}

.si-loading-spinner[b-k3035f13cw] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-modal-neutral-200, #EDEFF5);
    border-radius: 50%;
    border-top-color: var(--color-modal-neutral-700, #696F8C);
    animation: si-spin-b-k3035f13cw 1s linear infinite;
}

@keyframes si-spin-b-k3035f13cw {
    to {
        transform: rotate(360deg);
    }
}

/* ===== TIMELINE VIEW (Figma: Type=Timeline) ===== */
.si-timeline-table[b-k3035f13cw] {
    display: grid;
    grid-template-columns: var(--fixed-column-width, 200px) 1fr;
    grid-template-rows: repeat(10, auto);
    flex-shrink: 0;
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    border: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    border-radius: var(--table-border-radius, 8px);
    overflow: hidden;
}

.si-timeline-loading[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    grid-column: 1 / -1;
    padding: 48px;
}

/* Fixed Left Column with Row Labels (Figma: fixedColumn - 200px) */
.si-timeline-fixed-column[b-k3035f13cw] {
    grid-column: 1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    border-right: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    background-color: var(--color-modal-neutral-000, #FFFFFF);
}

/* Label Cell in Fixed Column */
.si-timeline-label-cell[b-k3035f13cw] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 8px;
    min-height: 48px;
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    background-color: var(--color-modal-neutral-000, #FFFFFF);
}

/* Header row in fixed column — matches the column header row height */
.si-timeline-label-cell.si-timeline-label-header[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-000, #FFFFFF);
}

.si-timeline-label-cell.si-timeline-label-segments[b-k3035f13cw] {
    align-items: flex-start;
    padding-top: 16px;
}

.si-timeline-label-cell:last-child[b-k3035f13cw] {
    border-bottom: none;
}

/* Row label text (Figma: Text/MD - Regular, 14px/400/Neutral-700) */
.si-cell-label-text[b-k3035f13cw] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14em;
    color: var(--color-modal-neutral-700, #696F8C);
}

/* Scrollable Columns Area (Figma: tableColumns) */
.si-timeline-columns-area[b-k3035f13cw] {
    grid-column: 2;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Timeline columns share the remaining width equally so the 3 visible columns
   fill the modal — no empty space to the right of the 3rd column.
   `1fr` distributes available space evenly, `min-width:0` allows the columns
   to shrink below their content width if needed (avoids overflow). */
.si-timeline-columns-scroll[b-k3035f13cw] {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    grid-auto-columns: minmax(var(--table-column-width, 317.33px), 1fr);
    grid-auto-flow: column;
    width: 100%;
}

/* Individual Column (Figma: tableColumn - 317.33px) */
.si-timeline-column[b-k3035f13cw] {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    border-right: 1px solid var(--color-modal-neutral-200, #EDEFF5);
}

.si-timeline-column:last-child[b-k3035f13cw] {
    border-right: none;
}

.si-timeline-column-empty[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-075, #F9FAFC);
}

/* Data Cell in Scrollable Column */
.si-timeline-data-cell[b-k3035f13cw] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 8px;
    min-height: 48px;
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    background-color: var(--color-modal-neutral-000, #FFFFFF);
}

/* Column header row (Figma: Column Headers - 48px, Neutral/000 background) */
.si-timeline-data-cell.si-timeline-data-header[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    justify-content: space-between;
}

.si-timeline-data-cell.si-timeline-data-actions[b-k3035f13cw] {
    flex-wrap: wrap;
    gap: 4px;
}

.si-timeline-data-cell.si-timeline-data-segments[b-k3035f13cw] {
    align-items: flex-start;
    padding-top: 16px;
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
}

/* Override shared segment component styles for timeline context (Figma: 14px, Neutral/800) */
.si-timeline-data-segments[b-k3035f13cw]  .gs-segment-number,
.si-timeline-data-segments[b-k3035f13cw]  .gs-segment-time {
    font-size: 14px;
    color: var(--color-modal-neutral-800, #33415C);
}

.si-timeline-data-segments[b-k3035f13cw]  .gs-segment-detail {
    font-size: 12px;
    color: var(--color-modal-neutral-700, #696F8C);
}

.si-timeline-data-cell.si-timeline-data-comments[b-k3035f13cw] {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 8px;
}

.si-timeline-data-comments[b-k3035f13cw]  .gs-comment-card {
    padding: 8px 10px;
    background-color: var(--color-modal-neutral-075, #F9FAFC);
    border-radius: 4px;
}

.si-timeline-data-cell:last-child[b-k3035f13cw] {
    border-bottom: none;
}

/* Timeline ID (Figma: Text/MD - Semibold) */
.si-timeline-id[b-k3035f13cw] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
}

/* Timeline Value (Figma: Text/MD - Regular) */
.si-timeline-value[b-k3035f13cw] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
}

/* Muted style for unassigned values */
.si-timeline-value-muted[b-k3035f13cw] {
    color: var(--color-modal-neutral-400, #8E99AB);
}

/* Timeline Employee Row */
.si-timeline-employee[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.si-timeline-avatar[b-k3035f13cw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-modal-neutral-200, #EDEFF5);
}

.si-timeline-employee-name[b-k3035f13cw] {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
}


/* ===== LIST VIEW (Figma: Type=List) ===== */
.si-list-table[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    border: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    border-radius: var(--table-border-radius, 8px);
    overflow: hidden;
}

.si-list-loading[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 1;
    padding: 48px;
}

/* Single scroll wrapper — handles both horizontal and vertical scrolling
   so that header and body always scroll together horizontally */
.si-list-scroll-wrapper[b-k3035f13cw] {
    flex: 1;
    overflow: auto;
}

/* Inner container uses CSS Grid so columns align across header and all data rows.
   Bug #5856: two templates depending on whether outcome/source columns are shown.
   Since rows use `display: contents`, cells are auto-placed sequentially — the
   number of grid columns must match the number of cells actually rendered per row,
   otherwise later columns (segments, comments) get squeezed into the wrong slots
   and content overlaps visually. */
.si-list-inner[b-k3035f13cw] {
    display: grid;
    grid-template-columns:
        40px          /* rownum */
        100px         /* type */
        140px         /* employee */
        150px         /* updatedon */
        150px         /* assignedto */
        180px         /* action */
        130px         /* outcome */
        100px         /* source */
        minmax(120px, max-content) /* shiftlabel */
        110px         /* shiftdate */
        minmax(260px, max-content) /* segments */
        minmax(180px, 1fr);        /* comments */
    min-width: max-content;
}

.si-list-inner.si-list-no-outcome[b-k3035f13cw] {
    grid-template-columns:
        40px          /* rownum */
        100px         /* type */
        140px         /* employee */
        150px         /* updatedon */
        150px         /* assignedto */
        180px         /* action */
        100px         /* source */
        minmax(120px, max-content) /* shiftlabel */
        110px         /* shiftdate */
        minmax(260px, max-content) /* segments */
        minmax(180px, 1fr);        /* comments */
}

/* List Header (Figma: TableHeader) */
.si-list-header[b-k3035f13cw] {
    display: contents;
}

/* Sticky header background — since display:contents removes the box,
   apply row styling to each header cell instead */
.si-list-header > .si-list-cell[b-k3035f13cw] {
    position: sticky;
    top: 0;
    z-index: 1;
    height: var(--table-header-height, 48px);
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
}

/* List Body */
.si-list-body[b-k3035f13cw] {
    display: contents;
}

/* List Row (Figma: TableRow - 48px height) */
.si-list-row[b-k3035f13cw] {
    display: contents;
}

/* Row cell shared styling for grid rows */
.si-list-row > .si-list-cell[b-k3035f13cw] {
    min-height: 48px;
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
}

/* Hover effect — applied to cells since row uses display:contents */
.si-list-row:hover > .si-list-cell[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-075, #F9FAFC);
}

/* Remove bottom border from last row cells */
.si-list-row:last-child > .si-list-cell[b-k3035f13cw] {
    border-bottom: none;
}

.si-list-row-empty[b-k3035f13cw] {
    grid-column: 1 / -1;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* List Cells */
.si-list-cell[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 8px;
}

/* Action: allow multiple badges to wrap when events are grouped */
.si-list-cell-action[b-k3035f13cw] {
    flex-wrap: wrap;
    gap: 4px;
}

/* Shift label: keep values like "09:00 - 20:00" on one line */
.si-list-cell-shiftlabel[b-k3035f13cw] {
    white-space: nowrap;
}

/* Segments: extra vertical padding for multi-segment rows.
   Centers content vertically regardless of segment count. */
.si-list-row > .si-list-cell-segments[b-k3035f13cw] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.si-list-cell-comments[b-k3035f13cw] {
    overflow: hidden;
}

/* List Header Text (Figma: Text/SM - Semibold, 12px, 600) */
.si-list-header-text[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.17em;
    color: var(--color-modal-neutral-700, #696F8C);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* List Text (Figma: Text/MD - Regular, 14px, 400) */
.si-list-text[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
}

/* List Text Semibold (Figma: Text/MD - Semibold, 14px, 600) */
.si-list-text-semibold[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
}

/* Sort Icon */
.si-sort-icon[b-k3035f13cw] {
    font-size: 16px;
    color: var(--color-modal-neutral-700, #696F8C);
    margin-left: 4px;
}

/* ===== BADGES (Figma: Badge, Style=Light, Size=SM) ===== */
.si-badge[b-k3035f13cw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    font-family: var(--font-modal-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
}

.si-badge-blue[b-k3035f13cw] {
    background-color: var(--B100, #EBF0FF);
    color: var(--B500, #2952CC);
}

.si-badge-red[b-k3035f13cw] {
    background-color: var(--R100, #F9DADA);
    color: var(--R500, #A73636);
}

.si-badge-dark[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-200, #EDEFF5);
    color: var(--color-modal-neutral-800, #33415C);
}

/* Count bubble inside a badge — slightly darker pill shown when Count > 1 */
.si-badge-count[b-k3035f13cw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    margin-left: 4px;
    border-radius: 7px;
    background-color: var(--color-modal-neutral-300, #C1C4D6);
    color: var(--color-modal-neutral-800, #33415C);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box;
}

.si-badge-orange[b-k3035f13cw] {
    background-color: #FFF3E0;
    color: #E65100;
}

.si-badge-green[b-k3035f13cw] {
    background-color: #E8F5E9;
    color: #2E7D32;
}

/* ===== AVATAR (Figma: Avatar) ===== */
.si-avatar[b-k3035f13cw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-modal-neutral-200, #EDEFF5);
    flex-shrink: 0;
}

/* Employee Info Container */
.si-employee-info[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* ===== LIST SEGMENTS (inline format per Figma) ===== */
.si-list-segments-inline[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
}

/* Segment number — e.g. "1." */
.si-list-seg-number[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
    min-width: 20px;
}

/* Segment Time — e.g. "7:00AM - 11:30AM[4.5]" */
.si-list-segment-time[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
}

/* Segment type label — Regular, Break, Transfer */
.si-list-seg-type[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    color: var(--color-modal-neutral-700, #696F8C);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.si-list-seg-break[b-k3035f13cw] {
    color: var(--color-modal-neutral-700, #696F8C);
}

.si-list-seg-transfer[b-k3035f13cw] {
    color: var(--color-modal-neutral-700, #696F8C);
}

.si-transfer-icon[b-k3035f13cw] {
    font-size: 14px;
}

/* Segment group: time+type on top, tags below */
.si-list-seg-group[b-k3035f13cw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.si-list-seg-row-top[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.si-list-seg-row-tags[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

/* Visual separator between segments */
.si-list-seg-separator[b-k3035f13cw] {
    width: 1px;
    height: 16px;
    background-color: var(--color-modal-neutral-200, #EDEFF5);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Inline tag badge for segment tags (e.g. Workrule, Segment tag) */
.si-list-seg-tag[b-k3035f13cw] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-modal-family);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: var(--color-modal-neutral-075, #F9FAFC);
    border: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    color: var(--color-modal-neutral-700, #696F8C);
    white-space: nowrap;
}

.si-list-seg-tag-icon[b-k3035f13cw] {
    font-size: 10px;
    line-height: 1;
}

/* US #6451: Owned tag with delete button */
.si-list-seg-tag-owned[b-k3035f13cw] {
    padding-right: 2px;
}

.si-tag-delete-btn[b-k3035f13cw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    border-radius: 2px;
    color: var(--color-modal-neutral-500, #8F95B2);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.si-list-seg-tag-owned:hover .si-tag-delete-btn[b-k3035f13cw] {
    opacity: 1;
}

.si-tag-delete-btn:hover[b-k3035f13cw] {
    color: var(--color-modal-danger, #D14343);
}

.si-tag-delete-btn:disabled[b-k3035f13cw] {
    cursor: not-allowed;
    opacity: 0.4;
}

.si-tag-delete-icon[b-k3035f13cw] {
    font-size: 12px;
    line-height: 1;
}

/* ===== LIST COMMENTS (inline format per Figma) ===== */
.si-list-comments-inline[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.si-list-comment-title[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.17em;
    color: var(--color-modal-neutral-800, #33415C);
    background-color: var(--color-modal-neutral-075, #F9FAFC);
    border: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    border-radius: 4px;
    padding: 2px 8px;
    flex-shrink: 0;
}

.si-list-comment-text[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14em;
    color: var(--color-modal-neutral-700, #696F8C);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== SEARCH INPUT (Figma: Input - Search) ===== */
.si-list-search[b-k3035f13cw] {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

.si-search-input-container[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--color-modal-neutral-400, #D8DAE5);
    border-radius: 6px;
    background-color: var(--color-modal-neutral-000, #FFFFFF);
    width: 280px;
}

.si-search-input[b-k3035f13cw] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.14em;
    color: var(--color-modal-neutral-800, #33415C);
}

.si-search-input[b-k3035f13cw]::placeholder {
    color: var(--color-modal-neutral-700, #696F8C);
}

.si-search-icon[b-k3035f13cw] {
    font-size: 18px;
    color: var(--color-modal-neutral-700, #696F8C);
}

/* ===== PAGINATION ===== */
.si-list-pagination[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--color-modal-neutral-200, #EDEFF5);
}

.si-pagination-info[b-k3035f13cw] {
    font-family: var(--font-modal-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14em;
    color: var(--color-modal-neutral-700, #696F8C);
}

.si-pagination-buttons[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

/* ===== SCROLL INDICATOR (Figma: scrollThumb) ===== */
.si-scroll-thumb-container[b-k3035f13cw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    height: 24px;
}

.si-scroll-track[b-k3035f13cw] {
    flex: 1;
    height: 8px;
    background-color: var(--color-modal-neutral-200, #EDEFF5);
    border-radius: 16px;
}

.si-scroll-thumb[b-k3035f13cw] {
    width: 80px;
    height: 8px;
    background-color: var(--color-modal-scroll-thumb, #A5A7AF);
    border-radius: 16px;
}

/* ===== CALL LIST SECTION ===== */
.si-calllist-section[b-k3035f13cw] {
    margin-top: 16px;
    border-top: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    padding-top: 12px;
}

.si-calllist-header[b-k3035f13cw] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}

.si-calllist-toggle-icon[b-k3035f13cw] {
    font-size: 20px;
    color: var(--color-modal-neutral-600, #5A6178);
}

.si-calllist-title[b-k3035f13cw] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-modal-neutral-800, #33415C);
}

.si-calllist-count[b-k3035f13cw] {
    font-size: 11px;
    margin-left: 4px;
}

.si-calllist-generation[b-k3035f13cw] {
    border: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.si-calllist-gen-header[b-k3035f13cw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: var(--color-modal-neutral-50, #F8F9FB);
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
}

.si-calllist-gen-info[b-k3035f13cw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.si-calllist-gen-label[b-k3035f13cw] {
    font-weight: 600;
    color: var(--color-modal-neutral-800, #33415C);
}

.si-calllist-gen-date[b-k3035f13cw] {
    color: var(--color-modal-neutral-600, #5A6178);
}

.si-calllist-gen-by[b-k3035f13cw] {
    color: var(--color-modal-neutral-500, #7A7F96);
    font-style: italic;
}

.si-calllist-gen-badges[b-k3035f13cw] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.si-calllist-callout-details[b-k3035f13cw] {
    padding: 8px 12px;
    background-color: var(--color-modal-neutral-50, #F8F9FB);
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
}

.si-calllist-detail-row[b-k3035f13cw] {
    display: flex;
    gap: 8px;
    font-size: 12px;
    padding: 2px 0;
}

.si-calllist-detail-label[b-k3035f13cw] {
    font-weight: 500;
    color: var(--color-modal-neutral-600, #5A6178);
    min-width: 80px;
}

.si-calllist-detail-value[b-k3035f13cw] {
    color: var(--color-modal-neutral-800, #33415C);
}

.si-calllist-error .si-calllist-detail-value[b-k3035f13cw] {
    color: #CC0000;
}

.si-calllist-responses[b-k3035f13cw] {
    overflow-x: auto;
}

.si-calllist-resp-header[b-k3035f13cw] {
    display: flex;
    padding: 8px 12px;
    background-color: var(--color-modal-neutral-100, #F0F1F5);
    border-bottom: 1px solid var(--color-modal-neutral-200, #EDEFF5);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-modal-neutral-600, #5A6178);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.si-calllist-resp-row[b-k3035f13cw] {
    display: flex;
    padding: 6px 12px;
    border-bottom: 1px solid var(--color-modal-neutral-100, #F0F1F5);
    font-size: 12px;
    color: var(--color-modal-neutral-800, #33415C);
    align-items: center;
}

.si-calllist-resp-row:last-child[b-k3035f13cw] {
    border-bottom: none;
}

.si-calllist-resp-row:hover[b-k3035f13cw] {
    background-color: var(--color-modal-neutral-50, #F8F9FB);
}

.si-calllist-resp-cell[b-k3035f13cw] {
    padding: 2px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.si-calllist-resp-pos[b-k3035f13cw] { width: 36px; flex-shrink: 0; text-align: center; }
.si-calllist-resp-emp[b-k3035f13cw] { flex: 1; min-width: 100px; }
.si-calllist-resp-status[b-k3035f13cw] { width: 100px; flex-shrink: 0; }
.si-calllist-resp-method[b-k3035f13cw] { width: 110px; flex-shrink: 0; }
.si-calllist-resp-date[b-k3035f13cw] { width: 150px; flex-shrink: 0; }

/* ===== US #6436: Primary Button ===== */
.si-modal-btn-primary[b-k3035f13cw] {
    background-color: var(--color-modal-primary, #2563EB);
    color: #FFFFFF;
}

.si-modal-btn-primary:hover[b-k3035f13cw] {
    background-color: var(--color-modal-primary-dark, #1D4ED8);
}

.si-modal-btn-primary:disabled[b-k3035f13cw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Audit Figma 2026-04-27: les regles .si-add-comment-form / row / field / label /
   select / input / actions ont ete retirees -- les forms inline Add Comment et Add
   Schedule Tag dans la modale ne sont plus utilisees (non conformes au Figma).
   .si-add-comment-error reste car encore utilisee par DeleteScheduleTagError. */
.si-add-comment-error[b-k3035f13cw] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    font-family: var(--font-modal-family);
    font-size: 12px;
    color: #DC2626;
}
.si-calllist-resp-note[b-k3035f13cw] { flex: 1; min-width: 80px; }

@media (min-width: 993px) and (max-width: 1200px) {
    .si-modal-container[b-k3035f13cw] {
        --fixed-column-width: 160px;
        --table-column-width: 220px;
    }
    /* Reduce content padding so more room goes to the grid */
    .si-modal-content[b-k3035f13cw] {
        padding: 16px;
    }
    .si-modal-action-bar[b-k3035f13cw] {
        flex-wrap: wrap;
        gap: 16px;
    }
    .si-search-input-container[b-k3035f13cw] {
        width: clamp(180px, 24vw, 280px);
    }
}

@media (max-width: 992px) {
    .si-modal-container[b-k3035f13cw] {
        --fixed-column-width: 120px;
        --table-column-width: 160px;
    }
    .si-modal-content[b-k3035f13cw] {
        padding: 12px;
    }
    .si-modal-action-bar[b-k3035f13cw] {
        flex-wrap: wrap;
        gap: 12px;
    }
    .si-search-input-container[b-k3035f13cw] {
        width: clamp(160px, 30vw, 260px);
    }
    .si-modal-header[b-k3035f13cw] {
        padding: 12px 16px;
    }
    .si-modal-header-right[b-k3035f13cw] {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px;
    }
}
/* _content/ScheduleCompass.Blazor/Components/Pages/Manager/ShiftHistory/ShiftHistoryPage.razor.rz.scp.css */
/* ShiftHistory Page Scoped Styles */
/* Figma Cache Date: 2026-02-03 */
/* Source: figma-cache.json, figma-cache-layouts.json, figma-cache-components.json */

/* ===== CSS VARIABLES (from figma-cache.json) ===== */
/* Note: Variables defined on .si-page-container instead of :root because
   Blazor CSS isolation cannot scope :root, which breaks the CSS bundle. */

/* Figma: layout_V6B9PV - ShiftHistory page container */
/* Viewport management: 100vh, no page-level scrollbar */
.si-page-container[b-amqeijyunh] {
    --color-neutral-000: #FFFFFF;
    --color-neutral-075: #F9FAFC;
    --color-neutral-200: #EDEFF5;
    --color-neutral-300: #E6E8F0;
    --color-neutral-400: #D8DAE5;
    --color-neutral-700: #696F8C;
    --color-neutral-800: #33415C;
    --color-neutral-900: #001233;
    --color-blue-400: #3366FF;
    --color-yellow-100: #FFEFD2;
    --color-overlay-100: rgba(0, 18, 51, 0.08);
    --color-scroll-thumb: #A5A7AF;
    --font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    --shadow-sm: 0px 4px 8px 0px rgba(16, 24, 64, 0.08);
    --shadow-separator: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 16px;

    display: flex;
    flex-direction: column;
    /* Subtract the host layout top-row header height (5rem) to prevent
       a browser-level vertical scrollbar on any viewport size */
    height: calc(100vh - 5rem);
    overflow: hidden;
    background-color: var(--color-neutral-075, #F9FAFC);
}

/* Figma: layout_9JQ2GL - ActionBar */
.si-action-bar[b-amqeijyunh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    width: 100%;
    gap: 8px;
}

.si-action-left[b-amqeijyunh] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Visually hidden but kept in the AT tree (display:none would remove from it). */
.si-sr-only[b-amqeijyunh] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ::after overlay rather than a wrapper background — inner components paint opaque surfaces that would hide the wrapper bg. */
.si-control-loading[b-amqeijyunh] {
    pointer-events: none;
    position: relative;
    border-radius: var(--border-radius-sm, 4px);
}

.si-control-loading[b-amqeijyunh]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(51, 65, 92, 0.07) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: si-control-shimmer-b-amqeijyunh 1.6s ease-in-out infinite;
}

@keyframes si-control-shimmer-b-amqeijyunh {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .si-control-loading[b-amqeijyunh]::after {
        animation: none;
        background: rgba(51, 65, 92, 0.05);
    }
}

/* Figma: layout_MG3O3E - Right Section (gap: 16px) */
.si-action-right[b-amqeijyunh] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

/* Bug #6177 (revert): le wrapper visuel .si-filter-group a ete retire
   parce qu'il n'existe pas dans le Figma. Les filtres heritent du gap de
   .si-action-left. La normalisation des composants Zaddons (heights 32px,
   hide floating labels) a ete migree sur .si-action-left ::deep plus bas. */

/* Figma: Input component - Search */
.si-search-input[b-amqeijyunh] {
    position: relative;
    width: 280px;
}

/* Figma: Input css from figma-cache.json */
.si-search-input .si-input[b-amqeijyunh] {
    width: 100%;
    height: 32px;
    padding: 6px 6px 6px 36px;
    background: var(--color-neutral-000, #FFFFFF);
    border: 1px solid var(--color-neutral-400, #D8DAE5);
    border-radius: var(--border-radius-md, 6px);
    font-size: 14px;
    box-sizing: border-box;
}

/* Figma: layout_137H6Z - TableContainer */
/* No overflow here - scrolling only within OpenShift/Employee zones */
.si-content-area[b-amqeijyunh] {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    flex: 1;
    gap: 10px;
    padding: 0px 16px;
    overflow: hidden;
    min-height: 0;
}

/* Figma: layouts.tableContent - 8px 8px 0px 0px border radius */
/* Fills available space, children (sections) manage their own scroll */
.si-schedule-container[b-amqeijyunh] {
    --sticky-section-width: 360px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--color-neutral-000, #FFFFFF);
    border: 1px solid var(--color-neutral-200, #EDEFF5);
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
}

/* ===== TABLE HEADER: Figma: layout_MEELNG - 1288px x 40px ===== */
.si-table-header[b-amqeijyunh] {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--color-neutral-000, #FFFFFF);
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
}

/* Figma: layout_W1LOEC - Fixed column */
.si-table-header-fixed[b-amqeijyunh] {
    display: flex;
    flex-direction: column;
    width: var(--sticky-section-width);
    flex-shrink: 0;
    border-right: 1px solid var(--color-neutral-200, #EDEFF5);
    height: 100%;
}

/* Figma: layout.tableHeaderCenter */
.si-table-header-nav[b-amqeijyunh] {
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0px 4px;
}

/* Figma: Button Ghost SM (6201:149194) - padding 4px, borderRadius 6px */
.si-nav-btn[b-amqeijyunh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 28px;
    height: 28px;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: var(--color-neutral-800, #33415C);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.si-nav-btn:hover:not(:disabled)[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
}

/* Figma: Button Ghost SM disabled (6201:149198) */
.si-nav-btn:disabled[b-amqeijyunh] {
    cursor: not-allowed;
    opacity: 0.5;
    color: #C1C4D6;
}

/* Text button variant for period navigation (Prev Period / Next Period) */
.si-nav-btn.si-nav-btn-text[b-amqeijyunh] {
    width: auto;
    padding: 4px 10px;
    gap: 2px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-neutral-700, #696F8C);
    white-space: nowrap;
}

.si-nav-btn.si-nav-btn-text:hover:not(:disabled)[b-amqeijyunh] {
    color: var(--color-neutral-900, #001233);
    background-color: var(--color-neutral-075, #F9FAFC);
}

.si-nav-btn-text-icon[b-amqeijyunh] {
    font-size: 16px !important;
}

/* Figma: DateNavigation typography - 12px, weight 600, 140px width */
.si-week-range-label[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.33em;
    text-align: center;
    color: var(--color-neutral-800, #33415C);
    min-width: 140px;
}

/* ===== TABLE SECTION STRUCTURE ===== */
/* Figma: TableSection.Locations (8317:472040) / TableSection.Employees (8317:472346) */
/* Sticky row behavior: OpenShift ~30% top, Employee fills remaining ~70% */
.si-table-section[b-amqeijyunh] {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
    min-height: 0;
    overflow: hidden;
}

.si-table-section:last-child[b-amqeijyunh] {
    border-bottom: none;
}

/* Figma: OpenShift section - ~30% of available space (668px / 2172px total) */
.si-section-openshifts[b-amqeijyunh] {
    flex: 0 0 var(--openshift-section-height, 30%);
    max-height: var(--openshift-section-height, 30%);
    position: relative;
}

/* Collapsed open shift section - only show the header */
.si-section-openshifts.si-section-collapsed[b-amqeijyunh] {
    flex: 0 0 auto;
    max-height: none;
}

/* Figma: Employee section - fills remaining ~70% (vertical: fill) */
.si-section-employees[b-amqeijyunh] {
    flex: 1 1 0;
}

/* Collapsed employee section - only show the header */
.si-section-employees.si-section-collapsed[b-amqeijyunh] {
    flex: 0 0 auto;
}

/* Section Headers - Figma: Neutral/075 (#F9FAFC) background, 40px height */
/* flex-shrink: 0 ensures header stays fixed height within flex column */
.si-section-header[b-amqeijyunh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--color-neutral-075, #F9FAFC);
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
    cursor: pointer;
}

/* Both sections use same neutral style - NO GREEN per Figma specs */
.si-section-header-openshifts[b-amqeijyunh],
.si-section-header-employees[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
}

/* Figma: Headline/500 - SF Pro Display 16px, weight 700, Neutral/800 */
.si-section-title[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25em;
    text-align: left;
    color: var(--color-neutral-800, #33415C);
}

/* Figma: Text/SM - Regular 12px, weight 400, Neutral/700 */
.si-section-count[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    text-align: center;
    color: var(--color-neutral-700, #696F8C);
}

.si-expand-icon[b-amqeijyunh] {
    font-size: 20px;
    color: var(--color-neutral-700, #696F8C);
}

/* ===== TABLE WRAPPER (Fixed + Scrollable) ===== */
.si-table-wrapper[b-amqeijyunh] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header wrapper - contains fixed header + scrollable header */
.si-table-header-wrapper[b-amqeijyunh] {
    display: flex;
    flex-shrink: 0;
}

/* Body wrapper - contains all data rows */
.si-table-body-wrapper[b-amqeijyunh] {
    display: flex;
    flex: 1;
    overflow-y: auto;
}

/* Container for all rows */
.si-table-rows-container[b-amqeijyunh] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Combined row - employee info + schedule in same flex container */
.si-employee-combined-row[b-amqeijyunh] {
    display: flex;
    min-height: 40px;
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
}

.si-employee-combined-row:last-child[b-amqeijyunh] {
    border-bottom: none;
}

.si-employee-combined-row:hover[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
}

/* Fixed columns container */
.si-table-fixed[b-amqeijyunh] {
    flex-shrink: 0;
    background-color: var(--color-neutral-000, #FFFFFF);
    border-right: 1px solid var(--color-neutral-200, #EDEFF5);
    z-index: 2;
}

/* Open Shifts fixed area (Figma: fixedColumn.width) */
.si-openshift-fixed[b-amqeijyunh] {
    width: var(--sticky-section-width);
}

/* Employee fixed area (Figma: layout_W1LOEC) */
.si-employee-fixed[b-amqeijyunh] {
    width: var(--sticky-section-width);
}

/* Scrollable schedule container (for open shifts section) */
.si-table-scroll[b-amqeijyunh] {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Scrollable header container (for employee section) */
.si-table-scroll-header[b-amqeijyunh] {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ===== UNIFIED TABLE (Employee info sticky + schedule scrollable) ===== */
/* Independent vertical scrolling per section */
.si-unified-table-scroll[b-amqeijyunh] {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Hide native horizontal scrollbar - replaced by custom scrollbar row below */
.si-hide-native-scrollbar[b-amqeijyunh] {
    scrollbar-width: none; /* Firefox */
}

.si-hide-native-scrollbar[b-amqeijyunh]::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Scrollbar row: side-by-side scrollbar tracks at the bottom of each section */
.si-scrollbar-row[b-amqeijyunh] {
    display: flex;
    flex-shrink: 0;
    border-top: 1px solid var(--color-neutral-200, #EDEFF5);
}

/* Empty placeholder matching sticky column width (for open shift section) */
.si-scrollbar-placeholder[b-amqeijyunh] {
    width: var(--sticky-section-width);
    flex-shrink: 0;
    border-right: 1px solid var(--color-neutral-200, #EDEFF5);
}

/* Schedule scrollbar track - fills remaining width to the right */
.si-schedule-scrollbar-track[b-amqeijyunh] {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
}

.si-schedule-scrollbar-spacer[b-amqeijyunh] {
    height: 1px;
}

.si-unified-table[b-amqeijyunh] {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

/* Unified header row */
.si-unified-header-row[b-amqeijyunh] {
    display: flex;
    background-color: var(--color-neutral-075, #F9FAFC);
    height: 40px;
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Employee table: two-column layout (sticky employee column + schedule column) */
.si-employee-table[b-amqeijyunh] {
    display: flex;
    flex-direction: row;
    min-width: max-content;
}

/* Sticky employee column wrapper - handles sticky positioning */
/* z-index must be higher than .si-unified-header-row (z-index: 10) so schedule
   content scrolls behind the sticky column, not over it. */
.si-employee-sticky-column[b-amqeijyunh] {
    position: sticky;
    left: 0;
    z-index: 12;
    width: var(--sticky-section-width);
    flex-shrink: 0;
    border-right: 1px solid var(--color-neutral-200, #EDEFF5);
    background-color: var(--color-neutral-000, #FFFFFF);
}

/* Inner content area - clips horizontal overflow (scrolled via JS) */
/* Use overflow-x: clip instead of hidden to avoid creating a new scroll context,
   which would break position: sticky on the header row */
.si-employee-scroll-inner[b-amqeijyunh] {
    overflow-x: clip;
    position: relative;
}

/* Content wrapper - min-width set via inline style to force content wider than container */
.si-employee-scroll-content[b-amqeijyunh] {
    min-width: 100%;
}

/* Employee scrollbar track - sits in the scrollbar row, matches sticky column width */
.si-employee-scrollbar-track[b-amqeijyunh] {
    width: var(--sticky-section-width);
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 1px solid var(--color-neutral-200, #EDEFF5);
}

.si-employee-scrollbar-spacer[b-amqeijyunh] {
    height: 1px;
}

/* ===== RESIZE HANDLE (VS Code style divider) ===== */
.si-resize-handle[b-amqeijyunh] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--sticky-section-width) - 4px);
    width: 8px;
    cursor: col-resize;
    z-index: 15;
    background: transparent;
    touch-action: none;
}

.si-resize-handle:hover[b-amqeijyunh],
.si-resize-handle:active[b-amqeijyunh] {
    background: linear-gradient(
        to right,
        transparent 3px,
        var(--color-primary-500, #3366FF) 3px,
        var(--color-primary-500, #3366FF) 5px,
        transparent 5px
    );
}

/* Grip indicator - hidden, kept for markup compatibility */
.si-resize-grip[b-amqeijyunh] {
    display: none;
}

/* Synchronized highlight: ALL resize handles light up when ANY is hovered/dragged */
.si-resize-hovering .si-resize-handle[b-amqeijyunh] {
    background: linear-gradient(
        to right,
        transparent 3px,
        var(--color-primary-500, #3366FF) 3px,
        var(--color-primary-500, #3366FF) 5px,
        transparent 5px
    );
}

/* ===== VERTICAL RESIZE HANDLE (between open shift & employee sections) ===== */
.si-resize-handle-vertical[b-amqeijyunh] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 8px;
    cursor: row-resize;
    z-index: 10;
    background: transparent;
    touch-action: none;
}

.si-resize-handle-vertical:hover[b-amqeijyunh],
.si-resize-handle-vertical:active[b-amqeijyunh] {
    background: linear-gradient(
        to bottom,
        transparent 3px,
        var(--color-primary-500, #3366FF) 3px,
        var(--color-primary-500, #3366FF) 5px,
        transparent 5px
    );
}

/* Grip indicator - hidden, kept for markup compatibility */
.si-resize-grip-vertical[b-amqeijyunh] {
    display: none;
}

/* Schedule column */
.si-schedule-column[b-amqeijyunh] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Employee header inside sticky column */
.si-employee-header-sticky[b-amqeijyunh] {
    display: flex;
    background-color: var(--color-neutral-075, #F9FAFC);
    height: 40px;
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 11;
}

/* Unified data row */
.si-unified-data-row[b-amqeijyunh] {
    display: flex;
    min-height: 40px;
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
    background-color: var(--color-neutral-000, #FFFFFF);
}

.si-unified-data-row:last-child[b-amqeijyunh] {
    border-bottom: none;
}

.si-unified-data-row:hover[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
}

/* Employee info rows inside sticky column */
.si-employee-info-sticky[b-amqeijyunh] {
    display: flex;
    align-items: center;
    background-color: var(--color-neutral-000, #FFFFFF);
    min-height: 40px;
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
    flex-shrink: 0;
}

.si-employee-info-sticky:hover[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
}

/* Sticky open shift header */
.si-openshift-header-sticky[b-amqeijyunh] {
    display: flex;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 11;
    background-color: var(--color-neutral-075, #F9FAFC);
    border-right: 1px solid var(--color-neutral-200, #EDEFF5);
    flex-shrink: 0;
    width: var(--sticky-section-width);
}

/* Sticky open shift info in data rows */
.si-openshift-info-sticky[b-amqeijyunh] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--color-neutral-000, #FFFFFF);
    border-right: 1px solid var(--color-neutral-200, #EDEFF5);
    flex-shrink: 0;
    width: var(--sticky-section-width);
}

.si-unified-data-row:hover .si-openshift-info-sticky[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
}

/* ===== HEADER ROW - Figma: 40px height, Neutral/075 background ===== */
.si-header-row[b-amqeijyunh] {
    display: flex;
    background-color: var(--color-neutral-075, #F9FAFC);
    height: 40px;
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
}

/* Figma: TableItemContent - TableHeader (8444:558531) - 12px, weight 600, Neutral/700 */
.si-header-cell[b-amqeijyunh] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.33em;
    color: var(--color-neutral-700, #696F8C);
    padding: 0 8px;
}

/* Employee info header columns - Figma: TableItem 160px with flex: 1 0 0 */
.si-header-name[b-amqeijyunh] {
    width: var(--si-col-name-width, 160px);
    min-width: 120px;
    flex: 0 0 auto;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
}

.si-header-job[b-amqeijyunh] {
    width: var(--si-col-job-width, 160px);
    min-width: 120px;
    flex: 0 0 auto;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
}

/* Date header cells - must match schedule cell width (220px desktop) */
.si-header-date[b-amqeijyunh] {
    width: 220px;
    min-width: 220px;
    height: 40px;
    flex-direction: column;
    gap: 2px;
}

/* Figma: Weekend columns use Neutral/075 (#F9FAFC) */
.si-header-date.si-weekend[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
}

/* Figma: Text/SM - day name in date header (12px, weight 400, Neutral/700) */
.si-date-day[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    text-transform: capitalize;
    color: var(--color-neutral-700, #696F8C);
}

/* Figma: Text/MD - Semibold for date number (14px, weight 600, Neutral/800) */
.si-date-number[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.14em;
    color: var(--color-neutral-800, #33415C);
}

/* Week Navigation Header */
.si-week-navigation[b-amqeijyunh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: var(--color-neutral-000, #FFFFFF);
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
    gap: 8px;
}

/* Figma: Button Ghost SM (6201:149194) */
.si-week-nav-btn[b-amqeijyunh] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--border-radius-md, 6px);
    transition: background-color 0.15s ease;
}

.si-week-nav-btn:hover:not(:disabled)[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
}

.si-week-nav-btn:disabled[b-amqeijyunh] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Figma: DateNavigation typography - 12px, weight 600, Neutral/800 */
.si-week-label[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.33em;
    text-align: center;
    color: var(--color-neutral-800, #33415C);
    margin: 0 8px;
    min-width: 140px;
}

/* Figma: Location colspan header - follows sticky section width */
.si-header-location-colspan[b-amqeijyunh] {
    width: var(--sticky-section-width);
    justify-content: flex-start;
    padding-left: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== OPEN SHIFT LOCATION ROWS (Fixed Area) - Figma: Neutral colors, NO GREEN ===== */
.si-openshift-location-row[b-amqeijyunh] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 16px;
    background-color: var(--color-neutral-000, #FFFFFF);
    border-bottom: 1px solid var(--color-neutral-200, #EDEFF5);
}

.si-openshift-location-row:last-child[b-amqeijyunh] {
    border-bottom: none;
}

/* Figma: Icon circle uses Neutral/075 background */
.si-openshift-icon[b-amqeijyunh] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-neutral-075, #F9FAFC);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.si-openshift-details[b-amqeijyunh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* Figma: Text/MD - 14px, weight 500, Neutral/900 */
.si-openshift-job[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.14em;
    color: var(--color-neutral-900, #001233);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}

/* Figma: Text/SM - 12px, weight 400, Neutral/700 */
.si-openshift-location[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    color: var(--color-neutral-700, #696F8C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}


/* Figma: Text/MD - 14px, weight 500, Neutral/900 */
.si-employee-name[b-amqeijyunh] {
    width: var(--si-col-name-width, 160px);
    min-width: 120px;
    flex: 0 0 auto;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.14em;
    color: var(--color-neutral-900, #001233);
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.si-employee-name:hover[b-amqeijyunh] {
    color: var(--B400, #3366FF);
    text-decoration: underline;
}

/* Figma: Text/SM - 12px, weight 400, Neutral/700 */
.si-employee-job[b-amqeijyunh] {
    width: var(--si-col-job-width, 156px);
    flex-shrink: 0;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    color: var(--color-neutral-700, #696F8C);
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* DataSet field columns (dynamic) - Figma: TableItem flex: 1 0 0 */
.si-header-dataset-field[b-amqeijyunh] {
    width: var(--si-col-dataset-width, 160px);
    min-width: 120px;
    flex: 0 0 auto;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
}

/* Sortable header columns (Name, Job, DataSet fields) */
.si-sortable-header[b-amqeijyunh] {
    cursor: pointer;
    gap: 4px;
    user-select: none;
    transition: background-color 0.15s ease;
}

.si-sortable-header:hover[b-amqeijyunh] {
    background-color: var(--color-neutral-200, #EDEFF5);
}

.si-sortable-header[b-amqeijyunh]  .icon-component {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.si-sortable-header:hover[b-amqeijyunh]  .icon-component {
    opacity: 0.8;
}

/* Active sort icon is always fully visible */
.si-sortable-header[b-amqeijyunh]  .DynamicIconColor--Blue {
    opacity: 1 !important;
}

.si-employee-dataset-field[b-amqeijyunh] {
    width: var(--si-col-dataset-width, 160px);
    min-width: 120px;
    flex: 0 0 auto;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    color: var(--color-neutral-700, #696F8C);
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== COLUMN RESIZE HANDLE (between employee columns) ===== */
.si-col-resize-handle[b-amqeijyunh] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    /* Claim the touch gesture so a drag resizes the column instead of the browser
       treating it as a horizontal scroll/pan (same as the section resize handle). */
    touch-action: none;
    z-index: 20;
    background: transparent;
    border: none;
    outline: none;
}

.si-col-resize-handle:hover[b-amqeijyunh],
.si-col-resize-handle:active[b-amqeijyunh] {
    background: linear-gradient(
        to right,
        transparent 8px,
        var(--color-primary-500, #3366FF) 8px,
        var(--color-primary-500, #3366FF) 10px
    );
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* XXL (>1600px) - Full width */
@media (min-width: 1601px) {
    .si-schedule-container[b-amqeijyunh] {
        /* max-width: 1600px;*/
        max-width: 100%
    }
}

/* XL (1400px - 1600px) */
@media (min-width: 1201px) and (max-width: 1600px) {
    .si-schedule-container[b-amqeijyunh] {
        max-width: 1400px;
    }
}

/* LG (992px - 1200px) - Tablet: header dates back to 160px */
@media (min-width: 993px) and (max-width: 1200px) {
    .si-schedule-container[b-amqeijyunh] {
        --sticky-section-width: 320px;
        max-width: 1200px;
    }

    .si-header-name[b-amqeijyunh],
    .si-employee-name[b-amqeijyunh] {
        width: var(--si-col-name-width, 140px);
        min-width: 100px;
    }

    .si-header-job[b-amqeijyunh],
    .si-employee-job[b-amqeijyunh] {
        width: var(--si-col-job-width, 140px);
        min-width: 100px;
    }

    .si-header-dataset-field[b-amqeijyunh],
    .si-employee-dataset-field[b-amqeijyunh] {
        width: var(--si-col-dataset-width, 140px);
        min-width: 100px;
    }

    .si-header-date[b-amqeijyunh] {
        width: 160px;
        min-width: 160px;
    }
}

/* MD (<992px) */
@media (max-width: 992px) {
    .si-schedule-container[b-amqeijyunh] {
        --sticky-section-width: 280px;
        max-width: 992px;
    }

    .si-header-name[b-amqeijyunh],
    .si-employee-name[b-amqeijyunh] {
        width: var(--si-col-name-width, 120px);
        min-width: 80px;
    }

    .si-header-job[b-amqeijyunh],
    .si-employee-job[b-amqeijyunh] {
        width: var(--si-col-job-width, 120px);
        min-width: 80px;
    }

    .si-header-dataset-field[b-amqeijyunh],
    .si-employee-dataset-field[b-amqeijyunh] {
        width: var(--si-col-dataset-width, 120px);
        min-width: 80px;
    }

    .si-header-date[b-amqeijyunh] {
        width: 120px;
        min-width: 120px;
    }
}

/* ===== TABLET OVERRIDES ===== */
/* Concept A: clean two-row bar.
   Row 1 (.si-action-left): View + Period + Location stretch to fill,
          Apply + Refresh anchored right.
   Row 2 (.si-action-right): Search stretches to fill the middle,
          utility buttons right-aligned.
   Row 3 (.si-table-header-nav): period navigation, centered full-width.
   Each row claims 100% width via flex-basis so wrapping is deterministic. */

/* LG (max 1200px): tablet landscape */
@media (max-width: 1200px) {

    .si-action-bar[b-amqeijyunh] {
        padding: 10px 16px;
        gap: 8px;
    }

    /* --- ROW 1: Filters (View + Period + Location + Apply + Refresh) --- */
    .si-action-left[b-amqeijyunh] {
        flex: 0 0 100%;
        gap: 10px;
    }

    /* View dropdown: compact fixed width */
    .si-view-dropdown[b-amqeijyunh] {
        flex: 0 0 auto;
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }
    [b-amqeijyunh] .si-view-dropdown .dropdown-menu-position-strategy-fixed {
        width: 150px !important;
        max-width: 150px !important;
    }
    [b-amqeijyunh] .si-view-dropdown .dropdown-value {
        max-width: 110px;
    }

    /* Period & Location grow to share remaining row space evenly */
    .si-filter-period[b-amqeijyunh],
    .si-filter-location[b-amqeijyunh] {
        flex: 1 1 0;
        min-width: 0;
    }
    /* Let the date range picker fill its flex parent */
    .si-action-left[b-amqeijyunh]  .drp-container {
        min-width: 0;
        width: 100%;
    }

    /* --- ROW 2: Actions (Search + Filters + Link + Dataset) --- */
    .si-action-right[b-amqeijyunh] {
        flex: 0 0 100%;
        margin-left: 0;
        gap: 10px;
    }

    /* Search fills available space between left edge and utility buttons */
    .si-search-input[b-amqeijyunh] {
        flex: 1 1 auto;
        width: auto;
        min-width: 120px;
        max-width: none;
    }

    /* --- PERIOD NAV (row 3) --- */
    /* Hide the empty fixed-column spacer so the period nav spans full
       width — matches section headers. Natural centering. */
    .si-table-header-fixed[b-amqeijyunh] {
        display: none;
    }

    /* Widen resize handles for touch targets on tablet (8px → 24px).
       The visible indicator stays 2px centered; the extra area is
       transparent hit surface only. */
    .si-resize-handle[b-amqeijyunh] {
        width: 24px;
        left: calc(var(--sticky-section-width) - 12px);
    }
    .si-resize-handle:hover[b-amqeijyunh],
    .si-resize-handle:active[b-amqeijyunh],
    .si-resize-hovering .si-resize-handle[b-amqeijyunh] {
        background: linear-gradient(
            to right,
            transparent 11px,
            var(--color-primary-500, #3366FF) 11px,
            var(--color-primary-500, #3366FF) 13px,
            transparent 13px
        );
    }
    .si-resize-handle-vertical[b-amqeijyunh] {
        height: 24px;
        bottom: -12px;
    }
    .si-resize-handle-vertical:hover[b-amqeijyunh],
    .si-resize-handle-vertical:active[b-amqeijyunh] {
        background: linear-gradient(
            to bottom,
            transparent 11px,
            var(--color-primary-500, #3366FF) 11px,
            var(--color-primary-500, #3366FF) 13px,
            transparent 13px
        );
    }

    .si-col-resize-handle[b-amqeijyunh] {
        width: 22px;
    }
    .si-col-resize-handle:hover[b-amqeijyunh],
    .si-col-resize-handle:active[b-amqeijyunh] {
        background: linear-gradient(
            to right,
            transparent 20px,
            var(--color-primary-500, #3366FF) 20px,
            var(--color-primary-500, #3366FF) 22px
        );
    }

    .si-empty-state[b-amqeijyunh] {
        padding: 48px 24px;
    }
    .si-empty-icon[b-amqeijyunh] {
        font-size: 56px;
    }
}

/* MD (max 992px): tablet portrait — tighter spacing */
@media (max-width: 992px) {

    .si-action-bar[b-amqeijyunh] {
        padding: 8px 12px;
        gap: 6px;
    }

    .si-action-left[b-amqeijyunh] {
        gap: 8px;
        flex-wrap: wrap;
    }

    /* View + Period + Location wrap onto their own line when needed.
       Period gets more flex-grow so the date range text isn't crushed. */
    .si-filter-period[b-amqeijyunh] {
        flex: 2 1 0;
    }
    .si-filter-location[b-amqeijyunh] {
        flex: 1 1 0;
    }

    .si-view-dropdown[b-amqeijyunh] {
        width: 130px;
        min-width: 130px;
        max-width: 130px;
    }
    [b-amqeijyunh] .si-view-dropdown .dropdown-menu-position-strategy-fixed {
        width: 130px !important;
        max-width: 130px !important;
    }
    [b-amqeijyunh] .si-view-dropdown .dropdown-value {
        max-width: 90px;
    }

    .si-action-right[b-amqeijyunh] {
        gap: 8px;
    }

    .si-search-input[b-amqeijyunh] {
        min-width: 100px;
    }

    .si-empty-state[b-amqeijyunh] {
        padding: 32px 16px;
    }
    .si-empty-icon[b-amqeijyunh] {
        font-size: 48px;
    }
}

/* Empty State */
.si-empty-state[b-amqeijyunh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px;
    text-align: center;
}

.si-empty-icon[b-amqeijyunh] {
    font-family: 'Material Icons Outlined';
    font-size: 64px;
    color: var(--color-neutral-300, #E6E8F0);
    margin-bottom: 16px;
}

/* Figma: Headline/500 - 16px, weight 700, Neutral/800 */
.si-empty-state h3[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-neutral-800, #33415C);
    margin: 0 0 8px 0;
}

/* Figma: Text/SM - 12px, weight 400, Neutral/700 */
.si-empty-state p[b-amqeijyunh] {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.17em;
    color: var(--color-neutral-700, #696F8C);
    margin: 0;
}

/* Button Styles - Figma: Button Ghost SM (6201:149194) */
.si-btn-ghost[b-amqeijyunh] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--border-radius-md, 6px);
    transition: background-color 0.15s ease;
}

.si-btn-ghost:hover[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
}

.si-btn-icon .si-icon[b-amqeijyunh] {
    font-family: 'Material Icons Outlined';
    font-size: 20px;
    color: var(--color-neutral-700, #696F8C);
}

/* Avatar - Figma: 36px circle */
.si-avatar[b-amqeijyunh] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-blue-400, #3366FF);
    color: var(--color-neutral-000, #FFFFFF);
    font-weight: 500;
}

.si-avatar-md[b-amqeijyunh] {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

/* Zaddons Components Integration Styles */

/* Date Range Picker customization */
[b-amqeijyunh] .drp-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-amqeijyunh] .drp-wrapper {
    border: 1px solid var(--color-neutral-300, #E6E8F0);
    border-radius: var(--border-radius-sm, 4px);
    background-color: var(--color-neutral-000, #FFFFFF);
}

[b-amqeijyunh] .drp-wrapper:hover {
    border-color: var(--color-neutral-400, #D8DAE5);
}

[b-amqeijyunh] .drp-wrapper:focus-within {
    border-color: var(--color-blue-400, #3366FF);
    box-shadow: 0 0 0 2px rgba(51, 102, 255, 0.16);
}

/* View Dropdown Select customization */
.si-view-dropdown[b-amqeijyunh] {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}

/* Cap the dropdown menu width and option text width so long setup names get truncated
   with an ellipsis instead of expanding the menu. The Blazorise tooltip (enabled via
   ShowOptionTooltips on the DropdownSelect) shows the full name on hover. */
[b-amqeijyunh] .si-view-dropdown .dropdown-menu-position-strategy-fixed {
    width: 180px !important;
    max-width: 180px !important;
}

[b-amqeijyunh] .si-view-dropdown .dropdown-option {
    max-width: 180px;
}

/* Truncate the selected value in the trigger button so long names get an ellipsis
   instead of stretching the box. The .dropdown-value rule from DropdownSelect.razor.css
   already has overflow:hidden + text-overflow:ellipsis, but it needs a parent width
   constraint to actually clip — which we now have via the fixed .si-view-dropdown width. */
[b-amqeijyunh] .si-view-dropdown .dropdown-value {
    max-width: 140px;
}

[b-amqeijyunh] .si-view-dropdown .dropdown-select {
    border: 1px solid var(--color-neutral-300, #E6E8F0);
    border-radius: var(--border-radius-sm, 4px);
    background-color: var(--color-neutral-000, #FFFFFF);
}

[b-amqeijyunh] .si-view-dropdown .dropdown-select:hover {
    border-color: var(--color-neutral-400, #D8DAE5);
}

.si-location-dropdown[b-amqeijyunh] {
    min-width: 180px;
}

[b-amqeijyunh] .si-location-dropdown .dropown-select-label {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-neutral-700, #696F8C);
    margin-bottom: 4px;
}

[b-amqeijyunh] .si-location-dropdown .dropdown-select {
    border: 1px solid var(--color-neutral-300, #E6E8F0);
    border-radius: var(--border-radius-sm, 4px);
    background-color: var(--color-neutral-000, #FFFFFF);
}

[b-amqeijyunh] .si-location-dropdown .dropdown-select:hover {
    border-color: var(--color-neutral-400, #D8DAE5);
}

/* Search input icon alignment */
.si-search-icon[b-amqeijyunh] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-neutral-500, #8F95B2);
    font-size: 18px;
}

/* Note: .si-search-input dimensions defined at lines 114-133 */
.si-search-input .si-input[b-amqeijyunh] {
    padding-left: 40px;
    padding-right: 36px;
}

.si-search-clear-anchor[b-amqeijyunh] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.si-search-clear[b-amqeijyunh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-500, #8F95B2);
}

.si-search-clear:hover[b-amqeijyunh] {
    color: var(--color-neutral-700, #696F8C);
}

.si-search-clear .material-icons-outlined[b-amqeijyunh] {
    font-size: 16px;
}

.si-search-input .si-input:focus[b-amqeijyunh] {
    border-color: var(--color-blue-400, #3366FF);
    outline: none;
    box-shadow: 0 0 0 2px rgba(51, 102, 255, 0.16);
}

/* Figma: Button sizing - all action bar buttons 32px height */
.si-action-right .si-btn[b-amqeijyunh] {
    height: 32px;
    box-sizing: border-box;
}

/* Figma: Button.Secondary - padding 8px 12px */
.si-btn.si-btn-secondary[b-amqeijyunh] {
    padding: 6px 12px;
    border-radius: var(--border-radius-md, 6px);
    border: 1px solid var(--color-neutral-400, #D8DAE5);
    background: var(--color-neutral-000, #FFFFFF);
}

/* Figma: Button.Ghost - transparent bg, no border (icon-only) */
.si-btn-ghost[b-amqeijyunh] {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px;
    border-radius: var(--border-radius-md, 6px);
    cursor: pointer;
}

.si-btn-ghost:hover[b-amqeijyunh] {
    background-color: var(--color-neutral-075, #F9FAFC);
}

/* Button with icon alignment */
.si-btn-icon-text[b-amqeijyunh] {
    gap: 8px;
}

.si-btn-icon-text[b-amqeijyunh]  .icon-component {
    display: flex;
    align-items: center;
}

/* MaterialIconComponent in buttons */
.si-btn[b-amqeijyunh]  .icon-component {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Active button state (for toggle buttons like scroll link) */
.si-btn-active[b-amqeijyunh] {
    background-color: var(--color-blue-050, #E6F0FF) !important;
    border-color: transparent !important;
}

/* Figma: Apply button - border-radius to match design */
.si-action-left .si-btn-primary[b-amqeijyunh] {
    border-radius: var(--border-radius-md, 6px);
    height: 32px;
    padding: 6px 12px;
}

/* DataSetPropSelector - constrain the Blazorise dropdown toggle to 32px */
.si-action-right[b-amqeijyunh]  .dropdown > .dropdown-toggle {
    padding: 4px;
    border: 1px solid var(--color-neutral-400, #D8DAE5);
    border-radius: var(--border-radius-md, 6px);
    background: var(--color-neutral-000, #FFFFFF);
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* DataSetPropSelector - ensure dropdown menu is wide enough for content */
.si-action-right[b-amqeijyunh]  .dropdown > .dropdown-menu {
    min-width: 280px;
}

/* Reset icon-component inside dropdown toggle: IconCustomClass adds .si-btn styles
   directly to the <span>, which conflicts with the toggle wrapper styling */
.si-action-right[b-amqeijyunh]  .dropdown > .dropdown-toggle .icon-component {
    font-size: 18px !important;
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    background: transparent !important;
}

/* Filter group alignment for Zaddons components */
.si-action-left[b-amqeijyunh]  .drp-container,
.si-action-left[b-amqeijyunh]  .dropdown-wrapper {
    margin-bottom: 0;
}

/* Figma Input: consistent border-radius, border color, height for all filter inputs */
.si-action-left[b-amqeijyunh]  .drp-wrapper {
    border: 1px solid var(--color-neutral-400, #D8DAE5);
    border-radius: var(--border-radius-md, 6px);
    height: 32px;
    box-sizing: border-box;
}

/* Prevent Addons input-group from wrapping to a second line inside 32px wrapper */
.si-action-left[b-amqeijyunh]  .drp-wrapper .input-group {
    flex-wrap: nowrap;
    height: 30px;
}

/* Constrain date picker inner addon buttons to fit 32px wrapper */
.si-action-left[b-amqeijyunh]  .symbolic-picker-toggle-icon {
    padding: 2px 6px;
    height: 30px;
    display: flex;
    align-items: center;
}

.si-action-left[b-amqeijyunh]  .symbolic-picker-dropdown-icon {
    padding: 0 6px;
    height: 30px;
    display: flex;
    align-items: center;
}

.si-action-left[b-amqeijyunh]  .dropdown-select {
    border: 1px solid var(--color-neutral-400, #D8DAE5);
    border-radius: var(--border-radius-md, 6px);
    height: 32px;
    box-sizing: border-box;
    background: var(--color-neutral-000, #FFFFFF);
}

/* Constrain the DropdownToggle chevron inside DropdownSelect */
.si-action-left[b-amqeijyunh]  .dropdown-select-chevron {
    padding: 2px 4px;
    height: 30px;
    display: flex;
    align-items: center;
}

.si-action-left[b-amqeijyunh]  .favorite-select-toggle {
    border: 1px solid var(--color-neutral-400, #D8DAE5);
    border-radius: var(--border-radius-md, 6px);
    height: 32px;
    box-sizing: border-box;
    background: var(--color-neutral-000, #FFFFFF);
}

/* Prevent Addons input-group from wrapping inside 32px toggle */
.si-action-left[b-amqeijyunh]  .favorite-select-toggle .input-group {
    flex-wrap: nowrap;
    height: 30px;
}

/* Constrain inner addon buttons to fit 32px toggle */
.si-action-left[b-amqeijyunh]  .favorite-select-toggle-icon,
.si-action-left[b-amqeijyunh]  .favorite-select-dropdown-icon {
    padding: 2px 4px;
    height: 30px;
    display: flex;
    align-items: center;
}

/* Adjust inner button heights to fit 32px containers */
.si-action-left[b-amqeijyunh]  .dropdown-select-btn-noicon,
.si-action-left[b-amqeijyunh]  .dropdown-select-btn-icon {
    height: 30px;
}

.si-action-left[b-amqeijyunh]  .symbolic-picker-input {
    padding: 4px 6px;
    font-size: 14px;
    field-sizing: content;
    width: auto;
    flex: 1 1 auto;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.si-action-left[b-amqeijyunh]  .favorite-select-input {
    line-height: 20px;
    font-size: 14px;
}

/* Drop the fixed 250px floor so the control hugs its content (icon + date range + chevron)
   at desktop, like the View/Location controls. Width is left unset so the narrow-breakpoint
   media rule (width: 100%) still stretches it to fill. */
.si-action-left[b-amqeijyunh]  .drp-container {
    min-width: 0;
}

/* Anchor the period dropdown panel to the box's left edge. The picker library positions
   the panel (position:fixed, inline left) against the <input>, which is inset by the leading
   calendar icon — so the panel sat ~24px right of the box. Re-anchor it as absolute to the
   wrapper instead. !important is required to beat the library's inline styles. */
.si-action-left[b-amqeijyunh]  .drp-wrapper {
    position: relative;
}

.si-action-left[b-amqeijyunh]  .daterangepicker {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: calc(100% + 4px) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Range list fills the panel (which matches the box width), so period names aren't
   truncated (supersedes bug #6011's fixed min-width). */
.si-action-left[b-amqeijyunh]  .daterangepicker .ranges {
    width: 100%;
    min-width: 0;
    float: none;
}

.si-action-left[b-amqeijyunh]  .daterangepicker .ranges ul {
    width: 100%;
}

/* Options fill the panel width (full-width rows/highlight) and ellipsis rather than overflow. */
.si-action-left[b-amqeijyunh]  .daterangepicker .ranges li {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 12px;
    font-size: 14px;
}

/* US #6427/#6431 Phase 4A: les quick filters (Show:) ont ete migres dans le
   FiltersContainer (side panel). Les regles .si-filter-toggle* ont ete retirees. */

/* Hint shown in the All Filters view before any data load (no filter definitions yet) */
[b-amqeijyunh] .si-filter-empty-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px;
    padding: 12px;
    background: var(--color-neutral-075, #F9FAFC);
    border-radius: var(--border-radius-md, 6px);
    color: var(--color-neutral-700, #696F8C);
    font-size: 14px;
    line-height: 20px;
}

[b-amqeijyunh] .si-filter-empty-hint .material-icons-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

/* Filter panel custom header */
[b-amqeijyunh] .si-filter-header {
    position: relative;
    z-index: 10;
    background: #fff;
}

[b-amqeijyunh] .si-filter-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 8px;
}

[b-amqeijyunh] .si-filter-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--N900, #1a1a1a);
}

[b-amqeijyunh] .si-filter-header-close {
    cursor: pointer;
    color: var(--N700, #474d66);
}

[b-amqeijyunh] .si-filter-header-close:hover {
    color: var(--N900, #1a1a1a);
}

[b-amqeijyunh] .sp-body-open {
    height: auto;
    flex: 1;
    min-height: 0;
}
/* _content/ScheduleCompass.Blazor/Components/Shared/LoadingView.razor.rz.scp.css */
.loading-view[b-a0bkotb9a6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: 16px;
    color: var(--color-neutral-700, #696F8C);
}

.loading-view__spinner[b-a0bkotb9a6] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-neutral-200, #EDEFF5);
    border-top-color: var(--color-blue-400, #3366FF);
    border-radius: 50%;
    animation: loading-view-spin-b-a0bkotb9a6 1s linear infinite;
}

@keyframes loading-view-spin-b-a0bkotb9a6 {
    to { transform: rotate(360deg); }
}