:root {
    --cb-bg: #f7f7fb;
    --cb-surface: #ffffff;
    --cb-surface-soft: #fbfbfe;
    --cb-line: #e8e7f2;
    --cb-line-strong: #dcd9ec;
    --cb-text: #141b34;
    --cb-text-soft: #8f98b2;
    --cb-text-muted: #b1b8cd;
    --cb-purple: #6a4df5;
    --cb-purple-strong: #5e3ff0;
    --cb-purple-soft: #f1edff;
    --cb-red-soft: #fff0f1;
    --cb-red: #ff5a65;
    --cb-green-soft: #ecfff5;
    --cb-green: #15b86f;
    --cb-amber-soft: #fff6df;
    --cb-amber: #e89b18;
    --cb-blue-soft: #eef5ff;
    --cb-blue: #4c83ff;
    --cb-shadow: 0 20px 60px rgba(29, 34, 68, 0.08);
    --cb-radius-xl: 28px;
    --cb-radius-lg: 22px;
    --cb-radius-md: 16px;
    --cb-radius-sm: 12px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--cb-bg);
    color: var(--cb-text);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

svg {
    display: block;
}

.cb-shell-body {
    background: var(--cb-bg);
}

.cb-shell {
    display: grid;
    grid-template-columns: 222px minmax(0, 1fr);
    min-height: 100vh;
}

.cb-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 18px 12px 16px;
    background: var(--cb-surface);
    border-right: 1px solid var(--cb-line);
}

.cb-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 18px;
    margin-bottom: 8px;
}

.cb-sidebar-brand-mark {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #5d36ec, #744ef4);
    box-shadow: 0 12px 22px rgba(106, 77, 245, 0.28);
}

.cb-sidebar-brand-mark svg {
    width: 18px;
    height: 18px;
}

.cb-sidebar-brand-wordmark {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.cb-sidebar-scroll {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.cb-sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.cb-sidebar-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d7d4ea;
}

.cb-sidebar-nav {
    display: grid;
    gap: 18px;
}

.cb-nav-group {
    display: grid;
    gap: 7px;
}

.cb-nav-group h2 {
    margin: 0;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a0a9c1;
}

.cb-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 14px;
    color: #495474;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.cb-nav-link:hover {
    background: #f7f4ff;
    color: var(--cb-text);
}

.cb-nav-link.is-active {
    background: #ece6ff;
    color: var(--cb-purple-strong);
}

.cb-nav-icon {
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0.92;
}

.cb-nav-icon svg {
    width: 18px;
    height: 18px;
}

.cb-sidebar-footer {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cb-line);
}

.cb-shell-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cb-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 42px minmax(280px, 448px) 1fr;
    align-items: center;
    gap: 18px;
    min-height: 54px;
    padding: 0 22px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cb-line);
}

.cb-topbar-close,
.cb-topbar-icon-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    background: #fff;
    color: #737d98;
}

.cb-topbar-close svg,
.cb-topbar-icon-button svg,
.cb-topbar-chip-icon svg,
.cb-topbar-chip-chevron svg,
.cb-topbar-user-chevron svg {
    width: 16px;
    height: 16px;
}

.cb-topbar-search {
    position: relative;
    display: flex;
    align-items: center;
}

.cb-topbar-search input {
    width: 100%;
    height: 36px;
    padding: 0 16px 0 38px;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    background: #fbfbfe;
    color: var(--cb-text);
    font-size: 14px;
}

.cb-topbar-search input::placeholder {
    color: #a3abc3;
}

.cb-topbar-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ba5be;
}

.cb-topbar-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.cb-topbar-chip,
.cb-topbar-user {
    min-height: 36px;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    background: #fff;
}

.cb-topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: #52607e;
    font-size: 14px;
    font-weight: 500;
}

.cb-topbar-chip-icon,
.cb-topbar-chip-chevron,
.cb-topbar-user-chevron {
    color: #9aa4be;
}

.cb-topbar-alert-dot {
    position: absolute;
    margin-top: -10px;
    margin-left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ff4d61;
    border: 2px solid #fff;
}

.cb-topbar-icon-button {
    position: relative;
}

.cb-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}

.cb-topbar-user-avatar {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--cb-purple);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.cb-topbar-user-copy {
    display: grid;
    gap: 1px;
    text-align: left;
}

.cb-topbar-user-copy strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
}

.cb-topbar-user-copy small {
    font-size: 12px;
    color: #98a2bd;
    line-height: 1.1;
}

.cb-page-shell {
    padding: 24px 34px 42px;
}

.cb-page {
    width: min(100%, 980px);
    margin: 0 auto;
}

.cb-page-header {
    margin: 8px 0 24px;
}

.cb-page-header h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-page-header p {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--cb-text-soft);
}

.cb-flash {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--cb-line);
}

.cb-flash-success {
    background: var(--cb-green-soft);
    color: #107b53;
}

.cb-flash-error {
    background: var(--cb-red-soft);
    color: #c44756;
}

.cb-auth-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 36px 18px;
    background: #f7f7fb;
}

.cb-auth-panel {
    width: min(100%, 400px);
    display: grid;
    justify-items: center;
    gap: 18px;
}

.cb-auth-badge {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #683ff4, #865bf6);
    color: #fff;
    box-shadow: 0 16px 30px rgba(106, 77, 245, 0.22);
}

.cb-auth-badge svg {
    width: 24px;
    height: 24px;
}

.cb-auth-copy {
    text-align: center;
}

.cb-auth-copy h1 {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-auth-copy p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--cb-text-soft);
}

.cb-auth-card {
    width: 100%;
    display: grid;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--cb-shadow);
}

.cb-auth-provider,
.cb-auth-submit {
    width: 100%;
    height: 46px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 14px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
}

.cb-auth-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cb-auth-provider-icon {
    width: 18px;
    height: 18px;
}

.cb-auth-provider-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cb-auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: #a0a8c1;
    font-size: 12px;
    font-weight: 600;
}

.cb-auth-divider span {
    height: 1px;
    background: var(--cb-line);
}

.cb-auth-field {
    display: grid;
    gap: 8px;
}

.cb-auth-field > span:first-child,
.cb-inline-between > span:first-child {
    font-size: 14px;
    font-weight: 600;
}

.cb-inline-between {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.cb-inline-between a,
.cb-auth-footer a,
.cb-link {
    color: var(--cb-purple);
    font-weight: 600;
}

.cb-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cb-input-wrap i,
.cb-input-wrap b {
    position: absolute;
    color: #a0a8c0;
}

.cb-input-wrap i {
    left: 14px;
}

.cb-input-wrap b {
    right: 14px;
    font-weight: 500;
}

.cb-input-wrap input {
    width: 100%;
    height: 44px;
    padding: 0 42px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 12px;
    background: #fbfbfe;
}

.cb-auth-submit,
.cb-btn-primary,
.cb-pill-cta,
.cb-modal-submit {
    border: 0;
    color: #fff;
    background: linear-gradient(90deg, #6747f2 0%, #8858f4 100%);
    box-shadow: 0 16px 28px rgba(106, 77, 245, 0.18);
}

.cb-auth-footer {
    margin: 6px 0 0;
    color: #717b97;
    font-size: 14px;
}

.cb-app-stack,
.cb-page-stack {
    display: grid;
    gap: 22px;
}

.cb-card,
.cb-panel,
.cb-stat-card,
.cb-table-shell,
.cb-list-shell,
.cb-surface {
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: var(--cb-surface);
    box-shadow: 0 10px 30px rgba(30, 34, 72, 0.04);
}

.cb-hero-card {
    padding: 28px 30px;
}

.cb-hero-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9da7c0;
}

.cb-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.cb-hero-copy h2,
.cb-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-hero-copy p,
.cb-section-copy {
    margin: 8px 0 0;
    color: var(--cb-text-soft);
    font-size: 14px;
    line-height: 1.55;
}

.cb-hero-actions,
.cb-head-actions,
.cb-toolbar-actions,
.cb-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cb-btn,
.cb-action-button,
.cb-button {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 14px;
    background: #fff;
    color: var(--cb-text);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cb-btn-block {
    width: 100%;
}

.cb-btn-primary svg,
.cb-btn-success svg,
.cb-btn-danger svg {
    color: inherit;
}

.cb-btn-success {
    background: #08a968;
    border-color: #08a968;
    color: #fff;
}

.cb-btn-danger {
    background: #fff1f2;
    border-color: #ffd6da;
    color: #f05362;
}

.cb-btn-muted {
    background: #f6f6fb;
}

.cb-btn-icon {
    width: 38px;
    padding: 0;
}

.cb-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cb-stat-card {
    padding: 22px 22px 18px;
    min-height: 118px;
}

.cb-stat-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ba4bf;
}

.cb-stat-value {
    margin: 16px 0 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-stat-caption {
    margin: 8px 0 0;
    font-size: 14px;
    color: #7f89a7;
    line-height: 1.5;
}

.cb-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 22px;
}

.cb-dashboard-main,
.cb-dashboard-side {
    display: grid;
    gap: 22px;
}

.cb-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cb-grid-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.cb-list-shell,
.cb-table-shell {
    overflow: hidden;
}

.cb-list-shell-head,
.cb-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cb-line);
}

.cb-list-shell-head h3,
.cb-table-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.cb-list-shell-head p,
.cb-table-head p {
    margin: 6px 0 0;
    color: var(--cb-text-soft);
    font-size: 14px;
}

.cb-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-top: 1px solid var(--cb-line);
}

.cb-list-row:first-child {
    border-top: 0;
}

.cb-list-row strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.cb-list-row span,
.cb-list-row small {
    display: block;
    margin-top: 4px;
    color: var(--cb-text-soft);
    font-size: 13px;
}

.cb-inline-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cb-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.cb-chip-purple {
    background: #f0eaff;
    color: var(--cb-purple);
}

.cb-chip-green {
    background: #dffff0;
    color: #149560;
}

.cb-chip-red {
    background: #ffe7ea;
    color: #ef5565;
}

.cb-chip-amber {
    background: #fff3d6;
    color: #d99216;
}

.cb-chip-blue {
    background: #edf4ff;
    color: #4d7ef6;
}

.cb-chip-neutral {
    background: #f4f5f9;
    color: #8e97b0;
}

.cb-empty-state {
    padding: 26px 24px;
    color: var(--cb-text-soft);
}

.cb-empty-state strong {
    display: block;
    margin-bottom: 6px;
    color: var(--cb-text);
    font-size: 15px;
}

.cb-form-stack {
    display: grid;
    gap: 14px;
}

.cb-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cb-form-stack label,
.cb-form-panel label {
    display: grid;
    gap: 7px;
}

