/* Centre attendance — the teacher's index and session pages.
 *
 * Linked after dashboard.css so the tokens (--card-background, --accent-color,
 * the teacher's own palette from dashboard-theme.js) are already in place; this
 * file only ever reads them, never redefines one.
 */

.at-wrap {
    max-width: 1040px;
    margin: 24px auto;
    padding: 0 16px;
}

/* dashboard.css's `.btn` sets padding and a radius but no surface and no
   white-space rule, so an unmodified button rendered as a white UA default and
   its label wrapped mid-word inside a flex row («الآ / ن»). These restate the
   parts that were missing rather than redefining `.btn` globally — the class is
   shared with every other dashboard page. */
.at-wrap .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.2;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text-color);
    cursor: pointer;
}

.at-wrap .btn:hover { background: var(--hover-bg); }

.at-wrap .btn-primary {
    background: var(--btn-bg, var(--accent-color));
    color: var(--btn-text, #fff);
    border-color: transparent;
    font-weight: 600;
}

.at-card {
    background: var(--card-background);
    color: var(--text-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 16px;
    overflow-wrap: anywhere;
}

.at-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
}

.at-title--present { color: var(--secondary-color); }
.at-title--absent  { color: var(--error-color, #dc2626); }

.muted { color: var(--text-muted); font-size: 13px; }
.at-empty { padding: 14px 4px; margin: 0; }

.at-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--hover-bg);
    color: var(--text-muted);
}

/* --- Config panel (§1.2) ------------------------------------------------- */

.at-config { padding: 0; }

.at-config-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: var(--text-color);
    cursor: pointer;
}

.at-config-toggle .at-chevron { transition: transform .2s ease; }
.at-config-toggle.is-open .at-chevron { transform: rotate(180deg); }

.at-config-body { padding: 0 20px 20px; }

.at-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.at-catalogue h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin: 0 0 4px;
}

.at-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.at-inline-form input {
    flex: 1 1 140px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 14px;
}

.at-list { list-style: none; margin: 0; padding: 0; }

.at-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-color);
}

.at-list-item.is-off { opacity: .55; }
.at-list-item:last-child { border-bottom: 0; }

.at-list-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.at-list-name small { font-size: 12px; }
.at-off-tag { color: var(--error-color, #dc2626); font-weight: 600; }

.at-list-actions { display: flex; gap: 4px; flex: 0 0 auto; }

.at-icon-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
}

.at-icon-btn:hover { background: var(--hover-bg); color: var(--text-color); }
.at-icon-btn.danger:hover { color: #fff; background: var(--error-color, #dc2626); border-color: transparent; }
.at-icon-btn.ok:hover { color: #fff; background: var(--secondary-color); border-color: transparent; }

/* --- Phase / grade tabs --------------------------------------------------- */

.at-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.at-tabs--grades { margin-top: 10px; }

.at-tab {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.at-tab:hover { background: var(--hover-bg); }

.at-tab.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    font-weight: 700;
}

.at-tab--grade { font-size: 13px; padding: 6px 14px; }
.at-tab--grade.active { background: var(--secondary-color); border-color: var(--secondary-color); }

/* --- Create-session form -------------------------------------------------- */

.at-session-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.at-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.at-field--wide { grid-column: 1 / -1; }

.at-field label { font-weight: 600; font-size: 14px; }

.at-field input,
.at-field select {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 14px;
    width: 100%;
    min-width: 0;
}

.at-date-row { display: flex; gap: 8px; align-items: stretch; }
/* min-width:0 is what lets the date input give ground instead of squeezing the
   button; the button itself never shrinks. */
.at-date-row input { flex: 1 1 auto; min-width: 0; }
.at-date-row .btn { flex: 0 0 auto; }

.at-form-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.at-roster-hint { font-size: 13px; color: var(--secondary-color); font-weight: 600; }
.at-roster-hint.is-empty { color: var(--text-muted); font-weight: 400; }

/* --- Session list --------------------------------------------------------- */

.at-sessions { display: flex; flex-direction: column; gap: 10px; }

.at-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: inherit;
    text-decoration: none;
}

.at-session:hover { border-color: var(--accent-color); }

.at-session-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.at-session-main b { font-size: 15px; }
.at-session-topic { font-size: 13px; color: var(--text-color); }
.at-session-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--text-muted); }

