/* /Components/CoveragePreviewTab.razor.rz.scp.css */
.coverage-preview[b-4r0sodek2l], .coverage-preview__results[b-4r0sodek2l] { display: grid; gap: 1rem; }
.coverage-preview__header h2[b-4r0sodek2l], .coverage-preview__date-group h3[b-4r0sodek2l] { color: #064e3b; margin: 0; }
.coverage-preview__header p[b-4r0sodek2l], .coverage-preview__help[b-4r0sodek2l], .coverage-preview__summary[b-4r0sodek2l] { color: #4f7065; margin: .3rem 0 0; font-size: .86rem; }
.coverage-preview__panel[b-4r0sodek2l], .coverage-preview__date-group[b-4r0sodek2l] { background: #fff; border: 1px solid #d6ebe2; border-radius: 1rem; box-shadow: 0 10px 22px rgba(6,78,59,.07); padding: 1rem; }
.coverage-preview__form[b-4r0sodek2l] { display: grid; grid-template-columns: minmax(14rem, 2fr) minmax(9rem, 1fr) minmax(9rem, 1fr) auto; gap: .75rem; align-items: end; }
.coverage-preview__form label[b-4r0sodek2l] { color: #4f7065; display: grid; font-size: .75rem; font-weight: 700; gap: .25rem; }
.coverage-preview__form input[b-4r0sodek2l], .coverage-preview__form select[b-4r0sodek2l] { background: #f8fdfb; border: 1px solid #c8e4d8; border-radius: .55rem; box-sizing: border-box; color: #174030; padding: .48rem .55rem; width: 100%; }
.coverage-preview__action[b-4r0sodek2l] { padding-bottom: .02rem; }
.coverage-preview__message[b-4r0sodek2l] { background: #ecfdf5; border: 1px solid #86efac; border-radius: .65rem; color: #166534; padding: .65rem; }
.coverage-preview__message.error[b-4r0sodek2l] { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.coverage-preview__empty[b-4r0sodek2l] { color: #4f7065; }
.coverage-preview__table-wrap[b-4r0sodek2l] { overflow-x: auto; margin-top: .8rem; }
.coverage-preview table[b-4r0sodek2l] { border-collapse: collapse; min-width: 34rem; width: 100%; }
.coverage-preview th[b-4r0sodek2l], .coverage-preview td[b-4r0sodek2l] { border-bottom: 1px solid #e6f4ed; padding: .65rem; text-align: left; }
.coverage-preview th[b-4r0sodek2l] { color: #4f7065; font-size: .75rem; }
.coverage-preview td[b-4r0sodek2l] { color: #174030; font-size: .86rem; }
@media (max-width: 850px) { .coverage-preview__form[b-4r0sodek2l] { grid-template-columns: 1fr 1fr; } .coverage-preview__action[b-4r0sodek2l] { grid-column: 1 / -1; } }
@media (max-width: 560px) { .coverage-preview__form[b-4r0sodek2l] { grid-template-columns: 1fr; } }
/* /Components/Dashboard/DashboardSidePanels.razor.rz.scp.css */
.side-panels[b-an37mlwz2e] {
    display: grid;
    gap: 1rem;
}

.panel-card[b-an37mlwz2e] {
    background: #ffffff;
    border: 1px solid #d8ebe2;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(6, 78, 59, 0.08);
    padding: 0.9rem;
}

.panel-head[b-an37mlwz2e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.head-left[b-an37mlwz2e] {
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.panel-head h3[b-an37mlwz2e] {
    margin: 0;
    color: #064e3b;
    font-size: 0.96rem;
}

.count-badge[b-an37mlwz2e] {
    min-width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
}

.view-all[b-an37mlwz2e] {
    font-size: 0.78rem;
    text-decoration: none;
    color: #0f766e;
    font-weight: 700;
}

.panel-list[b-an37mlwz2e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.58rem;
}

.panel-item[b-an37mlwz2e],
.absence-item[b-an37mlwz2e] {
    border: 1px solid #e4f0ea;
    border-radius: 0.72rem;
    padding: 0.58rem;
    background: #fbfefc;
}

.absence-item[b-an37mlwz2e] {
    display: flex;
    align-items: flex-start;
    gap: 0.52rem;
}

.absence-avatar[b-an37mlwz2e] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    flex-shrink: 0;
}

.item-title[b-an37mlwz2e],
.item-subline[b-an37mlwz2e],
.empty-text[b-an37mlwz2e] {
    margin: 0;
}

.item-title[b-an37mlwz2e] {
    color: #1a3c30;
    font-size: 0.84rem;
    font-weight: 700;
}

.item-subline[b-an37mlwz2e] {
    color: #5a786d;
    font-size: 0.75rem;
    margin-top: 0.12rem;
}

.empty-text[b-an37mlwz2e] {
    color: #64847a;
    font-size: 0.8rem;
}
/* /Components/Dashboard/LoadingSpinner.razor.rz.scp.css */
.loading-wrap[b-kn4rsddu2a] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #4f7065;
    padding: 0.5rem 0;
}

.loading-wrap p[b-kn4rsddu2a] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.loading-spinner[b-kn4rsddu2a] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    border: 2px solid #bbf7d0;
    border-top-color: #065f46;
    animation: loading-spin-b-kn4rsddu2a 650ms linear infinite;
}

@keyframes loading-spin-b-kn4rsddu2a {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* /Components/Dashboard/MetricCards.razor.rz.scp.css */
.metric-grid[b-29jwldxt2v] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.2rem;
}

.metric-card[b-29jwldxt2v] {
    background: linear-gradient(180deg, #ffffff 0%, #f4fbf8 100%);
    border: 1px solid #cce8df;
    border-radius: 0.9rem;
    box-shadow: 0 7px 20px rgba(6, 78, 59, 0.08);
    padding: 0.9rem;
}

.metric-head[b-29jwldxt2v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.metric-icon[b-29jwldxt2v] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e6f7f1;
    color: #064e3b;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.metric-card h2[b-29jwldxt2v] {
    margin: 0;
    color: #065f46;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
}

.metric-value[b-29jwldxt2v] {
    margin: 0;
    color: #064e3b;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.metric-note[b-29jwldxt2v] {
    margin: 0.35rem 0 0;
    color: #4b6f63;
    font-size: 0.74rem;
}

@media (max-width: 1200px) {
    .metric-grid[b-29jwldxt2v] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .metric-grid[b-29jwldxt2v] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
/* /Components/Dashboard/WeeklyRotaGrid.razor.rz.scp.css */
.rota-shell[b-e21c70x974] {
    background: #ffffff;
    border: 1px solid #d8ebe2;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(6, 78, 59, 0.08);
    padding: 1rem;
}

.rota-header[b-e21c70x974] {
    margin-bottom: 0.85rem;
}

.rota-header h2[b-e21c70x974] {
    margin: 0;
    color: #064e3b;
    font-size: 1.15rem;
}

.rota-header p[b-e21c70x974] {
    margin: 0.25rem 0 0;
    color: #4b635b;
    font-size: 0.82rem;
}

.rota-table-wrap[b-e21c70x974] {
    overflow-x: auto;
}

.rota-table[b-e21c70x974] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px;
}

.rota-table thead th[b-e21c70x974] {
    font-size: 0.78rem;
    color: #36564a;
    font-weight: 700;
    text-align: left;
    background: #f3faf7;
    border-bottom: 1px solid #d8ebe2;
    padding: 0.62rem 0.65rem;
}

.staff-column[b-e21c70x974] {
    min-width: 230px;
}

.rota-table tbody td[b-e21c70x974] {
    border-bottom: 1px solid #edf5f1;
    padding: 0.62rem 0.65rem;
    vertical-align: middle;
}

.staff-cell[b-e21c70x974] {
    background: #fcfffd;
}

.staff-stack[b-e21c70x974] {
    display: flex;
    align-items: center;
    gap: 0.62rem;
}

.avatar[b-e21c70x974],
.avatar-fallback[b-e21c70x974] {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.avatar[b-e21c70x974] {
    object-fit: cover;
    border: 1px solid #d1e7de;
}

.avatar-fallback[b-e21c70x974] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.72rem;
    font-weight: 800;
}

.staff-name[b-e21c70x974],
.staff-role[b-e21c70x974] {
    margin: 0;
    line-height: 1.2;
}

.staff-name[b-e21c70x974] {
    color: #18392f;
    font-weight: 700;
    font-size: 0.88rem;
}

.staff-role[b-e21c70x974] {
    color: #55766a;
    font-size: 0.75rem;
}

.shift-wrap[b-e21c70x974] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.shift-pill[b-e21c70x974] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.2rem;
    padding: 0.35rem 0.52rem;
    border-radius: 0.62rem;
    font-size: 0.74rem;
    font-weight: 700;
}

.shift-green[b-e21c70x974] {
    background: #dcfce7;
    color: #166534;
}

.shift-purple[b-e21c70x974] {
    background: #ede9fe;
    color: #5b21b6;
}

.shift-blue[b-e21c70x974] {
    background: #dbeafe;
    color: #1e40af;
}

.shift-amber[b-e21c70x974] {
    background: #fef3c7;
    color: #92400e;
}

.shift-rose[b-e21c70x974] {
    background: #ffe4e6;
    color: #9f1239;
}

.no-shift[b-e21c70x974] {
    color: #9aaea5;
    font-weight: 600;
}

.quick-edit[b-e21c70x974] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    border: 0;
    background: #064e3b;
    color: #ecfdf5;
    font-size: 0.82rem;
    line-height: 1;
    padding: 0;
}

.empty-row[b-e21c70x974] {
    color: #5c7e72;
    text-align: center;
}

.rota-footer[b-e21c70x974] {
    margin-top: 0.95rem;
    display: flex;
    justify-content: center;
}

.view-rota-btn[b-e21c70x974] {
    border: 0;
    border-radius: 999px;
    padding: 0.58rem 1.25rem;
    font-weight: 700;
    color: #ecfdf5;
    background: linear-gradient(180deg, #047857 0%, #064e3b 100%);
}

@media (max-width: 720px) {
    .rota-shell[b-e21c70x974] {
        padding: 0.75rem;
    }
}
/* /Components/LeaveTypesTab.razor.rz.scp.css */
/* ── Settings grid ─────────────────────────────────────── */
.settings-grid[b-1bvrep7ccb] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.settings-left[b-1bvrep7ccb],
.settings-right[b-1bvrep7ccb] {
    display: grid;
    gap: 1rem;
}

/* ── Cards ─────────────────────────────────────────────── */
.settings-card[b-1bvrep7ccb] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 1rem;
    padding: 1.1rem;
    box-shadow: 0 10px 22px rgba(6, 78, 59, 0.07);
    display: grid;
    gap: 0.8rem;
}

.card-title[b-1bvrep7ccb] {
    margin: 0;
    color: #064e3b;
    font-size: 1rem;
}

.card-sub[b-1bvrep7ccb] {
    margin: -0.3rem 0 0;
    color: #4f7065;
    font-size: 0.82rem;
}

/* ── Card footer ───────────────────────────────────────── */
.card-footer[b-1bvrep7ccb] {
    padding-top: 0.4rem;
    border-top: 1px solid #e6f4ed;
}

.btn-save[b-1bvrep7ccb] {
    border: none;
    border-radius: 0.65rem;
    padding: 0.55rem 1.1rem;
    background: #064e3b;
    color: #ecfdf5;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background-color 140ms;
}

.btn-save:hover:not(:disabled)[b-1bvrep7ccb] {
    background: #065f46;
}

.btn-save:disabled[b-1bvrep7ccb] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Status & placeholder ──────────────────────────────── */
.status-message[b-1bvrep7ccb] {
    margin: 0;
    color: #245544;
    font-size: 0.84rem;
}

.status-message.error[b-1bvrep7ccb] {
    color: #b91c1c;
}

.placeholder-tab[b-1bvrep7ccb] {
    color: #4f7065;
}

/* ── Table ─────────────────────────────────────────────── */
.locations-table-wrap[b-1bvrep7ccb] {
    overflow-x: auto;
}

.locations-table[b-1bvrep7ccb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.locations-table th[b-1bvrep7ccb],
.locations-table td[b-1bvrep7ccb] {
    text-align: left;
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid #e6f4ed;
    color: #245544;
}

.locations-table th[b-1bvrep7ccb] {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4f7065;
}

/* ── Modal overlay & sheet ─────────────────────────────── */
.leave-modal-overlay[b-1bvrep7ccb] {
    position: fixed;
    inset: 0;
    background: rgba(2, 28, 18, 0.45);
    z-index: 980;
}

.leave-modal-sheet[b-1bvrep7ccb] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(420px, 100vw);
    background: #ffffff;
    z-index: 981;
    display: grid;
    grid-template-rows: auto 1fr auto;
    box-shadow: -8px 0 34px rgba(2, 28, 18, 0.2);
}

.leave-modal-header[b-1bvrep7ccb] {
    padding: 0.95rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e7f3ee;
}

.leave-modal-header h3[b-1bvrep7ccb] {
    margin: 0;
    color: #064e3b;
    font-size: 1rem;
}

.leave-modal-close[b-1bvrep7ccb] {
    border: 0;
    background: transparent;
    font-size: 1.45rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.leave-modal-body[b-1bvrep7ccb] {
    padding: 1rem;
    display: grid;
    gap: 0.5rem;
    align-content: start;
    overflow-y: auto;
}

/* ── Modal form fields ─────────────────────────────────── */
.form-label[b-1bvrep7ccb] {
    font-size: 0.74rem;
    font-weight: 700;
    color: #4f7065;
}

.form-input[b-1bvrep7ccb] {
    width: 100%;
    border: 1px solid #c8e4d8;
    border-radius: 0.62rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
    box-sizing: border-box;
    color: #174030;
    background: #f8fdfb;
}

.form-input:focus[b-1bvrep7ccb] {
    outline: 2px solid #065f46;
    outline-offset: 1px;
}

.form-checkbox[b-1bvrep7ccb] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #174030;
    padding: 0.25rem 0;
}

.form-checkbox input[b-1bvrep7ccb] {
    accent-color: #047857;
}

.leave-modal-footer[b-1bvrep7ccb] {
    border-top: 1px solid #e7f3ee;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.modal-cancel-btn[b-1bvrep7ccb],
.modal-submit-btn[b-1bvrep7ccb] {
    border: 0;
    border-radius: 0.62rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.modal-cancel-btn[b-1bvrep7ccb] {
    background: #f1f5f9;
    color: #334155;
}

.modal-submit-btn[b-1bvrep7ccb] {
    background: #064e3b;
    color: #ecfdf5;
}

.modal-submit-btn:hover:not(:disabled)[b-1bvrep7ccb] {
    background: #065f46;
}

.modal-submit-btn:disabled[b-1bvrep7ccb] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 960px) {
    .settings-grid[b-1bvrep7ccb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/RotaPlansTab.razor.rz.scp.css */
.rota-plans[b-sz3bh8zj14] { display: grid; gap: 1rem; }
.rota-plans__header[b-sz3bh8zj14], .section-heading[b-sz3bh8zj14], .actions[b-sz3bh8zj14], .data-row[b-sz3bh8zj14] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.rota-plans__header h2[b-sz3bh8zj14], .section-heading h3[b-sz3bh8zj14] { margin: 0; color: #064e3b; }
.rota-plans__header p[b-sz3bh8zj14] { margin: .25rem 0 0; color: #4f7065; font-size: .86rem; }
.rota-plans__layout[b-sz3bh8zj14] { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.rota-plans__content[b-sz3bh8zj14] { display: grid; gap: 1rem; }
.rota-panel[b-sz3bh8zj14] { background: #fff; border: 1px solid #d6ebe2; border-radius: 1rem; padding: 1rem; box-shadow: 0 10px 22px rgba(6,78,59,.07); display: grid; gap: .85rem; }
.plan-list[b-sz3bh8zj14], .data-list[b-sz3bh8zj14] { display: grid; gap: .45rem; }
.plan-item[b-sz3bh8zj14], .data-summary[b-sz3bh8zj14] { border: 1px solid #d6ebe2; background: #f8fdfb; border-radius: .65rem; color: #174030; cursor: pointer; padding: .65rem; text-align: left; display: grid; gap: .2rem; width: 100%; }
.plan-item.selected[b-sz3bh8zj14] { border-color: #065f46; background: #ecfdf5; box-shadow: inset 3px 0 #065f46; }
.plan-item span[b-sz3bh8zj14], .data-summary span[b-sz3bh8zj14], .field-help[b-sz3bh8zj14] { color: #4f7065; font-size: .78rem; }
.data-row[b-sz3bh8zj14] { border-bottom: 1px solid #e6f4ed; padding-bottom: .45rem; }
.form-grid[b-sz3bh8zj14] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.form-grid label[b-sz3bh8zj14] { display: grid; gap: .25rem; color: #4f7065; font-size: .75rem; font-weight: 700; }
.form-grid input[b-sz3bh8zj14], .form-grid select[b-sz3bh8zj14], .form-grid textarea[b-sz3bh8zj14] { border: 1px solid #c8e4d8; border-radius: .55rem; background: #f8fdfb; color: #174030; padding: .48rem .55rem; width: 100%; box-sizing: border-box; }
.form-grid textarea[b-sz3bh8zj14] { min-height: 4.5rem; resize: vertical; }
.wide[b-sz3bh8zj14] { grid-column: 1 / -1; }
.weekday-options[b-sz3bh8zj14] { border: 1px solid #d6ebe2; border-radius: .6rem; display: flex; flex-wrap: wrap; gap: .7rem; padding: .55rem; }
.weekday-options legend[b-sz3bh8zj14] { color: #4f7065; font-size: .75rem; font-weight: 700; }
.weekday-options label[b-sz3bh8zj14] { display: flex; align-items: center; gap: .2rem; }
.weekday-options input[b-sz3bh8zj14] { width: auto; }
.divider-top[b-sz3bh8zj14] { border-top: 1px solid #e6f4ed; padding-top: .8rem; }
.primary-button[b-sz3bh8zj14], .secondary-button[b-sz3bh8zj14], .link-button[b-sz3bh8zj14] { border-radius: .6rem; cursor: pointer; font-weight: 700; padding: .5rem .8rem; }
.primary-button[b-sz3bh8zj14] { background: #064e3b; border: 1px solid #064e3b; color: #ecfdf5; }
.secondary-button[b-sz3bh8zj14] { background: #fff; border: 1px solid #9bcdbb; color: #065f46; }
.link-button[b-sz3bh8zj14] { background: transparent; border: 0; color: #065f46; padding: .3rem; }
button:disabled[b-sz3bh8zj14] { cursor: wait; opacity: .6; }
.empty-state[b-sz3bh8zj14] { color: #4f7065; font-size: .84rem; }
.rota-message[b-sz3bh8zj14] { background: #ecfdf5; border: 1px solid #86efac; border-radius: .65rem; color: #166534; padding: .65rem; }
.rota-message.error[b-sz3bh8zj14] { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.coverage-actions[b-sz3bh8zj14], .coverage-week-tabs[b-sz3bh8zj14], .coverage-block__actions[b-sz3bh8zj14] { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.coverage-week-tabs[b-sz3bh8zj14] { border-bottom: 1px solid #d6ebe2; padding-bottom: .6rem; }
.coverage-week-tabs button[b-sz3bh8zj14] { border: 1px solid #b9dccc; background: #fff; border-radius: .5rem; color: #065f46; cursor: pointer; font-weight: 700; padding: .4rem .65rem; }
.coverage-week-tabs button.selected[b-sz3bh8zj14] { background: #065f46; border-color: #065f46; color: #ecfdf5; }
.coverage-grid[b-sz3bh8zj14] { display: grid; grid-template-columns: repeat(7, minmax(10rem, 1fr)); gap: .6rem; overflow-x: auto; padding-bottom: .2rem; }
.coverage-day[b-sz3bh8zj14] { background: #f8fdfb; border: 1px solid #d6ebe2; border-radius: .7rem; display: grid; gap: .55rem; min-width: 10rem; padding: .6rem; align-content: start; }
.coverage-day > header[b-sz3bh8zj14] { border-bottom: 1px solid #d6ebe2; display: flex; justify-content: space-between; gap: .35rem; padding-bottom: .45rem; }
.coverage-day h4[b-sz3bh8zj14] { color: #064e3b; font-size: .82rem; margin: 0; }
.coverage-day header span[b-sz3bh8zj14] { color: #4f7065; font-size: .7rem; }
.coverage-blocks[b-sz3bh8zj14] { display: grid; gap: .45rem; }
.coverage-block[b-sz3bh8zj14] { background: #fff; border: 1px solid #b9dccc; border-radius: .55rem; display: grid; gap: .35rem; padding: .45rem; }
.coverage-block.disabled[b-sz3bh8zj14] { background: #f3f4f6; border-style: dashed; opacity: .72; }
.coverage-block__summary[b-sz3bh8zj14] { background: transparent; border: 0; color: #174030; cursor: pointer; display: grid; gap: .16rem; padding: 0; text-align: left; }
.coverage-block__summary span[b-sz3bh8zj14], .coverage-block__actions label[b-sz3bh8zj14] { color: #4f7065; font-size: .7rem; }
.coverage-block__actions select[b-sz3bh8zj14] { border: 1px solid #c8e4d8; border-radius: .4rem; color: #174030; margin-left: .2rem; max-width: 6.5rem; padding: .2rem; }
.coverage-add[b-sz3bh8zj14] { background: transparent; border: 1px dashed #8dbba5; border-radius: .5rem; color: #065f46; cursor: pointer; font-weight: 700; padding: .45rem; }
.coverage-editor[b-sz3bh8zj14] { background: #ecfdf5; border: 1px solid #9bcdbb; border-radius: .55rem; display: grid; gap: .45rem; padding: .55rem; }
.coverage-editor label[b-sz3bh8zj14] { color: #4f7065; display: grid; font-size: .7rem; font-weight: 700; gap: .18rem; }
.coverage-editor input[b-sz3bh8zj14], .coverage-editor select[b-sz3bh8zj14] { border: 1px solid #c8e4d8; border-radius: .4rem; box-sizing: border-box; color: #174030; padding: .35rem; width: 100%; }
.coverage-editor__times[b-sz3bh8zj14] { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.working-arrangement-link[b-sz3bh8zj14] { justify-self: start; background: #ecfdf5; border: 1px solid #9bcdbb; border-radius: .6rem; color: #065f46; cursor: pointer; font-weight: 700; padding: .5rem .7rem; }
.scheduling-rule-picker[b-sz3bh8zj14] { background: #f8fdfb; border: 1px solid #b9dccc; border-radius: .6rem; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; padding: .65rem; }
.compensatory-days-grid[b-sz3bh8zj14] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.compensatory-days-grid .drawer-label[b-sz3bh8zj14] { display: grid; gap: .25rem; }
.work-pattern-grid[b-sz3bh8zj14] { margin-top: .6rem; }
.work-pattern-day[b-sz3bh8zj14] { min-height: 10rem; }
.work-pattern-day .drawer-checkbox-label[b-sz3bh8zj14] { color: #174030; font-size: .75rem; }
.work-pattern-context[b-sz3bh8zj14] { background: #f8fdfb; border: 1px solid #b9dccc; border-radius: .6rem; color: #174030; display: grid; gap: .3rem; margin: .5rem 0; padding: .65rem; }
.work-pattern-context span[b-sz3bh8zj14] { color: #4f7065; font-size: .78rem; }
@media (max-width: 900px) { .rota-plans__layout[b-sz3bh8zj14] { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .form-grid[b-sz3bh8zj14] { grid-template-columns: 1fr; } .wide[b-sz3bh8zj14] { grid-column: auto; } .data-row[b-sz3bh8zj14] { align-items: flex-start; } .coverage-actions[b-sz3bh8zj14] { align-items: flex-end; flex-direction: column; } }
/* /Components/StaffComplianceEditor.razor.rz.scp.css */
.staff-compliance-editor[b-74vvme0t2e] { display: grid; gap: .55rem; }
.staff-compliance-editor label[b-74vvme0t2e] { display: grid; gap: .25rem; color: #4f7065; font-size: .75rem; font-weight: 700; }
.staff-compliance-editor input[b-74vvme0t2e], .staff-compliance-editor select[b-74vvme0t2e] { box-sizing: border-box; width: 100%; border: 1px solid #c8e4d8; border-radius: .55rem; background: #f8fdfb; color: #174030; padding: .48rem .55rem; }
.staff-compliance-check[b-74vvme0t2e] { display: flex !important; align-items: center; gap: .4rem; color: #174030 !important; }
.staff-compliance-check input[b-74vvme0t2e] { width: auto !important; }
.staff-compliance-button[b-74vvme0t2e] { justify-self: start; border: 1px solid #9bcdbb; border-radius: .6rem; background: #fff; color: #065f46; cursor: pointer; font-weight: 700; padding: .5rem .8rem; }
.staff-compliance-help[b-74vvme0t2e], .staff-compliance-message[b-74vvme0t2e] { margin: 0; color: #4f7065; font-size: .8rem; }
/* /Components/StaffWorkPatternEditor.razor.rz.scp.css */
.drawer-section-divider[b-73ksr45qwn] { border-top: 1px solid #e6f4ed; margin-top: .2rem; padding-top: .8rem; }
.drawer-section-title[b-73ksr45qwn] { margin: 0; color: #174030; font-size: .92rem; font-weight: 800; }
.drawer-help[b-73ksr45qwn] { margin: 0; color: #4f7065; font-size: .8rem; }
.drawer-label[b-73ksr45qwn] { display: grid; gap: .25rem; color: #4f7065; font-size: .75rem; font-weight: 700; }
.drawer-input[b-73ksr45qwn] { box-sizing: border-box; width: 100%; border: 1px solid #c8e4d8; border-radius: .55rem; background: #f8fdfb; color: #174030; padding: .48rem .55rem; }
.coverage-week-tabs[b-73ksr45qwn] { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid #d6ebe2; padding-bottom: .55rem; }
.coverage-week-tabs button[b-73ksr45qwn] { border: 1px solid #b9dccc; border-radius: .5rem; background: #fff; color: #065f46; cursor: pointer; font-weight: 700; padding: .35rem .6rem; }
.coverage-week-tabs button.selected[b-73ksr45qwn] { border-color: #065f46; background: #065f46; color: #ecfdf5; }
.coverage-grid[b-73ksr45qwn] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.coverage-day[b-73ksr45qwn] { min-width: 0; background: #f8fdfb; border: 1px solid #d6ebe2; border-radius: .65rem; padding: .5rem; display: grid; gap: .4rem; align-content: start; }
.coverage-day > header[b-73ksr45qwn] { border-bottom: 1px solid #d6ebe2; padding-bottom: .35rem; }
.coverage-day h4[b-73ksr45qwn] { margin: 0; color: #064e3b; font-size: .75rem; }
.drawer-checkbox-label[b-73ksr45qwn] { display: flex; align-items: flex-start; gap: .3rem; color: #174030; font-size: .72rem; }
.card-edit-btn[b-73ksr45qwn], .secondary-button[b-73ksr45qwn] { border: 1px solid #9bcdbb; border-radius: .55rem; background: #fff; color: #065f46; cursor: pointer; font-weight: 700; padding: .45rem .7rem; }
.reset-feedback[b-73ksr45qwn] { margin: 0; color: #166534; font-size: .8rem; }
@media (max-width: 700px) { .coverage-grid[b-73ksr45qwn] { grid-template-columns: 1fr; } .coverage-day[b-73ksr45qwn] { min-width: 0; } }
/* /Components/WorkAndPayTab.razor.rz.scp.css */
/* ── Settings grid ─────────────────────────────────────── */
.settings-grid[b-olrzscpa1x] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.settings-left[b-olrzscpa1x],
.settings-right[b-olrzscpa1x] {
    display: grid;
    gap: 1rem;
}

/* ── Cards ─────────────────────────────────────────────── */
.settings-card[b-olrzscpa1x] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 1rem;
    padding: 1.1rem;
    box-shadow: 0 10px 22px rgba(6, 78, 59, 0.07);
    display: grid;
    gap: 0.8rem;
}

.card-title[b-olrzscpa1x] {
    margin: 0;
    color: #064e3b;
    font-size: 1rem;
}

.card-sub[b-olrzscpa1x] {
    margin: -0.3rem 0 0;
    color: #4f7065;
    font-size: 0.82rem;
}

/* ── Weekday chip row ──────────────────────────────────── */
.weekday-grid[b-olrzscpa1x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.weekday-chip[b-olrzscpa1x] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem;
    border: 1.5px solid #c8e4d8;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4f7065;
    background: #f8fdfb;
    cursor: pointer;
    user-select: none;
    transition: background 120ms, border-color 120ms, color 120ms;
}

.weekday-chip input[type="checkbox"][b-olrzscpa1x] {
    display: none;
}

.weekday-chip--active[b-olrzscpa1x] {
    background: #064e3b;
    border-color: #064e3b;
    color: #ecfdf5;
}

.weekday-chip:hover:not(.weekday-chip--active)[b-olrzscpa1x] {
    background: #e6f4ed;
    border-color: #6bb89a;
    color: #174030;
}

/* ── Field groups ──────────────────────────────────────── */
.field-group[b-olrzscpa1x] {
    display: grid;
    gap: 0.28rem;
}

.field-group label[b-olrzscpa1x] {
    font-size: 0.74rem;
    font-weight: 700;
    color: #4f7065;
}

.field-group input[b-olrzscpa1x],
.field-group select[b-olrzscpa1x] {
    border: 1px solid #c8e4d8;
    border-radius: 0.62rem;
    padding: 0.46rem 0.6rem;
    font-size: 0.88rem;
    color: #174030;
    background: #f8fdfb;
    width: 100%;
    box-sizing: border-box;
}

.field-group input:focus[b-olrzscpa1x],
.field-group select:focus[b-olrzscpa1x] {
    outline: 2px solid #065f46;
    outline-offset: 1px;
}

.field-row[b-olrzscpa1x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* ── Card footer ───────────────────────────────────────── */
.card-footer[b-olrzscpa1x] {
    padding-top: 0.4rem;
    border-top: 1px solid #e6f4ed;
}

.btn-save[b-olrzscpa1x] {
    border: none;
    border-radius: 0.65rem;
    padding: 0.55rem 1.1rem;
    background: #064e3b;
    color: #ecfdf5;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background-color 140ms;
}

.btn-save:hover:not(:disabled)[b-olrzscpa1x] {
    background: #065f46;
}

.btn-save:disabled[b-olrzscpa1x] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Toggle list ───────────────────────────────────────── */
.toggle-list[b-olrzscpa1x] {
    display: grid;
    gap: 0;
}

.toggle-row[b-olrzscpa1x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eaf4ee;
}

.toggle-row:last-child[b-olrzscpa1x] {
    border-bottom: none;
}

.toggle-text[b-olrzscpa1x] {
    display: grid;
    gap: 0.18rem;
    flex: 1;
}

.toggle-title[b-olrzscpa1x] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #174030;
}

.toggle-sub[b-olrzscpa1x] {
    font-size: 0.78rem;
    color: #4f7065;
}

/* ── CSS Toggle Switch ─────────────────────────────────── */
.toggle-switch[b-olrzscpa1x] {
    position: relative;
    display: inline-block;
    width: 2.8rem;
    height: 1.5rem;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input[b-olrzscpa1x] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider[b-olrzscpa1x] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 180ms ease;
}

.toggle-slider[b-olrzscpa1x]::before {
    content: '';
    position: absolute;
    height: 1.1rem;
    width: 1.1rem;
    border-radius: 50%;
    background: #ffffff;
    left: 0.2rem;
    bottom: 0.2rem;
    transition: transform 180ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider[b-olrzscpa1x] {
    background: #064e3b;
}

.toggle-switch input:checked + .toggle-slider[b-olrzscpa1x]::before {
    transform: translateX(1.3rem);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 960px) {
    .settings-grid[b-olrzscpa1x] {
        grid-template-columns: 1fr;
    }

    .field-row[b-olrzscpa1x] {
        grid-template-columns: 1fr;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.guest-shell[b-zpbxw5k07y] {
    min-height: 100vh;
    background: var(--cs-surface-page, #f6f8fb);
}

.guest-body[b-zpbxw5k07y] {
    min-height: 100vh;
}

.app-shell[b-zpbxw5k07y] {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100vh;
    overflow: hidden;
}

.app-sidebar[b-zpbxw5k07y] {
    height: 100vh;
    position: sticky;
    top: 0;
}

.app-main[b-zpbxw5k07y] {
    height: 100vh;
    overflow-y: auto;
    background: #f6faf8;
}

.app-content[b-zpbxw5k07y] {
    padding: 1.5rem 1.75rem 2rem;
}

@media (max-width: 900px) {
    .app-shell[b-zpbxw5k07y] {
        grid-template-columns: 220px 1fr;
    }
}

@media (max-width: 700px) {
    .app-shell[b-zpbxw5k07y] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .app-sidebar[b-zpbxw5k07y] {
        position: static;
        height: auto;
    }

    .app-main[b-zpbxw5k07y] {
        height: auto;
        min-height: calc(100vh - 240px);
    }

    .app-content[b-zpbxw5k07y] {
        padding: 1rem;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Sidebar shell */
.sidebar-root[b-ydtqe92pzs] {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.15rem 1.1rem;
    background:
        radial-gradient(80% 55% at 25% 12%, rgba(22, 163, 74, 0.16) 0%, rgba(22, 163, 74, 0) 70%),
        linear-gradient(180deg, #032f26 0%, #034a38 62%, #045440 100%);
    color: #ecfdf5;
    overflow-y: auto;
}

/* Brand block */
.brand-block[b-ydtqe92pzs] {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.2rem 0.32rem 1.7rem;
}

.brand-icon[b-ydtqe92pzs] {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f8fafc;
    flex-shrink: 0;
}

.brand-icon-svg[b-ydtqe92pzs] {
    width: 2.05rem;
    height: 2.05rem;
    display: block;
}

.brand-text[b-ydtqe92pzs] {
    display: grid;
    gap: 0.16rem;
}

.brand-title[b-ydtqe92pzs] {
    margin: 0;
    font-size: 1.85rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #f8fafc;
}

.brand-subtitle[b-ydtqe92pzs] {
    margin: 0;
    font-size: 0.44rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: #b7f4d9;
}

/* Nav list */
.menu-list[b-ydtqe92pzs] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.menu-list[b-ydtqe92pzs]  .menu-link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 3.45rem;
    padding: 0.76rem 0.74rem;
    border-radius: 0.82rem;
    text-decoration: none !important;
    color: #f8fafc !important;
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.menu-list[b-ydtqe92pzs]  .menu-link,
.menu-list[b-ydtqe92pzs]  .menu-link:link,
.menu-list[b-ydtqe92pzs]  .menu-link:visited,
.menu-list[b-ydtqe92pzs]  .menu-link:hover,
.menu-list[b-ydtqe92pzs]  .menu-link:active,
.menu-list[b-ydtqe92pzs]  .menu-link:focus,
.menu-list[b-ydtqe92pzs]  .menu-link:focus-visible {
    text-decoration: none !important;
    color: #f8fafc !important;
}

.menu-label[b-ydtqe92pzs] {
    letter-spacing: 0.005em;
}

.menu-list[b-ydtqe92pzs]  .menu-link:hover {
    color: #ffffff !important;
    background: rgba(236, 253, 245, 0.11);
}

.menu-list[b-ydtqe92pzs]  .menu-link.active {
    color: #ffffff !important;
    background: rgba(236, 253, 245, 0.2);
    box-shadow: inset 0 0 0 1px rgba(167, 243, 208, 0.38);
}

.menu-icon[b-ydtqe92pzs] {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f0fdf4;
    flex-shrink: 0;
}

.menu-icon-svg[b-ydtqe92pzs] {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

/* Footer controls */
.footer-controls[b-ydtqe92pzs] {
    margin-top: auto;
    display: grid;
    gap: 0.55rem;
}

.notification-wrap[b-ydtqe92pzs] {
    position: relative;
}

.notification-bell-btn[b-ydtqe92pzs] {
    width: 100%;
    min-height: 2.65rem;
    border-radius: 0.82rem;
    border: 1px solid rgba(236, 253, 245, 0.22);
    background: rgba(236, 253, 245, 0.11);
    color: #ecfdf5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.notification-bell-btn:hover[b-ydtqe92pzs] {
    background: rgba(236, 253, 245, 0.16);
}

.notification-bell-icon[b-ydtqe92pzs] {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

.notification-badge[b-ydtqe92pzs] {
    position: absolute;
    top: 0.28rem;
    right: 0.38rem;
    min-width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.18rem;
}

.notification-popover[b-ydtqe92pzs] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.55rem);
    border-radius: 0.9rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
    padding: 0.5rem;
    z-index: 35;
    display: grid;
    gap: 0.35rem;
}

.notification-list[b-ydtqe92pzs] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.28rem;
    max-height: 16.5rem;
    overflow-y: auto;
}

.notification-item[b-ydtqe92pzs] {
    border-radius: 0.62rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 0.46rem 0.52rem;
    display: grid;
    gap: 0.16rem;
}

.notification-item.unread[b-ydtqe92pzs] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.notification-title[b-ydtqe92pzs] {
    margin: 0;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 700;
}

.notification-item.unread .notification-title[b-ydtqe92pzs] {
    font-weight: 800;
}

.notification-message[b-ydtqe92pzs] {
    margin: 0;
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.3;
}

.notification-time[b-ydtqe92pzs] {
    margin: 0;
    color: #64748b;
    font-size: 0.69rem;
    font-weight: 600;
}

.notification-empty[b-ydtqe92pzs] {
    margin: 0;
    padding: 0.45rem 0.2rem;
    color: #64748b;
    font-size: 0.76rem;
}

.notification-popover[b-ydtqe92pzs]  .notification-view-all,
.notification-popover[b-ydtqe92pzs]  .notification-view-all:link,
.notification-popover[b-ydtqe92pzs]  .notification-view-all:visited,
.notification-popover[b-ydtqe92pzs]  .notification-view-all:hover,
.notification-popover[b-ydtqe92pzs]  .notification-view-all:active,
.notification-popover[b-ydtqe92pzs]  .notification-view-all:focus,
.notification-popover[b-ydtqe92pzs]  .notification-view-all:focus-visible {
    border-radius: 0.66rem;
    min-height: 2.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 700;
    border: 1px solid #e2e8f0;
}

.notification-popover[b-ydtqe92pzs]  .notification-view-all:hover {
    background: #edf7f1;
}

/* Profile badge */
.profile-menu-wrap[b-ydtqe92pzs] {
    position: relative;
}

.profile-badge[b-ydtqe92pzs] {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    padding: 0.72rem;
    border-radius: 0.82rem;
    background: rgba(236, 253, 245, 0.11);
    border: 1px solid rgba(236, 253, 245, 0.22);
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 130ms ease;
}

.profile-badge:hover[b-ydtqe92pzs] {
    background: rgba(236, 253, 245, 0.16);
}

.avatar[b-ydtqe92pzs] {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d1fae5;
    color: #065f46;
    font-weight: 800;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.profile-text[b-ydtqe92pzs] {
    min-width: 0;
    flex: 1;
}

.profile-name[b-ydtqe92pzs],
.profile-role[b-ydtqe92pzs] {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-name[b-ydtqe92pzs] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #f8fafc;
}

.profile-role[b-ydtqe92pzs] {
    font-size: 0.74rem;
    color: #a7f3d0;
}

.profile-chevron[b-ydtqe92pzs] {
    font-size: 0.78rem;
    color: #a7f3d0;
    flex-shrink: 0;
    transition: transform 140ms ease;
}

.profile-chevron.open[b-ydtqe92pzs] {
    transform: rotate(180deg);
}

.profile-popover[b-ydtqe92pzs] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.55rem);
    border-radius: 0.9rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
    padding: 0.5rem;
    display: grid;
    gap: 0.24rem;
    z-index: 30;
}

.profile-popover[b-ydtqe92pzs]  .profile-popover-link,
.profile-popover-btn[b-ydtqe92pzs] {
    display: flex;
    align-items: center;
    gap: 0.68rem;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    border-radius: 0.66rem;
    min-height: 2.9rem;
    padding: 0.52rem 0.62rem;
    color: #0f172a;
    font-size: 0.93rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.profile-popover[b-ydtqe92pzs]  .profile-popover-link,
.profile-popover[b-ydtqe92pzs]  .profile-popover-link:link,
.profile-popover[b-ydtqe92pzs]  .profile-popover-link:visited,
.profile-popover[b-ydtqe92pzs]  .profile-popover-link:hover,
.profile-popover[b-ydtqe92pzs]  .profile-popover-link:active,
.profile-popover[b-ydtqe92pzs]  .profile-popover-link:focus,
.profile-popover[b-ydtqe92pzs]  .profile-popover-link:focus-visible {
    color: #0f172a;
    text-decoration: none;
}

.profile-popover[b-ydtqe92pzs]  .profile-popover-link:hover,
.profile-popover-btn:hover[b-ydtqe92pzs] {
    background: #edf7f1;
}

.profile-popover-icon[b-ydtqe92pzs] {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    flex-shrink: 0;
}

.profile-popover-svg[b-ydtqe92pzs] {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

@media (max-width: 700px) {
    .sidebar-root[b-ydtqe92pzs] {
        height: auto;
        min-height: 0;
        padding: 1rem 0.75rem;
    }

    .brand-title[b-ydtqe92pzs] {
        font-size: 1.55rem;
    }

    .profile-badge[b-ydtqe92pzs] {
        margin-top: 0.85rem;
    }
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* ── Page header ─────────────────────────────────────── */
.db-header[b-2n71waweng] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}

.db-header-left[b-2n71waweng] {
    display: grid;
    gap: 0.2rem;
}

/* ── Metrics row ─────────────────────────────────────── */
.db-metrics[b-2n71waweng] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

/* ── Body: rota + widgets ────────────────────────────── */
.db-body-grid[b-2n71waweng] {
    display: grid;
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.db-widgets[b-2n71waweng] {
    display: grid;
    gap: 1.2rem;
}

.db-widget-grid[b-2n71waweng] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 1.2rem;
}

/* ── Rota table ──────────────────────────────────────── */
.db-rota-card[b-2n71waweng] {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.db-rota-scroll[b-2n71waweng] {
    overflow-x: auto;
}

.db-rota-table[b-2n71waweng] {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

.db-rota-table thead tr[b-2n71waweng] {
    background: #f8fafc;
    border-bottom: 1px solid var(--cs-border-subtle);
}

.db-rota-table th[b-2n71waweng] {
    padding: 0.65rem 0.75rem;
    text-align: left;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--cs-text-muted);
    white-space: nowrap;
    line-height: 1.3;
}

.db-th-staff[b-2n71waweng] {
    min-width: 210px;
}

.db-th-date[b-2n71waweng] {
    font-weight: 500;
    color: #9ca3af;
}

.db-rota-table td[b-2n71waweng] {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--cs-border-subtle);
    vertical-align: middle;
}

.db-rota-table tbody tr:last-child td[b-2n71waweng] {
    border-bottom: none;
}

.db-rota-table tbody tr:hover td[b-2n71waweng] {
    background: #f8fafc;
}

.db-staff-cell[b-2n71waweng] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.db-staff-avatar[b-2n71waweng] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-staff-name[b-2n71waweng] {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cs-text-strong);
}

.db-staff-role[b-2n71waweng] {
    display: block;
    font-size: 0.75rem;
    color: var(--cs-text-muted);
    margin-top: 0.1rem;
}

.db-rota-footer[b-2n71waweng] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--cs-border-subtle);
}

/* ── Utility ─────────────────────────────────────────── */
.db-empty[b-2n71waweng] {
    margin: 0;
    padding: 1rem 1.1rem;
    color: var(--cs-text-muted);
    font-size: 0.88rem;
}

.db-error[b-2n71waweng] {
    margin: 0.75rem 0 0;
    color: var(--cs-error-text);
    font-size: 0.9rem;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1280px) {
    .db-metrics[b-2n71waweng] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .db-body-grid[b-2n71waweng] {
        grid-template-columns: 1fr;
    }

    .db-widgets[b-2n71waweng],
    .db-widget-grid[b-2n71waweng] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .db-metrics[b-2n71waweng] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .db-header[b-2n71waweng] {
        flex-direction: column;
        align-items: stretch;
    }

    .db-metrics[b-2n71waweng] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .db-widgets[b-2n71waweng],
    .db-widget-grid[b-2n71waweng] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Home.razor.rz.scp.css */
.home-auth-shell[b-4906qhhgbr] {
    min-height: calc(100vh - 5.5rem);
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem;
    background: var(--cs-surface-page);
}

.home-auth-grid[b-4906qhhgbr] {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.home-marketing-pane[b-4906qhhgbr] {
    padding: 2rem;
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 85% 8%, rgba(52, 211, 153, 0.2), transparent 34%),
        radial-gradient(circle at 16% 88%, rgba(16, 185, 129, 0.25), transparent 42%),
        linear-gradient(150deg, var(--cs-brand-950) 0%, var(--cs-brand-900) 54%, var(--cs-brand-800) 100%);
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 1.25rem;
}

.home-brand-row[b-4906qhhgbr] {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.home-brand-icon[b-4906qhhgbr] {
    font-size: 2rem;
}

.home-brand-text[b-4906qhhgbr] {
    display: grid;
    gap: 0.2rem;
}

.home-brand-name[b-4906qhhgbr] {
    margin: 0;
    color: #f0fdf4;
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
}

.home-lead[b-4906qhhgbr] {
    margin: 0;
    max-width: 31rem;
    color: #d1fae5;
    font-size: 1.35rem;
    line-height: 1.4;
}

.home-calendar-panel[b-4906qhhgbr] {
    border-radius: 0.95rem;
    overflow: hidden;
    border: 1px solid rgba(167, 243, 208, 0.24);
}

.home-calendar-img[b-4906qhhgbr] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.95rem;
}

.home-feature-row[b-4906qhhgbr] {
    padding-top: 1rem;
    border-top: 1px solid rgba(167, 243, 208, 0.3);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.home-feature[b-4906qhhgbr] {
    display: grid;
    gap: 0.3rem;
    align-content: start;
}

.home-feature-title[b-4906qhhgbr] {
    margin: 0;
    color: #f0fdf4;
    font-size: 1rem;
    font-weight: 700;
}

.home-feature-text[b-4906qhhgbr] {
    margin: 0;
    color: #d1fae5;
    font-size: 0.9rem;
}

.home-login-pane[b-4906qhhgbr] {
    display: grid;
    align-items: stretch;
    align-self: stretch;
}

.home-login-card[b-4906qhhgbr] {
    padding: 3rem 2.8rem 2.6rem;
    display: grid;
    gap: 1.8rem;
    align-content: center;
    height: 100%;
    box-sizing: border-box;
}

.home-login-head[b-4906qhhgbr] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.home-login-form[b-4906qhhgbr] {
    display: grid;
    gap: 1.6rem;
}

.home-field-block[b-4906qhhgbr] {
    display: grid;
    gap: 0.65rem;
}

.home-footer-text[b-4906qhhgbr] {
    margin: 0;
    text-align: center;
    color: var(--cs-text-muted);
}

@media (max-width: 1080px) {
    .home-auth-grid[b-4906qhhgbr] {
        grid-template-columns: 1fr;
    }

    .home-marketing-pane[b-4906qhhgbr] {
        order: 2;
    }

    .home-login-pane[b-4906qhhgbr] {
        order: 1;
    }
}

@media (max-width: 640px) {
    .home-auth-shell[b-4906qhhgbr] {
        padding: 0.75rem;
    }

    .home-marketing-pane[b-4906qhhgbr] {
        padding: 1.25rem;
    }

    .home-login-card[b-4906qhhgbr] {
        padding: 1.5rem 1rem 1.2rem;
    }

    .home-brand-name[b-4906qhhgbr] {
        font-size: 1.6rem;
    }

    .home-lead[b-4906qhhgbr] {
        font-size: 1.05rem;
    }

    .home-feature-row[b-4906qhhgbr] {
        grid-template-columns: 1fr;
    }

    .home-social-grid[b-4906qhhgbr] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Leave.razor.rz.scp.css */
.leave-page[b-w023s9ykv2] {
    display: grid;
    gap: 1rem;
}

.leave-header[b-w023s9ykv2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.leave-header h1[b-w023s9ykv2] {
    margin: 0;
    color: #064e3b;
}

.leave-header p[b-w023s9ykv2] {
    margin: 0.3rem 0 0;
    color: #4f7065;
    font-size: 0.9rem;
}

.leave-header-actions[b-w023s9ykv2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-request-leave[b-w023s9ykv2] {
    border: 0;
    border-radius: 0.72rem;
    padding: 0.55rem 1rem;
    font-size: 0.86rem;
    font-weight: 800;
    color: #ecfdf5;
    background: linear-gradient(180deg, #047857, #064e3b);
    cursor: pointer;
}

.btn-request-leave:hover[b-w023s9ykv2] {
    opacity: 0.92;
}

.btn-add-closure[b-w023s9ykv2] {
    border: 1px solid #cbd5e1;
    border-radius: 0.72rem;
    padding: 0.53rem 1rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #475569;
    background: #ffffff;
    cursor: pointer;
}

.btn-add-closure:hover[b-w023s9ykv2] {
    background: #f8fafc;
    border-color: #94a3b8;
}

.leave-status-message[b-w023s9ykv2] {
    color: #4f7065;
    margin: 0;
}

.leave-metrics-row[b-w023s9ykv2] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.leave-metric-card[b-w023s9ykv2] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    display: grid;
    gap: 0.25rem;
    box-shadow: 0 8px 22px rgba(6, 78, 59, 0.06);
}

.leave-metric-value[b-w023s9ykv2] {
    font-size: 1.45rem;
    font-weight: 800;
    color: #064e3b;
    line-height: 1;
}

.leave-metric-label[b-w023s9ykv2] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #4f7065;
}

.leave-split-grid[b-w023s9ykv2] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.leave-card[b-w023s9ykv2] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 1rem;
    box-shadow: 0 10px 26px rgba(6, 78, 59, 0.06);
}

.leave-card-header[b-w023s9ykv2] {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #e7f3ee;
}

.leave-card-header h2[b-w023s9ykv2] {
    margin: 0;
    font-size: 1rem;
    color: #064e3b;
}

.leave-calendar-header[b-w023s9ykv2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.month-nav[b-w023s9ykv2] {
    display: flex;
    gap: 0.45rem;
}

.month-nav-btn[b-w023s9ykv2] {
    border: 1px solid #c8e4d8;
    background: #f8fdfb;
    border-radius: 0.55rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #174030;
    cursor: pointer;
}

.month-nav-btn:hover[b-w023s9ykv2] {
    background: #ecfdf5;
}

.calendar-grid[b-w023s9ykv2] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.38rem;
    padding: 0.85rem;
}

.calendar-weekday[b-w023s9ykv2] {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #4f7065;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.35rem 0;
}

.calendar-day[b-w023s9ykv2] {
    min-height: 105px;
    border: 1px solid #e7f3ee;
    border-radius: 0.7rem;
    background: #fbfffc;
    padding: 0.45rem;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.4rem;
}

.calendar-day.empty[b-w023s9ykv2] {
    border-style: dashed;
    background: #f8fafc;
}

.calendar-day.today[b-w023s9ykv2] {
    border-color: #0f766e;
    box-shadow: inset 0 0 0 1px #0f766e;
}

.calendar-day-number[b-w023s9ykv2] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #164e3f;
}

.calendar-day-leaves[b-w023s9ykv2] {
    display: grid;
    gap: 0.25rem;
    align-content: start;
}

.day-leave-pill[b-w023s9ykv2] {
    display: inline-block;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.span-start[b-w023s9ykv2] {
    border-top-right-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
}

.span-middle[b-w023s9ykv2] {
    border-radius: 0.35rem;
}

.span-end[b-w023s9ykv2] {
    border-top-left-radius: 0.35rem;
    border-bottom-left-radius: 0.35rem;
}

.day-leave-more[b-w023s9ykv2] {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 700;
}

.approval-list[b-w023s9ykv2],
.request-history-list[b-w023s9ykv2] {
    list-style: none;
    margin: 0;
    padding: 0.75rem;
    display: grid;
    gap: 0.6rem;
}

.approval-item[b-w023s9ykv2],
.request-history-item[b-w023s9ykv2] {
    border: 1px solid #e7f3ee;
    border-radius: 0.72rem;
    padding: 0.65rem;
    background: #fbfffc;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.approval-item-main[b-w023s9ykv2] {
    min-width: 0;
}

.approval-name[b-w023s9ykv2] {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
    color: #064e3b;
}

.approval-desc[b-w023s9ykv2],
.approval-reason[b-w023s9ykv2],
.request-history-range[b-w023s9ykv2],
.request-history-reason[b-w023s9ykv2] {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: #4f7065;
}

.approval-reason[b-w023s9ykv2],
.request-history-reason[b-w023s9ykv2] {
    color: #64748b;
}

.approval-actions[b-w023s9ykv2] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.approve-btn[b-w023s9ykv2],
.decline-btn[b-w023s9ykv2] {
    border: 0;
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.approve-btn[b-w023s9ykv2] {
    background: #d1fae5;
    color: #065f46;
}

.approve-btn:hover[b-w023s9ykv2] {
    background: #a7f3d0;
}

.decline-btn[b-w023s9ykv2] {
    background: #fee2e2;
    color: #b91c1c;
}

.decline-btn:hover[b-w023s9ykv2] {
    background: #fecaca;
}

.status-badge[b-w023s9ykv2] {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.2rem 0.52rem;
    border-radius: 999px;
}

.status-pending[b-w023s9ykv2] {
    background: #fef9c3;
    color: #854d0e;
}

.status-approved[b-w023s9ykv2] {
    background: #dcfce7;
    color: #166534;
}

.status-declined[b-w023s9ykv2] {
    background: #fee2e2;
    color: #b91c1c;
}

.leave-type-closure[b-w023s9ykv2] {
    background: #ffedd5;
    color: #c2410c;
}

.leave-balances-card[b-w023s9ykv2] {
    overflow: hidden;
}

.balances-table-wrap[b-w023s9ykv2] {
    overflow-x: auto;
}

.balances-table[b-w023s9ykv2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.balances-table th[b-w023s9ykv2],
.balances-table td[b-w023s9ykv2] {
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid #edf7f2;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.balances-table thead th[b-w023s9ykv2] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4f7065;
    background: #f0fdf4;
}

.staff-name-cell[b-w023s9ykv2] {
    font-weight: 700;
    color: #064e3b;
}

.progress-bar-rail[b-w023s9ykv2] {
    width: 150px;
    height: 0.52rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #d1fae5 0%, #dcfce7 50%, #dbeafe 100%);
    overflow: hidden;
}

.progress-bar-fill[b-w023s9ykv2] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #2563eb);
    border-radius: 999px;
    transition: width 220ms ease;
}

.progress-text[b-w023s9ykv2] {
    margin-left: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
}

.leave-modal-overlay[b-w023s9ykv2] {
    position: fixed;
    inset: 0;
    background: rgba(2, 28, 18, 0.45);
    z-index: 980;
}

.leave-modal-sheet[b-w023s9ykv2] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(420px, 100vw);
    background: #ffffff;
    z-index: 981;
    display: grid;
    grid-template-rows: auto 1fr auto;
    box-shadow: -8px 0 34px rgba(2, 28, 18, 0.2);
}

.leave-modal-header[b-w023s9ykv2] {
    padding: 0.95rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e7f3ee;
}

.leave-modal-header h3[b-w023s9ykv2] {
    margin: 0;
    color: #064e3b;
    font-size: 1rem;
}

.leave-modal-close[b-w023s9ykv2] {
    border: 0;
    background: transparent;
    font-size: 1.45rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.leave-modal-body[b-w023s9ykv2] {
    padding: 1rem;
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

.leave-request-detail-body[b-w023s9ykv2] {
    align-content: start;
}

.leave-detail-label[b-w023s9ykv2] {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    font-weight: 800;
    color: #4f7065;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.leave-detail-value[b-w023s9ykv2] {
    margin: 0;
    color: #174030;
    font-size: 0.9rem;
}

.leave-detail-reason[b-w023s9ykv2] {
    white-space: pre-wrap;
}

.form-label[b-w023s9ykv2] {
    font-size: 0.74rem;
    font-weight: 700;
    color: #4f7065;
}

.form-input[b-w023s9ykv2],
.form-textarea[b-w023s9ykv2] {
    width: 100%;
    border: 1px solid #c8e4d8;
    border-radius: 0.62rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
    box-sizing: border-box;
    color: #174030;
    background: #f8fdfb;
}

.form-input:focus[b-w023s9ykv2],
.form-textarea:focus[b-w023s9ykv2] {
    outline: 2px solid #065f46;
    outline-offset: 1px;
}

.form-checkbox[b-w023s9ykv2] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #174030;
    padding: 0.25rem 0;
}

.form-checkbox input[b-w023s9ykv2] {
    accent-color: #047857;
}

.leave-modal-footer[b-w023s9ykv2] {
    border-top: 1px solid #e7f3ee;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.modal-cancel-btn[b-w023s9ykv2],
.modal-submit-btn[b-w023s9ykv2] {
    border: 0;
    border-radius: 0.62rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.modal-cancel-btn[b-w023s9ykv2] {
    background: #f1f5f9;
    color: #334155;
}

.modal-submit-btn[b-w023s9ykv2] {
    background: #064e3b;
    color: #ecfdf5;
}

.modal-submit-btn:hover[b-w023s9ykv2] {
    background: #065f46;
}

@media (max-width: 1100px) {
    .leave-metrics-row[b-w023s9ykv2] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leave-split-grid[b-w023s9ykv2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .leave-metrics-row[b-w023s9ykv2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-day[b-w023s9ykv2] {
        min-height: 88px;
    }

    .progress-bar-rail[b-w023s9ykv2] {
        width: 112px;
    }
}
/* /Pages/Messages.razor.rz.scp.css */
.messages-page[b-w3mzdzuk9b] {
    display: grid;
    gap: 1rem;
}

.messages-header[b-w3mzdzuk9b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.messages-header h1[b-w3mzdzuk9b] {
    margin: 0;
    color: #064e3b;
}

.messages-header p[b-w3mzdzuk9b] {
    margin: 0.28rem 0 0;
    color: #4f7065;
    font-size: 0.9rem;
}

.btn-new-message[b-w3mzdzuk9b] {
    border: 0;
    border-radius: 0.72rem;
    padding: 0.56rem 1rem;
    font-size: 0.86rem;
    font-weight: 800;
    color: #ecfdf5;
    background: linear-gradient(180deg, #047857, #064e3b);
    cursor: pointer;
}

.btn-new-message:hover[b-w3mzdzuk9b] {
    opacity: 0.92;
}

.status-message[b-w3mzdzuk9b] {
    color: #4f7065;
    margin: 0;
}

.messages-metrics-row[b-w3mzdzuk9b] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.metric-card[b-w3mzdzuk9b] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    display: grid;
    gap: 0.2rem;
    box-shadow: 0 8px 24px rgba(6, 78, 59, 0.06);
}

.metric-value[b-w3mzdzuk9b] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #064e3b;
    line-height: 1;
}

.metric-label[b-w3mzdzuk9b] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4f7065;
}

.messages-grid[b-w3mzdzuk9b] {
    display: grid;
    grid-template-columns: 1.1fr 1.6fr 1fr;
    gap: 1rem;
    min-height: calc(100vh - 260px);
}

.threads-pane[b-w3mzdzuk9b],
.chat-pane[b-w3mzdzuk9b],
.meta-pane[b-w3mzdzuk9b] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 1rem;
    box-shadow: 0 10px 26px rgba(6, 78, 59, 0.07);
    min-height: 0;
}

.threads-pane[b-w3mzdzuk9b] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.threads-toolbar[b-w3mzdzuk9b] {
    padding: 0.8rem;
    border-bottom: 1px solid #e7f3ee;
    display: grid;
    gap: 0.55rem;
}

.threads-search-wrap[b-w3mzdzuk9b] {
    position: relative;
}

.threads-search-wrap span[b-w3mzdzuk9b] {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #94a3b8;
}

.threads-search[b-w3mzdzuk9b] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c8e4d8;
    border-radius: 0.65rem;
    padding: 0.46rem 0.6rem 0.46rem 1.8rem;
    font-size: 0.85rem;
    background: #f8fdfb;
    color: #174030;
}

.threads-tabs[b-w3mzdzuk9b] {
    display: flex;
    gap: 0.45rem;
}

.tab-btn[b-w3mzdzuk9b] {
    border: 1px solid #c8e4d8;
    border-radius: 999px;
    background: #f8fdfb;
    color: #174030;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 0.22rem 0.66rem;
    cursor: pointer;
}

.tab-btn.active[b-w3mzdzuk9b] {
    background: #064e3b;
    border-color: #064e3b;
    color: #ecfdf5;
}

.threads-list[b-w3mzdzuk9b] {
    overflow-y: auto;
    padding: 0.65rem;
    display: grid;
    gap: 0.45rem;
}

.thread-row[b-w3mzdzuk9b] {
    border: 1px solid #e6f4ed;
    border-radius: 0.75rem;
    background: #fbfffc;
    text-align: left;
    padding: 0.58rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.thread-row:hover[b-w3mzdzuk9b] {
    border-color: #9fd7c0;
    background: #f4fbf8;
}

.thread-row.active[b-w3mzdzuk9b] {
    border-color: #065f46;
    background: #ecfdf5;
}

.avatar-dot[b-w3mzdzuk9b] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.7rem;
    font-weight: 800;
}

.thread-row-content[b-w3mzdzuk9b] {
    min-width: 0;
}

.thread-row-top[b-w3mzdzuk9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}

.thread-title[b-w3mzdzuk9b] {
    margin: 0;
    font-size: 0.83rem;
    font-weight: 800;
    color: #064e3b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-tag[b-w3mzdzuk9b] {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #ffedd5;
    color: #c2410c;
    border-radius: 999px;
    padding: 0.14rem 0.46rem;
    flex-shrink: 0;
}

.thread-preview[b-w3mzdzuk9b] {
    margin: 0.2rem 0 0;
    font-size: 0.74rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-pane[b-w3mzdzuk9b] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

.chat-header[b-w3mzdzuk9b] {
    border-bottom: 1px solid #e7f3ee;
    padding: 0.85rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.chat-header h2[b-w3mzdzuk9b] {
    margin: 0;
    font-size: 0.98rem;
    color: #064e3b;
}

.chat-header-type[b-w3mzdzuk9b] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.2rem 0.52rem;
}

.chat-stream[b-w3mzdzuk9b] {
    overflow-y: auto;
    padding: 0.95rem;
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.msg-row[b-w3mzdzuk9b] {
    display: flex;
    gap: 0.45rem;
    align-items: flex-end;
}

.msg-row.outgoing[b-w3mzdzuk9b] {
    justify-content: flex-end;
}

.msg-avatar[b-w3mzdzuk9b] {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    background: #dbeafe;
    color: #1d4ed8;
    flex-shrink: 0;
}

.msg-bubble-wrap[b-w3mzdzuk9b] {
    max-width: 72%;
}

.msg-sender[b-w3mzdzuk9b] {
    margin: 0 0 0.12rem;
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 700;
}

.msg-bubble[b-w3mzdzuk9b] {
    margin: 0;
    border-radius: 0.72rem;
    padding: 0.52rem 0.65rem;
    font-size: 0.84rem;
    line-height: 1.35;
    white-space: pre-wrap;
}

.msg-row.incoming .msg-bubble[b-w3mzdzuk9b] {
    background: #f1f5f9;
    color: #334155;
}

.msg-row.outgoing .msg-bubble[b-w3mzdzuk9b] {
    background: #064e3b;
    color: #ecfdf5;
}

.msg-time[b-w3mzdzuk9b] {
    margin: 0.15rem 0 0;
    font-size: 0.67rem;
    color: #94a3b8;
}

.chat-composer[b-w3mzdzuk9b] {
    border-top: 1px solid #e7f3ee;
    padding: 0.6rem;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 0.45rem;
    align-items: center;
    background: #fcfefd;
}

.composer-icon-btn[b-w3mzdzuk9b] {
    width: 2rem;
    height: 2rem;
    border: 1px solid #d7e7df;
    border-radius: 0.55rem;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
}

.composer-input[b-w3mzdzuk9b] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c8e4d8;
    border-radius: 0.6rem;
    background: #ffffff;
    padding: 0.5rem 0.6rem;
    font-size: 0.87rem;
}

.composer-send-btn[b-w3mzdzuk9b] {
    border: 0;
    border-radius: 0.6rem;
    background: #064e3b;
    color: #ecfdf5;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.48rem 0.75rem;
    cursor: pointer;
}

.composer-send-btn:disabled[b-w3mzdzuk9b] {
    opacity: 0.55;
    cursor: not-allowed;
}

.meta-pane[b-w3mzdzuk9b] {
    overflow-y: auto;
    padding: 0.7rem;
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.meta-card[b-w3mzdzuk9b] {
    border: 1px solid #e6f4ed;
    border-radius: 0.75rem;
    background: #fbfffc;
    padding: 0.72rem;
}

.meta-card h3[b-w3mzdzuk9b] {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4f7065;
}

.meta-card p[b-w3mzdzuk9b] {
    margin: 0.42rem 0 0;
    font-size: 0.82rem;
    color: #174030;
}

.participant-list[b-w3mzdzuk9b] {
    list-style: none;
    margin: 0.42rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.42rem;
}

.participant-list li[b-w3mzdzuk9b] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: #174030;
}

.participant-avatar[b-w3mzdzuk9b] {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.62rem;
    font-weight: 800;
}

.meta-empty[b-w3mzdzuk9b],
.pane-empty[b-w3mzdzuk9b] {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
}

.chat-empty[b-w3mzdzuk9b] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    min-height: 300px;
}

.drawer-overlay[b-w3mzdzuk9b] {
    position: fixed;
    inset: 0;
    background: rgba(2, 28, 18, 0.45);
    z-index: 970;
}

.new-thread-drawer[b-w3mzdzuk9b] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    background: #ffffff;
    box-shadow: -8px 0 35px rgba(2, 28, 18, 0.2);
    z-index: 971;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.drawer-header[b-w3mzdzuk9b] {
    border-bottom: 1px solid #e7f3ee;
    padding: 0.9rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-header h3[b-w3mzdzuk9b] {
    margin: 0;
    color: #064e3b;
}

.drawer-close[b-w3mzdzuk9b] {
    border: 0;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.drawer-body[b-w3mzdzuk9b] {
    padding: 1rem;
    display: grid;
    gap: 0.52rem;
    align-content: start;
}

.drawer-label[b-w3mzdzuk9b] {
    font-size: 0.73rem;
    font-weight: 700;
    color: #4f7065;
}

.drawer-input[b-w3mzdzuk9b] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c8e4d8;
    border-radius: 0.62rem;
    background: #f8fdfb;
    color: #174030;
    font-size: 0.88rem;
    padding: 0.48rem 0.58rem;
}

.drawer-footer[b-w3mzdzuk9b] {
    border-top: 1px solid #e7f3ee;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.drawer-cancel-btn[b-w3mzdzuk9b],
.drawer-save-btn[b-w3mzdzuk9b] {
    border: 0;
    border-radius: 0.6rem;
    padding: 0.42rem 0.84rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.drawer-cancel-btn[b-w3mzdzuk9b] {
    background: #f1f5f9;
    color: #334155;
}

.drawer-save-btn[b-w3mzdzuk9b] {
    background: #064e3b;
    color: #ecfdf5;
}

.drawer-save-btn:disabled[b-w3mzdzuk9b] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 1200px) {
    .messages-metrics-row[b-w3mzdzuk9b] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .messages-grid[b-w3mzdzuk9b] {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .threads-pane[b-w3mzdzuk9b],
    .meta-pane[b-w3mzdzuk9b] {
        max-height: 360px;
    }

    .chat-pane[b-w3mzdzuk9b] {
        min-height: 420px;
    }
}

@media (max-width: 700px) {
    .messages-metrics-row[b-w3mzdzuk9b] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-composer[b-w3mzdzuk9b] {
        grid-template-columns: auto 1fr auto;
    }

    .chat-composer .composer-icon-btn:nth-child(2)[b-w3mzdzuk9b] {
        display: none;
    }
}
/* /Pages/MyProfile.razor.rz.scp.css */
.my-profile-page[b-2x5xpp73wo] {
    display: grid;
    gap: 1rem;
}

.profile-header h1[b-2x5xpp73wo] {
    margin: 0;
    color: #064e3b;
}

.profile-header p[b-2x5xpp73wo] {
    margin: 0.25rem 0 0;
    color: #4f7065;
}

.profile-tabs[b-2x5xpp73wo] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-bottom: 1px solid #d6ebe2;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.tab-btn[b-2x5xpp73wo] {
    border: 0;
    background: transparent;
    color: #5a7a6f;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.58rem 0.62rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 140ms, border-color 140ms;
    white-space: nowrap;
}

.tab-btn:hover[b-2x5xpp73wo] {
    color: #064e3b;
}

.tab-btn.active[b-2x5xpp73wo] {
    color: #064e3b;
    border-bottom-color: #064e3b;
}

.profile-layout-grid[b-2x5xpp73wo] {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 1.5rem;
}

.profile-sidebar[b-2x5xpp73wo] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 1rem;
    box-shadow: 0 10px 26px rgba(6, 78, 59, 0.07);
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.avatar-wrap[b-2x5xpp73wo] {
    position: relative;
    width: fit-content;
}

.avatar-initials[b-2x5xpp73wo] {
    width: 6.2rem;
    height: 6.2rem;
    border-radius: 50%;
    background: #d1fae5;
    color: #065f46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 800;
}

.avatar-image[b-2x5xpp73wo] {
    width: 6.2rem;
    height: 6.2rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #b8e3d1;
}

.avatar-edit-pin[b-2x5xpp73wo] {
    position: absolute;
    right: 0.15rem;
    bottom: 0.15rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #064e3b;
    color: #ecfdf5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    box-shadow: 0 3px 8px rgba(6, 78, 59, 0.2);
}

.sidebar-name[b-2x5xpp73wo] {
    margin: 0;
    color: #064e3b;
    font-size: 1.1rem;
}

.sidebar-role-badge[b-2x5xpp73wo] {
    margin: 0;
    width: fit-content;
    border-radius: 999px;
    padding: 0.2rem 0.58rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #166534;
    background: #dcfce7;
}

.sidebar-details[b-2x5xpp73wo] {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.32rem;
    color: #355f50;
    font-size: 0.82rem;
}

.role-summary-panel[b-2x5xpp73wo] {
    border: 1px solid #bbf7d0;
    border-radius: 0.8rem;
    padding: 0.75rem;
    background: #f0fdf4;
}

.role-summary-panel h3[b-2x5xpp73wo] {
    margin: 0;
    color: #065f46;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.role-summary-panel p[b-2x5xpp73wo] {
    margin: 0.4rem 0 0;
    color: #24614d;
    font-size: 0.8rem;
    line-height: 1.35;
}

.profile-main-grid[b-2x5xpp73wo] {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.profile-card[b-2x5xpp73wo] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 1rem;
    box-shadow: 0 10px 26px rgba(6, 78, 59, 0.07);
    padding: 1rem;
}

.card-header-row[b-2x5xpp73wo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.card-header-row h3[b-2x5xpp73wo] {
    margin: 0;
    color: #064e3b;
    font-size: 1rem;
}

.card-edit-btn[b-2x5xpp73wo] {
    border: 1px solid #c6e5d6;
    background: #ffffff;
    color: #245544;
    border-radius: 0.55rem;
    padding: 0.35rem 0.72rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.card-edit-btn:hover[b-2x5xpp73wo] {
    background: #f0fdf4;
}

.form-grid[b-2x5xpp73wo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.form-grid label[b-2x5xpp73wo] {
    display: grid;
    gap: 0.25rem;
}

.form-grid span[b-2x5xpp73wo] {
    font-size: 0.74rem;
    font-weight: 700;
    color: #4f7065;
}

.form-grid input[b-2x5xpp73wo],
.form-grid select[b-2x5xpp73wo] {
    border: 1px solid #c8e4d8;
    border-radius: 0.6rem;
    padding: 0.5rem 0.58rem;
    background: #f8fdfb;
    color: #174030;
    font-size: 0.88rem;
}

.form-grid input:focus[b-2x5xpp73wo],
.form-grid select:focus[b-2x5xpp73wo] {
    outline: 2px solid #065f46;
    outline-offset: 1px;
}

.summary-badges[b-2x5xpp73wo] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.summary-badge-item[b-2x5xpp73wo] {
    border: 1px solid #d6ebe2;
    border-radius: 0.76rem;
    background: #fbfffc;
    padding: 0.6rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.48rem;
    align-items: center;
}

.summary-icon[b-2x5xpp73wo] {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.66rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.summary-label[b-2x5xpp73wo] {
    margin: 0;
    font-size: 0.72rem;
    color: #4f7065;
}

.summary-value[b-2x5xpp73wo] {
    margin: 0.1rem 0 0;
    color: #184536;
    font-size: 0.82rem;
    font-weight: 700;
}

.upload-panel-mock[b-2x5xpp73wo] {
    border: 2px dashed #b8e3d1;
    border-radius: 0.85rem;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    background: #fbfffc;
    padding: 0.8rem;
}

.upload-photo-btn[b-2x5xpp73wo] {
    border: 1px solid #c6e5d6;
    border-radius: 0.65rem;
    background: #ffffff;
    color: #064e3b;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.52rem 0.95rem;
    cursor: pointer;
}

.upload-photo-btn:hover[b-2x5xpp73wo] {
    background: #f0fdf4;
}

.upload-photo-btn.is-disabled[b-2x5xpp73wo] {
    opacity: 0.68;
    cursor: wait;
}

.status-message[b-2x5xpp73wo] {
    margin: 0;
    color: #245544;
    font-size: 0.84rem;
}

.status-message.error[b-2x5xpp73wo] {
    color: #b91c1c;
}

.security-card[b-2x5xpp73wo] {
    display: grid;
    gap: 0.8rem;
    max-width: 44rem;
}

.security-card .card-edit-btn[b-2x5xpp73wo] {
    width: fit-content;
}

@media (max-width: 1080px) {
    .summary-badges[b-2x5xpp73wo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .profile-layout-grid[b-2x5xpp73wo] {
        grid-template-columns: 1fr;
    }

    .form-grid[b-2x5xpp73wo] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Notifications.razor.rz.scp.css */
.notifications-page[b-sz50qk9oom] {
    display: grid;
    gap: 1rem;
    max-width: 64rem;
}

.notifications-header[b-sz50qk9oom] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.notifications-header h1[b-sz50qk9oom] {
    margin: 0;
    color: var(--cs-text-strong);
}

.notifications-header p[b-sz50qk9oom] {
    margin: 0.2rem 0 0;
    color: var(--cs-text-muted);
}

.notifications-mark-all-btn[b-sz50qk9oom] {
    border: 1px solid var(--cs-border-subtle);
    border-radius: 0.65rem;
    background: #ffffff;
    color: var(--cs-text-body);
    min-height: 2.5rem;
    padding: 0 0.95rem;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
}

.notifications-mark-all-btn:hover:not(:disabled)[b-sz50qk9oom] {
    background: var(--cs-surface-soft);
}

.notifications-mark-all-btn:disabled[b-sz50qk9oom] {
    opacity: 0.65;
    cursor: not-allowed;
}

.notifications-state[b-sz50qk9oom] {
    margin: 0;
    color: var(--cs-text-muted);
    padding: 0.8rem 0;
}

.notifications-list[b-sz50qk9oom] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.notification-item[b-sz50qk9oom] {
    border: 1px solid var(--cs-border-subtle);
    border-radius: 0.9rem;
    background: #ffffff;
    padding: 0.9rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.notification-item.unread[b-sz50qk9oom] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.notification-content[b-sz50qk9oom] {
    min-width: 0;
}

.notification-title[b-sz50qk9oom] {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--cs-text-strong);
}

.notification-item.unread .notification-title[b-sz50qk9oom] {
    font-weight: 800;
}

.notification-message[b-sz50qk9oom] {
    margin: 0.25rem 0 0;
    color: var(--cs-text-body);
    font-size: 0.9rem;
    line-height: 1.4;
}

.notification-time[b-sz50qk9oom] {
    margin: 0.35rem 0 0;
    color: var(--cs-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.notification-mark-btn[b-sz50qk9oom] {
    border: 1px solid #bfdbfe;
    border-radius: 0.6rem;
    background: #ffffff;
    color: #1d4ed8;
    min-height: 2.2rem;
    padding: 0 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.notification-mark-btn:hover:not(:disabled)[b-sz50qk9oom] {
    background: #dbeafe;
}

.notification-mark-btn:disabled[b-sz50qk9oom] {
    opacity: 0.65;
    cursor: wait;
}

.notifications-empty[b-sz50qk9oom] {
    border: 1px dashed var(--cs-border-strong);
    border-radius: 0.95rem;
    background: var(--cs-surface-soft);
    padding: 2rem 1.2rem;
    text-align: center;
    display: grid;
    gap: 0.4rem;
    place-items: center;
}

.notifications-empty-icon[b-sz50qk9oom] {
    font-size: 1.6rem;
    color: var(--cs-text-muted);
}

.notifications-empty h2[b-sz50qk9oom] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--cs-text-strong);
}

.notifications-empty p[b-sz50qk9oom] {
    margin: 0;
    color: var(--cs-text-muted);
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .notification-item[b-sz50qk9oom] {
        flex-direction: column;
        align-items: stretch;
    }

    .notification-mark-btn[b-sz50qk9oom] {
        width: 100%;
    }
}
/* /Pages/Reports.razor.rz.scp.css */
.reports-page[b-d90483s3qd] {
    display: grid;
    gap: 1rem;
}

.reports-header h1[b-d90483s3qd] {
    margin: 0;
    color: #064e3b;
}

.reports-header p[b-d90483s3qd] {
    margin: 0.25rem 0 0;
    color: #4f7065;
}

.control-bar[b-d90483s3qd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    padding: 0.85rem;
    border: 1px solid #d6ebe2;
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(6, 78, 59, 0.06);
}

.control-bar label[b-d90483s3qd] {
    display: grid;
    gap: 0.28rem;
}

.control-bar span[b-d90483s3qd] {
    font-size: 0.74rem;
    font-weight: 700;
    color: #4f7065;
}

.control-bar input[type="date"][b-d90483s3qd] {
    border: 1px solid #c8e4d8;
    border-radius: 0.58rem;
    padding: 0.45rem 0.55rem;
    background: #f8fdfb;
    color: #174030;
}

.control-bar input[type="date"]:focus[b-d90483s3qd] {
    outline: 2px solid #065f46;
    outline-offset: 1px;
}

.btn-generate[b-d90483s3qd],
.btn-export[b-d90483s3qd] {
    border: 0;
    border-radius: 0.65rem;
    padding: 0.55rem 1rem;
    background: #064e3b;
    color: #ecfdf5;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background-color 140ms ease, opacity 140ms ease;
}

.btn-generate:hover:not(:disabled)[b-d90483s3qd],
.btn-export:hover:not(:disabled)[b-d90483s3qd] {
    background: #065f46;
}

.btn-generate:disabled[b-d90483s3qd],
.btn-export:disabled[b-d90483s3qd] {
    opacity: 0.6;
    cursor: not-allowed;
}

.report-results[b-d90483s3qd] {
    display: grid;
    gap: 0.7rem;
}

.results-actions[b-d90483s3qd] {
    display: flex;
    justify-content: flex-end;
}

.report-empty[b-d90483s3qd] {
    margin: 0;
    color: #4f7065;
    padding: 1rem 0;
}

.report-table-wrap[b-d90483s3qd] {
    overflow: auto;
    border: 1px solid #d6ebe2;
    border-radius: 0.9rem;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(6, 78, 59, 0.07);
}

.report-table[b-d90483s3qd] {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.report-table thead tr[b-d90483s3qd] {
    background: #f0fdf4;
    border-bottom: 2px solid #d6ebe2;
}

.report-table th[b-d90483s3qd] {
    text-align: left;
    padding: 0.72rem 0.95rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #4f7065;
}

.report-table td[b-d90483s3qd] {
    padding: 0.78rem 0.95rem;
    border-bottom: 1px solid #e9f5ee;
    color: #174030;
}

.report-table tbody tr:last-child td[b-d90483s3qd] {
    border-bottom: none;
}

.report-table td:first-child[b-d90483s3qd] {
    font-weight: 700;
    color: #064e3b;
}

.report-table td.overtime[b-d90483s3qd] {
    color: #b91c1c;
    font-weight: 700;
}

.recent-reports-section[b-d90483s3qd] {
    display: grid;
    gap: 0.6rem;
}

.recent-reports-header h2[b-d90483s3qd] {
    margin: 0;
    color: #064e3b;
    font-size: 1rem;
}

.recent-reports-header p[b-d90483s3qd] {
    margin: 0.2rem 0 0;
    color: #4f7065;
    font-size: 0.86rem;
}

.recent-reports-table[b-d90483s3qd] {
    min-width: 760px;
}

@media (max-width: 780px) {
    .results-actions[b-d90483s3qd] {
        justify-content: stretch;
    }

    .btn-export[b-d90483s3qd] {
        width: 100%;
    }
}
/* /Pages/Rota.razor.rz.scp.css */
.cs-rota-page[b-y8rc3n9889] {
    display: grid;
    gap: 1rem;
}

.cs-rota-shell[b-y8rc3n9889] {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
}

.tab-bar[b-y8rc3n9889] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e6f4ed;
    overflow-x: auto;
}

.tab-btn[b-y8rc3n9889] {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 0.95rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #4f7065;
    cursor: pointer;
    white-space: nowrap;
    transition: color 140ms, border-color 140ms;
}

.tab-btn.active[b-y8rc3n9889] {
    color: #064e3b;
    border-bottom-color: #064e3b;
}

.tab-btn:hover:not(.active)[b-y8rc3n9889] {
    color: #174030;
}

.cs-rota-toolbar[b-y8rc3n9889] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.cs-rota-toolbar-controls[b-y8rc3n9889] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.cs-rota-preset-row[b-y8rc3n9889] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cs-rota-preset-btn[b-y8rc3n9889] {
    border: 1px solid #c8e4d8;
    border-radius: 0.5rem;
    background: #f8fdfb;
    color: #174030;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0.5rem 0.7rem;
}

.cs-rota-preset-btn.active[b-y8rc3n9889] {
    background: #064e3b;
    border-color: #064e3b;
    color: #ecfdf5;
}

.cs-rota-window-summary[b-y8rc3n9889] {
    display: grid;
    gap: 0.15rem;
    border: 1px solid #d6ebe2;
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
    color: #245544;
}

.cs-rota-window-summary span[b-y8rc3n9889],
.cs-rota-window-summary small[b-y8rc3n9889] {
    color: #4f7065;
    font-size: 0.78rem;
}

.cs-rota-window-summary strong[b-y8rc3n9889] {
    color: #174030;
    font-size: 0.95rem;
}

.cs-rota-window-summary .warning[b-y8rc3n9889] {
    color: #b45309;
}

.cs-rota-draft-period-header[b-y8rc3n9889],
.cs-rota-draft-week[b-y8rc3n9889] {
    display: grid;
    gap: 0.35rem;
}

.cs-rota-draft-period-header[b-y8rc3n9889] {
    border: 1px solid #d6ebe2;
    border-radius: 0.75rem;
    padding: 0.8rem 0.95rem;
    background: #f8fdfb;
}

.cs-rota-draft-period-header h2[b-y8rc3n9889],
.cs-rota-draft-week h3[b-y8rc3n9889] {
    margin: 0;
    color: #064e3b;
}

.cs-rota-draft-period-header h2[b-y8rc3n9889] {
    font-size: 1rem;
}

.cs-rota-draft-period-header p[b-y8rc3n9889] {
    margin: 0;
    color: #4f7065;
    font-size: 0.85rem;
}

.cs-rota-draft-week[b-y8rc3n9889] {
    margin-top: 0.75rem;
}

.cs-rota-draft-week h3[b-y8rc3n9889] {
    font-size: 0.95rem;
}

.cs-rota-warning-list[b-y8rc3n9889] {
    display: grid;
    gap: 0.35rem;
    color: #92400e;
    font-size: 0.82rem;
}

.cs-rota-table-wrap[b-y8rc3n9889] {
    overflow-x: auto;
}

.cs-rota-table[b-y8rc3n9889] {
    min-width: 980px;
}

.cs-rota-staff-col[b-y8rc3n9889] {
    min-width: 240px;
}

.cs-rota-shift-cell[b-y8rc3n9889] {
    min-width: 110px;
}

.cs-rota-legend[b-y8rc3n9889] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

@media (max-width: 1100px) {
    .cs-rota-toolbar[b-y8rc3n9889] {
        align-items: flex-start;
    }
}

@media (max-width: 860px) {
    .cs-rota-shell[b-y8rc3n9889] {
        padding: 0.9rem;
    }

    .cs-rota-toolbar-controls[b-y8rc3n9889] {
        width: 100%;
    }

    .cs-rota-week-range[b-y8rc3n9889] {
        order: 4;
    }
}

@media (max-width: 640px) {
    .cs-rota-shell[b-y8rc3n9889] {
        padding: 0.75rem;
    }

    .cs-rota-toolbar-controls[b-y8rc3n9889] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .cs-rota-toolbar-controls .cs-rota-week-range[b-y8rc3n9889] {
        grid-column: 1 / -1;
    }

    .cs-rota-toolbar-controls .cs-rota-control-btn-primary[b-y8rc3n9889] {
        grid-column: 1 / -1;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/* ── Core page ─────────────────────────────────────────── */
.settings-page[b-r3m5pfnn2i] {
    display: grid;
    gap: 1rem;
}

.settings-header h1[b-r3m5pfnn2i] {
    margin: 0;
    color: #064e3b;
}

.settings-header p[b-r3m5pfnn2i] {
    margin: 0.25rem 0 0;
    color: #4f7065;
}

/* ── Tab bar — underline style ─────────────────────────── */
.tab-bar[b-r3m5pfnn2i] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e6f4ed;
    overflow-x: auto;
}

.tab-btn[b-r3m5pfnn2i] {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 0.95rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #4f7065;
    cursor: pointer;
    white-space: nowrap;
    transition: color 140ms, border-color 140ms;
}

.tab-btn.active[b-r3m5pfnn2i] {
    color: #064e3b;
    border-bottom-color: #064e3b;
}

.tab-btn:hover:not(.active)[b-r3m5pfnn2i] {
    color: #174030;
}

/* ── Settings grid ─────────────────────────────────────── */
.settings-grid[b-r3m5pfnn2i] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.settings-left[b-r3m5pfnn2i],
.settings-right[b-r3m5pfnn2i] {
    display: grid;
    gap: 1rem;
}

/* ── Cards ─────────────────────────────────────────────── */
.settings-card[b-r3m5pfnn2i] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 1rem;
    padding: 1.1rem;
    box-shadow: 0 10px 22px rgba(6, 78, 59, 0.07);
    display: grid;
    gap: 0.8rem;
}

.card-title[b-r3m5pfnn2i] {
    margin: 0;
    color: #064e3b;
    font-size: 1rem;
}

.card-sub[b-r3m5pfnn2i] {
    margin: -0.3rem 0 0;
    color: #4f7065;
    font-size: 0.82rem;
}

/* ── Field groups ──────────────────────────────────────── */
.field-group[b-r3m5pfnn2i] {
    display: grid;
    gap: 0.28rem;
}

.field-group label[b-r3m5pfnn2i] {
    font-size: 0.74rem;
    font-weight: 700;
    color: #4f7065;
}

.field-group input[b-r3m5pfnn2i],
.field-group select[b-r3m5pfnn2i] {
    border: 1px solid #c8e4d8;
    border-radius: 0.62rem;
    padding: 0.46rem 0.6rem;
    font-size: 0.88rem;
    color: #174030;
    background: #f8fdfb;
    width: 100%;
    box-sizing: border-box;
}

.field-group input:focus[b-r3m5pfnn2i],
.field-group select:focus[b-r3m5pfnn2i] {
    outline: 2px solid #065f46;
    outline-offset: 1px;
}

.field-row[b-r3m5pfnn2i] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.colour-row[b-r3m5pfnn2i] {
    grid-template-columns: repeat(2, 1fr);
}

.colour-field[b-r3m5pfnn2i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.colour-field input[type="color"][b-r3m5pfnn2i] {
    width: 2.4rem;
    height: 2rem;
    border-radius: 0.4rem;
    border: 1px solid #c8e4d8;
    padding: 0.1rem;
    cursor: pointer;
}

.colour-hex[b-r3m5pfnn2i] {
    font-size: 0.8rem;
    color: #4f7065;
    font-family: monospace;
}

/* ── Card footer ───────────────────────────────────────── */
.card-footer[b-r3m5pfnn2i] {
    padding-top: 0.4rem;
    border-top: 1px solid #e6f4ed;
}

.btn-save[b-r3m5pfnn2i] {
    border: none;
    border-radius: 0.65rem;
    padding: 0.55rem 1.1rem;
    background: #064e3b;
    color: #ecfdf5;
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background-color 140ms;
}

.btn-save:hover:not(:disabled)[b-r3m5pfnn2i] {
    background: #065f46;
}

.btn-save:disabled[b-r3m5pfnn2i] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Logo upload box ───────────────────────────────────── */
.logo-upload-box[b-r3m5pfnn2i] {
    border: 2px dashed #c8e4d8;
    border-radius: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.5rem;
    text-align: center;
}

.logo-placeholder-icon[b-r3m5pfnn2i] {
    font-size: 2rem;
    opacity: 0.5;
}

.logo-hint[b-r3m5pfnn2i] {
    margin: 0;
    font-size: 0.82rem;
    color: #4f7065;
}

.logo-preview[b-r3m5pfnn2i] {
    width: 6rem;
    height: 6rem;
    object-fit: contain;
    border-radius: 0.8rem;
    border: 1px solid #d6ebe2;
    background: #ffffff;
}

.btn-upload[b-r3m5pfnn2i] {
    border: 1px solid #c8e4d8;
    border-radius: 0.6rem;
    padding: 0.38rem 0.75rem;
    background: #f0fdf4;
    color: #065f46;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-upload:hover[b-r3m5pfnn2i] {
    background: #dcfce7;
}

.btn-upload.is-disabled[b-r3m5pfnn2i] {
    opacity: 0.7;
    cursor: wait;
}

.settings-save-toast[b-r3m5pfnn2i] {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 50;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(6, 78, 59, 0.14);
}

/* ── Toggle list ───────────────────────────────────────── */
.toggle-list[b-r3m5pfnn2i] {
    display: grid;
    gap: 0;
}

.toggle-row[b-r3m5pfnn2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eaf4ee;
}

.toggle-row:last-child[b-r3m5pfnn2i] {
    border-bottom: none;
}

.toggle-text[b-r3m5pfnn2i] {
    display: grid;
    gap: 0.18rem;
    flex: 1;
}

.toggle-title[b-r3m5pfnn2i] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #174030;
}

.toggle-sub[b-r3m5pfnn2i] {
    font-size: 0.78rem;
    color: #4f7065;
}

/* ── CSS Toggle Switch ─────────────────────────────────── */
.toggle-switch[b-r3m5pfnn2i] {
    position: relative;
    display: inline-block;
    width: 2.8rem;
    height: 1.5rem;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input[b-r3m5pfnn2i] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider[b-r3m5pfnn2i] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 180ms ease;
}

.toggle-slider[b-r3m5pfnn2i]::before {
    content: '';
    position: absolute;
    height: 1.1rem;
    width: 1.1rem;
    border-radius: 50%;
    background: #ffffff;
    left: 0.2rem;
    bottom: 0.2rem;
    transition: transform 180ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider[b-r3m5pfnn2i] {
    background: #064e3b;
}

.toggle-switch input:checked + .toggle-slider[b-r3m5pfnn2i]::before {
    transform: translateX(1.3rem);
}

/* ── Placeholder tab ───────────────────────────────────── */
.placeholder-tab[b-r3m5pfnn2i] {
    color: #4f7065;
}

.status-message[b-r3m5pfnn2i] {
    margin: 0;
    color: #245544;
    font-size: 0.84rem;
}

.status-message.error[b-r3m5pfnn2i] {
    color: #b91c1c;
}

.locations-table-wrap[b-r3m5pfnn2i] {
    overflow-x: auto;
}

.locations-table[b-r3m5pfnn2i] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.locations-table th[b-r3m5pfnn2i],
.locations-table td[b-r3m5pfnn2i] {
    text-align: left;
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid #e6f4ed;
    color: #245544;
}

.locations-table th[b-r3m5pfnn2i] {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4f7065;
}

.template-set-list[b-r3m5pfnn2i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.template-set-btn[b-r3m5pfnn2i] {
    align-items: center;
    background: #f8fdfb;
    border: 1px solid #c8e4d8;
    border-radius: 0.5rem;
    color: #174030;
    cursor: pointer;
    display: inline-flex;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
}

.template-set-btn.active[b-r3m5pfnn2i] {
    background: #064e3b;
    border-color: #064e3b;
    color: #ecfdf5;
}

.template-set-btn small[b-r3m5pfnn2i] {
    opacity: 0.75;
}

.rule-row[b-r3m5pfnn2i] {
    align-items: center;
    border-bottom: 1px solid #eaf4ee;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr auto 4.5rem;
    padding: 0.75rem 0;
}

.rule-row:last-child[b-r3m5pfnn2i] {
    border-bottom: none;
}

.rule-value-input[b-r3m5pfnn2i] {
    background: #f8fdfb;
    border: 1px solid #c8e4d8;
    border-radius: 0.5rem;
    color: #174030;
    padding: 0.42rem 0.5rem;
    width: 100%;
}

.action-col[b-r3m5pfnn2i] {
    width: 6rem;
    text-align: right;
}

.btn-delete-role[b-r3m5pfnn2i] {
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #dc2626;
    background: transparent;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-delete-role:hover[b-r3m5pfnn2i] {
    background: #fef2f2;
    border-color: #dc2626;
}

.billing-card[b-r3m5pfnn2i] {
    max-width: 36rem;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 960px) {
    .settings-grid[b-r3m5pfnn2i] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .field-row[b-r3m5pfnn2i] {
        grid-template-columns: 1fr;
    }

    .rule-row[b-r3m5pfnn2i] {
        grid-template-columns: 1fr auto;
    }

    .rule-value-input[b-r3m5pfnn2i] {
        grid-column: 1 / -1;
    }
}
/* /Pages/Staff.razor.rz.scp.css */
/* ── Page layout ────────────────────────────────────────── */

.staff-page[b-auklffvou9] {
    display: grid;
    gap: 1rem;
}

.staff-header[b-auklffvou9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.staff-header h1[b-auklffvou9] {
    margin: 0;
    color: #064e3b;
}

.staff-header p[b-auklffvou9] {
    margin: 0.25rem 0 0;
    color: #4f7065;
    font-size: 0.9rem;
}

.btn-add-staff[b-auklffvou9] {
    flex-shrink: 0;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 0.7rem;
    background: #064e3b;
    color: #ecfdf5;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.btn-add-staff:hover[b-auklffvou9] {
    background: #065f46;
}

/* ── Metrics Row ────────────────────────────────────────── */

.staff-metrics-row[b-auklffvou9] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.metric-card[b-auklffvou9] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    box-shadow: 0 4px 12px rgba(6, 78, 59, 0.06);
}

.metric-value[b-auklffvou9] {
    font-size: 1.55rem;
    font-weight: 800;
    color: #064e3b;
    line-height: 1;
}

.metric-dimmed[b-auklffvou9] {
    color: #94a3b8;
}

.metric-label[b-auklffvou9] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #4f7065;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ── Filter Ribbon ──────────────────────────────────────── */

.filter-ribbon[b-auklffvou9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-ribbon-left[b-auklffvou9] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    flex: 1;
}

.filter-ribbon-right[b-auklffvou9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-wrap[b-auklffvou9] {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.search-icon[b-auklffvou9] {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    pointer-events: none;
    color: #94a3b8;
}

.search-input[b-auklffvou9] {
    width: 100%;
    padding: 0.44rem 0.6rem 0.44rem 1.9rem;
    border: 1px solid #c8e4d8;
    border-radius: 0.62rem;
    font-size: 0.86rem;
    color: #174030;
    background: #f8fdfb;
    box-sizing: border-box;
}

.search-input:focus[b-auklffvou9] {
    outline: 2px solid #065f46;
    outline-offset: 1px;
}

.filter-select[b-auklffvou9] {
    border: 1px solid #c8e4d8;
    border-radius: 0.62rem;
    padding: 0.44rem 0.6rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #174030;
    background: #f8fdfb;
    cursor: pointer;
}

.filter-select:focus[b-auklffvou9] {
    outline: 2px solid #065f46;
    outline-offset: 1px;
}

.filter-toggle-btn[b-auklffvou9],
.export-btn[b-auklffvou9] {
    border: 1px solid #c8e4d8;
    border-radius: 0.62rem;
    padding: 0.44rem 0.85rem;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
    background: #f8fdfb;
    color: #174030;
    transition: background-color 120ms;
}

.filter-toggle-btn:hover[b-auklffvou9],
.export-btn:hover[b-auklffvou9] {
    background: #ecfdf5;
}

/* ── Status message ─────────────────────────────────────── */

.status-message[b-auklffvou9] {
    color: #4f7065;
    padding: 1rem 0;
}

/* ── Table ──────────────────────────────────────────────── */

.staff-table-wrapper[b-auklffvou9] {
    background: #ffffff;
    border: 1px solid #d6ebe2;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(6, 78, 59, 0.07);
}

.staff-table[b-auklffvou9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.staff-table thead tr[b-auklffvou9] {
    background: #f0fdf4;
    border-bottom: 2px solid #d6ebe2;
}

.staff-table th[b-auklffvou9] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #4f7065;
    white-space: nowrap;
}

.staff-row[b-auklffvou9] {
    border-bottom: 1px solid #e9f5ee;
    transition: background-color 100ms ease;
}

.staff-row:last-child[b-auklffvou9] {
    border-bottom: none;
}

.staff-row:hover[b-auklffvou9] {
    background-color: #f8fafc;
}

.staff-table td[b-auklffvou9] {
    padding: 0.75rem 1rem;
    color: #174030;
    vertical-align: middle;
}

/* ── Staff name cell ────────────────────────────────────── */

.staff-name-cell[b-auklffvou9] {
    min-width: 180px;
}

.staff-avatar-name[b-auklffvou9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.avatar-upload-wrap[b-auklffvou9] {
    position: relative;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.avatar-chip[b-auklffvou9] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #d1fae5;
    color: #065f46;
    font-size: 0.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-image[b-auklffvou9] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #d6ebe2;
    flex-shrink: 0;
}

.avatar-upload-btn[b-auklffvou9] {
    position: absolute;
    right: -0.15rem;
    bottom: -0.15rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #064e3b;
    color: #ecfdf5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(6, 78, 59, 0.24);
}

.avatar-upload-spinner[b-auklffvou9] {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
    border: 1.5px solid rgba(236, 253, 245, 0.35);
    border-top-color: #ecfdf5;
    animation: avatar-upload-spin-b-auklffvou9 700ms linear infinite;
}

@keyframes avatar-upload-spin-b-auklffvou9 {
    to {
        transform: rotate(360deg);
    }
}

.staff-full-name[b-auklffvou9] {
    margin: 0;
    font-weight: 700;
    color: #064e3b;
    font-size: 0.88rem;
}

.email-cell[b-auklffvou9] {
    font-size: 0.83rem;
    color: #4f7065;
}

/* ── Role chip ──────────────────────────────────────────── */

.role-chip[b-auklffvou9] {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.role-chip-admin[b-auklffvou9]   { background: #e6f4ea; color: #137333; }
.role-chip-manager[b-auklffvou9] { background: #e8f0fe; color: #1a56db; }
.role-chip-staff[b-auklffvou9]   { background: #f1f5f9; color: #475569; }

/* ── Action column ──────────────────────────────────────── */

.action-col[b-auklffvou9] {
    width: 3rem;
    text-align: center;
}

.action-menu-btn[b-auklffvou9] {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 0.45rem;
    cursor: pointer;
    transition: background-color 120ms, color 120ms;
}

.action-menu-btn:hover[b-auklffvou9] {
    background: #e2f8ef;
    color: #064e3b;
}

/* ── Overtime badge ─────────────────────────────────────── */

.ot-badge[b-auklffvou9] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
}

.ot-yes[b-auklffvou9] {
    background: #d1fae5;
    color: #065f46;
}

.ot-no[b-auklffvou9] {
    background: #f1f5f9;
    color: #64748b;
}

/* ── Drawer Overlay ─────────────────────────────────────── */

.drawer-overlay[b-auklffvou9] {
    position: fixed;
    inset: 0;
    background: rgba(2, 28, 18, 0.45);
    z-index: 900;
    animation: overlay-fade-in-b-auklffvou9 200ms ease forwards;
}

@keyframes overlay-fade-in-b-auklffvou9 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Staff Drawer ───────────────────────────────────────── */

.staff-drawer[b-auklffvou9] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 100vw);
    background: #ffffff;
    box-shadow: -8px 0 40px rgba(2, 28, 18, 0.22);
    z-index: 901;
    display: flex;
    flex-direction: column;
    animation: drawer-slide-in-b-auklffvou9 230ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

.drawer-header[b-auklffvou9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid #d6ebe2;
    background: linear-gradient(180deg, #064e3b 0%, #065f46 100%);
}

.drawer-subtitle[b-auklffvou9] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #a7f3d0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.drawer-title[b-auklffvou9] {
    margin: 0.22rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #ecfdf5;
}

.drawer-close[b-auklffvou9] {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #d1fae5;
    border-radius: 0.5rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1rem;
    cursor: pointer;
}

.drawer-close:hover[b-auklffvou9] {
    background: rgba(255, 255, 255, 0.22);
}

.drawer-body[b-auklffvou9] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

/* ── Drawer section headings & dividers ─────────────────── */

.drawer-section-title[b-auklffvou9] {
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #064e3b;
}

.drawer-section-divider[b-auklffvou9] {
    height: 1px;
    background: #d6ebe2;
    margin: 0.4rem 0;
}

/* ── Drawer inputs ──────────────────────────────────────── */

.drawer-label[b-auklffvou9] {
    font-size: 0.74rem;
    font-weight: 700;
    color: #4f7065;
    margin-bottom: -0.3rem;
}

.drawer-input[b-auklffvou9] {
    width: 100%;
    border: 1px solid #c8e4d8;
    border-radius: 0.62rem;
    padding: 0.46rem 0.6rem;
    font-size: 0.9rem;
    color: #174030;
    background: #f8fdfb;
    box-sizing: border-box;
}

.drawer-input:focus[b-auklffvou9] {
    outline: 2px solid #065f46;
    outline-offset: 1px;
}

.drawer-checkbox-label[b-auklffvou9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #174030;
    cursor: pointer;
    padding: 0.4rem 0;
}

.drawer-checkbox-label input[type="checkbox"][b-auklffvou9] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #064e3b;
    flex-shrink: 0;
}

/* ── Password reset container ───────────────────────────── */

.password-reset-container[b-auklffvou9] {
    display: grid;
    gap: 0.5rem;
    background: #f8fdfb;
    border: 1px solid #d6ebe2;
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.reset-password-btn[b-auklffvou9] {
    border: none;
    border-radius: 0.62rem;
    padding: 0.48rem 0.9rem;
    background: #064e3b;
    color: #ecfdf5;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    justify-self: start;
    transition: background-color 140ms;
}

.reset-password-btn:hover:not(:disabled)[b-auklffvou9] {
    background: #065f46;
}

.reset-password-btn:disabled[b-auklffvou9] {
    opacity: 0.55;
    cursor: not-allowed;
}

.reset-feedback[b-auklffvou9] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.35rem 0.55rem;
}

.reset-feedback-ok[b-auklffvou9]  { background: #d1fae5; color: #065f46; }
.reset-feedback-err[b-auklffvou9] { background: #fef2f2; color: #b91c1c; }

/* ── Drawer Footer ──────────────────────────────────────── */

.drawer-footer[b-auklffvou9] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #d6ebe2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.drawer-save-btn[b-auklffvou9] {
    border: 0;
    border-radius: 0.72rem;
    padding: 0.6rem 0;
    font-weight: 800;
    font-size: 0.92rem;
    color: #ecfdf5;
    background: linear-gradient(180deg, #047857, #064e3b);
    width: 100%;
    cursor: pointer;
    transition: opacity 140ms ease;
}

.drawer-save-btn:hover:not(:disabled)[b-auklffvou9] {
    opacity: 0.88;
}

.drawer-save-btn:disabled[b-auklffvou9] {
    opacity: 0.6;
    cursor: not-allowed;
}

.drawer-delete-btn[b-auklffvou9] {
    border: 0;
    background: transparent;
    color: #b91c1c;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.4rem;
    width: 100%;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background-color 140ms ease;
}

.drawer-delete-btn:hover:not(:disabled)[b-auklffvou9] {
    background: #fef2f2;
}

.drawer-delete-btn:disabled[b-auklffvou9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1100px) {
    .staff-metrics-row[b-auklffvou9] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .staff-metrics-row[b-auklffvou9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-ribbon[b-auklffvou9] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-ribbon-right[b-auklffvou9] {
        justify-content: flex-end;
    }
}
/* /Pages/StaffDetails.razor.rz.scp.css */
.staff-details-page[b-ai1ozoo72x] { display: grid; gap: 1rem; width: 100%; }
.staff-details-header[b-ai1ozoo72x] { display: grid; gap: .7rem; }
.staff-back-link[b-ai1ozoo72x] { color: #065f46; font-weight: 700; text-decoration: none; }
.staff-details-heading[b-ai1ozoo72x] { display: flex; align-items: center; gap: .8rem; }
.staff-details-heading h1[b-ai1ozoo72x] { margin: 0; color: #064e3b; }
.staff-details-heading p[b-ai1ozoo72x], .staff-details-status[b-ai1ozoo72x] { margin: .25rem 0 0; color: #4f7065; }
.staff-details-avatar[b-ai1ozoo72x] { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: #d1fae5; color: #065f46; font-weight: 800; }
.staff-details-card[b-ai1ozoo72x], .staff-danger-zone[b-ai1ozoo72x] { background: #fff; border: 1px solid #d6ebe2; border-radius: 1rem; padding: 1rem; box-shadow: 0 10px 26px rgba(6,78,59,.06); display: grid; gap: .8rem; }
.staff-details-card h2[b-ai1ozoo72x], .staff-danger-zone h2[b-ai1ozoo72x] { margin: 0; color: #064e3b; font-size: 1.05rem; }
.staff-details-grid[b-ai1ozoo72x] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.staff-details-grid label[b-ai1ozoo72x], .staff-details-label[b-ai1ozoo72x] { display: grid; gap: .25rem; color: #4f7065; font-size: .75rem; font-weight: 700; }
.staff-details-input[b-ai1ozoo72x] { box-sizing: border-box; width: 100%; border: 1px solid #c8e4d8; border-radius: .55rem; background: #f8fdfb; color: #174030; padding: .48rem .55rem; font-size: .86rem; }
.staff-details-subsection[b-ai1ozoo72x] { border-top: 1px solid #e6f4ed; padding-top: .8rem; display: grid; gap: .45rem; }
.staff-details-subsection h3[b-ai1ozoo72x] { margin: 0; color: #174030; font-size: .92rem; }
.staff-details-subsection h4[b-ai1ozoo72x] { margin: 0 0 .3rem; color: #4f7065; font-size: .78rem; }
.staff-details-help[b-ai1ozoo72x] { margin: 0; color: #4f7065; font-size: .8rem; }
.staff-qualification-groups[b-ai1ozoo72x] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.staff-check-label[b-ai1ozoo72x] { display: block; color: #174030; font-size: .8rem; padding: .2rem 0; }
.staff-primary-button[b-ai1ozoo72x], .staff-secondary-button[b-ai1ozoo72x], .staff-danger-button[b-ai1ozoo72x] { border-radius: .6rem; cursor: pointer; font-weight: 700; padding: .5rem .8rem; }
.staff-primary-button[b-ai1ozoo72x] { justify-self: start; background: #064e3b; border: 1px solid #064e3b; color: #ecfdf5; }
.staff-secondary-button[b-ai1ozoo72x] { justify-self: start; background: #fff; border: 1px solid #9bcdbb; color: #065f46; }
.staff-danger-zone[b-ai1ozoo72x] { border-color: #fecaca; background: #fffafa; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.staff-danger-zone p[b-ai1ozoo72x] { margin: .25rem 0 0; color: #7f1d1d; font-size: .8rem; }
.staff-danger-button[b-ai1ozoo72x] { border: 1px solid #dc2626; background: #fef2f2; color: #b91c1c; }
.staff-details-message[b-ai1ozoo72x] { margin: 0; color: #166534; font-size: .82rem; }
@media (max-width: 600px) { .staff-details-grid[b-ai1ozoo72x], .staff-qualification-groups[b-ai1ozoo72x] { grid-template-columns: 1fr; } .staff-danger-zone[b-ai1ozoo72x] { align-items: stretch; flex-direction: column; } .staff-danger-button[b-ai1ozoo72x] { align-self: flex-start; } }