/* ==========================================================
   Work Schedules
   Office aesthetic
   ========================================================== */

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

.schedule-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.schedule-hero::before {
    display: none;
}

.schedule-hero > * {
    position: relative;
    z-index: 1;
}

.schedule-chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--app-primary) 18%, var(--border));
    border-radius: 999px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--app-primary) 8%, transparent);
    color: var(--app-primary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.schedule-hero h1 {
    margin: 10px 0 4px;
    color: var(--text);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.schedule-hero p {
    max-width: 580px;
    margin: 0;
    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.7;
}

.schedule-btn,
.schedule-mini-btn,
.schedule-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    transition: .18s ease;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .04em;
}

.schedule-btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: .84rem;
}

.schedule-mini-btn,
.schedule-row-action {
    min-height: 34px;
    padding: 0 12px;
    font-size: .72rem;
}

.schedule-btn.primary {
    border-color: var(--app-primary);
    background: var(--app-primary);
    color: #ffffff;
}

.schedule-btn.soft,
.schedule-mini-btn,
.schedule-row-action {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.schedule-btn.danger {
    border-color: color-mix(in srgb, #ef4444 35%, var(--border));
    background: color-mix(in srgb, #ef4444 8%, transparent);
    color: #dc2626;
}

.schedule-btn:hover,
.schedule-mini-btn:hover,
.schedule-row-action:hover {
    transform: translateY(-1px);
}

.schedule-alert {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    font-size: .88rem;
    font-weight: 650;
}

.schedule-alert.success {
    background: color-mix(in srgb, #22c55e 8%, transparent);
    color: #15803d;
    border-color: color-mix(in srgb, #22c55e 35%, var(--border));
}

.schedule-alert.danger {
    background: color-mix(in srgb, #ef4444 8%, transparent);
    color: #dc2626;
    border-color: color-mix(in srgb, #ef4444 35%, var(--border));
}

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

.schedule-stat-card,
.schedule-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.schedule-stat-card {
    min-height: 128px;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.schedule-stat-card::after {
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--app-primary) 8%, transparent);
    content: "";
    pointer-events: none;
}

.schedule-stat-card.attention {
    border-color: color-mix(in srgb, #d78732 34%, var(--border));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, #d78732 10%, transparent), transparent 52%),
        var(--surface);
}

.schedule-stat-card.attention strong {
    color: color-mix(in srgb, #d78732 82%, var(--text));
}

.schedule-control-dock {
    position: relative;
    z-index: 6;
    overflow: visible;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--app-primary) 9%, transparent), transparent 34%),
        var(--surface);
    box-shadow: var(--shadow-md);
}

.schedule-control-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}

.schedule-control-heading h3 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 830;
    letter-spacing: -.02em;
}

.schedule-control-heading p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .76rem;
}

.schedule-control-danger {
    position: relative;
    flex: 0 0 auto;
}

.schedule-control-danger > summary {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, #ef4444 24%, var(--border));
    border-radius: 11px;
    background: color-mix(in srgb, #ef4444 4%, var(--surface));
    color: color-mix(in srgb, #dc2626 68%, var(--text));
    list-style: none;
}

.schedule-control-danger > summary::-webkit-details-marker {
    display: none;
}

.schedule-control-danger > summary span {
    font-size: .68rem;
    font-weight: 820;
    letter-spacing: .025em;
}

.schedule-control-danger > summary small {
    padding: 3px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #ef4444 8%, transparent);
    color: inherit;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.schedule-control-danger[open] > summary {
    border-color: color-mix(in srgb, #ef4444 42%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 8%, transparent);
}

.schedule-danger-popover {
    position: absolute;
    z-index: 30;
    top: calc(100% + 9px);
    right: 0;
    width: min(760px, calc(100vw - 72px));
    padding: 17px;
    border: 1px solid color-mix(in srgb, #ef4444 24%, var(--border));
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(10, 18, 31, .2);
}

.schedule-danger-popover-header {
    margin-bottom: 13px;
}

.schedule-danger-popover-header strong,
.schedule-danger-popover-header small {
    display: block;
}

.schedule-danger-popover-header strong {
    color: var(--text);
    font-size: .84rem;
    font-weight: 840;
}

.schedule-danger-popover-header small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .7rem;
}

.schedule-control-form {
    display: grid;
    gap: 14px;
}

.schedule-scope-picker {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.schedule-scope-picker legend {
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 820;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.schedule-scope-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-2) 78%, var(--surface));
}

.schedule-scope-option {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 54px;
    padding: 7px 9px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-muted);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.schedule-scope-option:hover {
    background: color-mix(in srgb, var(--app-primary) 4%, var(--surface));
}

.schedule-scope-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--app-primary) 27%, var(--border));
    background: var(--surface);
    box-shadow: 0 7px 17px color-mix(in srgb, var(--app-primary) 7%, transparent);
    color: var(--app-primary);
}

.schedule-scope-option:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--app-primary) 13%, transparent);
    outline-offset: 1px;
}