.at-badge-assistant {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

/* --- Session page --------------------------------------------------------- */

.at-session-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.at-session-meta { min-width: 200px; flex: 1 1 240px; }
.at-session-meta h2 { margin: 0 0 4px; font-size: 18px; }
.at-session-meta p { margin: 0; }

.at-counts { display: flex; gap: 10px; }

.at-count {
    text-align: center;
    min-width: 74px;
    padding: 10px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.at-count b { display: block; font-size: 20px; }
.at-count span { font-size: 12px; color: var(--text-muted); }

.at-session-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.at-student {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-color);
}

.at-student:last-child { border-bottom: 0; }
.at-student-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.at-student-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.at-flag {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--hover-bg);
    color: var(--text-muted);
}

/* §1.6 — «غير محدد». Amber, not red: the student *is* present, this is a note
   about their profile, not a failure. */
.at-flag.warn {
    background: #fef3c7;
    color: #92400e;
}

/* --- Scanner overlay (§1.5) ---------------------------------------------- */

.at-scanner {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #000;
    display: flex;
    flex-direction: column;
}

.at-scanner[hidden] { display: none; }

.at-scanner-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, .85);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

#scannerView {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* html5-qrcode injects a raw <video>; without this it overflows the overlay on
   a phone held in portrait. */
#scannerView video {
    max-width: 100%;
    max-height: 100%;
}

.at-scanner-feed {
    max-height: 34vh;
    overflow-y: auto;
    background: rgba(0, 0, 0, .85);
    padding: 8px 16px 16px;
}

.at-feed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 14px;
    color: #fff;
}

.at-feed-item.ok   { background: #166534; }
.at-feed-item.dup  { background: #374151; }
.at-feed-item.warn { background: #92400e; }
.at-feed-item.err  { background: #991b1b; }
.at-feed-item span { font-size: 12px; opacity: .85; }

/* --- Toast ---------------------------------------------------------------- */

.at-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 18px;
    border-radius: 10px;
    color: #fff;
    z-index: 9999;
    display: none;
    max-width: 90vw;
    text-align: center;
}

.at-toast.ok  { background: var(--success-color, #16a34a); }
.at-toast.err { background: var(--error-color, #dc2626); }

/* --- Print (the "PDF" half of §1.6) -------------------------------------- */
/*
 * The register is printed from the page itself rather than rendered server-side:
 * an HTML page opened in a new tab carries no bearer token, and the app's
 * WebView would hand that tab to the system browser where there is no session
 * at all. What prints is exactly what the teacher is looking at.
 */
 * Scoped to the session page: this stylesheet is also linked on the student
 * dashboard for the QR card, and an unscoped block hiding `.header` would
 * quietly change what prints from there too.
 */
@media print {
    body[data-page-key="attendance-session"] .at-no-print,
    body[data-page-key="attendance-session"] .header,
    body[data-page-key="attendance-session"] .at-scanner,
    body[data-page-key="attendance-session"] .at-toast { display: none !important; }

    body[data-page-key="attendance-session"] { background: #fff; color: #000; }

    body[data-page-key="attendance-session"] .at-wrap { max-width: none; margin: 0; padding: 0; }

    body[data-page-key="attendance-session"] .at-card {
        box-shadow: none;
        border: 1px solid #ccc;
        background: #fff;
        color: #000;
        margin-bottom: 12px;
        break-inside: avoid;
    }

    body[data-page-key="attendance-session"] .at-student,
    body[data-page-key="attendance-session"] .at-list-item { break-inside: avoid; }

    body[data-page-key="attendance-session"] .at-flag.warn {
        background: none;
        color: #000;
        border: 1px solid #000;
    }
}

/* --- Student side --------------------------------------------------------- */

.form-hint {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.attendance-center-row { margin-bottom: 12px; }
.attendance-center-row:last-child { margin-bottom: 0; }

.qr-holder {
    display: flex;
    justify-content: center;
    padding: 10px 0 14px;
}

/* A white plate under the code regardless of theme: a QR inverted by a dark
   surface will not scan on some readers. */
.qr-holder img {
    width: 100%;
    max-width: 190px;
    height: auto;
    background: #fff;
    padding: 8px;
    border-radius: 10px;
}