/**
 * BIBH Classroom Suite - Student-specific styles.
 *
 * Builds on common.css. Adds student-specific feedback
 * highlighting and upload card accents.
 */

/* === Teacher feedback section - highlighted background === */
.bibh-student-hub .bibh-notes {
    background: var(--bibh-primary-light);
    border-radius: var(--bibh-radius-sm);
    padding: 14px;
    border-top: none;
    margin-top: 14px;
}

.bibh-student-hub .bibh-notes__title {
    color: var(--bibh-primary);
}

.bibh-student-hub .bibh-note {
    background: var(--bibh-white);
    border: 1px solid var(--bibh-border);
}

/* === Upload cards - subtle left accent === */
.bibh-student-hub .bibh-card--upload {
    border-left: 3px solid var(--bibh-secondary);
}

/* === Upload form emphasis === */
.bibh-student-hub .bibh-form-card {
    background: var(--bibh-secondary-light);
    border-color: var(--bibh-secondary);
}

/* === Resource cards in student view === */
.bibh-student-hub .bibh-card--resource {
    border-left: 3px solid var(--bibh-accent);
}

/* === File type icon colours (upload badges) === */
.bibh-student-hub .bibh-badge--type {
    background: var(--bibh-accent-light);
    color: var(--bibh-dark);
}

/* === Classroom cards - match teacher styling === */
.bibh-student-hub .bibh-card--classroom {
    border-left: 4px solid var(--bibh-primary);
}

.bibh-student-hub .bibh-card--classroom .bibh-card__title a:hover {
    color: var(--bibh-primary);
}

/* === Quiz cards inside classroom view === */
.bibh-student-hub .bibh-card--quiz {
    border-left: 4px solid var(--bibh-secondary);
}

.bibh-student-hub .bibh-card--quiz-not_started {
    border-left-color: var(--bibh-neutral);
}

.bibh-student-hub .bibh-card--quiz-in_progress {
    border-left-color: var(--bibh-accent);
}

.bibh-student-hub .bibh-card--quiz-submitted {
    border-left-color: var(--bibh-primary);
}

/* Quiz status badges */
.bibh-student-hub .bibh-badge--not_started {
    background: var(--bibh-neutral-light);
    color: var(--bibh-text, #3D3D3D);
}

.bibh-student-hub .bibh-badge--in_progress {
    background: #fef3cd;
    color: var(--bibh-dark);
}

.bibh-student-hub .bibh-badge--submitted {
    background: #d1fae5;
    color: #065f46;
}

.bibh-student-hub .bibh-badge--overdue {
    background: #fee2e2;
    color: #991b1b;
}

/* Score pill */
.bibh-mcq-score-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
}

.bibh-mcq-score-pill__value {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.bibh-mcq-score-pill__value--pass {
    color: var(--bibh-primary);
}

.bibh-mcq-score-pill__value--fail {
    color: #dc2626;
}

.bibh-mcq-score-pill__detail {
    font-size: 0.85rem;
}

/* Quiz card stats row */
.bibh-card__stats {
    margin-top: 12px;
}

/* === Per-tab "NEW" notification pills === */
.bibh-tab-new {
    position: absolute;
    top: -20px;
    left: 75%;
    transform: translateX(-50%);
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
    z-index: 6;
    pointer-events: none;
    animation: bibh-badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bibh-tab-new--quiz {
    background: var(--bibh-secondary);
    color: var(--bibh-dark);
    box-shadow: 0 2px 6px rgba(145, 209, 219, 0.45);
}

.bibh-tab-new--resource {
    background: var(--bibh-accent);
    color: var(--bibh-dark);
    box-shadow: 0 2px 6px rgba(243, 215, 106, 0.45);
}

@keyframes bibh-badge-pop {
    0%   { transform: translateX(-50%) scale(0); }
    100% { transform: translateX(-50%) scale(1); }
}

/* Ensure the card doesn't clip the badges */
.bibh-card--classroom {
    overflow: visible;
}

/* === My Folder - side-by-side layout === */
.bibh-folder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.bibh-folder-grid__list .bibh-subtitle {
    margin: 0 0 16px;
}

/* Compact form card - tighter spacing inside the folder grid */
.bibh-form-card--compact {
    padding: 20px;
}

.bibh-form-card--compact h3 {
    font-size: 1rem;
    margin: 0 0 10px;
}

.bibh-form-card--compact .bibh-form-group {
    margin-bottom: 10px;
}

.bibh-form-card--compact .bibh-form-group label {
    margin-bottom: 3px;
    font-size: 0.85rem;
}

.bibh-form-card--compact .bibh-input {
    padding: 8px 10px;
    font-size: 0.9rem;
}

.bibh-form-card--compact textarea.bibh-input {
    rows: 2;
    min-height: auto;
}

.bibh-form-card--compact .bibh-help-text {
    margin-top: 2px;
    font-size: 0.78rem;
}

.bibh-form-card--compact .bibh-form-actions {
    margin-top: 12px;
}

/* Stacked on tablet and below */
@media (max-width: 899px) {
    .bibh-folder-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 *  Camera capture tab - mobile only
 * ============================================================ */

/* Hide the 📷 Take Photo tab on desktop */
@media (min-width: 768px) {
    .bibh-tab--camera {
        display: none;
    }
}

/* Viewfinder - live video stream */
.bibh-camera-viewfinder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

#bibh-camera-video {
    width: 100%;
    max-width: 100%;
    border-radius: var(--bibh-radius);
    background: #000;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

/* Captured still */
.bibh-camera-captured {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

#bibh-camera-canvas {
    width: 100%;
    max-width: 100%;
    border-radius: var(--bibh-radius);
    border: 2px solid var(--bibh-primary);
    display: block;
}

/* Full-width capture button */
.bibh-camera-capture-btn {
    width: 100%;
}

/* Error / permission-denied panel */
.bibh-camera-error {
    text-align: center;
    padding: 20px 16px;
    background: #fef9e7;
    border: 1px solid #f3c846;
    border-radius: var(--bibh-radius);
    margin-bottom: 8px;
}

.bibh-camera-error__msg {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--bibh-dark);
}