.cb-form-stack label span,
.cb-form-panel label span,
.cb-modal-subhead {
    font-size: 13px;
    font-weight: 600;
    color: #4a5679;
}

.cb-form-stack input,
.cb-form-stack select,
.cb-form-stack textarea,
.cb-form-panel input,
.cb-form-panel select,
.cb-form-panel textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--cb-line-strong);
    border-radius: 14px;
    background: #fbfbfe;
    color: var(--cb-text);
}

.cb-form-stack textarea,
.cb-form-panel textarea {
    min-height: 120px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
}

.cb-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 60;
}

.cb-modal.is-open {
    display: block;
}

.cb-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 22, 36, 0.44);
    backdrop-filter: blur(4px);
}

.cb-modal-dialog {
    position: relative;
    width: min(100% - 28px, 560px);
    margin: 8vh auto 0;
    border-radius: 24px;
    border: 1px solid var(--cb-line);
    background: #fff;
    box-shadow: 0 28px 80px rgba(16, 19, 35, 0.22);
    overflow: hidden;
}

.cb-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--cb-line);
}

.cb-modal-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.cb-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #8d96b0;
}

.cb-modal-body {
    padding: 22px;
}

.cb-kpi-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 22px;
    min-height: 128px;
}

.cb-kpi-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #f3efff;
    color: var(--cb-purple);
}

.cb-kpi-value {
    margin-top: 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.cb-kpi-note {
    margin-top: 4px;
    font-size: 14px;
    color: var(--cb-text-soft);
}

.cb-staff-grid,
.cb-location-grid,
.cb-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cb-staff-card,
.cb-location-card,
.cb-department-card {
    padding: 18px;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(26, 30, 66, 0.04);
}

.cb-person-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-avatar {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    flex: 0 0 auto;
}

.cb-person-copy strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.cb-person-copy span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--cb-text-soft);
}

.cb-card-meta {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--cb-text-soft);
    font-size: 13px;
}

.cb-card-divider {
    margin: 14px 0;
    border-top: 1px solid var(--cb-line);
}

.cb-tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cb-member-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid var(--cb-line);
    background: #fbfbfe;
    color: #52607d;
    font-size: 12px;
}

.cb-member-pill .cb-avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.cb-rota-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0 6px;
}

.cb-rota-toolbar-left,
.cb-rota-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cb-filter-chip {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    background: #fff;
    color: #495676;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cb-rota-table {
    overflow: hidden;
}

.cb-rota-grid {
    display: grid;
    grid-template-columns: 180px repeat(7, minmax(120px, 1fr)) 76px;
    min-width: 1120px;
}

.cb-rota-cell,
.cb-rota-head,
.cb-rota-name {
    min-height: 72px;
    padding: 14px 12px;
    border-right: 1px solid var(--cb-line);
    border-top: 1px solid var(--cb-line);
    background: #fff;
}

.cb-rota-head {
    min-height: 60px;
    font-size: 12px;
    font-weight: 700;
    color: #9aa2bc;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cb-rota-head strong {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--cb-text);
}

.cb-rota-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-rota-hours {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 18px;
    font-weight: 700;
}

.cb-shift-card,
.cb-availability-pill {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid;
    font-size: 12px;
    line-height: 1.25;
}

.cb-shift-card strong {
    display: block;
    font-size: 13px;
}

.cb-shift-blue {
    background: #edf4ff;
    border-color: #bfd0ff;
    color: #5e63ef;
}

.cb-shift-purple {
    background: #f1ecff;
    border-color: #cfc5ff;
    color: #7e63ef;
}

.cb-shift-green {
    background: #eafcf4;
    border-color: #abefcf;
    color: #15a96f;
}

.cb-shift-red {
    background: #fff0f1;
    border-color: #ffcbcf;
    color: #f05463;
}

.cb-shift-amber {
    background: #fff8ea;
    border-color: #ffd980;
    color: #ff8d00;
    border-style: dashed;
}

.cb-availability-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 32px;
    font-weight: 600;
}

.cb-available {
    background: #ecfcf4;
    border-color: #9eeec7;
    color: #0f9b67;
}

.cb-unavailable {
    background: #fff0f1;
    border-color: #ffc9cd;
    color: #f04f5f;
}

.cb-custom-availability {
    background: #f1edff;
    border-color: #cac0ff;
    color: var(--cb-purple);
}

.cb-request-shell,
.cb-feed-shell {
    display: grid;
    gap: 18px;
}

.cb-request-card,
.cb-announcement-card,
.cb-document-row,
.cb-payrun-row,
.cb-compliance-row {
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
}

.cb-request-head,
.cb-announcement-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px 0;
}

.cb-request-body,
.cb-announcement-body {
    padding: 12px 20px 18px;
}

.cb-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-top: 1px solid var(--cb-line);
}

.cb-request-row:first-child {
    border-top: 0;
}

.cb-action-pair {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-timeclock-hero {
    padding: 38px 30px;
    text-align: center;
}

.cb-timeclock-hero-time {
    font-size: 66px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.cb-timeclock-hero-date {
    margin-top: 8px;
    color: var(--cb-text-soft);
    font-size: 14px;
}

.cb-timeclock-hero .cb-btn {
    margin-top: 24px;
}

.cb-timeclock-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.cb-timeclock-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
}

.cb-timeclock-stat strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
}

.cb-timeclock-stat span {
    display: block;
    margin-top: 4px;
    color: var(--cb-text-soft);
    font-size: 14px;
}

.cb-badge-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cb-settings-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--cb-line);
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
}

.cb-settings-nav {
    padding: 18px 14px;
    border-right: 1px solid var(--cb-line);
    background: #fff;
}

.cb-settings-nav h3 {
    margin: 0 0 14px;
    padding: 0 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #a0a9c1;
}

.cb-settings-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 14px;
    color: #556280;
    font-size: 14px;
    font-weight: 500;
}

.cb-settings-nav a.is-active {
    background: #ece6ff;
    color: var(--cb-purple);
}

.cb-settings-content {
    padding: 28px 32px;
}

.cb-settings-content h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.cb-settings-content > p {
    margin: 8px 0 22px;
    color: var(--cb-text-soft);
    font-size: 14px;
}

.cb-settings-section {
    display: grid;
    gap: 18px;
    max-width: 600px;
}

.cb-settings-box {
    padding: 20px;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
}

.cb-settings-box h3 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 800;
}

.cb-settings-box.danger {
    background: #fff4f5;
    border-color: #ffd2d7;
}

.cb-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--cb-line);
}

.cb-toggle-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.cb-switch {
    position: relative;
    width: 44px;
    height: 26px;
    flex: 0 0 auto;
}

.cb-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cb-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #e3e4eb;
    transition: background-color 160ms ease;
}

.cb-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 20, 40, 0.12);
    transition: transform 160ms ease;
}

.cb-switch input:checked + span {
    background: var(--cb-purple);
}

.cb-switch input:checked + span::after {
    transform: translateX(18px);
}

.cb-chart-shell {
    padding: 20px;
}

.cb-fake-line-chart {
    position: relative;
    height: 248px;
    border: 1px dashed #ecebf6;
    border-radius: 18px;
    background:
        linear-gradient(to top, rgba(108, 77, 245, 0.12), rgba(108, 77, 245, 0.02)),
        #fff;
}

.cb-fake-line-chart::before {
    content: "";
    position: absolute;
    inset: 18px 18px 26px;
    border-radius: 16px;
    background:
        linear-gradient(to top, transparent 0, transparent calc(100% - 1px), rgba(211, 216, 235, 0.7) 100%);
    mask: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 54px);
}

.cb-fake-line-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cb-bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: end;
    height: 210px;
    padding: 12px 18px 0;
}

.cb-bar {
    display: grid;
    gap: 8px;
}

.cb-bar-shape {
    width: 100%;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #7a55f7, #5d3fee);
}

.cb-bar-label {
    text-align: center;
    color: #7c87a4;
    font-size: 13px;
}

.cb-donut {
    width: 184px;
    height: 184px;
    margin: 8px auto 0;
    border-radius: 50%;
    background: conic-gradient(#6c4df5 0 68%, #4e85f8 68% 82%, #17b783 82% 100%);
    position: relative;
}

.cb-donut::after {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--cb-line);
}

.cb-donut-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
    font-weight: 700;
}

.cb-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.cb-footer-space {
    height: 12px;
}

@media (max-width: 1280px) {
    .cb-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .cb-staff-grid,
    .cb-location-grid,
    .cb-card-grid,
    .cb-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .cb-shell {
        grid-template-columns: 1fr;
    }

    .cb-sidebar {
        display: none;
    }

    .cb-topbar {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .cb-topbar-right {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-bottom: 10px;
    }

    .cb-page-shell {
        padding: 20px 16px 32px;
    }

    .cb-page {
        width: 100%;
    }

    .cb-staff-grid,
    .cb-location-grid,
    .cb-card-grid,
    .cb-stats-grid,
    .cb-grid-two,
    .cb-grid-three,
    .cb-timeclock-stat-grid,
    .cb-form-row,
    .cb-settings-layout,
    .cb-two-col {
        grid-template-columns: 1fr;
    }

    .cb-settings-nav {
        border-right: 0;
        border-bottom: 1px solid var(--cb-line);
    }

    .cb-modal-dialog {
        width: min(100% - 18px, 560px);
        margin-top: 4vh;
    }
}

/* Screenshot-aligned rebuild */
:root {
    --cb-bg: #f6f7fb;
    --cb-surface: #ffffff;
    --cb-surface-soft: #f7f5ff;
    --cb-line: #e6e9f2;
    --cb-line-strong: #d8def0;
    --cb-text: #111a44;
    --cb-text-soft: #8f98b3;
    --cb-purple: #6a4df7;
    --cb-purple-strong: #5b3ff1;
    --cb-purple-soft: #efeaff;
    --cb-green-soft: #def9eb;
    --cb-green-text: #0d9f68;
    --cb-amber-soft: #fff1cb;
    --cb-amber-text: #c78200;
    --cb-red-soft: #ffe1e2;
    --cb-red-text: #ef4444;
    --cb-blue-soft: #e7f0ff;
    --cb-blue-text: #4a67ff;
    --cb-shadow: 0 20px 60px rgba(17, 26, 68, 0.06);
}

body {
    background: var(--cb-bg);
    color: var(--cb-text);
}

.cb-shell {
    grid-template-columns: 224px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--cb-bg);
}

.cb-sidebar {
    background: #fff;
    border-right: 1px solid var(--cb-line);
    padding: 18px 12px 12px;
    gap: 18px;
}

.cb-sidebar-brand {
    padding: 0 12px 10px;
}

