/**
 * EMLearn – Generic Attendance QR Check-In Form
 *
 * Extends kiosk.css with tab navigation, two-column grid,
 * and QR card styles. All colours and typography are inherited
 * from the parent theme / kiosk.css — nothing is redefined here.
 *
 * Enqueue handle: emlearn-attendance-qr
 * File path:      assets/css/attendance-qr.css
 *
 * Add to functions.php $css_files array:
 *   'emlearn-attendance-qr' => 'attendance-qr.css',
 *
 * @package EMLearn
 */

/* ── Tab bar ────────────────────────────────────────────────────────────── */
.attn-tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 24px;
}

.attn-tab {
    padding: 10px 22px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: Calibri, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.attn-tab.active              { color: #0073aa; border-bottom-color: #0073aa; }
.attn-tab:hover:not(.active)  { color: #0073aa; }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.attn-panel        { display: none; }
.attn-panel.active { display: block; }

/* ── Section heading ─────────────────────────────────────────────────────── */
.attn-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #aaa;
    margin: 0 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

/* ── Two-column responsive grid ──────────────────────────────────────────── */
.attn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.attn-grid .attn-field       { flex: 1 1 200px; }
.attn-grid .attn-field.attn-full { flex: 1 1 100%; }

.attn-field { display: flex; flex-direction: column; gap: 5px; }

/* Required asterisk */
.attn-req { color: #cc0000; margin-left: 2px; }

/* ── QR card ─────────────────────────────────────────────────────────────── */
.attn-qr-card  { max-width: 400px; margin: 0 auto; text-align: center; }

.attn-qr-wrap {
    display: inline-block;
    padding: 14px;
    border: 2px solid #0073aa;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 16px;
}

.attn-qr-url {
    font-size: 11px;
    color: #aaa;
    word-break: break-all;
    margin-bottom: 16px;
}

/* ── Print: QR panel only ────────────────────────────────────────────────── */
@media print {
    .attn-tabs,
    #attn-checkin         { display: none !important; }
    #attn-qr              { display: block !important; }
    .kiosk-wrapper        { box-shadow: none !important; border: none !important; }
}

/* ── Mobile stacking ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .attn-grid .attn-field { flex: 1 1 100%; }
}