.schedule-scope-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.schedule-scope-icon {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid color-mix(in srgb, currentColor 20%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 5%, var(--surface));
}

.schedule-scope-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.schedule-scope-option > span:last-child {
    min-width: 0;
}

.schedule-scope-option strong,
.schedule-scope-option small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.schedule-scope-option strong {
    color: var(--text);
    font-size: .7rem;
    font-weight: 820;
}

.schedule-scope-option small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .57rem;
}

.schedule-control-fields {
    display: grid;
    grid-template-columns: minmax(340px, .9fr) minmax(270px, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding-top: 13px;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.schedule-control-date-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    align-items: end;
    gap: 7px;
}

.schedule-date-connector {
    display: grid;
    min-height: 42px;
    place-items: center;
    color: var(--text-muted);
    font-size: .86rem;
}

.schedule-control-targets {
    min-width: 0;
}

.schedule-scope-readout {
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 16%, var(--border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--app-primary) 5%, var(--surface));
}

.schedule-scope-readout-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.schedule-scope-readout strong,
.schedule-scope-readout small {
    display: block;
}

.schedule-scope-readout strong {
    color: var(--text);
    font-size: .7rem;
    font-weight: 810;
}

.schedule-scope-readout small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .59rem;
}

.schedule-apply-control {
    min-width: 118px;
}

.schedule-stat-card span,
.schedule-stat-card small,
.schedule-card-header p,
.schedule-date-header span,
.schedule-date-stats small,
.schedule-mini-card small,
.schedule-pagination span {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 650;
}

.schedule-stat-card strong,
.schedule-date-stats strong {
    color: var(--text);
    font-weight: 800;
}

.schedule-stat-card strong {
    margin-top: auto;
    font-size: 2rem;
    letter-spacing: -.04em;
}

.schedule-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
    gap: 18px;
    align-items: start;
}

.schedule-card {
    padding: 20px;
}

