/* Toast and the attendance status pill. */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 50;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-raised);
    color: var(--color-text);
    font-size: 14px;
    box-shadow: var(--shadow-raised);
}

/* Attendance status: blue while checking, green when up to date, warning on failure.
   The text carries the same state, so colour is never the only signal. The Sheet syncs every
   15 minutes and today comes live from TAMS, so there's no refresh button. */
.sync-pill {
    display: inline-block;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#syncStatus:empty {
    display: none;
}

/* Idle means nothing to report: no empty box. !important beats the phone header's display rule. */
.sync-pill:empty {
    display: none !important;
}

.sync-pill[data-state="checking"] {
    border-color: var(--status-upcoming);
    color: var(--status-upcoming);
}

.sync-pill[data-state="ok"] {
    border-color: var(--color-success);
    color: var(--color-success);
}

.sync-pill[data-state="error"], .sync-pill[data-state="offline"] {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

@media (max-width: 720px) {
    .sync-pill {
        max-width: 30vw;
        padding: 3px 8px;
        font-size: 11px;
    }
    #monthYear {
        font-size: 1rem;
    }

    /* On a phone the status is a dot; its text stays for screen readers (role=status) and as its title. */
    .topbar .sync-pill {
        width: 10px;
        height: 10px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: currentColor;
        font-size: 0;
    }

    /* On the Calendar header the dot sits on a ring, so it reads on the Glow band too. */
    .topbar[data-section="calendar"] .sync-pill {
        box-shadow: 0 0 0 2px var(--hero-pill-bg);
    }
}

/* On the Calendar header the pill gets its own chip, so its text reads on the Glow band. */
@media (min-width: 721px) {
    .topbar[data-section="calendar"] .sync-pill {
        background: var(--hero-pill-bg);
    }
}