/* Line icons from the shared HYGR set. They take the text colour of their parent. */
.icon {
    width: 16px;
    height: 16px;
    flex: none;
    vertical-align: -3px;
}



.app-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 24px;
    box-sizing: border-box;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: none;
    padding-bottom: 4px;
    margin-bottom: 16px;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--on-surface);
}

.topbar-brand:hover .topbar-title,
.topbar-brand:focus-visible .topbar-title {
    color: var(--primary);
}

.topbar-title {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--on-surface);
}

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

.topbar-actions .btn {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--outline-variant, #D3BE9A);
    border-radius: var(--radius, 4px);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 12px;
    background: #ffffff;
    border: 1px solid var(--outline-variant, #D3BE9A);
    border-radius: 4px;
    box-sizing: border-box;
}

.user-pill-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #141D17;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

/* The topbar pill has one width whatever the name, and the name stays on one line, so the topbar
   keeps the size it painted before the name loaded (U27). The full name is in the title. */
.topbar-actions .user-pill {
    width: 240px;
    max-width: 100%;
}

.topbar-actions .user-pill-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* On a phone the pill takes the rest of the one actions row. */
@media (max-width: 640px) {
    .topbar-actions {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .topbar-actions .user-pill {
        flex: 1 1 0;
        min-width: 0;
    }
}

.user-pill-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #DFE2CD;
    color: #294733;
    padding: 0 8px;
    min-height: 16px;
    border-radius: 2px;
    border: none;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

.user-pill-role.role-staff {
    background: #E9D7C7;
    color: #4F654A;
}

.user-pill-role.role-admin {
    background: #DFE2CD;
    color: #294733;
}

.tabs {
    display: flex;
    gap: 16px;
    padding: 0;
    padding-bottom: 0;
    border: none;
    border-bottom: 1px solid var(--outline-variant, #D3BE9A);
    margin: 0 0 24px 0;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    align-items: flex-end;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tabs button,
.tabs .admin-tab-btn,
.tabs .nav-item {
    position: relative;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 16px;
    height: 36px;
    min-height: 36px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    color: var(--on-surface-variant, #4F654A);
    margin-bottom: -1px;
    white-space: nowrap;
    box-shadow: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease;
}

.tabs button:hover,
.tabs .admin-tab-btn:hover,
.tabs .nav-item:hover {
    color: var(--on-surface, #141D17);
    border-bottom: 1px solid var(--outline-variant, #D3BE9A);
    margin-bottom: -1px;
}

/* Inside the tab, because the tab bar scrolls and would clip a ring drawn outside it. */
.tabs button:focus-visible,
.tabs .admin-tab-btn:focus-visible,
.tabs .nav-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.tabs button.active,
.tabs .admin-tab-btn.active,
.tabs .nav-item.active {
    position: relative;
    margin-bottom: -1px;
    border-bottom: 2px solid var(--primary, #294733);
    color: var(--on-surface, #141D17);
    background: transparent;
    font-weight: 600;
    z-index: 2;
}

.card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: none;
}

.card-low {
    background: var(--surface-container-low);
    box-shadow: none;
}

.table-container {
    background: var(--surface-container-lowest, #ffffff);
    border: 1px solid var(--outline-variant, #D3BE9A);
    border-radius: var(--radius, 4px);
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 16px;
    margin-bottom: 24px;
}

.action-strip + .table-container,
.section-head + .table-container,
.catalog-head + .table-container {
    margin-top: 0;
}

.data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
}

.data-table th {
    height: 36px;
    background: var(--surface-container-lowest);
    color: var(--on-surface-variant);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px;
    border-bottom: 2px solid var(--on-surface, #141D17);
    box-sizing: border-box;
}

.data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--outline-variant, #D3BE9A);
    color: var(--on-surface, #141D17);
    vertical-align: middle;
    box-sizing: border-box;
}

.data-table th.col-text,
.data-table td.col-text,
.data-table th.text-left,
.data-table td.text-left {
    text-align: left;
}

.data-table th.col-num,
.data-table td.col-num,
.data-table th.text-right,
.data-table td.text-right {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.data-table th.col-status,
.data-table td.col-status {
    text-align: center;
}

.data-table th.col-actions,
.data-table td.col-actions {
    text-align: right;
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--surface-container-low, #F4EAD5);
}

.data-table tbody tr:nth-child(even) td {
    background-color: var(--surface-container-low, #F4EAD5);
}

.data-table tbody tr:nth-child(odd) {
    background-color: var(--surface-container-lowest, #ffffff);
}

.data-table tbody tr:nth-child(odd) td {
    background-color: var(--surface-container-lowest, #ffffff);
}

.data-table tbody tr:hover td {
    background-color: var(--surface-container, #EFE0CE);
}

.role-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 8px;
    border-radius: var(--radius-sm, 2px);
    line-height: 16px;
    white-space: nowrap;
}

.role-badge.role-admin {
    background: var(--secondary-container, #DFE2CD);
    color: var(--on-secondary-container, #294733);
}

.role-badge.role-staff {
    background: var(--surface-container-high, #E9D7C7);
    color: var(--on-surface-variant, #4F654A);
}

.data-table .btn,
.data-table .btn-compact,
.data-table .btn-row,
.btn-row {
    height: 28px;
    min-height: 28px;
    padding: 0 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    line-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--outline-variant, #D3BE9A);
    border-radius: var(--radius, 4px);
    color: var(--on-surface, #141D17);
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.data-table .btn:hover:not(:disabled),
.data-table .btn-compact:hover:not(:disabled),
.data-table .btn-row:hover:not(:disabled),
.btn-row:hover:not(:disabled) {
    background: var(--surface-container-low, #F4EAD5);
    border-color: var(--outline, #899065);
    color: var(--on-surface, #141D17);
}

.data-table .btn-cancel-booking,
.data-table .btn-open-cancel,
.btn-row.u-text-error {
    border-color: var(--outline-variant, #D3BE9A);
    color: var(--on-surface, #141D17);
}

.data-table .btn-cancel-booking:hover:not(:disabled),
.data-table .btn-open-cancel:hover:not(:disabled),
.btn-row.u-text-error:hover:not(:disabled) {
    color: var(--error, #913136);
    border-color: var(--error, #913136);
    background: var(--error-container, #F5DFE0);
}

.action-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 20px;
}

.btn-compact {
    padding: 4px 12px;
    font-size: 11px;
    min-height: 32px;
    border-radius: var(--radius);
}

.chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    padding: 0 8px;
    line-height: 22px;
    border: 1px solid transparent;
    background: var(--surface-container-high);
    color: var(--on-surface-variant);
}

.chip.chip-confirmed { background: var(--success-container); color: var(--on-success-container); border-color: var(--success); }
.chip.chip-pending   { background: var(--warning-container); color: var(--on-warning-container); border-color: var(--warning); }
.chip.chip-cancelled { background: var(--error-container); color: var(--on-error-container); border-color: var(--error); }
.chip.chip-neutral   { background: var(--surface-container-high); color: var(--on-surface-variant); }
.chip.chip-primary   { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.badge-status {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-container-high);
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
}

.badge-published {
    background: var(--success-container);
    color: var(--on-success-container);
    border: 1px solid var(--success);
}

.badge-draft {
    background: var(--warning-container);
    color: var(--on-warning-container);
    border: 1px solid var(--warning);
}

.kpi-ribbon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.remark-note {
    margin-top: 8px;
    padding: 8px 12px;
    

    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    border-radius: var(--radius-sm);
    font-size: 11px;
    line-height: 1.4;
    color: var(--on-surface-variant);
    overflow-wrap: anywhere;
}

.remark-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
    display: block;
    margin-bottom: 4px;
}

.store-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    min-height: 32px;
    cursor: pointer;
}

.store-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

@media (max-width: 640px) {
    .app-shell {
        padding: 16px 12px;
    }

    .topbar {
        align-items: flex-start;
    }

    .action-strip {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px), (pointer: coarse) {
    /* The topbar, segmented and compact action buttons set their own height, so they are named
       here too, or the 44 px touch floor loses to them (U46). */
    .btn-compact,
    .btn-row,
    .tabs button,
    .store-check,
    .topbar-actions .btn,
    .segmented-control .btn,
    .btn.btn-action-compact {
        min-height: 44px;
    }

    .btn-row {
        padding: 8px 12px;
        font-size: 11px;
    }

    .data-table td .btn-row + .btn-row {
        margin-top: 8px;
    }
}

.contact-link {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.contact-link:hover,
.contact-link:focus-visible {
    border-bottom-color: var(--primary);
}

.segmented-control {
    display: inline-flex;
    align-items: center;
}

.segmented-control .btn,
.segmented-control .btn-compact {
    border-radius: 0;
    margin-left: -1px;
}

.segmented-control .btn:first-child,
.segmented-control .btn-compact:first-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    margin-left: 0;
}

.segmented-control .btn:last-child,
.segmented-control .btn-compact:last-child {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.segmented-control .btn:hover,
.segmented-control .btn:focus-visible {
    z-index: 1;
}

.segmented-control .btn.active,
.segmented-control .btn-compact.active {
    background: var(--primary, #294733) !important;
    color: var(--on-primary, #ffffff) !important;
    border-color: var(--primary, #294733) !important;
    font-weight: 600;
    z-index: 2;
}

.btn-action-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius);
    height: 36px;
    min-height: 36px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-action-compact:hover {
    background: var(--surface-container-low);
    border-color: var(--outline);
    color: var(--on-surface);
}

#month-display,
#sched-month-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-height: 36px;
    padding: 0 8px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--on-surface);
    box-sizing: border-box;
}

.staff-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    box-sizing: border-box;
}

.staff-store-select {
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--radius);
    font-size: 14px;
    border: 1px solid var(--outline);
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    box-sizing: border-box;
}

.week-grid-container {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 8px;
}

/* Until the month draws, the grid holds a screen of height, so the Submit bar below it starts
   below the fold and does not jump away (U76, U27). */
.week-grid-container.is-loading {
    min-height: 100vh;
}

@media (max-width: 900px) {
    .week-grid-container {
        overflow-x: auto;
    }
}

.week-day-col {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 280px;
    transition: border-color 0.1s ease;
}

.week-day-col.is-today {
    border-color: var(--primary);
    background: var(--surface-container-low);
}

/* Only the controls dim, so the day labels keep full contrast (U85). The Scheduled chip keeps
   full opacity: at 0.45 it measured 2.09:1 (U112). */
.week-day-col.is-outside-month .day-store-picker,
.week-day-col.is-outside-month .shift-cards-stack .avail-toggle {
    opacity: 0.45;
}

.week-day-header {
    border-bottom: 1px solid var(--outline-variant);
    padding-bottom: 8px;
    text-align: center;
}

.day-store-picker {
    margin-top: 8px;
    position: relative;
}

.day-store-select {
    width: 100%;
    height: 24px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--on-surface);
}

.day-store-btn {
    width: 100%;
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-mono);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--on-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

.day-store-btn:hover {
    border-color: var(--outline);
    background: var(--surface-container-low);
}

.day-store-btn-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 4px;
}

.day-store-btn-arrow {
    font-size: 11px;
    color: var(--on-surface-variant);
    flex-shrink: 0;
}

.day-store-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: max-content;
    min-width: 190px;
    max-width: 250px;
    max-height: 380px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    

    z-index: 100;
    padding: 4px 0;
    text-align: left;
}

.week-day-col:nth-child(n+6) .day-store-menu {
    left: auto;
    right: 0;
}

/* The menu lines up with the right of its picker when it would pass the screen edge, and opens
   upward when it would run under the bottom bar (U63). book.js sets the classes on open. */
.day-store-menu.align-right {
    left: auto;
    right: 0;
}

.day-store-menu.opens-up {
    top: auto;
    bottom: calc(100% + 4px);
}

.day-store-menu.u-hidden {
    display: none;
}

.day-store-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--on-surface);
    cursor: pointer;
    user-select: none;
}

.day-store-item:hover {
    background: var(--surface-container-low);
}

.day-store-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

.day-store-item-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-store-divider {
    height: 1px;
    background: var(--outline-variant);
    margin: 4px 0;
}

.week-day-name {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--on-surface-variant);
}

.week-day-date {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--on-surface);
}

.shift-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.avail-toggle {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.avail-toggle:hover {
    border-color: var(--primary);
}

.avail-toggle:disabled,
.day-store-btn:disabled {
    cursor: default;
    border-color: var(--outline-variant);
}

.avail-toggle.is-on {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

.avail-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.avail-scheduled {
    align-self: center;
}

.host-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 16px;
    background: var(--surface-container-lowest);
}

.login-shell {
    max-width: 440px;
    margin: 64px auto 0;
    padding: 0 16px;
    width: 100%;
}

.login-shell h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

#role-tabs {
    display: flex;
    gap: 16px;
    padding: 0;
    padding-bottom: 0;
    margin: 0 0 20px 0;
    border: none;
    border-bottom: 1px solid var(--outline-variant, #D3BE9A);
    width: 100%;
    align-items: flex-end;
}

#role-tabs button {
    position: relative;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 16px;
    height: 36px;
    min-height: 36px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--on-surface-variant, #4F654A);
    margin-bottom: -1px;
    cursor: pointer;
    box-shadow: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s ease;
}

#role-tabs button:hover {
    color: var(--on-surface, #141D17);
    border-bottom: 1px solid var(--outline-variant, #D3BE9A);
    margin-bottom: -1px;
}

#role-tabs button.active {
    position: relative;
    margin-bottom: -1px;
    color: var(--on-surface, #141D17);
    border-bottom: 2px solid var(--primary, #294733);
    font-weight: 600;
    background: transparent;
}

.login-shell .card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: none;
}

.sched-slot-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-left: 3px solid var(--shift-color, var(--primary));
    border-radius: var(--radius);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
}

.sched-slot-card.is-my-shift {
    background: var(--secondary-container);
    border-color: var(--outline);
}

.sched-slot-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--on-surface);
}

.sched-slot-staff {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.sched-slot-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--on-surface-variant);
}

.sched-rest-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
}

.sched-month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.sched-month-weekdays span {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    padding: 0 4px;
}

.sched-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.sched-month-grid > .empty-state {
    grid-column: 1 / -1;
}

.sched-month-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 104px;
    padding: 8px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    box-sizing: border-box;
}

.sched-month-cell.is-today {
    border-color: var(--primary);
    background: var(--surface-container-low);
}

.sched-month-cell.is-outside-month {
    background: var(--surface-container);
    opacity: 0.45;
}

.sched-month-date {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--on-surface-variant);
    line-height: 1;
}

.sched-month-cell.is-today .sched-month-date {
    color: var(--primary);
    font-weight: 700;
}

.sched-month-dow {
    display: none;
    font-weight: 700;
    margin-right: 8px;
}

.sched-month-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sched-month-cell .sched-slot-card {
    padding: 4px 8px;
    gap: 4px;
    border-left-width: 2px;
}

.sched-month-cell .sched-slot-type {
    font-size: 11px;
    line-height: 1.25;
    flex-wrap: wrap;
}

.sched-month-cell .sched-slot-staff {
    font-size: 11px;
}

.sched-month-cell .sched-slot-time {
    font-size: 11px;
}

.sched-month-cell .remark-note {
    font-size: 11px;
}

.sched-month-cell {
    cursor: pointer;
}

.sched-month-cell .sched-rest-chip {
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    padding-top: 4px;
}

.sched-slot-store-tag {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: var(--radius-sm, 2px);
    background: var(--surface-container-high, #E9D7C7);
    color: var(--on-surface, #141D17);
    margin-right: 4px;
    letter-spacing: 0.02em;
    display: inline-block;
    line-height: 16px;
    vertical-align: middle;
}

.sched-coworkers {
    font-size: 11px;
    color: var(--on-surface-variant);
    line-height: 1.2;
    margin-top: 4px;
}

.staff-day-group {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--surface-container-lowest);
}

.staff-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--outline-variant);
}

.staff-day-dialog {
    max-width: 680px;
}

.staff-day-body {
    max-height: 70vh;
    overflow-y: auto;
}

@media (max-width: 720px) {
    .sched-month-weekdays {
        display: none;
    }

    .sched-month-grid {
        grid-template-columns: 1fr;
    }

    .sched-month-cell {
        min-height: 0;
    }

    .sched-month-cell.is-outside-month {
        display: none;
    }

    .sched-month-dow {
        display: inline;
    }
}

.hygr-logo {
    display: block;
    flex: none;
    width: 72px;
    height: auto;
}

.hygr-logo-lg {
    display: block;
    height: 72px;
    min-height: 72px;
    width: auto;
    margin: 0 auto;
    padding: 36px;
    box-sizing: content-box;
}

/* Phones and iPad portrait: the week becomes a list, one row per day. */
@media (max-width: 900px) {
    .week-grid-container {
        grid-template-columns: 1fr;
        overflow-x: visible;
        gap: 8px;
    }

    .week-day-col {
        /* A grid item keeps its content width by default, so one long store name
           stretched every day card past the screen. */
        min-width: 0;
        min-height: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
    }

    .week-day-header {
        flex: 1 1 260px;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 0;
        padding-bottom: 0;
        text-align: left;
    }

    .week-day-name {
        flex: 0 0 34px;
    }

    .week-day-date {
        flex: 0 0 56px;
    }

    .day-store-picker {
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 0;
    }

    .shift-cards-stack {
        flex: 0 0 160px;
        flex-direction: row;
        align-items: center;
    }

    .staff-toolbar-row {
        flex-wrap: wrap;
    }

    .staff-toolbar-row .u-ml-auto {
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .shift-cards-stack {
        flex-basis: 100%;
    }

    .host-action-bar > div:last-child,
    .host-action-bar .btn {
        width: 100%;
    }

    /* iOS Safari zooms the page on focus of any field under 16px. */
    input,
    select,
    textarea,
    .form-input {
        font-size: 18px;
    }
}

/* Schedule Maker, stacked list: weekday, one coverage line, and only the slots someone holds. */

@media (max-width: 640px) {
    .admin-toolbar .toolbar-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .admin-toolbar .toolbar-right > .badge-status,
    .admin-toolbar .toolbar-right > .split-btn-group {
        grid-column: 1 / -1;
    }

    .admin-toolbar .toolbar-right > .btn,
    .admin-toolbar .toolbar-right .dropdown > .btn {
        flex: 1;
        width: 100%;
        justify-content: center;
    }

    .admin-toolbar .toolbar-right .split-btn-group {
        display: flex;
    }

    .admin-toolbar .toolbar-right .split-btn-group > .btn:first-child {
        flex: 1;
    }

    .admin-toolbar .toolbar-right .split-btn-group > .split-toggle {
        flex: 0 0 48px;
        width: 48px;
    }

    #roster-kpis {
        grid-template-columns: 1fr;
    }
}

/* The drawer is a flex column: without this the KPI strip shrinks to a sliver. */
.drawer .drawer-ledger {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .drawer .roster-card-list .empty-state {
        min-height: 96px;
    }

    .drawer .drawer-store-code {
        display: none;
    }

    .drawer .drawer-store-header {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 640px) {

    /* Keep the last days reachable above the docked batch bar. */

}

/* Staff Directory in a narrow box: one card per person, buttons on the right. */
.staff-table-wrap {
    container-type: inline-size;
}

.staff-table-wrap .s-email {
    overflow-wrap: anywhere;
}

@container (max-width: 719px) {
    .staff-table-wrap .data-table {
        min-width: 0;
    }

    .staff-table-wrap .data-table thead {
        display: none;
    }

    .staff-table-wrap .data-table,
    .staff-table-wrap .data-table tbody {
        display: block;
    }

    .staff-table-wrap .data-table tbody tr {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "name name name actions"
            "role status . actions"
            "email email email email";
        gap: 4px 8px;
        padding: 12px;
        border-bottom: 1px solid var(--outline-variant);
    }

    .staff-table-wrap .data-table tbody tr td {
        min-width: 0;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .staff-table-wrap .data-table tbody tr td.empty-state {
        grid-column: 1 / -1;
        padding: 16px;
        text-align: center;
    }

    .staff-table-wrap .s-name { grid-area: name; font-size: 14px; }
    .staff-table-wrap .s-role { grid-area: role; }
    .staff-table-wrap .s-status { grid-area: status; }
    .staff-table-wrap .s-email { grid-area: email; }
    .staff-table-wrap .s-actions { grid-area: actions; align-self: start; }

    .staff-table-wrap .s-actions .u-flex {
        flex-direction: column;
    }
}

/* A field row inside a form card: its last field has no bottom margin, so the row supplies it. */
.modal-form-card > .u-flex-wrap:not(:last-child) {
    margin-bottom: 12px;
}

/* Bookings in a narrow box: one card per booking, actions as full-width touch targets. */
.bookings-table-wrap {
    container-type: inline-size;
}

.bookings-table-wrap .b-staff,
.bookings-table-wrap .b-store,
.bookings-table-wrap .b-when {
    overflow-wrap: anywhere;
}

.bookings-table-wrap .b-actions .u-flex {
    flex-wrap: wrap;
}

@container (max-width: 899px) {
    .bookings-table-wrap .data-table {
        min-width: 0;
    }

    .bookings-table-wrap .data-table thead,
    .bookings-table-wrap .b-id {
        display: none;
    }

    .bookings-table-wrap .data-table,
    .bookings-table-wrap .data-table tbody {
        display: block;
    }

    .bookings-table-wrap .data-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "staff status"
            "store source"
            "when when"
            "actions actions";
        gap: 8px 12px;
        padding: 12px;
        border-bottom: 1px solid var(--outline-variant);
    }

    .bookings-table-wrap .data-table tbody tr td {
        min-width: 0;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .bookings-table-wrap .b-no-actions {
        display: none;
    }

    .bookings-table-wrap .data-table tbody tr td.empty-state {
        grid-column: 1 / -1;
        padding: 16px;
        text-align: center;
    }

    .bookings-table-wrap .b-staff { grid-area: staff; }
    .bookings-table-wrap .b-status { grid-area: status; text-align: right; }
    .bookings-table-wrap .b-store { grid-area: store; font-weight: 400; }
    .bookings-table-wrap .b-source { grid-area: source; text-align: right; }
    .bookings-table-wrap .b-when { grid-area: when; }
    .bookings-table-wrap .b-actions { grid-area: actions; }

    .bookings-table-wrap .b-actions .u-flex {
        margin-top: 4px;
    }

    .bookings-table-wrap .b-actions .btn {
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }
}

/* Dashboard bar charts: HTML labels that wrap, bars that stretch to the card. */
.chart-bars {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
}

.chart-bar-row .chart-bar-label {
    color: var(--on-surface-variant);
    text-align: right;
    overflow-wrap: anywhere;
}

.chart-bar-track {
    display: block;
    width: 100%;
}

.chart-bar-row .chart-value {
    min-width: 32px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--on-surface);
}

@container (max-width: 420px) {
    .chart-bar-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
    }

    .chart-bar-row .chart-bar-label {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* Generic phone cards for a data table: first cell is the title, each other cell carries its
   column header as a label (data-label), actions span the card. */
.table-cards {
    container-type: inline-size;
}

.table-cards .data-table td {
    overflow-wrap: anywhere;
}

@container (max-width: 719px) {
    .table-cards .data-table {
        min-width: 0;
    }

    .table-cards .data-table thead {
        display: none;
    }

    .table-cards .data-table,
    .table-cards .data-table tbody {
        display: block;
    }

    .table-cards .data-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 12px;
        padding: 12px;
        border-bottom: 1px solid var(--outline-variant);
    }

    .table-cards .data-table tbody tr td {
        min-width: 0;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .table-cards .data-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--on-surface-variant);
    }

    .table-cards .data-table tbody tr td:first-child,
    .table-cards .data-table tbody tr td.col-actions,
    .table-cards .data-table tbody tr td.col-wide,
    .table-cards .data-table tbody tr td.empty-state {
        grid-column: 1 / -1;
    }

    .table-cards .data-table tbody tr td:first-child {
        font-size: 14px;
    }

    .table-cards .data-table tbody tr td:first-child::before,
    .table-cards .data-table tbody tr td.col-actions::before {
        content: none;
    }

    .table-cards .data-table tbody tr td.empty-state {
        padding: 16px;
        text-align: center;
    }

    /* In card mode each action is a full width 44 px button (U67). */
    .table-cards .col-actions .u-flex {
        flex-direction: column;
        align-items: stretch;
    }

    .table-cards .col-actions .btn,
    .table-cards .wages-person-pick {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .table-cards .data-table td.col-actions .btn-row + .btn-row {
        margin-top: 0;
    }

    .table-cards .data-table input.form-input {
        width: 100%;
    }

    .table-cards .data-table input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }
}

/* Side-by-side fields in a dialog: let them shrink, and wrap on phones instead of overflowing.
   Rows whose fields set their own u-minw-* keep that behaviour. */
.modal-dialog .u-flex > .form-group:not([class*="u-minw"]) {
    min-width: 0;
}

@media (max-width: 640px) {
    .modal-dialog .u-flex:has(> .form-group) {
        flex-wrap: wrap;
    }

    .modal-dialog .u-flex > .form-group:not([class*="u-minw"]) {
        flex: 1 1 140px;
    }
}

@media (max-width: 640px) {
    /* A fixed minimum width on a filter input pushes it past the screen edge. */
    .filter-bar .form-input {
        min-width: 0;
        max-width: 100%;
    }
}

/* Wages header: NRIC, bank and account number read as labelled values. */
.wages-meta-value {
    color: var(--on-surface);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.wages-meta-missing {
    color: var(--error);
}

/* Account number sits under the bank name, muted so the bank reads first. */
.wages-meta-sub {
    margin-top: 4px;
    font-size: 11px;
}

.wages-meta-sub .wages-meta-value {
    color: var(--on-surface-variant);
}

.wages-people-table .role-badge {
    margin-left: 8px;
}

/* Wages timesheet: one person picked, so every row is theirs and Name is noise. */
.wages-grid-table.is-one-person .c-name {
    display: none;
}

/* Wages Payment Details: the name picks whose shifts the timesheet shows. */
.wages-people-table th.text-right {
    text-align: right;
}

/* At 1440 px the fixed layout gave Live and Content 80 px, so "RM 25.50" broke onto two lines in
   every row. The columns now size to their content and an amount never breaks (UI v2). Two classes,
   because admin.css loads later and sets table-layout: fixed on .data-table. */
.data-table.wages-people-table {
    table-layout: auto;
}

.wages-people-table td.col-num {
    white-space: nowrap;
}

/* At 1440 px the timesheet headers ran under the next header cell and read "BASE HOUR" and
   "TOTAL AMOUNT (R": admin.css sets white-space: nowrap on .wages-grid-table th and the fixed
   layout keeps each column narrow. Headers now wrap between words, and 8px padding leaves room for
   the longest word, COMMISSION, at 71.5px in a 90px column. "thead th" outranks the admin.css
   rule, which loads later (U132). */
.wages-grid-table thead th {
    height: auto;
    padding: 8px;
    white-space: normal;
}

.wages-person-pick {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
}

.wages-person-pick:hover .u-fw-700 {
    text-decoration: underline;
}

.wages-person-pick:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.wages-people-table tbody tr.row-selected td {
    background: var(--surface-container-high);
}

@container (max-width: 719px) {
    .wages-person-pick {
        min-height: 44px;
    }
}

/* Wages timesheet cards: Live, Content and Commission take their own labelled cells. */
@container (max-width: 1079px) {
    .c-content { grid-area: content; }
    .c-commission { grid-area: commission; }
}

/* On a phone card every number field is a 44px target, so a thumb hits the right amount. Two
   classes on the input outrank the one-class 36px card rule in admin.css, which loads last. */
@container (max-width: 560px) {
    .wages-grid-table .grid-input.grid-num-input {
        height: 44px;
    }
}

/* Staff schedule location filter bar */
.staff-filter-card {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: 12px 12px;
}

.staff-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.filter-check-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    color: var(--on-surface);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.filter-check-item:hover {
    background: var(--surface-container-high);
    border-color: var(--outline);
}

.filter-check-item.is-active,
.filter-check-item:has(input:checked) {
    background: var(--surface-container);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.filter-check-item input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.matrix-avail-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 220px;
    background: var(--surface, #FAF5EB);
    border: 1px solid var(--outline, #899065);
    border-radius: var(--radius-sm, 2px);
    padding: 8px;
}

.matrix-avail-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--outline-variant, #D3BE9A);
    margin-bottom: 8px;
}

.matrix-avail-popover-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    min-width: 24px;
    min-height: 24px;
    color: var(--on-surface-variant, #4F654A);
}

.matrix-avail-popover-close:hover {
    color: var(--on-surface, #141D17);
}

.matrix-avail-popover-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
}

.matrix-avail-popover-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    padding: 0;
    min-height: 24px;
}

.matrix-row.is-row-even .matrix-day-cell {
    background: #ffffff;
}

.matrix-row.is-row-odd .matrix-day-cell {
    background: var(--background);
}

.matrix-store-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.matrix-store-code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
    line-height: 16px;
    border-radius: 2px;
    background: var(--surface-container-high, #E9D7C7);
    color: var(--on-surface-variant, #4F654A);
    letter-spacing: 0.04em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.matrix-avail-row {
    display: grid;
    grid-template-columns: 180px repeat(var(--week-days, 7), minmax(130px, 1fr));
    gap: 1px;
    background: var(--outline-variant, #D3BE9A);
    border-bottom: 2px solid var(--outline-variant);
}

.matrix-avail-col-lead {
    background: var(--surface-container-low, #F4EAD5);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    position: sticky;
    left: 0;
    z-index: 2;
    border-right: 1px solid var(--outline-variant, #D3BE9A);
}

.matrix-avail-lead-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    color: var(--on-surface-variant, #4F654A);
    letter-spacing: 0.05em;
}

/* P73: the second line of the availability corner had no rule and printed larger than its label. */
.matrix-avail-lead-sub {
    display: block;
    font-size: 11px;
    color: var(--on-surface-variant, #4F654A);
}

.matrix-avail-cell {
    background: var(--surface-container-lowest, #ffffff);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    position: relative;
}

.matrix-avail-chip-btn {
    width: 100%;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary, #294733);
    background: var(--surface-container-low, #F4EAD5);
    border: 1px solid var(--outline, #899065);
    border-radius: 2px;
    padding: 0 8px;
    min-height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.matrix-avail-chip-btn:hover {
    background: var(--primary, #294733);
    color: #ffffff;
}

.matrix-avail-empty {
    font-size: 11px;
    color: var(--on-surface-variant, #4F654A);
    font-style: italic;
}

/* The header row paints its 1px gaps with the border colour. Each day cell covers it, or the
   header text sits on #D3BE9A at 3.52:1 (P112). */
.matrix-header-row > .month-weekday {
    background: var(--surface-container-low, #F4EAD5);
    /* P73: the day name and the date had no rule and ran together as "MON21". */
    gap: 4px;
}

.btn-slot-assign-compact {
    background: none;
    border: 1px solid var(--outline-variant, #D3BE9A);
    border-radius: 2px;
    color: var(--primary, #294733);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
    line-height: 1.2;
    min-height: 24px;
}

.btn-slot-assign-compact:hover {
    background: var(--primary, #294733);
    color: #ffffff;
    border-style: solid;
}

/* The name and the time sit on two lines and the name wraps, so a chip never shows only the first
   two letters of a name (U65). */
.matrix-staff-chip-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.matrix-staff-chip-btn:hover {
    color: var(--primary, #294733);
}

.matrix-staff-name {
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.matrix-staff-time {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--on-surface-variant, #4F654A);
    white-space: nowrap;
}

.matrix-more-chip {
    background: var(--surface-container-high, #E9D7C7);
    border: 1px solid var(--outline, #899065);
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary, #294733);
    cursor: pointer;
    padding: 0 4px;
    line-height: 18px;
    text-align: center;
    width: 100%;
}

.matrix-more-chip:hover {
    background: var(--primary, #294733);
    color: #ffffff;
}

/* KPI ribbons on a phone: a nowrap label such as "Cancellations Handled" pushed the second
   column 6px past a 375px screen (P109). Let the cells shrink and the labels wrap. */
@media (max-width: 640px) {
    .reports-kpi-ribbon .ledger-item {
        min-width: 0;
    }

    .reports-kpi-ribbon .ledger-label {
        white-space: normal;
    }
}

/* P36. The console keeps its layout while data arrives, so nothing moves under the reader.
   The page keeps room for a scrollbar, so the one that appears with long content moves nothing. */
html {
    scrollbar-gutter: stable;
}

/* Each Schedule Maker strip holds the height it has when filled while it waits for data,
   measured at 1440 px: the store tabs, the ribbon and the shift type legend. */
.store-tab-bar:empty {
    min-height: 56.5px;
}

.kpi-ribbon:empty {
    min-height: 45.5px;
}

.month-legend:empty {
    min-height: 16.5px;
}

/* The publish badge holds the width of its longest text, "Whole month published", so the
   toolbar wraps the same way on the first paint and after the week loads. */
#publish-badge {
    min-width: 168px;
    justify-content: center;
}

/* A select grows to its longest option, and a store name can run to 120 characters. The cap
   keeps each filter row on one line, so the row does not wrap when the stores load (P36). */
.filter-bar select.form-input {
    max-width: 240px;
}

/* The Wages ribbon holds its filled height, measured at 1440 px, while the figures load. */
#wages-metrics-grid {
    min-height: 112px;
}

/* P63. On a phone every Schedule Maker control is at least 44px on each side, so a thumb can
   hit it. The desktop matrix keeps its compact size. */
@media (max-width: 640px) {
    .btn-slot-unassign,
    .matrix-avail-popover-close,
    .matrix-staff-chip-btn,
    .matrix-more-chip,
    .matrix-avail-chip-btn,
    .store-tab-btn,
    .btn-slot-assign {
        min-height: 44px;
        min-width: 44px;
    }

    /* P126: in a phone column "· 14:00 to 22:00" ran past the chip edge. It wraps between words. */
    .matrix-staff-time {
        white-space: normal;
    }
}

/* In a 130px day cell the code, the store tag and "+ Assign" do not fit on one line, so the
   button ran past the slot and was cut. The head wraps and the button keeps its full width. */
.matrix-slot-head {
    flex-wrap: wrap;
}

.matrix-slot-head > .btn-slot-assign-compact {
    flex-shrink: 0;
}

/* Availability is a list, one row per day, at 900px and below, so the Mon to Sun header describes
   nothing there. The schedule grid keeps its own 720px rule. */
@media (max-width: 900px) {
    .avail-weekdays {
        display: none;
    }
}

/* UI v2 pass 2. The native search clear button paints blue, which is off palette. Escape clears. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* The overrides section is a <details> whose summary is a flex row, which hides the disclosure
   arrow, so a chevron shows that it opens (U108). */
.summary-chevron {
    display: inline-flex;
    margin-left: auto;
    color: var(--on-surface-variant);
}

details[open] > summary .summary-chevron {
    transform: rotate(180deg);
}

/* A 64-character username wrapped nowhere and ran 252px past its day cell (U109). */
.sched-slot-type > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.staff-day-body .chip {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* A tab keeps its full label and the bar scrolls, rather than each tab shrinking to "All S" (U113). */
.store-tab-btn {
    flex-shrink: 0;
}

/* The catalog head wraps on a phone, so "+ Add shift type" keeps its text inside the button (U129). */
.catalog-head {
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    /* Schedule Maker toolbar controls are 44px on a phone (U114). */
    .admin-toolbar .btn,
    .date-control-cluster .date-nav-step {
        min-height: 44px;
    }

    .date-control-cluster {
        height: auto;
    }
}

/* Dialog actions sit right-aligned in the footer on a desktop (DESIGN.md, K-DLG, U120). A phone
   keeps full-width buttons, which a thumb hits more easily. */
@media (min-width: 641px) {
    .modal-dialog .u-flex:has(> .btn) {
        justify-content: flex-end;
    }

    .modal-dialog .u-flex:has(> .btn) > .btn {
        flex: 0 0 auto;
    }

    .modal-dialog .btn-block {
        display: flex;
        width: auto;
        margin-left: auto;
    }
}

/* The weekday header is a button that opens its day from the keyboard (U115). It keeps the header look. */
.month-weekday-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.month-weekday-open:hover {
    color: var(--on-surface);
}

@media (max-width: 640px) {
    /* The Publish split button fixes its own height at 36px in admin.css, which loads later, so the
       selector names the toolbar too (U114). */
    .admin-toolbar .split-btn-group,
    .admin-toolbar .split-btn-group .btn {
        height: auto;
        min-height: 44px;
    }
}

/* (published schedule) A select is 36px by default. On a phone it is a touch target, so it
   grows to 44px. The month buttons are .btn-action-compact and already get 44px above. */
@media (max-width: 640px) {
    .published-toolbar .form-input {
        min-height: 44px;
    }
}

/* U138. On a phone every admin control is at least 44px, so a thumb can hit it. .btn and
   .form-input in style.css load after this file and set 36px, and admin.css sets 28 to 36px on
   row buttons, grid fields and filter chips, so each selector carries .admin-layout to win.
   min-height beats a fixed height, so no height rule is needed. */
@media (max-width: 640px) {
    .admin-layout .btn,
    .admin-layout .wages-filter-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .admin-layout .form-input,
    .admin-layout select,
    .admin-layout input[type="text"],
    .admin-layout input[type="search"],
    .admin-layout input[type="number"],
    .admin-layout input[type="date"],
    .admin-layout input[type="time"],
    .admin-layout .grid-input,
    .admin-layout .settings-switch,
    .admin-layout summary {
        min-height: 44px;
    }

    /* An email in the Staff Directory is a link on its own line, not a word in a sentence. */
    .admin-layout .contact-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* The swatch shrank to 40px beside its text field. */
    .admin-layout .color-swatch-input {
        flex-shrink: 0;
    }

    /* A Settings title sat at the top of its 44px box. It is one line, so line-height centres
       it and keeps the disclosure marker, which display: flex would drop. */
    .admin-layout .settings-section > summary {
        line-height: 44px;
    }
}

/* W3 bookings and directory */
/* The whole label is the tap target for the Missing payment details box, 44px tall on every screen. */
.staff-missing-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
}

/* W1 schedule maker */
/* Replace sits beside the chip's Remove x and matches it: 24px on a desktop, 44px on a phone. */
.btn-slot-replace {
    background: none;
    border: none;
    color: var(--on-surface-variant, #4F654A);
    cursor: pointer;
    padding: 0 4px;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-slot-replace:hover {
    color: var(--primary);
}

@media (max-width: 640px) {
    .btn-slot-replace {
        min-width: 44px;
        min-height: 44px;
    }
}

/* W2 wages lock */
.wages-lock-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 12px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    background: var(--surface-container-low);
}

.wages-lock-bar.is-locked {
    border-color: var(--warning);
    background: var(--warning-container);
    color: var(--on-warning-container);
}

.wages-lock-text {
    flex: 1 1 240px;
    margin: 0;
    font-size: 14px;
}