.schedule-card.danger-soft {
    border-color: color-mix(in srgb, #ef4444 28%, var(--border));
}

.schedule-danger-zone > summary {
    align-items: center;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.schedule-danger-zone > summary::-webkit-details-marker {
    display: none;
}

.schedule-danger-zone:not([open]) > summary {
    margin-bottom: 0;
}

.schedule-danger-toggle {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, #ef4444 28%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, #ef4444 6%, var(--surface));
    color: color-mix(in srgb, #dc2626 75%, var(--text));
    font-size: .65rem;
    font-weight: 820;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.schedule-danger-zone[open] .schedule-danger-toggle {
    font-size: 0;
}

.schedule-danger-zone[open] .schedule-danger-toggle::after {
    content: "Close tool";
    font-size: .65rem;
}

.schedule-danger-body {
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, #ef4444 18%, var(--border));
}

.schedule-card-header,
.schedule-form,
.schedule-timeline,
.schedule-table-wrapper,
.schedule-pattern-wrap,
.schedule-pagination {
    position: relative;
    z-index: 1;
}

.schedule-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.schedule-card-header h3,
.schedule-date-header h3 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

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

.schedule-form.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

.schedule-form.compact .schedule-btn {
    grid-column: 1 / -1;
}

.schedule-form.bulk {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
}

.schedule-field {
    display: grid;
    gap: 7px;
}

.schedule-field label {
    color: var(--text);
    font-size: .82rem;
    font-weight: 700;
}

.schedule-field input,
.schedule-field select,
.schedule-time-input {
    width: 100%;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--border) 78%, #64748b 22%);
    border-radius: 14px;
    outline: none;
    padding: 0 13px;
    background: var(--surface);
    color: var(--text);
    font-size: .9rem;
    font-weight: 500;
    transition: .18s ease;
}

.schedule-time-input {
    min-height: 38px;
    padding: 0 11px;
    font-size: .84rem;
}

.schedule-field input:focus,
.schedule-field select:focus,
.schedule-time-input:focus {
    border-color: color-mix(in srgb, var(--app-primary) 42%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.schedule-time-input:disabled {
    background: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
    color: var(--text-muted);
    cursor: not-allowed;
}

.schedule-timeline,
.schedule-employee-grid {
    display: grid;
    gap: 14px;
}

.schedule-date-block,
.schedule-pattern-wrap {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
}

.schedule-date-block {
    padding: 14px;
}

.schedule-date-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.schedule-date-stats {
    display: flex;
    gap: 10px;
}

.schedule-date-stats div,
.schedule-mini-card,
.schedule-pattern-table td,
.schedule-pattern-table th {
    border: 1px solid var(--border);
}

.schedule-date-stats div {
    min-width: 72px;
    padding: 9px 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    text-align: center;
}

.schedule-date-stats strong {
    display: block;
    font-size: 1rem;
}

.schedule-mini-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 150px 58px;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.schedule-mini-card.rest,
.schedule-row-rest {
    background: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
    opacity: .86;
}

.schedule-mini-card strong,
.schedule-table strong,
.schedule-pattern-table strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: .8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-mini-meta {
    display: contents;
}

.schedule-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 34px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
    text-align: center;
    position: relative;
    z-index: 1;
}

.schedule-empty h5 {
    margin: 0;
    color: var(--text);
    font-size: .95rem;
    font-weight: 800;
}

.schedule-empty p {
    margin: 0;
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 500;
}

.schedule-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.schedule-pagination div {
    display: flex;
    gap: 10px;
}

.schedule-table-wrapper {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.schedule-table,
.schedule-pattern-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table th,
.schedule-pattern-table th {
    padding: 14px 18px;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    text-align: left;
    background: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
}

.schedule-table td,
.schedule-pattern-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: .88rem;
    vertical-align: middle;
    color: var(--text);
}

.schedule-table tbody tr,
.schedule-pattern-table tbody tr {
    transition: .18s;
}

.schedule-table tbody tr:hover,
.schedule-pattern-table tbody tr:hover {
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.schedule-pattern-table tbody tr:last-child td {
    border-bottom: 0;
}

.schedule-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.schedule-pill.working {
    background: color-mix(in srgb, #2563eb 10%, transparent);
    color: #2563eb;
}

.schedule-pill.rest {
    background: color-mix(in srgb, #94a3b8 12%, transparent);
    color: #6b7280;
}

.schedule-row-disabled {
    opacity: .52;
}

.schedule-equal-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.schedule-equal-card .schedule-form {
    flex: 1;
    display: grid;
    align-content: start;
}

@media (max-width: 1180px) {
    .schedule-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-filter-grid {
        grid-template-columns: 1fr;
    }

    .schedule-employee-grid {
        grid-template-columns: 1fr;
    }

    .schedule-control-fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .schedule-apply-control {
        grid-column: 1 / -1;
    }

    .schedule-scope-options {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .schedule-scope-options::-webkit-scrollbar {
        display: none;
    }

    .schedule-scope-option {
        width: 182px;
        min-width: 182px;
    }
}

@media (max-width: 768px) {
    .schedule-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .schedule-btn {
        width: 100%;
    }

    .schedule-control-dock {
        padding: 15px;
        border-radius: 19px;
    }

    .schedule-control-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .schedule-control-danger {
        width: 100%;
    }

    .schedule-control-danger > summary {
        justify-content: space-between;
    }

    .schedule-danger-popover {
        position: static;
        width: 100%;
        margin-top: 9px;
        padding: 14px;
        box-shadow: var(--shadow-md);
    }

    .schedule-control-fields {
        grid-template-columns: 1fr;
    }

    .schedule-control-date-group {
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    }

    .schedule-scope-option {
        width: 170px;
        min-width: 170px;
    }

    .schedule-stat-grid,
    .schedule-form.compact,
    .schedule-form.bulk {
        grid-template-columns: 1fr;
    }

    .schedule-date-header,
    .schedule-mini-card {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 6px;
    }

    .schedule-mini-meta {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .schedule-mini-meta span {
        text-align: left;
    }

    .schedule-mini-btn {
        min-width: 58px;
    }

    .schedule-date-stats {
        width: 100%;
    }

    .schedule-date-stats div {
        flex: 1;
    }

    .schedule-matrix-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .schedule-legend {
        justify-content: flex-start;
    }

    .schedule-matrix {
        --schedule-person-width: 194px;
        --schedule-cell-width: 102px;
    }

    .schedule-person-cell {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
        min-height: 98px;
        padding: 10px;
    }

    .schedule-matrix-corner {
        grid-template-columns: 1fr;
        min-height: 66px;
    }

    .schedule-person-avatar {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: .62rem;
    }

    .schedule-person-copy small {
        white-space: normal;
        line-height: 1.25;
    }

    .schedule-shift-cell {
        min-height: 98px;
        padding: 8px;
    }

    .schedule-matrix-shell {
        max-height: 68vh;
    }
}

@media (max-width: 480px) {
    .schedule-control-date-group {
        grid-template-columns: 1fr;
    }

    .schedule-date-connector {
        display: none;
    }
}

.schedule-command-center {
    padding: 0;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--app-primary) 9%, transparent), transparent 46%),
        var(--surface);
}

.schedule-command-center::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--border) 25%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--border) 25%, transparent) 1px, transparent 1px);
    background-size: 32px 32px;
    content: "";
    mask-image: linear-gradient(#000, transparent 72%);
    opacity: .22;
    pointer-events: none;
}

.schedule-matrix-heading {
    align-items: center;
    margin: 0;
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.schedule-console-label {
    display: block;
    margin-bottom: 5px;
    color: var(--app-primary);
    font-size: .63rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.schedule-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: .69rem;
    font-weight: 700;
}

.schedule-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.schedule-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 10%, transparent);
}

.schedule-legend i.working { background: #258369; color: #258369; }
.schedule-legend i.rest { background: #778499; color: #778499; }
.schedule-legend i.gap { border: 1px dashed #d78732; background: transparent; color: #d78732; }

.schedule-matrix-shell {
    position: relative;
    overflow: auto;
    max-height: min(72vh, 760px);
    scrollbar-color: color-mix(in srgb, var(--app-primary) 30%, var(--border)) transparent;
    scrollbar-width: thin;
}

.schedule-matrix {
    --schedule-person-width: 258px;
    --schedule-cell-width: 112px;
    min-width: max-content;
}

.schedule-matrix-row {
    display: grid;
    grid-template-columns: var(--schedule-person-width) repeat(var(--schedule-days), var(--schedule-cell-width));
    min-width: max-content;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
}

.schedule-matrix-row:last-child {
    border-bottom: 0;
}

.schedule-matrix-header {
    position: sticky;
    z-index: 8;
    top: 0;
    background: color-mix(in srgb, var(--surface) 96%, var(--app-primary) 4%);
    box-shadow: 0 5px 16px rgba(10, 18, 31, .06);
}

.schedule-person-cell {
    position: sticky;
    z-index: 4;
    left: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 104px;
    padding: 12px 14px;
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 97%, var(--surface-2));
}

.schedule-matrix-row:hover .schedule-person-cell {
    background: color-mix(in srgb, var(--app-primary) 5%, var(--surface));
}

.schedule-matrix-corner {
    z-index: 10;
    grid-template-columns: 1fr;
    min-height: 70px;
    background: color-mix(in srgb, var(--surface) 94%, var(--app-primary) 6%);
}

.schedule-matrix-corner > span {
    color: var(--text);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.schedule-matrix-corner small {
    color: var(--text-muted);
    font-size: .68rem;
}

.schedule-person-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--app-primary) 24%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-primary) 9%, var(--surface));
    color: color-mix(in srgb, var(--app-primary) 82%, var(--text));
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .035em;
}

