/* ═══════════════════════════════════════════════════
   Check-in page — mw-ci-* prefix
   Ported from docs/mockups/check-in-page.html. Accent
   colors are taken verbatim from the mockup; neutral
   surfaces use MudBlazor dark-theme palette vars.
   ═══════════════════════════════════════════════════ */

/* ── Check-in pill (replaces the bare icon button) ── */

.mw-ci-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .14s;
}

.mw-ci-pill:active {
    transform: scale(.97);
}

/* Size the MudBlazor svg glyph to the mockup's 18px (wins over .mud-icon-size-*). */
.mw-ci-pill .mw-ci-pill-icon {
    font-size: 18px;
}

/* Not checked in — filled amber gradient, the primary affordance. */
.mw-ci-pill-todo {
    background: linear-gradient(180deg, #ffb03a, #f59e1b);
    color: #251200;
    box-shadow: 0 8px 20px -8px rgba(255, 176, 58, .6);
}

/* Checked in — translucent green, secondary but still tappable (view / re-sign). */
.mw-ci-pill-done {
    background: rgba(52, 224, 138, .13);
    color: #34e08a;
    border: 1px solid rgba(52, 224, 138, .3);
}

/* ── Arrival cell: date + colored relative-time token ── */

.mw-ci-arr {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.mw-ci-arr-sep {
    margin: 0 .4em;
    color: #5f6678;
}

.mw-ci-rel {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mw-ci-rel-today {
    color: #34e08a;
}

.mw-ci-rel-tom {
    color: #5b9dff;
}

.mw-ci-rel-later {
    color: #5f6678;
}

.mw-ci-rel-past {
    color: #ff5d6c;
}

/* ── Toolbar progress rings (Today / All) ── */

.mw-ci-counters {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mw-ci-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

.mw-ci-ring {
    position: relative;
    width: 38px;
    height: 38px;
    flex: none;
}

.mw-ci-ring svg {
    display: block;
}

.mw-ci-ring-pct {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    color: #34e08a;
}

.mw-ci-nums {
    line-height: 1.1;
}

.mw-ci-nums-value {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.mw-ci-nums-of {
    color: #5f6678;
    font-weight: 500;
}

.mw-ci-nums-label {
    display: block;
    margin-top: 2px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: #5f6678;
}