/* ══════════════════════════════════════════════════════════════════════════
   Student Attendance page — what is specific to this page.

   The system it established now lives in student-pages.css (loaded after this
   sheet): the tokens, the page column, the shared card, the card head with its
   44px tile, the hairline, label/value, pills and the title row. Both this
   page and the other student routes read that one definition, so nothing here
   may restate a shared value — only the geometry that is this page's own: the
   punch row, the Today card's internals, the permissions card, the map.

   Scopes:
     · #attendance-page  — the page's own column and rows (punch row,
                           two-column row). Nothing outside this page is hit.
     · .card.today-card  — the shared component. The Today card is rendered on
       the dashboard too (App reuses AttendancePage.todayCardHtml), so its
       internals are styled by component, not by route, and both stay identical.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The column ─────────────────────────────────────────────────────────── */

/* The 20px rhythm itself is the shared .stu-page column; this page only adds
   its own grid rows to it. */
[data-role="3"] #main-content #attendance-page .card { margin: 0; }

/* ── 4. Punch row ───────────────────────────────────────────────────────── */

[data-role="3"] #main-content #attendance-page .attendance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin: 0;
}
[data-role="3"] #main-content #attendance-page .attendance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
}
[data-role="3"] #main-content #attendance-page .attendance-btn::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
}
[data-role="3"] #main-content #attendance-page .btn-time-in::before { content: "\f2f6"; }
[data-role="3"] #main-content #attendance-page .btn-time-out::before { content: "\f2f5"; }

/* Enabled: the offered punch. Disabled: the same shape, pale and inert — the
   two tones swap on the existing is_timed_in logic, which only ever disables
   one of them. */
[data-role="3"] #main-content #attendance-page .attendance-btn.btn-time-in,
[data-role="3"] #main-content #attendance-page .attendance-btn.btn-time-out {
    /* the spec's #1E9E45 is 3.48:1 against white label text, under AA; this is
       the same green a shade deeper, at 4.72:1 */
    background: #17853A;
    border-color: #17853A;
    color: #FFFFFF;
    box-shadow: var(--stu-shadow-green);
    opacity: 1;
}
[data-role="3"] #main-content #attendance-page .attendance-btn:disabled {
    background: #F6DEE0;
    border-color: #F6DEE0;
    color: #B4646E;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}
[data-role="3"] #main-content #attendance-page .attendance-btn:active:not(:disabled) { transform: none; }

/* ── 5. Today ───────────────────────────────────────────────────────────── */

[data-role="3"] #main-content .card.today-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--stu-surface);
    border: 1px solid var(--stu-border);
    border-radius: var(--stu-radius);
    box-shadow: var(--stu-shadow);
    overflow: hidden;
}

/* The head's gutter belongs to the page, because the Today and Permissions
   cards are bleed cards (their shell carries no padding). The pattern itself —
   the 44px tile, the title over a sub-line, the one pill — is defined once in
   student-pages.css and shared by every student card. */
[data-role="3"] #main-content .att-card-head { padding: 16px 20px 14px; }

/* the hairline under that head, inset to the same 20px gutter */
[data-role="3"] #main-content .att-hair {
    height: 1px;
    margin: 0 20px;
    background: var(--stu-hair);
}

/* the three figures, each behind a hairline */
[data-role="3"] #main-content .card.today-card .today-stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
}
[data-role="3"] #main-content .card.today-card .today-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0 18px;
    border-left: 1px solid var(--stu-hair);
    line-height: 1.2;
}
[data-role="3"] #main-content .card.today-card .today-stat:first-child { border-left: 0; padding-left: 0; }
[data-role="3"] #main-content .card.today-card .today-stat:last-child { padding-right: 0; }
[data-role="3"] #main-content .card.today-card .today-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--stu-text);
    font-variant-numeric: tabular-nums;
}
[data-role="3"] #main-content .card.today-card .today-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--stu-label);
}
[data-role="3"] #main-content .card.today-card .today-stat.is-pending .today-stat-value { color: var(--stu-warning); }

[data-role="3"] #main-content .card.today-card .today-day-state {
    flex: 0 0 auto;
    padding: 4px 11px 4px 9px;
    background: var(--stu-success-bg);
    border: 0;
    border-radius: 999px;
    color: var(--stu-success);
    font-size: 12.5px;
    font-weight: 600;
}
[data-role="3"] #main-content .card.today-card .today-day-state:not(.is-active) {
    background: var(--stu-neutral-bg);
    color: var(--stu-neutral);
}