.cb-sidebar-brand .cb-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(180deg, #785cff, #5a3ef0);
    color: #fff;
}

.cb-sidebar-brand .cb-logo-label {
    font-size: 15px;
    font-weight: 700;
    color: #0f1639;
}

.cb-sidebar-section-title {
    padding: 0 10px;
    color: #9aa2bc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cb-sidebar-links {
    display: grid;
    gap: 4px;
}

.cb-sidebar-link {
    min-height: 42px;
    border-radius: 14px;
    padding: 0 12px;
    color: #394566;
    font-size: 14px;
    font-weight: 500;
}

.cb-sidebar-link:hover {
    background: #f6f7fc;
    color: #121c45;
}

.cb-sidebar-link.active {
    background: #ede8ff;
    color: var(--cb-purple);
    box-shadow: inset 0 0 0 1px rgba(106, 77, 247, 0.08);
}

.cb-sidebar-link svg {
    width: 17px;
    height: 17px;
}

.cb-sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cb-line);
}

.cb-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    height: 56px;
    padding: 0 28px;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--cb-line);
    backdrop-filter: blur(10px);
}

.cb-topbar-left {
    display: grid;
    place-items: center;
}

.cb-topbar-close {
    width: 18px;
    height: 18px;
    color: #8d94ad;
}

.cb-topbar-search {
    max-width: 448px;
    height: 36px;
    border-radius: 12px;
    background: #f4f5f9;
    border: 1px solid transparent;
    padding: 0 14px;
    gap: 10px;
}

.cb-topbar-search input {
    font-size: 13px;
    color: #4c5678;
}

.cb-topbar-search svg,
.cb-topbar-location svg,
.cb-topbar-notify svg {
    width: 16px;
    height: 16px;
    color: #939ab3;
}

.cb-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cb-topbar-location,
.cb-topbar-notify,
.cb-topbar-user {
    border: 1px solid var(--cb-line);
    background: #fff;
}

.cb-topbar-location {
    height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #3f4863;
}

.cb-topbar-notify {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.cb-topbar-notify-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
}

.cb-topbar-user {
    height: 40px;
    border-radius: 999px;
    padding: 0 12px 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cb-topbar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #6a4df7;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.cb-topbar-user-meta {
    display: grid;
    gap: 1px;
    line-height: 1.05;
}

.cb-topbar-user-meta strong {
    font-size: 13px;
    font-weight: 600;
    color: #111a44;
}

.cb-topbar-user-meta span {
    font-size: 12px;
    color: #98a0b7;
}

.cb-page-shell {
    padding: 24px 36px 40px;
}

.cb-page {
    width: min(1320px, 100%);
    margin: 0 auto;
}

.cb-app-page {
    display: grid;
    gap: 22px;
}

.cb-page-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.cb-page-copy {
    display: grid;
    gap: 8px;
}

.cb-page-kicker {
    color: #a0a7c2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cb-page-title {
    margin: 0;
    color: #111a44;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
}

.cb-page-subtitle {
    margin: 0;
    color: #9aa1b7;
    font-size: 14px;
}

.cb-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cb-btn,
.cb-btn-secondary,
.cb-btn-ghost,
.cb-btn-soft,
.cb-status-button {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid var(--cb-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.cb-btn {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(90deg, var(--cb-purple-strong), #7f59f5);
    box-shadow: 0 12px 24px rgba(106, 77, 247, 0.18);
}

.cb-btn-secondary {
    color: #18214b;
    background: #fff;
}

.cb-btn-soft {
    color: var(--cb-purple);
    background: var(--cb-purple-soft);
    border-color: transparent;
}

.cb-btn-ghost,
.cb-status-button {
    background: #f6f7fb;
    color: #394566;
}

.cb-btn:hover,
.cb-btn-secondary:hover,
.cb-btn-soft:hover,
.cb-btn-ghost:hover {
    transform: translateY(-1px);
}

.cb-panel,
.cb-card,
.cb-stat-card,
.cb-list-surface,
.cb-modal-dialog,
.cb-auth-card {
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    box-shadow: var(--cb-shadow);
}

.cb-panel {
    padding: 24px;
}

.cb-panel-tight {
    padding: 18px 20px;
}

.cb-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.cb-panel-head h2,
.cb-panel-head h3,
.cb-block-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111a44;
}

.cb-block-subtitle {
    margin: 6px 0 0;
    color: #97a0ba;
    font-size: 14px;
}

.cb-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cb-stat-tile {
    min-height: 108px;
    padding: 22px;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    background: #fff;
    display: grid;
    gap: 10px;
}

.cb-stat-tile-label {
    color: #9ba2ba;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cb-stat-tile-value {
    color: #101944;
    font-size: 22px;
    font-weight: 700;
}

.cb-stat-tile-note {
    color: #7e88a4;
    font-size: 14px;
}

.cb-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) 420px;
    gap: 24px;
}

.cb-stack {
    display: grid;
    gap: 20px;
}

.cb-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.cb-kpi-card {
    min-height: 146px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
    display: grid;
    align-content: space-between;
    gap: 14px;
}

.cb-kpi-card small {
    color: #7983a1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cb-kpi-card strong {
    font-size: 20px;
    color: #101944;
}

.cb-kpi-card span {
    color: #7c86a2;
    font-size: 14px;
}

.cb-mini-callout-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cb-mini-callout {
    min-height: 180px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid var(--cb-line);
    display: grid;
    align-content: space-between;
    gap: 18px;
}

.cb-mini-callout.green {
    background: linear-gradient(180deg, #effcf5, #f9fffc);
}

.cb-mini-callout.blue {
    background: linear-gradient(180deg, #f1f5ff, #fbfcff);
}

.cb-mini-callout.pink {
    background: linear-gradient(180deg, #fff4fb, #fffdfd);
}

.cb-mini-callout-title {
    color: #7f88a4;
    font-size: 14px;
}

.cb-mini-callout-value {
    color: #101944;
    font-size: 24px;
    font-weight: 700;
}

.cb-mini-callout h3 {
    margin: 0;
    color: #111a44;
    font-size: 18px;
}

.cb-mini-callout a {
    color: var(--cb-purple);
    font-weight: 600;
    text-decoration: none;
}

.cb-list-surface {
    overflow: hidden;
}

.cb-list-header {
    padding: 22px 24px;
    border-bottom: 1px solid var(--cb-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cb-list-header h2,
.cb-list-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.cb-list-header p {
    margin: 6px 0 0;
    color: #9aa2bb;
    font-size: 14px;
}

.cb-list-table {
    display: grid;
}

.cb-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-top: 1px solid var(--cb-line);
}

.cb-list-row:first-child {
    border-top: 0;
}

.cb-person {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-person-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.cb-person-copy {
    display: grid;
    gap: 4px;
}

.cb-person-copy strong {
    font-size: 15px;
    font-weight: 600;
    color: #101944;
}

.cb-person-copy span,
.cb-muted {
    color: #98a0b7;
    font-size: 14px;
}

.cb-meta-inline {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #8a94ae;
    font-size: 13px;
    flex-wrap: wrap;
}

.cb-status-pill,
.cb-soft-chip,
.cb-tone-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
}

.cb-soft-chip {
    background: #f5f6fb;
    color: #6c7694;
}

.cb-status-pill.active,
.cb-tone-pill.green {
    background: #dff9ea;
    color: #0f9d67;
}

.cb-status-pill.pending,
.cb-tone-pill.amber {
    background: #fff0c9;
    color: #b97a00;
}

.cb-status-pill.declined,
.cb-status-pill.expired,
.cb-tone-pill.red {
    background: #ffe3e3;
    color: #ef4444;
}

.cb-tone-pill.blue {
    background: #e8f0ff;
    color: #4a67ff;
}

.cb-tone-pill.purple,
.cb-status-pill.pinned {
    background: #efeaff;
    color: #6a4df7;
}

.cb-note-card {
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--cb-line);
    background: #fff;
}

.cb-note-card.warning {
    background: #fff6f5;
    border-color: #ffc8c3;
}

.cb-grid-2,
.cb-grid-3,
.cb-grid-4 {
    display: grid;
    gap: 20px;
}

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

.cb-staff-grid,
.cb-location-grid,
.cb-department-grid,
.cb-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cb-staff-card,
.cb-location-card,
.cb-department-card,
.cb-doc-row,
.cb-swap-card,
.cb-run-card {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 20px;
}

.cb-staff-card {
    display: grid;
    gap: 18px;
}

.cb-staff-card-head,
.cb-location-card-head,
.cb-doc-row,
.cb-run-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.cb-staff-card-meta {
    display: grid;
    gap: 8px;
}

.cb-staff-card-meta h3,
.cb-location-card h3,
.cb-doc-title,
.cb-department-title,
.cb-swap-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111a44;
}

.cb-card-divider {
    height: 1px;
    background: var(--cb-line);
}

.cb-member-pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cb-member-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--cb-line);
    background: #fff;
    font-size: 13px;
    color: #76809d;
}

.cb-member-pill .cb-member-pill-name {
    color: #111a44;
    font-weight: 600;
}

.cb-table-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 22px;
}

.cb-table-head,
.cb-table-row {
    display: grid;
    align-items: center;
}

.cb-table-head {
    min-height: 44px;
    color: #9aa3bc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cb-line);
    background: #fff;
}

.cb-table-row {
    min-height: 56px;
    border-top: 1px solid var(--cb-line);
    background: #fff;
}

.cb-table-row:first-child {
    border-top: 0;
}

.cb-availability-table .cb-table-head,
.cb-availability-table .cb-table-row {
    grid-template-columns: 180px repeat(7, minmax(0, 1fr));
}

.cb-rota-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.cb-rota-toolbar-left,
.cb-rota-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cb-rota-toolbar-chip {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--cb-line);
    background: #fff;
    color: #3c4765;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.cb-rota-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 22px;
}

.cb-rota-grid {
    display: grid;
    grid-template-columns: 180px repeat(7, minmax(0, 1fr)) 76px;
}

.cb-rota-head {
    min-height: 58px;
    border-bottom: 1px solid var(--cb-line);
}

.cb-rota-head-cell,
.cb-rota-staff-cell,
.cb-rota-slot,
.cb-rota-hours {
    padding: 12px 14px;
    border-left: 1px solid var(--cb-line);
}

.cb-rota-grid > *:nth-child(9n + 1) {
    border-left: 0;
}

.cb-rota-head-cell {
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #111a44;
}

.cb-rota-head-cell small {
    color: #99a1b8;
    font-size: 12px;
    font-weight: 500;
}

.cb-rota-row {
    min-height: 72px;
    border-bottom: 1px solid var(--cb-line);
}

