/* ====================================================
   Student Attendance QR — Frontend Styles
   ==================================================== */

.saq-form-wrap {
    max-width: 560px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Result messages */
.saq-result {
    padding: 1rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1.2rem;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
}
.saq-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.saq-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.saq-warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.saq-loading { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }

/* Student card */
.saq-student-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: #f0f9ff;
    border: 2px solid #0ea5e9;
    border-radius: 14px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.2rem;
    animation: saqFadeIn .3s ease;
}
@keyframes saqFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.saq-avatar { font-size: 3rem; }
.saq-student-details h2 { margin: 0 0 .25rem; font-size: 1.3rem; color: #0c4a6e; }
.saq-student-details p  { margin: 0; color: #0369a1; font-size: .9rem; }

/* Form */
.saq-checkin-form { display: flex; flex-direction: column; gap: 1rem; }
.saq-manual-input label { display: block; font-weight: 600; margin-bottom: .4rem; }
.saq-input-row { display: flex; gap: .5rem; }
.saq-input-row input {
    flex: 1;
    padding: .7rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color .2s;
}
.saq-input-row input:focus { outline: none; border-color: #3b82f6; }

/* Buttons */
.saq-btn {
    padding: .75rem 1.5rem;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.saq-btn:hover { transform: translateY(-2px); }
.saq-btn:active { transform: translateY(0); opacity: .85; }
.saq-btn-primary   { background: #2563eb; color: #fff; width: 100%; padding: 1rem; font-size: 1.1rem; border-radius: 10px; }
.saq-btn-secondary { background: #f3f4f6; color: #374151; }

/* Log */
.saq-checkin-log { margin-top: 2rem; }
.saq-checkin-log h3 { font-size: 1rem; color: #6b7280; margin-bottom: .6rem; }
.saq-checkin-log ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.saq-checkin-log li {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: .5rem .9rem;
    border-radius: 8px;
    font-size: .9rem;
    animation: saqFadeIn .25s ease;
}

/* Scanner */
.saq-scanner-wrap { max-width: 560px; margin: 0 auto; }
.saq-scanner-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.saq-scanner-header h3 { margin: 0; }
#saq-reader { border-radius: 12px; overflow: hidden; }

/* QR card (shortcode) */
.saq-qr-card { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; border: 1px solid #e0e0e0; border-radius: 10px; background: #fff; }