/* progress: one line, hairline above, the fraction at the bar's right */
[data-role="3"] #main-content .card.today-card .today-progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
}
[data-role="3"] #main-content .card.today-card .today-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
[data-role="3"] #main-content .card.today-card .today-progress-track {
    display: block;
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--stu-hair);
    overflow: hidden;
}
[data-role="3"] #main-content .card.today-card .today-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--stu-primary);
}
[data-role="3"] #main-content .card.today-card .today-progress-label {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--stu-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
[data-role="3"] #main-content .card.today-card .today-open-flag,
[data-role="3"] #main-content .card.today-card .today-awaiting {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
[data-role="3"] #main-content .card.today-card .today-open-flag { color: var(--stu-success); }
[data-role="3"] #main-content .card.today-card .today-awaiting { color: var(--stu-warning); }

/* body: one line when the day has not started, compact rows once it has */
[data-role="3"] #main-content .card.today-card > .card-body.att-today-body { padding: 2px 20px 6px; }
[data-role="3"] #main-content .card.today-card .today-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 0;
}
[data-role="3"] #main-content .card.today-card .today-empty-node { display: none; }
[data-role="3"] #main-content .card.today-card .today-empty > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
[data-role="3"] #main-content .card.today-card .today-empty-text {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--stu-text);
}
[data-role="3"] #main-content .card.today-card .today-empty-hint {
    margin: 0;
    font-size: 13px;
    color: var(--stu-muted);
}

[data-role="3"] #main-content .card.today-card .today-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
[data-role="3"] #main-content .card.today-card .today-session {
    display: flex;
    align-items: center;
    gap: 12px;
    grid-template-columns: none;
    min-height: 44px;
    padding: 4px 0;
    border-bottom: 1px solid var(--stu-hair);
    column-gap: 0;
}
[data-role="3"] #main-content .card.today-card .today-session:last-child { border-bottom: 0; }
[data-role="3"] #main-content .card.today-card .session-rail { display: none; }
[data-role="3"] #main-content .card.today-card .session-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}
[data-role="3"] #main-content .card.today-card .session-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
}
[data-role="3"] #main-content .card.today-card .session-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
[data-role="3"] #main-content .card.today-card .session-title { font-size: 12.5px; }
[data-role="3"] #main-content .card.today-card .session-thumb { width: 28px; height: 28px; }
[data-role="3"] #main-content .card.today-card .session-times {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--stu-text);
}
[data-role="3"] #main-content .card.today-card .session-length,
[data-role="3"] #main-content .card.today-card .session-remark,
[data-role="3"] #main-content .card.today-card .session-hint,
[data-role="3"] #main-content .card.today-card .session-elapsed {
    font-size: 12.5px;
    color: var(--stu-muted);
}

/* ── 6. Two columns: permissions │ live location ────────────────────────── */

[data-role="3"] #main-content #attendance-page .att-cols {
    display: grid;
    grid-template-columns: minmax(340px, 5fr) minmax(420px, 7fr);
    gap: 16px;
    align-items: stretch;
}

/* LEFT — Attendance Permissions */
[data-role="3"] #main-content #attendance-page .perm-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: var(--stu-surface);
    border: 1px solid var(--stu-border);
    border-radius: var(--stu-radius);
    box-shadow: var(--stu-shadow);
}
[data-role="3"] #main-content #attendance-page .perm-hairline {
    height: 1px;
    margin: 0;
    background: var(--stu-hair);
}
[data-role="3"] #main-content #attendance-page .perm-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}
[data-role="3"] #main-content #attendance-page .perm-status-pill.is-green { background: var(--stu-success-bg); color: var(--stu-success); }
[data-role="3"] #main-content #attendance-page .perm-status-pill.is-grey { background: var(--stu-neutral-bg); color: var(--stu-neutral); }
[data-role="3"] #main-content #attendance-page .perm-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