.cb-rota-staff-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-rota-slot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb-shift-pill {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid;
    padding: 8px 10px;
    display: grid;
    gap: 2px;
    color: #5c49f7;
    background: #f1efff;
    border-color: #c5bcff;
    font-size: 12px;
    line-height: 1.15;
}

.cb-shift-pill strong {
    font-size: 13px;
    font-weight: 700;
}

.cb-shift-pill small {
    color: inherit;
    opacity: 0.88;
}

.cb-shift-pill.orange {
    background: #fff4e7;
    border-color: #ffc86b;
    color: #ef7a00;
}

.cb-shift-pill.green {
    background: #eafcf4;
    border-color: #98ebca;
    color: #0b9f67;
}

.cb-shift-pill.red {
    background: #fff0f0;
    border-color: #ffb8b8;
    color: #ef4444;
}

.cb-shift-pill.draft {
    border-style: dashed;
}

.cb-availability-chip {
    min-height: 32px;
    border-radius: 12px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid;
}

.cb-availability-chip.available {
    background: #eafcf4;
    border-color: #98ebca;
    color: #0b9f67;
}

.cb-availability-chip.unavailable {
    background: #fff0f0;
    border-color: #ffcdcd;
    color: #ef4444;
}

.cb-availability-chip.custom {
    background: #efeaff;
    border-color: #cbbfff;
    color: #6a4df7;
}

.cb-swap-card {
    display: grid;
    gap: 14px;
}

.cb-swap-shifts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.cb-swap-leg {
    min-height: 62px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid;
    display: grid;
    gap: 6px;
}

.cb-swap-leg.give {
    background: #fff0f1;
    border-color: #ffc6cc;
    color: #ef4444;
}

.cb-swap-leg.pick {
    background: #eafcf4;
    border-color: #9de6cb;
    color: #0a9b63;
}

.cb-doc-list,
.cb-run-list,
.cb-compliance-list {
    display: grid;
    gap: 14px;
}

.cb-doc-row,
.cb-run-card {
    align-items: center;
}

.cb-chart-card {
    padding: 18px 20px 24px;
    border-radius: 22px;
    border: 1px solid var(--cb-line);
    background: #fff;
}

.cb-line-chart {
    position: relative;
    height: 290px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(to bottom, rgba(106, 77, 247, 0.10), rgba(106, 77, 247, 0.02)),
        #fff;
}

.cb-line-chart::before {
    content: "";
    position: absolute;
    inset: 18px 22px;
    background-image: linear-gradient(to bottom, rgba(213, 218, 235, 0.75) 1px, transparent 1px);
    background-size: 100% 54px;
    border-radius: 12px;
}

.cb-line-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cb-auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    background: #f7f8fb;
}

.cb-auth-panel {
    width: min(100%, 420px);
    display: grid;
    justify-items: center;
    gap: 22px;
}

.cb-auth-badge {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(180deg, #7356f8, #5d3fef);
    box-shadow: 0 14px 30px rgba(106, 77, 247, 0.22);
}

.cb-auth-badge svg {
    width: 24px;
    height: 24px;
}

.cb-auth-copy {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
}

.cb-auth-copy h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}

.cb-auth-copy p,
.cb-auth-footer {
    margin: 0;
    color: #9aa1b8;
    font-size: 14px;
}

.cb-auth-card {
    width: 100%;
    padding: 28px;
    display: grid;
    gap: 18px;
}

.cb-auth-provider,
.cb-auth-submit {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid var(--cb-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
}

.cb-auth-submit {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(90deg, var(--cb-purple-strong), #855bf6);
}

.cb-auth-provider-icon {
    width: 18px;
    height: 18px;
}

.cb-auth-provider-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cb-auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: #b3bad0;
    font-size: 12px;
    font-weight: 700;
}

.cb-auth-divider span {
    height: 1px;
    background: var(--cb-line);
}

.cb-auth-field {
    display: grid;
    gap: 8px;
    color: #121c45;
    font-size: 14px;
    font-weight: 600;
}

.cb-inline-between {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.cb-inline-between a,
.cb-auth-footer a {
    color: var(--cb-purple);
    text-decoration: none;
    font-weight: 600;
}

.cb-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cb-input-wrap i,
.cb-input-wrap b {
    position: absolute;
    width: 18px;
    height: 18px;
    color: #a1a8c0;
}

.cb-input-wrap i { left: 14px; }
.cb-input-wrap b { right: 14px; }

.cb-auth-field input,
.cb-auth-field select,
.cb-auth-field textarea,
.cb-form-control,
.cb-select,
.cb-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #dfe4f1;
    border-radius: 14px;
    background: #fff;
    padding: 0 14px;
    font: inherit;
    color: #111a44;
}

.cb-input-wrap input {
    padding-left: 42px;
    padding-right: 42px;
}

.cb-auth-field textarea,
.cb-form-control textarea {
    min-height: 120px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.cb-form-grid {
    display: grid;
    gap: 16px;
}

.cb-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cb-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 100;
}

.cb-modal.is-open {
    display: block;
}

.cb-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 24, 41, 0.44);
    backdrop-filter: blur(2px);
}

.cb-modal-dialog {
    position: relative;
    width: min(100% - 24px, 520px);
    margin: 10vh auto 0;
    padding: 0;
    overflow: hidden;
}

.cb-modal-head {
    min-height: 74px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cb-line);
}

.cb-modal-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.cb-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid var(--cb-line);
    background: #fff;
    color: #848ca7;
}

.cb-modal-body {
    padding: 22px;
}

.cb-flash {
    width: 100%;
    min-height: 42px;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
}

.cb-flash-success {
    color: #0f9d67;
    background: #e8faf1;
    border: 1px solid #bfeccf;
}

.cb-flash-error {
    color: #ef4444;
    background: #fff0f0;
    border: 1px solid #ffc8c8;
}

@media (max-width: 1400px) {
    .cb-dashboard-layout {
        grid-template-columns: 1fr;
    }

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

    .cb-staff-grid,
    .cb-location-grid,
    .cb-department-grid,
    .cb-doc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .cb-stat-strip,
    .cb-mini-callout-grid,
    .cb-grid-2,
    .cb-grid-3,
    .cb-grid-4,
    .cb-form-row {
        grid-template-columns: 1fr;
    }

    .cb-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-staff-grid,
    .cb-location-grid,
    .cb-department-grid,
    .cb-doc-grid {
        grid-template-columns: 1fr;
    }

    .cb-rota-grid {
        grid-template-columns: 180px repeat(7, minmax(120px, 1fr)) 76px;
        min-width: 1180px;
    }

    .cb-rota-shell {
        overflow-x: auto;
    }
}

/* Screenshot-aligned rebuild */
.cb-page-shell {
    padding: 36px 34px 48px;
    background: #f7f8fc;
}

.cb-page-header {
    max-width: 940px;
    margin: 0 auto 28px;
}

.cb-page-header h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #121a44;
}

.cb-page-header p {
    margin: 8px 0 0;
    color: #98a1bd;
    font-size: 14px;
    line-height: 1.45;
}

.cb-page-stack,
.cb-app-grid {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    gap: 22px;
}

.cb-app-grid.has-sidebar {
    max-width: 1260px;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
}

.cb-card,
.cb-surface,
.cb-list-panel,
.cb-hero-panel,
.cb-table-panel,
.cb-summary-panel,
.cb-modal-dialog {
    background: #fff;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    box-shadow: 0 10px 32px rgba(91, 109, 248, 0.06);
}

.cb-card,
.cb-surface,
.cb-list-panel,
.cb-summary-panel,
.cb-table-panel {
    padding: 22px 24px;
}

.cb-card-head,
.cb-page-actions,
.cb-head-actions,
.cb-inline-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cb-card-head {
    margin-bottom: 18px;
}

.cb-card-head h2,
.cb-surface h2,
.cb-panel-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: #111a44;
}

.cb-section-copy,
.cb-panel-copy {
    margin: 6px 0 0;
    color: #98a1bd;
    font-size: 13px;
    line-height: 1.5;
}

.cb-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid #e2e6f3;
    background: #fff;
    color: #111a44;
    font: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}

.cb-btn:hover {
    border-color: #cfd6eb;
    background: #fcfcff;
}

.cb-btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #5a60f8 0%, #7d54ea 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(93, 91, 248, 0.18);
}