.schedule-person-copy {
    display: block;
    min-width: 0;
}

.schedule-person-copy strong,
.schedule-person-copy small,
.schedule-person-copy > span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.schedule-person-copy strong {
    color: var(--text);
    font-size: .79rem;
    font-weight: 820;
}

.schedule-person-copy small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .64rem;
}

.schedule-person-copy > span {
    margin-top: 7px;
    color: color-mix(in srgb, var(--app-primary) 72%, var(--text-muted));
    font-size: .61rem;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.schedule-person-copy .schedule-person-calendar {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 7px;
    color: color-mix(in srgb, var(--app-primary) 82%, var(--text));
    font-size: .61rem;
    font-weight: 820;
    line-height: 1.25;
    text-decoration: none;
}

.schedule-person-copy .schedule-person-calendar:hover {
    color: var(--app-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.schedule-date-cell {
    display: grid;
    min-height: 70px;
    place-content: center;
    border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    text-align: center;
}

.schedule-date-cell small,
.schedule-date-cell span {
    color: var(--text-muted);
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.schedule-date-cell strong {
    margin: 1px 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 880;
}

.schedule-date-cell.today {
    background: color-mix(in srgb, var(--app-primary) 10%, transparent);
    box-shadow: inset 0 -2px var(--app-primary);
}

.schedule-shift-cell {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 104px;
    overflow: hidden;
    padding: 10px;
    border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    color: inherit;
    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease;
}

.schedule-shift-cell:hover,
.schedule-shift-cell:focus-visible {
    z-index: 2;
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shift-accent) 44%, var(--border));
}

.schedule-shift-cell.working {
    --shift-accent: #258369;
    background: color-mix(in srgb, #258369 7%, transparent);
}

.schedule-shift-cell.rest {
    --shift-accent: #778499;
    background: color-mix(in srgb, #778499 7%, transparent);
}

.schedule-shift-cell.gap {
    --shift-accent: #d78732;
    background: color-mix(in srgb, var(--surface-2) 44%, transparent);
}

.schedule-shift-cell.today::after {
    position: absolute;
    top: 0;
    right: 11px;
    left: 11px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: var(--app-primary);
    content: "";
}

.schedule-shift-status {
    color: var(--shift-accent);
    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.schedule-shift-cell > strong {
    margin-top: 7px;
    color: var(--text);
    font-size: .78rem;
    font-weight: 850;
}

.schedule-shift-cell > small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .62rem;
}

.schedule-shift-action {
    margin-top: 8px;
    color: var(--shift-accent);
    font-size: .57rem;
    font-weight: 820;
    letter-spacing: .04em;
    opacity: .72;
    text-transform: uppercase;
}

.schedule-gap-plus {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border: 1px dashed color-mix(in srgb, #d78732 50%, var(--border));
    border-radius: 7px;
    color: #d78732;
    font-size: .8rem;
    font-weight: 600;
}

.schedule-mobile-swipe {
    display: none;
}

/* Keep the employee visible while fitting two schedule days on phone screens. */
@media (max-width: 768px) {
    .schedule-command-center {
        overflow: hidden;
    }

    .schedule-matrix-heading {
        gap: 10px;
        padding: 17px 15px;
    }

    .schedule-legend {
        gap: 10px;
        font-size: .62rem;
    }

    .schedule-mobile-swipe {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        padding: 6px 9px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--app-primary) 8%, var(--surface-2));
        color: var(--app-primary);
        font-size: .6rem;
        font-weight: 800;
        letter-spacing: .025em;
    }

    .schedule-matrix-shell {
        max-width: 100%;
        max-height: 68vh;
        overflow: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
    }

    .schedule-matrix {
        --schedule-person-width: clamp(120px, 36vw, 142px);
        --schedule-cell-width: clamp(
            82px,
            calc((100vw - 32px - var(--schedule-person-width)) / 2),
            112px
        );
    }

    .schedule-person-cell {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        min-height: 92px;
        padding: 10px 9px;
    }

    .schedule-person-avatar {
        display: none;
    }

    .schedule-person-copy strong,
    .schedule-person-copy small,
    .schedule-person-copy > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .schedule-person-copy strong {
        font-size: .76rem;
    }

    .schedule-person-copy small {
        font-size: .58rem;
        line-height: 1.3;
    }

    .schedule-person-copy > span {
        margin-top: 6px;
        font-size: .54rem;
    }

    .schedule-person-copy .schedule-person-calendar {
        margin-top: 5px;
        font-size: .54rem;
    }

    .schedule-matrix-corner {
        min-height: 62px;
    }

    .schedule-matrix-corner > span {
        font-size: .64rem;
    }

    .schedule-matrix-corner small {
        font-size: .58rem;
    }

    .schedule-date-cell {
        min-height: 62px;
        scroll-snap-align: start;
    }

    .schedule-shift-cell {
        min-height: 92px;
        padding: 8px 7px;
        scroll-snap-align: start;
    }

    .schedule-shift-status {
        overflow: hidden;
        font-size: .52rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .schedule-shift-cell > strong {
        margin-top: 6px;
        font-size: .73rem;
    }

    .schedule-shift-cell > small,
    .schedule-shift-action {
        overflow: hidden;
        font-size: .54rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 340px) {
    .schedule-matrix {
        --schedule-person-width: 116px;
        --schedule-cell-width: calc((100vw - 28px - var(--schedule-person-width)) / 2);
    }

    .schedule-person-cell {
        padding-inline: 8px;
    }
}