[data-role="3"] #main-content #attendance-page .perm-row { display: flex; flex-direction: column; }
[data-role="3"] #main-content #attendance-page .perm-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 52px;
    height: 52px;
    padding: 0;
    border-bottom: 1px solid var(--stu-hair);
}
[data-role="3"] #main-content #attendance-page .perm-cell:last-child { border-bottom: 0; }
[data-role="3"] #main-content #attendance-page .perm-cell-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--stu-neutral-bg);
    color: var(--stu-muted);
    font-size: 15px;
}
[data-role="3"] #main-content #attendance-page .perm-cell-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
[data-role="3"] #main-content #attendance-page .perm-label {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--stu-label);
}
[data-role="3"] #main-content #attendance-page .perm-cell .permission-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
[data-role="3"] #main-content #attendance-page .perm-cell .permission-state .stu-pill-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}
[data-role="3"] #main-content #attendance-page .perm-cell .permission-state.stu-pill-success { background: var(--stu-success-bg); color: var(--stu-success); }
[data-role="3"] #main-content #attendance-page .perm-cell .permission-state.stu-pill-warning { background: var(--stu-warning-bg); color: var(--stu-warning); }
[data-role="3"] #main-content #attendance-page .perm-cell .permission-state.stu-pill-danger  { background: var(--stu-danger-bg);  color: var(--stu-danger); }

[data-role="3"] #main-content #attendance-page .perm-cell .perm-action.btn {
    flex: 0 0 auto;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--stu-primary);
    border-radius: 10px;
    background: var(--stu-primary);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
[data-role="3"] #main-content #attendance-page .perm-cell .perm-action.btn:hover { background: #085A94; border-color: #085A94; }
[data-role="3"] #main-content #attendance-page .perm-cell .perm-action.btn.hidden { display: none; }

[data-role="3"] #main-content #attendance-page .perm-notes {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px 20px;
    /* the hint under the rows changes with every permission state; a floor
       keeps the card — and the row it shares with the map — from resizing
       when a permission is granted or refused */
    min-height: 58px;
    margin: 0;
}
[data-role="3"] #main-content #attendance-page .perm-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--stu-muted);
}
[data-role="3"] #main-content #attendance-page .perm-note:empty { display: none; }
[data-role="3"] #main-content #attendance-page .perm-note-chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    font-size: 12.5px;
    color: var(--stu-muted);
}

/* RIGHT — Live Location */
[data-role="3"] #main-content #attendance-page .location-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    background: var(--stu-surface);
    border: 1px solid var(--stu-border);
    border-radius: var(--stu-radius);
    box-shadow: var(--stu-shadow);
    overflow: hidden;
}
[data-role="3"] #main-content #attendance-page .location-card .live-map-wrap {
    flex: 1 1 auto;
    height: auto;
    min-height: 190px;
    border-top: 1px solid var(--stu-hair);
    border-bottom: 1px solid var(--stu-hair);
    background: #EDF1F5;
}
[data-role="3"] #main-content #attendance-page .location-card .live-map {
    width: 100%;
    height: 100%;
    min-height: 190px;
}
[data-role="3"] #main-content #attendance-page .location-card #map-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border: 0;
    border-radius: 999px;
    background: var(--stu-neutral-bg);
    color: var(--stu-neutral);
    font-size: 12.5px;
    font-weight: 600;
}
[data-role="3"] #main-content #attendance-page .location-card #map-status.badge-success {
    background: var(--stu-success-bg);
    color: var(--stu-success);
}

[data-role="3"] #main-content #attendance-page .att-map-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 8px 10px;
    /* fixed, because the fix text changes length with every state: a taller
       footer in one state would move the card — and the page — under it */
    min-height: 80px;
    padding: 12px 20px;
    font-size: 12.5px;
    color: var(--stu-muted);
}
[data-role="3"] #main-content #attendance-page .att-map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--stu-muted);
}
[data-role="3"] #main-content #attendance-page .att-map-legend .badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
[data-role="3"] #main-content #attendance-page .att-map-legend .badge-neutral {
    background: var(--stu-neutral-bg);
    color: var(--stu-neutral);
    font-weight: 600;
}
[data-role="3"] #main-content #attendance-page .att-map-legend .badge-success { background: var(--stu-success-bg); color: var(--stu-success); }
[data-role="3"] #main-content #attendance-page .att-map-legend .badge-danger  { background: var(--stu-danger-bg);  color: var(--stu-danger); }

