.nav-count {
    float: right;
    min-width: 21px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f0a326;
    color: #251500;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.roster-area {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 700;
}

.roster-mobile-times {
    display: none;
}

.early-exit-reason {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.early-exit-reason[hidden] {
    display: none;
}

.early-exit-reason small {
    color: var(--muted);
}

@media (max-width: 760px) {
    .content {
        padding: 2px;
    }

    .scanner-mobile-shell {
        padding: 10px 5px;
    }

    .scanner-mobile-shell .shift-roster th:nth-child(2),
    .scanner-mobile-shell .shift-roster th:nth-child(3),
    .scanner-mobile-shell .shift-roster td:nth-child(2),
    .scanner-mobile-shell .shift-roster td:nth-child(3) {
        width: 82px;
    }

    .scanner-mobile-shell .shift-roster th,
    .scanner-mobile-shell .shift-roster td {
        padding-left: 5px;
        padding-right: 5px;
    }

    .scanner-mobile-shell .shift-roster .table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .scanner-mobile-shell .shift-roster table,
    .scanner-mobile-shell .shift-roster tbody {
        display: block;
        background: transparent;
    }

    .scanner-mobile-shell .shift-roster thead {
        display: none;
    }

    .scanner-mobile-shell .shift-roster tbody tr {
        display: block;
        margin-bottom: 8px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(7, 16, 48, .06);
    }

    .scanner-mobile-shell .shift-roster tbody tr.roster-pending {
        border-color: #d8dde6;
        background: #f1f3f6;
        box-shadow: none;
        opacity: .68;
    }

    .scanner-mobile-shell .shift-roster tbody tr.roster-attended {
        border-color: #9bd8c3;
        background: #f8fffc;
        box-shadow: 0 3px 14px rgba(8, 127, 91, .12);
    }

    .scanner-mobile-shell .shift-roster tbody tr:last-child {
        margin-bottom: 0;
    }

    .scanner-mobile-shell .shift-roster td {
        display: none;
        width: auto;
        border: 0;
    }

    .scanner-mobile-shell .shift-roster .roster-employee-cell,
    .scanner-mobile-shell .shift-roster .roster-empty-row td {
        display: block;
        padding: 10px;
    }

    .scanner-mobile-shell .roster-employee-cell > strong {
        display: block;
        color: var(--navy);
    }

    .scanner-mobile-shell .roster-code {
        display: none;
    }

    .scanner-mobile-shell .roster-mobile-times {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-top: 8px;
    }

    .scanner-mobile-shell .roster-mobile-times span {
        display: grid;
        gap: 2px;
        padding: 6px 8px;
        border-radius: 8px;
        background: #f2f4f8;
    }

    .scanner-mobile-shell .roster-mobile-times small {
        color: var(--muted);
        font-size: 11px;
        font-weight: 900;
    }

    .scanner-mobile-shell .roster-mobile-times b {
        color: var(--navy);
        font-variant-numeric: tabular-nums;
    }

    .scanner-mobile-shell .roster-area {
        margin-top: 8px;
        padding-top: 7px;
        border-top: 1px solid var(--line);
        font-size: 12px;
    }

    .page-heading-scanner h1 {
        font-size: 1.17em;
        white-space: nowrap;
    }
}