.cb-btn-primary:hover {
    background: linear-gradient(135deg, #555cf3 0%, #7348e6 100%);
}

.cb-btn-success {
    border-color: transparent;
    background: #0fad74;
    color: #fff;
}

.cb-btn-ghost {
    background: #fff4f4;
    color: #ff4b4b;
    border-color: #ffd6d6;
}

.cb-btn-block {
    width: 100%;
}

.cb-empty-state {
    min-height: 168px;
    border: 1px dashed #dfe4f1;
    border-radius: 18px;
    padding: 22px;
    display: grid;
    place-content: center;
    gap: 8px;
    text-align: center;
    background: #fbfcff;
}

.cb-empty-state.compact {
    min-height: 96px;
}

.cb-empty-state strong {
    color: #121a44;
    font-size: 15px;
}

.cb-empty-state p {
    margin: 0;
    color: #98a1bd;
    font-size: 13px;
    line-height: 1.5;
}

.cb-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

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

.cb-kpi-card {
    min-height: 90px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #e7eaf4;
    background: #fff;
    box-shadow: 0 8px 24px rgba(91, 109, 248, 0.05);
    display: grid;
    gap: 8px;
}

.cb-kpi-card span {
    color: #9ba3be;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cb-kpi-card strong {
    color: #111a44;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cb-kpi-card small {
    color: #98a1bd;
    font-size: 13px;
}

.cb-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.cb-sidebar-stack,
.cb-stack-list {
    display: grid;
    gap: 16px;
}

.cb-list {
    display: grid;
    gap: 12px;
}

.cb-list-row,
.cb-feed-item,
.cb-announcement-card,
.cb-staff-card,
.cb-location-card,
.cb-record-item,
.cb-timeoff-row,
.cb-document-row,
.cb-payroll-row,
.cb-compliance-row,
.cb-setting-row {
    border: 1px solid #ebedf6;
    border-radius: 18px;
    background: #fff;
}

.cb-list-row {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.cb-list-row strong,
.cb-entity-card strong,
.cb-feed-item strong,
.cb-announcement-card strong,
.cb-staff-card strong,
.cb-location-card strong,
.cb-timeoff-row strong,
.cb-document-row strong,
.cb-payroll-row strong,
.cb-compliance-row strong {
    display: block;
    color: #111a44;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.cb-list-row span,
.cb-entity-card span,
.cb-feed-item span,
.cb-announcement-card span,
.cb-staff-card span,
.cb-location-card span,
.cb-timeoff-row span,
.cb-document-row span,
.cb-payroll-row span,
.cb-compliance-row span,
.cb-meta-text {
    color: #98a1bd;
    font-size: 13px;
    line-height: 1.45;
}

.cb-list-row b,
.cb-pay-value {
    color: #111a44;
    font-size: 14px;
    font-weight: 700;
}

.cb-inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cb-pill,
.cb-count-pill,
.cb-status-badge,
.cb-chip {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cb-pill,
.cb-count-pill,
.cb-chip {
    background: #f2f4fb;
    color: #6e7797;
}

.cb-status-badge.is-green { background: #dcfce9; color: #0c9f69; }
.cb-status-badge.is-amber { background: #fff1cb; color: #d98700; }
.cb-status-badge.is-red { background: #ffe1e1; color: #ea4c4c; }
.cb-status-badge.is-purple { background: #ece9ff; color: #6c52e9; }
.cb-status-badge.is-blue { background: #e8f1ff; color: #4d86f5; }

.cb-feed-list {
    display: grid;
    gap: 16px;
}

.cb-announcement-card,
.cb-feed-item {
    padding: 18px 20px;
}

.cb-announcement-card header,
.cb-feed-item header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.cb-announcement-card p,
.cb-feed-item p {
    margin: 12px 0 0;
    color: #3e486a;
    font-size: 14px;
    line-height: 1.7;
}

.cb-announcement-card footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef0f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cb-entity-grid,
.cb-staff-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cb-entity-card,
.cb-staff-card {
    padding: 18px;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(91, 109, 248, 0.04);
    display: grid;
    gap: 12px;
}

.cb-avatar-row {
    display: flex;
    gap: 14px;
    align-items: center;
}

.cb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex: none;
}

.cb-card-divider {
    height: 1px;
    background: #edf0f7;
}

.cb-rota-board {
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(91, 109, 248, 0.05);
    overflow: hidden;
}

.cb-rota-toolbar {
    max-width: 1420px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cb-rota-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cb-rota-grid {
    display: grid;
    grid-template-columns: 220px repeat(7, minmax(110px, 1fr)) 90px;
    min-width: 1180px;
}

.cb-rota-cell,
.cb-rota-head,
.cb-rota-staff {
    min-height: 72px;
    padding: 16px;
    border-right: 1px solid #edf0f7;
    border-bottom: 1px solid #edf0f7;
    background: #fff;
}

.cb-rota-head {
    min-height: 88px;
    font-weight: 700;
    color: #111a44;
    display: grid;
    gap: 4px;
}

.cb-rota-head small {
    color: #98a1bd;
    font-size: 12px;
}

.cb-rota-staff {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cb-shift-pill {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid #cfd7ff;
    background: #eef1ff;
    padding: 8px 10px;
    display: grid;
    align-content: center;
    gap: 2px;
    color: #4c5de2;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.cb-shift-pill small {
    color: #7e88b2;
    font-size: 11px;
    font-weight: 500;
}

.cb-shift-pill.is-green { background: #edfff8; border-color: #a2f0d1; color: #0d9a65; }
.cb-shift-pill.is-amber { background: #fff7e8; border-color: #ffd48a; color: #f08a00; }
.cb-shift-pill.is-red { background: #fff0f0; border-color: #ffb6b6; color: #ef4d4d; }
.cb-shift-pill.is-purple { background: #f2ecff; border-color: #cfbeff; color: #7c4ee5; }
.cb-shift-pill.is-draft { border-style: dashed; }

.cb-table-shell {
    overflow-x: auto;
}

.cb-availability-table,
.cb-availability-matrix {
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
}

.cb-availability-table .cb-table-head,
.cb-availability-table .cb-table-row {
    display: grid;
    grid-template-columns: 180px repeat(7, minmax(100px, 1fr));
}

.cb-table-head > div,
.cb-table-row > div {
    min-height: 62px;
    padding: 14px 16px;
    border-right: 1px solid #edf0f7;
    border-bottom: 1px solid #edf0f7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cb-table-head > div:first-child,
.cb-table-row > div:first-child {
    justify-content: flex-start;
}

.cb-table-head > div {
    font-size: 13px;
    font-weight: 700;
    color: #111a44;
}

.cb-availability-badge {
    width: 100%;
    min-height: 34px;
    border-radius: 12px;
    border: 1px solid #9fe9c8;
    background: #ebfff5;
    color: #0a9f69;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.cb-availability-badge.is-off {
    background: #fff1f1;
    border-color: #ffc8c8;
    color: #ff4a67;
}

.cb-availability-badge.is-time {
    background: #f1edff;
    border-color: #cfc2ff;
    color: #6f53eb;
}

.cb-swap-list,
.cb-document-list,
.cb-location-grid,
.cb-department-list,
.cb-timeoff-list,
.cb-payroll-list,
.cb-compliance-list,
.cb-settings-stack {
    display: grid;
    gap: 16px;
}

.cb-swap-card {
    padding: 18px 20px;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
}

.cb-swap-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 14px;
}

.cb-swap-box {
    min-height: 62px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid #ffd2d2;
    background: #fff3f3;
}

.cb-swap-box.is-pick {
    border-color: #a5efd2;
    background: #edfff8;
}

.cb-timeclock-hero {
    min-height: 246px;
    padding: 34px 24px;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 8px;
}

.cb-timeclock-time {
    font-size: clamp(48px, 8vw, 72px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #111a44;
}

.cb-timeclock-date {
    color: #98a1bd;
    font-size: 14px;
}

.cb-record-group {
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
}

.cb-record-group-title {
    min-height: 52px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #edf0f7;
    font-weight: 700;
    color: #111a44;
}

.cb-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d1d5e5;
}

.cb-dot.is-green { background: #10b981; }
.cb-dot.is-amber { background: #f59e0b; }

.cb-record-item {
    min-height: 72px;
    padding: 16px 18px;
    border: 0;
    border-top: 1px solid #edf0f7;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cb-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-location-card,
.cb-department-card {
    padding: 20px 22px;
}

.cb-location-card footer,
.cb-document-row,
.cb-payroll-row,
.cb-compliance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cb-document-row,
.cb-payroll-row,
.cb-compliance-row {
    padding: 14px 18px;
}

.cb-settings-shell {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.cb-settings-nav {
    padding: 18px;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    display: grid;
    gap: 6px;
}

.cb-settings-nav h3 {
    margin: 0 0 8px;
    color: #9aa2bb;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cb-settings-link {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5d6788;
    text-decoration: none;
    font-weight: 500;
}

.cb-settings-link.is-active {
    background: #f0ecff;
    color: #5f52ec;
    font-weight: 600;
}

.cb-settings-pane {
    display: grid;
    gap: 22px;
}

.cb-setting-block {
    padding: 22px 24px;
    border: 1px solid #e7eaf4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(91, 109, 248, 0.04);
}

.cb-form-stack {
    display: grid;
    gap: 14px;
}

.cb-form-stack label,
.cb-field {
    display: grid;
    gap: 8px;
    color: #111a44;
    font-size: 14px;
    font-weight: 600;
}

.cb-form-stack input,
.cb-form-stack select,
.cb-form-stack textarea {
    min-height: 46px;
    border: 1px solid #dde2ef;
    border-radius: 14px;
    background: #fff;
    padding: 0 14px;
    font: inherit;
    color: #111a44;
}

.cb-form-stack textarea {
    min-height: 118px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.cb-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5f6887;
    font-size: 14px;
}

.cb-check-row input {
    min-height: auto;
    width: 16px;
    height: 16px;
}

.cb-modal-dialog {
    width: min(100% - 24px, 560px);
    margin-top: 9vh;
}

.cb-modal-head {
    min-height: 72px;
    padding: 0 22px;
}

.cb-modal-head h2 {
    font-size: 16px;
    font-weight: 700;
}

.cb-modal-body {
    padding: 20px 22px 24px;
}

.cb-page-header {
    display: grid;
    gap: 8px;
}

.cb-page-header.is-centered {
    width: min(100%, 980px);
    margin-left: auto;
    margin-right: auto;
}

.cb-page-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1ecff;
    color: #7b68f8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cb-module-shell {
    width: min(100%, 980px);
    margin: 0 auto;
}

.cb-module-actionbar {
    margin-top: -4px;
}

.cb-section-heading-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cb-request-panel,
.cb-record-section {
    padding: 0;
    overflow: hidden;
}

.cb-request-panel .cb-section-heading,
.cb-record-section .cb-record-head {
    padding: 18px 22px;
    border-bottom: 1px solid #edf0f7;
}

.cb-request-row-strong,
.cb-record-item {
    padding: 18px 22px;
}

.cb-request-row-strong + .cb-request-row-strong,
.cb-record-item + .cb-record-item,
.cb-compliance-row + .cb-compliance-row {
    border-top: 1px solid #edf0f7;
}

.cb-inline-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    margin-right: 8px;
    border-radius: 999px;
    background: #f3f0ff;
    color: #7558f6;
    font-size: 11px;
    font-weight: 600;
}

.cb-clock-hero {
    padding: 42px 32px;
    text-align: center;
}

.cb-clock-hero strong {
    font-size: clamp(48px, 7vw, 76px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.cb-clock-hero span {
    display: block;
    margin-top: 8px;
    margin-bottom: 26px;
    color: #98a2bd;
    font-size: 14px;
}

.cb-tight-kpi-grid .cb-kpi-card {
    min-height: 128px;
}

.cb-two-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cb-location-card {
    padding: 22px 22px 18px;
    min-height: 186px;
}

.cb-location-card strong {
    display: block;
    margin: 10px 0 8px;
    font-size: 18px;
    line-height: 1.15;
}

.cb-location-card p {
    margin: 0 0 22px;
    color: #8a94b0;
    line-height: 1.55;
}

.cb-location-card footer {
    padding-top: 16px;
    border-top: 1px solid #edf0f7;
}

.cb-location-staff {
    color: #8a94b0;
    font-weight: 600;
}

.cb-settings-shell-modern .cb-settings-nav,
.cb-settings-shell-modern .cb-setting-block {
    border-radius: 24px;
}

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

.cb-staff-card {
    min-height: 120px;
}

.cb-staff-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}

.cb-staff-card-meta p {
    margin: 0;
    color: #9099b3;
}

.cb-feed-stream {
    width: min(100%, 720px);
    margin: 0 auto;
}

@media (max-width: 1280px) {
    .cb-app-grid.has-sidebar,
    .cb-dashboard-grid {
        grid-template-columns: 1fr;
        max-width: 980px;
    }
}

@media (max-width: 1120px) {
    .cb-entity-grid,
    .cb-staff-grid,
    .cb-kpi-grid,
    .cb-location-grid,
    .cb-settings-shell {
        grid-template-columns: 1fr;
    }

    .cb-two-grid,
    .cb-staff-grid-wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .cb-page-shell {
        padding: 20px 16px 36px;
    }

    .cb-dashboard-grid,
    .cb-app-grid.has-sidebar,
    .cb-settings-shell {
        grid-template-columns: 1fr;
    }

    .cb-list-row,
    .cb-record-item,
    .cb-document-row,
    .cb-payroll-row,
    .cb-compliance-row,
    .cb-card-head,
    .cb-page-actions,
    .cb-head-actions,
    .cb-inline-actions,
    .cb-location-card footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .cb-swap-flow {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .cb-shell {
        grid-template-columns: 1fr;
    }

    .cb-sidebar {
        display: none;
    }

    .cb-topbar {
        grid-template-columns: 28px minmax(0, 1fr);
        height: auto;
        padding: 12px 16px;
    }

    .cb-topbar-right {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cb-page-shell {
        padding: 18px 16px 32px;
    }

    .cb-page-intro,
    .cb-rota-toolbar {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .cb-kpi-row {
        grid-template-columns: 1fr;
    }

    .cb-availability-table .cb-table-head,
    .cb-availability-table .cb-table-row {
        grid-template-columns: 160px repeat(7, minmax(96px, 1fr));
        min-width: 920px;
    }

    .cb-table-shell {
        overflow-x: auto;
    }
}

/* Final shell overrides for the simplified app system */
.cb-shell {
    grid-template-columns: 224px minmax(0, 1fr);
    background: #f6f7fb;
}

.cb-sidebar {
    padding: 18px 12px 14px;
    background: #ffffff;
    border-right: 1px solid #eceaf5;
}

.cb-sidebar-brand {
    gap: 12px;
    padding: 0 10px 16px;
    margin-bottom: 8px;
}

.cb-sidebar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    box-shadow: none;
}

.cb-sidebar-brand-wordmark {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cb-sidebar-nav {
    gap: 22px;
}

.cb-nav-group {
    gap: 8px;
}

.cb-nav-group h2 {
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #a3abc1;
}

.cb-nav-link {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 14px;
    color: #4f5874;
    font-size: 14px;
    font-weight: 500;
}

.cb-nav-link.is-active {
    background: #efe9ff;
    color: #6a4df5;
}

.cb-sidebar-footer {
    gap: 8px;
    padding-top: 12px;
}

.cb-topbar {
    grid-template-columns: 28px minmax(320px, 448px) 1fr;
    gap: 18px;
    min-height: 56px;
    padding: 0 28px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid #eceaf5;
    backdrop-filter: blur(12px);
}

.cb-topbar-close {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #8e97b0;
}

.cb-topbar-search input {
    height: 36px;
    border-radius: 12px;
    background: #f8f8fc;
}

.cb-topbar-right {
    gap: 12px;
    justify-self: end;
}

.cb-topbar-chip {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    background: #f8f8fc;
}

.cb-topbar-icon-button {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.cb-topbar-user {
    min-height: 36px;
    padding: 0 6px 0 4px;
    border: 0;
    background: transparent;
}

.cb-topbar-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.cb-topbar-user-copy strong {
    font-size: 14px;
}

.cb-topbar-user-copy small {
    font-size: 12px;
}

.cb-page-shell {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 34px 28px 48px;
}

.cb-page-header {
    gap: 6px;
}

.cb-page-header.is-centered {
    width: min(980px, 100%);
    margin: 0 auto;
}

.cb-page-header h1 {
    font-size: clamp(36px, 4.4vw, 58px);
    letter-spacing: -0.06em;
    line-height: 0.98;
}

.cb-page-header p {
    max-width: 760px;
    font-size: 15px;
    line-height: 1.55;
    color: #77819d;
}

.cb-page-actions {
    gap: 12px;
}

.cb-module-shell {
    gap: 24px;
}

.cb-dashboard-shell {
    gap: 26px;
}

.cb-dashboard-stat-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.cb-dashboard-stat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 18px;
    border: 1px solid #e9e7f2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(24, 29, 58, 0.04);
}

.cb-dashboard-stat-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.cb-dashboard-stat-icon.tone-purple {
    background: #efeaff;
    color: #6a4df5;
}

.cb-dashboard-stat-icon.tone-amber {
    background: #fff3dc;
    color: #e09a16;
}

.cb-dashboard-stat-icon.tone-blue {
    background: #ebf2ff;
    color: #4e82ff;
}

.cb-dashboard-stat-icon.tone-rose {
    background: #ffecef;
    color: #ff5d68;
}

.cb-dashboard-stat-icon.tone-green {
    background: #e9faf1;
    color: #16b86e;
}

.cb-dashboard-stat-copy {
    display: grid;
    gap: 8px;
}

.cb-dashboard-stat-copy strong {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
}

.cb-dashboard-stat-copy span {
    color: #717b98;
    font-size: 14px;
    line-height: 1.45;
}

.cb-dashboard-stat-arrow {
    margin-left: auto;
    color: #c1c7da;
    font-size: 18px;
}

.cb-dashboard-layout-refined {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 24px;
    align-items: start;
}

.cb-dashboard-primary,
.cb-dashboard-secondary {
    display: grid;
    gap: 24px;
}

.cb-dashboard-schedule-card,
.cb-dashboard-side-card {
    overflow: hidden;
}

.cb-dashboard-shift-list {
    display: grid;
}

.cb-dashboard-shift-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-top: 1px solid #efedf6;
}

.cb-dashboard-person-badge {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #efeaff;
    color: #6a4df5;
    font-size: 13px;
    font-weight: 800;
}

.cb-dashboard-shift-copy {
    display: grid;
    gap: 4px;
}

.cb-dashboard-shift-copy strong {
    font-size: 15px;
    font-weight: 700;
}

.cb-dashboard-shift-copy span,
.cb-dashboard-shift-meta span {
    color: #7d86a1;
    font-size: 14px;
}

.cb-dashboard-kpi-strips {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.cb-dashboard-mini-stat {
    padding: 18px 20px;
    display: grid;
    gap: 10px;
}

.cb-dashboard-mini-stat span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8f98b4;
}

.cb-dashboard-mini-stat strong {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.06em;
}

.cb-dashboard-mini-stat strong.is-amber {
    color: #f08f1d;
}

.cb-dashboard-mini-stat strong.is-rose {
    color: #ff5d68;
}

.cb-dashboard-mini-stat small {
    color: #7f89a7;
    font-size: 14px;
}

.cb-dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 24px 24px;
}

.cb-dashboard-quick-action {
    display: grid;
    gap: 8px;
    min-height: 104px;
    padding: 18px;
    border-radius: 18px;
    background: #f8f8fd;
    border: 1px solid #efedf6;
}

.cb-dashboard-quick-action strong {
    font-size: 16px;
    font-weight: 700;
}

.cb-dashboard-quick-action span {
    color: #6a4df5;
    font-size: 13px;
    font-weight: 600;
}

.cb-dashboard-action-list {
    display: grid;
}

.cb-dashboard-action-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 24px;
    border-top: 1px solid #efedf6;
}

.cb-dashboard-action-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-top: 6px;
    background: #6a4df5;
}

.cb-dashboard-action-item.tone-blue .cb-dashboard-action-dot {
    background: #4e82ff;
}

.cb-dashboard-action-item.tone-amber .cb-dashboard-action-dot {
    background: #f08f1d;
}

.cb-dashboard-action-item.tone-rose .cb-dashboard-action-dot {
    background: #ff5d68;
}

.cb-dashboard-action-copy {
    display: grid;
    gap: 5px;
}

.cb-dashboard-action-copy strong {
    font-size: 15px;
    font-weight: 700;
}

.cb-dashboard-action-copy span {
    color: #77819d;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 1240px) {
    .cb-dashboard-stat-row,
    .cb-dashboard-kpi-strips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cb-dashboard-layout-refined {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .cb-shell {
        grid-template-columns: 1fr;
    }

    .cb-sidebar {
        position: relative;
        height: auto;
    }

    .cb-page-shell {
        padding: 24px 18px 36px;
    }

    .cb-topbar {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 14px;
        padding: 0 18px;
    }

    .cb-topbar-right {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: flex-end;
    }

    .cb-dashboard-stat-row,
    .cb-dashboard-kpi-strips,
    .cb-dashboard-quick-grid {
        grid-template-columns: 1fr;
    }
}

/* Final dashboard repair pass */
.cb-dashboard-hero {
    display: grid;
    gap: 8px;
    width: min(960px, 100%);
    margin: 0 auto 24px;
    text-align: left;
}

.cb-dashboard-hero h1 {
    margin: 0;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 0.98;
    letter-spacing: -0.07em;
    color: #17204d;
}

.cb-dashboard-hero p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #7b84a0;
}

.cb-dashboard-shell {
    gap: 20px;
}

.cb-dashboard-stat-row {
    gap: 14px;
}

.cb-dashboard-stat {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
}

.cb-dashboard-stat-top {
    display: grid;
    grid-template-columns: 40px 1fr 16px;
    align-items: center;
    gap: 12px;
}

.cb-dashboard-stat-icon {
    width: 40px;
    height: 40px;
    padding: 9px;
    font-size: 0;
}

.cb-dashboard-stat-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.9;
}

.cb-dashboard-stat strong {
    display: block;
    margin: 0;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.07em;
    color: #17204d;
}

.cb-dashboard-stat-arrow {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c4cbe0;
    transform: rotate(180deg);
}

.cb-dashboard-stat-arrow svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

.cb-dashboard-stat-label {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: #7a84a1;
}

.cb-dashboard-layout-refined {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
}

.cb-dashboard-primary,
.cb-dashboard-secondary {
    gap: 20px;
}

.cb-dashboard-schedule-card .cb-card-head,
.cb-dashboard-side-card .cb-card-head {
    padding-bottom: 18px;
}

.cb-dashboard-empty-state {
    min-height: 168px;
}

.cb-dashboard-kpi-strips {
    gap: 14px;
}

.cb-dashboard-mini-stat {
    min-height: 152px;
    padding: 18px;
}

.cb-dashboard-mini-stat strong {
    font-size: 30px;
}

.cb-dashboard-mini-stat small {
    font-size: 13px;
    line-height: 1.45;
}

.cb-dashboard-quick-grid {
    gap: 10px;
    padding: 0 24px 24px;
}

.cb-dashboard-quick-action {
    min-height: 92px;
    padding: 16px;
    border-radius: 16px;
}

.cb-dashboard-quick-action strong {
    font-size: 15px;
    line-height: 1.3;
    color: #17204d;
}

.cb-dashboard-action-item {
    gap: 12px;
    padding: 14px 24px;
}

.cb-dashboard-action-copy strong {
    font-size: 14px;
    line-height: 1.35;
}

.cb-dashboard-action-copy span {
    font-size: 13px;
}

@media (max-width: 1240px) {
    .cb-dashboard-hero {
        width: 100%;
    }

    .cb-dashboard-layout-refined {
        grid-template-columns: 1fr;
    }
}

/* Rota Builder v2 */
body.cb-page-body-rota {
    background: #f5f7fd;
}

.cb-page-body-rota .cb-page-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 10px 20px 10px !important;
}

.cb-page-body-rota .cb-page-stack {
    gap: 10px;
}

.cb-page-body-rota .cb-shell-main,
.cb-page-body-rota .cb-page-stack,
.cb-page-body-rota .cb-rota-v2,
.cb-page-body-rota .cb-rota-v2-shell,
.cb-page-body-rota .cb-rota-v2-boardwrap {
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cb-page-body-rota .cb-page-header,
.cb-page-body-rota .cb-page-hero,
.cb-page-body-rota .cb-page-summary {
    display: none;
}

.cb-page-body-rota .cb-rota-v2 {
    display: grid;
    gap: 8px;
}

.cb-page-body-rota .cb-rota-v2-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 2px 0 8px;
    flex-wrap: nowrap;
}

.cb-page-body-rota .cb-rota-v2-weeknav,
.cb-page-body-rota .cb-rota-v2-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cb-page-body-rota .cb-rota-v2-weeknav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
}

.cb-page-body-rota .cb-rota-v2-location-chip {
    width: fit-content;
    margin-left: 6px;
}

.cb-page-body-rota .cb-rota-v2-actions {
    justify-content: flex-end;
    align-self: center;
    max-width: none;
    gap: 10px;
    flex-wrap: nowrap;
    justify-self: end;
    flex: 1 1 auto;
    min-width: 0;
}

.cb-page-body-rota .cb-rota-v2-actions > * {
    order: 0;
}

.cb-page-body-rota .cb-rota-v2-arrow,
.cb-page-body-rota .cb-rota-v2-chip,
.cb-page-body-rota .cb-rota-v2-btn,
.cb-page-body-rota .cb-rota-v2-badge {
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid #e7ebf5;
    background: #ffffff;
    color: #1a234f;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v2-arrow {
    width: 34px;
    padding: 0;
    color: #6b7696;
}

.cb-page-body-rota .cb-rota-v2-arrow-next {
    transform: rotate(180deg);
}

.cb-page-body-rota .cb-rota-v2-weeknav strong {
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #17204d;
    margin: 0;
    white-space: nowrap;
}

.cb-page-body-rota .cb-rota-v2-chip {
    box-shadow: 0 6px 14px rgba(97, 107, 148, 0.03);
}

.cb-page-body-rota .cb-rota-v2-chip svg,
.cb-page-body-rota .cb-rota-v2-arrow svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.9;
}

.cb-page-body-rota .cb-rota-v2-badge {
    background: #fff3cf;
    border-color: #ffe1a1;
    color: #d48600;
}

.cb-page-body-rota .cb-rota-v2-badge-cost {
    background: #efeaff;
    border-color: #e1d7ff;
    color: #6d54f6;
}

.cb-page-body-rota .cb-rota-v2-badge-draft {
    background: #fff4d7;
    border-color: #ffe1a8;
    color: #d38900;
}

.cb-page-body-rota .cb-rota-v2-btn {
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 28px rgba(95, 78, 241, 0.18);
}

.cb-page-body-rota .cb-rota-v2-btn-purple {
    background: linear-gradient(135deg, #6a55f6 0%, #835df0 100%);
}

.cb-page-body-rota .cb-rota-v2-btn-amber {
    background: linear-gradient(135deg, #f4ab1a 0%, #e68e00 100%);
    box-shadow: none;
}

.cb-page-body-rota .cb-rota-v2-shell {
    position: relative;
    display: block;
}

.cb-page-body-rota .cb-rota-v2-boardwrap {
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 10px;
    padding-left: 0;
}

.cb-page-body-rota .cb-rota-v2-board {
    background: #fff;
    border: 1px solid #e8edf8;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(51, 70, 122, 0.07);
    min-width: 1320px;
    width: 100%;
}

.cb-page-body-rota .cb-rota-v2-grid {
    display: grid;
    grid-template-columns: 172px repeat(7, minmax(118px, 1fr)) 74px;
}

.cb-page-body-rota .cb-rota-v2-grid-head {
    min-height: 74px;
    background: #fff;
    border-bottom: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-grid-head > div,
.cb-page-body-rota .cb-rota-v2-grid-foot > div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 7px;
}

.cb-page-body-rota .cb-rota-v2-col-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9aa3bc;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-col-staff {
    justify-content: flex-start !important;
    padding-left: 12px !important;
}

.cb-page-body-rota .cb-rota-v2-col-hours {
    justify-content: flex-end !important;
    padding-right: 10px !important;
}

.cb-page-body-rota .cb-rota-v2-dayhead {
    flex-direction: column;
    gap: 2px;
}

.cb-page-body-rota .cb-rota-v2-dayhead span {
    font-size: 10px;
    color: #8089a7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cb-page-body-rota .cb-rota-v2-dayhead strong {
    font-size: 19px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #131c46;
}

.cb-page-body-rota .cb-rota-v2-grid-row {
    min-height: 71px;
    border-bottom: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-grid-row:last-of-type {
    border-bottom: 0;
}

.cb-page-body-rota .cb-rota-v2-grid-row > div {
    border-right: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-grid-row > div:last-child,
.cb-page-body-rota .cb-rota-v2-grid-head > div:last-child,
.cb-page-body-rota .cb-rota-v2-grid-foot > div:last-child {
    border-right: 0;
}

.cb-page-body-rota .cb-rota-v2-staffcell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 14px;
}

.cb-page-body-rota .cb-rota-v2-avatar {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-violet,
.cb-page-body-rota .cb-rota-v2-avatar.tone-indigo {
    background: #6e57f5;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-blue {
    background: #4180ff;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-teal {
    background: #16b3c6;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-amber {
    background: #ff7f19;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-pink {
    background: #eb3d8d;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-lime {
    background: #86ca0a;
}

.cb-page-body-rota .cb-rota-v2-avatar.tone-mint {
    background: #16b97f;
}

.cb-page-body-rota .cb-rota-v2-staffcopy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.cb-page-body-rota .cb-rota-v2-staffcopy strong {
    font-size: 13px;
    line-height: 1.1;
    color: #19224f;
}

.cb-page-body-rota .cb-rota-v2-staffcopy span {
    font-size: 11px;
    line-height: 1.2;
    color: #8b94b0;
}

.cb-page-body-rota .cb-rota-v2-cell {
    position: relative;
    min-height: 71px;
    padding: 5px;
    background: #fff;
}

.cb-page-body-rota .cb-rota-v2-cell.is-drop-target {
    background: #f5f1ff;
}

.cb-page-body-rota .cb-rota-v2-shift,
.cb-page-body-rota .cb-rota-v2-slot {
    width: 100%;
    height: 100%;
    min-height: 60px;
    border-radius: 13px;
    border: 1px solid #d7def7;
    background: #f5f7ff;
    padding: 7px 9px;
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 0;
    text-align: left;
    position: relative;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.cb-page-body-rota .cb-rota-v2-shift:hover,
.cb-page-body-rota .cb-rota-v2-slot:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(58, 74, 126, 0.06);
}

.cb-page-body-rota .cb-rota-v2-shift.is-dragging {
    opacity: 0.5;
}

.cb-page-body-rota .cb-rota-v2-slot {
    border-style: dashed;
    background: transparent;
    border-color: #d9e0f7;
    color: #b4bccc;
    font-size: 28px;
    place-content: center;
    justify-items: center;
}

.cb-page-body-rota .cb-rota-v2-shift strong {
    font-size: 11px;
    line-height: 1.05;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-shift span,
.cb-page-body-rota .cb-rota-v2-shift small {
    font-size: 10px;
    line-height: 1.1;
    color: inherit;
}

.cb-page-body-rota .cb-rota-v2-shift small {
    opacity: 0.74;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-blue {
    color: #5b6cf6;
    background: #eef2ff;
    border-color: #b8c8ff;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-violet {
    color: #7a5bf4;
    background: #f0edff;
    border-color: #cabfff;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-amber,
.cb-page-body-rota .cb-rota-v2-shift.tone-brown {
    color: #f08a00;
    background: #fff7e9;
    border-color: #f6cc74;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-mint,
.cb-page-body-rota .cb-rota-v2-shift.tone-teal {
    color: #18a57f;
    background: #ecfff7;
    border-color: #9ce7cd;
}

.cb-page-body-rota .cb-rota-v2-shift.tone-rose,
.cb-page-body-rota .cb-rota-v2-shift.tone-pink {
    color: #ff5d73;
    background: #fff1f4;
    border-color: #ffb5c1;
}

.cb-page-body-rota .cb-rota-v2-shift.is-draft {
    border-style: dashed;
}

.cb-page-body-rota.is-hiding-drafts .cb-rota-v2-shift.is-draft {
    display: none;
}

.cb-page-body-rota .cb-rota-v2-shift-tools {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}

.cb-page-body-rota .cb-rota-v2-shift-tools em {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 6px rgba(67, 70, 98, 0.06);
    position: relative;
    overflow: hidden;
    text-indent: -999px;
    font-size: 0;
}

.cb-page-body-rota .cb-rota-v2-shift-tools em::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(1)::before {
    content: "✎";
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(2)::before {
    content: "×";
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(3)::before {
    content: "+";
}

.cb-page-body-rota .cb-rota-v2-hourscell {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 2px;
    padding: 12px 12px 12px 0;
}

.cb-page-body-rota .cb-rota-v2-hourscell strong {
    font-size: 13px;
    color: #1b234e;
}

.cb-page-body-rota .cb-rota-v2-hourscell span {
    font-size: 11px;
    color: #9aa2ba;
}

.cb-page-body-rota .cb-rota-v2-hourscell.is-over strong {
    color: #f09100;
}

.cb-page-body-rota .cb-rota-v2-grid-foot {
    min-height: 58px;
    border-top: 1px solid #edf1f8;
    background: #fff;
}

.cb-page-body-rota .cb-rota-v2-daytotal {
    display: grid !important;
    align-content: center;
    justify-items: center;
    gap: 2px;
}

.cb-page-body-rota .cb-rota-v2-daytotal strong {
    font-size: 14px;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-daytotal span {
    font-size: 11px;
    color: #96a0b9;
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(1)::before {
    content: "\270E";
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(2)::before {
    content: "\00D7";
}

.cb-page-body-rota .cb-rota-v2-shift-tools em:nth-child(3)::before {
    color: #7b60f2;
}

.cb-page-body-rota .cb-rota-v2-hourscell {
    gap: 1px;
    padding: 8px 8px 8px 0;
}

.cb-page-body-rota .cb-rota-v2-hourscell strong {
    font-size: 12px;
}

.cb-page-body-rota .cb-rota-v2-hourscell span {
    font-size: 10px;
}

.cb-page-body-rota .cb-rota-v2-grid-foot {
    min-height: 48px;
}

.cb-page-body-rota .cb-rota-v2-daytotal strong {
    font-size: 12px;
}

.cb-page-body-rota .cb-rota-v2-daytotal span {
    font-size: 10px;
}

.cb-page-body-rota .cb-rota-v2-actions form {
    display: inline-flex;
}

.cb-page-body-rota .cb-rota-v2-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, calc(100vw - 18px));
    height: 100vh;
    background: #fff;
    border: 0;
    border-left: 1px solid #e8edf8;
    border-radius: 0;
    box-shadow: -16px 0 30px rgba(39, 54, 96, 0.08);
    overflow: hidden;
    z-index: 80;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
}

.cb-page-body-rota .cb-rota-v2-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.cb-page-body-rota .cb-rota-v2-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 49, 0.18);
    border: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 72;
}

.cb-page-body-rota.cb-rota-v2-drawer-open .cb-rota-v2-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 42px;
    align-items: center;
    border-bottom: 1px solid #edf1f8;
    padding: 0 18px;
    gap: 12px;
    min-height: 48px;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs > button {
    height: 48px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #8a93ad;
    font-size: 14px;
    font-weight: 600;
}

.cb-page-body-rota .cb-rota-v2-drawer-tabs > button.is-active {
    color: #6a55f6;
    border-bottom-color: #6a55f6;
}

.cb-page-body-rota .cb-rota-v2-drawer-close {
    width: 42px;
    justify-self: end;
    font-size: 0 !important;
    position: relative;
}

.cb-page-body-rota .cb-rota-v2-drawer-close::before {
    content: "×";
    font-size: 24px;
    line-height: 1;
    color: #9ea7bd;
}

.cb-page-body-rota .cb-rota-v2-drawer-body {
    display: none;
    height: calc(100% - 49px);
    overflow-y: auto;
    padding: 18px;
}

.cb-page-body-rota .cb-rota-v2-drawer-close::before {
    content: "\00D7";
}

.cb-page-body-rota .cb-rota-v2-drawer-close {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ea7bd;
}

.cb-page-body-rota .cb-rota-v2-drawer-close::before {
    content: none;
}

.cb-page-body-rota .cb-rota-v2-drawer-close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.cb-page-body-rota .cb-rota-v2-drawer-body.is-active {
    display: block;
}

.cb-page-body-rota .cb-rota-v2-drawer-head {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.cb-page-body-rota .cb-rota-v2-drawer-head h3 {
    margin: 0;
    font-size: 18px;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-drawer-head p {
    margin: 0;
    font-size: 13px;
    color: #8d96b2;
}

.cb-page-body-rota .cb-rota-v2-drawer-form,
.cb-page-body-rota .cb-rota-v2-timeclock-list {
    display: grid;
    gap: 14px;
}

.cb-page-body-rota .cb-rota-v2-field,
.cb-page-body-rota .cb-rota-v2-field-inline > div,
.cb-page-body-rota .cb-rota-v2-timegrid label {
    display: grid;
    gap: 7px;
}

.cb-page-body-rota .cb-rota-v2-field > span,
.cb-page-body-rota .cb-rota-v2-field-inline span,
.cb-page-body-rota .cb-rota-v2-timegrid span,
.cb-page-body-rota .cb-rota-v2-drawer-block h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-field input,
.cb-page-body-rota .cb-rota-v2-field select,
.cb-page-body-rota .cb-rota-v2-field textarea,
.cb-page-body-rota .cb-rota-v2-timegrid input {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid #e4eaf5;
    background: #fff;
    padding: 0 14px;
    color: #1c2551;
    font-size: 14px;
}

.cb-page-body-rota .cb-rota-v2-field textarea {
    min-height: 104px;
    padding-top: 12px;
    resize: vertical;
}

.cb-page-body-rota .cb-rota-v2-drawer-block {
    display: grid;
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-timegrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-hourspill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #ffd78c;
    background: #fff8e8;
    color: #ea9400;
    font-size: 14px;
    font-weight: 700;
}

.cb-page-body-rota .cb-rota-v2-rolegrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-role {
    min-height: 34px;
    border-radius: 12px;
    border: 1px solid #e2e8f5;
    background: #fff;
    color: #1d2753;
    font-size: 13px;
    padding: 0 10px;
    justify-content: flex-start;
}

.cb-page-body-rota .cb-rota-v2-role.is-active {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}

.cb-page-body-rota .cb-rota-v2-role.tone-blue { color: #5b6cf6; }
.cb-page-body-rota .cb-rota-v2-role.tone-violet { color: #7a5bf4; }
.cb-page-body-rota .cb-rota-v2-role.tone-amber,
.cb-page-body-rota .cb-rota-v2-role.tone-brown { color: #f08a00; }
.cb-page-body-rota .cb-rota-v2-role.tone-mint,
.cb-page-body-rota .cb-rota-v2-role.tone-teal { color: #17a380; }
.cb-page-body-rota .cb-rota-v2-role.tone-rose,
.cb-page-body-rota .cb-rota-v2-role.tone-pink { color: #ff5d73; }

.cb-page-body-rota .cb-rota-v2-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cb-page-body-rota .cb-rota-v2-mini,
.cb-page-body-rota .cb-rota-v2-secondary {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #e6ebf5;
    background: #f5f2ff;
    color: #6f58f6;
    font-size: 13px;
    font-weight: 600;
}

.cb-page-body-rota .cb-rota-v2-breakempty {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px dashed #e2e8f5;
    border-radius: 12px;
    background: #fbfcff;
    color: #a0a8bf;
    font-size: 13px;
}

.cb-page-body-rota .cb-rota-v2-drawer-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 24%);
}

.cb-page-body-rota .cb-rota-v2-submit {
    min-height: 40px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #6a55f6 0%, #845ef0 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 18px 32px rgba(96, 76, 240, 0.24);
}

.cb-page-body-rota .cb-rota-v2-timeclock-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-timeclock-copy,
.cb-page-body-rota .cb-rota-v2-timeclock-meta {
    display: grid;
    gap: 3px;
}

.cb-page-body-rota .cb-rota-v2-timeclock-copy strong,
.cb-page-body-rota .cb-rota-v2-timeclock-meta strong {
    font-size: 14px;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-timeclock-copy span,
.cb-page-body-rota .cb-rota-v2-timeclock-meta span {
    font-size: 12px;
    color: #8e97b2;
}

.cb-page-body-rota .cb-rota-v2-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: lowercase;
}

.cb-page-body-rota .cb-rota-v2-status.completed {
    color: #17674c;
    background: #dff8ea;
}

.cb-page-body-rota .cb-rota-v2-status.open,
.cb-page-body-rota .cb-rota-v2-status.active {
    color: #17674c;
    background: #dff8ea;
}

.cb-page-body-rota .cb-rota-v2-status.flagged,
.cb-page-body-rota .cb-rota-v2-status.edited {
    color: #d18600;
    background: #fff1c8;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #edf1f8;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot > div {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 14px 8px 8px;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot strong {
    font-size: 32px;
    letter-spacing: -0.06em;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot span {
    font-size: 12px;
    color: #8d96b1;
}

.cb-page-body-rota .cb-rota-v2-timeclock-foot .is-highlight strong {
    color: #6a55f6;
}

.cb-page-body-rota .cb-rota-v2-autoschedule {
    width: min(560px, calc(100vw - 32px));
    border-radius: 24px;
    padding: 28px;
    border: 1px solid #e7ebf5;
    box-shadow: 0 32px 80px rgba(28, 32, 54, 0.18);
}

.cb-page-body-rota .cb-rota-v2-autoschedule .cb-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #ebeff8;
    background: #fff;
    color: #a2aac0;
    font-size: 0;
}

.cb-page-body-rota .cb-rota-v2-autoschedule .cb-modal-close::before {
    content: "×";
    font-size: 22px;
}

.cb-page-body-rota .cb-rota-v2-auto-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6a55f6 0%, #845ef0 100%);
    color: #fff;
    font-size: 0;
    margin: 0 auto 16px;
}

.cb-page-body-rota .cb-rota-v2-auto-icon::before {
    content: "✣";
    font-size: 24px;
    line-height: 1;
}

.cb-page-body-rota .cb-rota-v2-autoschedule h3 {
    margin: 0 0 10px;
    text-align: center;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #16204c;
}

.cb-page-body-rota .cb-rota-v2-autoschedule > p {
    margin: 0 auto 18px;
    max-width: 420px;
    text-align: center;
    color: #7e88a7;
    font-size: 16px;
    line-height: 1.65;
}

.cb-page-body-rota .cb-rota-v2-auto-panel {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid #eceff8;
    border-radius: 18px;
    background: #fbfcff;
}

.cb-page-body-rota .cb-rota-v2-auto-panel strong {
    font-size: 16px;
    color: #17204d;
}

.cb-page-body-rota .cb-rota-v2-auto-panel ul {
    margin: 0;
    padding: 0 0 0 18px;
    color: #78819e;
    display: grid;
    gap: 8px;
}

.cb-page-body-rota .cb-rota-v2-auto-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}

@media (max-width: 1480px) {
    .cb-page-body-rota .cb-rota-v2-grid {
        grid-template-columns: 154px repeat(7, minmax(86px, 1fr)) 66px;
    }
}

@media (max-width: 1280px) {
    .cb-page-body-rota .cb-rota-v2-drawer {
        top: 0;
        right: 0;
        width: min(310px, calc(100vw - 12px));
        height: 100vh;
    }
}

@media (max-width: 900px) {
    .cb-page-body-rota .cb-page-shell {
        padding: 14px 12px 28px;
    }

    .cb-page-body-rota .cb-rota-v2-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-page-body-rota .cb-rota-v2-grid {
        min-width: 980px;
    }

    .cb-page-body-rota .cb-rota-v2-drawer {
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        border-left: 0;
        border-top: 0;
        border-radius: 0;
        transform: translateY(calc(100% + 24px));
    }

    .cb-page-body-rota .cb-rota-v2-drawer.is-open {
        transform: translateY(0);
    }
}