/* the fix, at the far right of the footer — the old standalone banner's text */
[data-role="3"] #main-content #attendance-page .att-map-foot .gps-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 auto;
    margin: 0 0 0 auto;
    padding: 3px 10px 3px 8px;
    border: 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
}
[data-role="3"] #main-content #attendance-page .att-map-foot .gps-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}
[data-role="3"] #main-content #attendance-page .att-map-foot .gps-active   { background: var(--stu-success-bg); color: var(--stu-success); }
[data-role="3"] #main-content #attendance-page .att-map-foot .gps-searching { background: var(--stu-warning-bg); color: var(--stu-warning); }
[data-role="3"] #main-content #attendance-page .att-map-foot .gps-error    { background: var(--stu-danger-bg);  color: var(--stu-danger); }
[data-role="3"] #main-content #attendance-page .att-map-foot #gps-status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dialog hosts: they carry no box of their own, or the column's 20px gap
   would add two empty bands under the last card. */
[data-role="3"] #main-content #attendance-page #manual-attendance-root,
[data-role="3"] #main-content #attendance-page #faceid-modal-root { display: contents; }

/* the history table that opens under the title row */
[data-role="3"] #main-content #attendance-page #history-container > .card {
    margin-top: 0;
    border-radius: var(--stu-radius);
    border-color: var(--stu-border);
    box-shadow: var(--stu-shadow);
}

/* ── Focus: one visible ring, on whatever the keyboard is on ────────────── */

[data-role="3"] #main-content #attendance-page a:focus-visible,
[data-role="3"] #main-content #attendance-page button:focus-visible,
[data-role="3"] #main-content #attendance-page [tabindex]:focus-visible {
    outline: 2px solid var(--stu-primary);
    outline-offset: 2px;
}

/* ── Sidebar (the shell's rail: geometry and labels only) ───────────────── */

.sidebar .nav-link {
    height: 42px;
    min-height: 42px;
    border-radius: 10px;
    border-left: 0;
    padding: 0 12px;
    margin: 0 6px;
}
.sidebar .nav-link.active {
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    border-left-color: transparent;
    box-shadow: none;
    font-weight: 600;
}
.sidebar .nav-link.active .nav-icon { color: #FFFFFF; opacity: 1; }
.sidebar-section-title {
    padding: 14px 18px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #7F90A6;
}
.sidebar-footer { padding: 12px 12px 14px; }
.sidebar .btn-signout {
    height: 42px;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    color: #CBD5E1;
    font-size: 13px;
    font-weight: 500;
}
.sidebar .btn-signout:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .28);
    color: #FFFFFF;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* The column, the title row, the identity band and the card head wrap at 640
   through the shared sheet; what is left here is this page's own geometry. */

@media (max-width: 1100px) {
    [data-role="3"] #main-content #attendance-page .att-cols { grid-template-columns: minmax(0, 1fr); }
    [data-role="3"] #main-content .card.today-card .att-card-head { flex-wrap: wrap; row-gap: 12px; }
    [data-role="3"] #main-content .card.today-card .today-stats {
        flex: 1 1 100%;
        margin: 0;
        padding-top: 12px;
        border-top: 1px solid var(--stu-hair);
    }
    [data-role="3"] #main-content .card.today-card .today-stat:first-child { padding-left: 0; }
}

@media (max-width: 640px) {
    [data-role="3"] #main-content .card.today-card .att-card-head { padding: 14px 16px 12px; }
    [data-role="3"] #main-content .att-hair { margin: 0 16px; }
    [data-role="3"] #main-content .card.today-card .today-progress-row { padding: 10px 16px; flex-wrap: wrap; row-gap: 8px; }
    [data-role="3"] #main-content .card.today-card > .card-body.att-today-body { padding: 2px 16px 6px; }
    [data-role="3"] #main-content .card.today-card .today-stat { padding: 0 12px; }
    [data-role="3"] #main-content .card.today-card .today-stat-value { font-size: 17px; }

    [data-role="3"] #main-content #attendance-page .attendance-grid { grid-template-columns: minmax(0, 1fr); }
    [data-role="3"] #main-content #attendance-page .attendance-btn { width: 100%; }

    [data-role="3"] #main-content #attendance-page .perm-card { padding: 14px 16px; }
    [data-role="3"] #main-content #attendance-page .perm-cell { height: auto; min-height: 52px; padding: 8px 0; }
    [data-role="3"] #main-content #attendance-page .perm-cell-text { flex-wrap: wrap; row-gap: 4px; }
    [data-role="3"] #main-content #attendance-page .att-map-foot { padding: 10px 16px; }
    [data-role="3"] #main-content #attendance-page .att-map-foot .gps-indicator { margin-left: 0; }
}