/* ==============================================
   mobile.css  —  public/css/mobile.css
   Load LAST on every page after all other CSS.
   ============================================== */

/* ══ GLOBAL ══════════════════════════════════ */
html, body { overflow-x: hidden; max-width: 100vw; }
* { min-width: 0; box-sizing: border-box; }

/* ══ NAVBAR — desktop responsive (900px+) ═══ */
/* Tighten gaps on mid-size screens so nothing clashes */
@media (min-width: 901px) and (max-width: 1100px) {
    .nav-container { padding: 0 1rem; }
    .nav-links { gap: .15rem; }
    .nav-link-btn { font-size: .82rem; padding: .42rem .55rem; gap: 5px; }
    .nav-link-btn i { font-size: .8rem; }
    .logo-main { font-size: 1.5rem; }
    .logo-sub  { font-size: .65rem; letter-spacing: 1.5px; }
    .logo-icon { font-size: 1.7rem; }
    .nav-user-badge { font-size: .82rem; padding: .35rem .8rem; }
}

/* Ultra-wide — give more breathing room */
@media (min-width: 1400px) {
    .nav-container { max-width: 1400px; }
    .main          { max-width: 1400px; }
}

/* ══ MOBILE NAV (hamburger already handles <900px) ══════════
   Just make sure the mobile panel looks clean              */
@media (max-width: 900px) {
    .nav-container { padding: 0 1rem; }
    .logo-main { font-size: 1.5rem; }
    .logo-sub  { font-size: .65rem; }
    .logo-icon { font-size: 1.7rem; }
}

/* ══ GLOBAL MOBILE LAYOUT ════════════════════ */
@media (max-width: 480px) {
    .main { padding: 5.5rem 0.8rem 3rem !important; }
    .page-header h1 { font-size: 1.5rem !important; }
    .page-header p  { font-size: .9rem; }
}

/* ══ CLASS SELECTOR ══════════════════════════ */
@media (max-width: 600px) {
    .class-selector-bar { flex-direction: column; align-items: stretch; padding: .8rem; gap: .6rem; }
    .class-selector-left { flex-direction: column; align-items: flex-start; gap: .5rem; width: 100%; }
    .class-chips { display: flex; flex-wrap: wrap; gap: .4rem; width: 100%; }
    .class-chip {
        font-size: .75rem; padding: .35rem .75rem;
        overflow: hidden; text-overflow: ellipsis;
        max-width: calc(100vw - 2.5rem);
    }
    .btn-manage-classes { width: 100%; justify-content: center; }
    .active-class-header { flex-wrap: wrap; gap: .5rem; }
    .active-class-name { font-size: .92rem; }
    .active-class-sep { display: none; }
    .form-row-2 { grid-template-columns: 1fr !important; }
    .color-swatch { width: 24px; height: 24px; }
}

/* ══ STATS BAR ═══════════════════════════════ */
@media (max-width: 600px) {
    .mod-stats-bar { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem; }
    .ms-card  { padding: .8rem .6rem; }
    .ms-num   { font-size: 1.4rem; }
    .ms-lbl   { font-size: .62rem; }
    .mod-controls { flex-direction: column; gap: .6rem; }
    .search-wrap  { width: 100%; }
    .mod-filter-btns { width: 100%; }
    .mf-btn { flex: 1; text-align: center; }
}
@media (max-width: 400px) {
    .ms-num { font-size: 1.2rem; }
    .ms-lbl { font-size: .58rem; letter-spacing: 0; }
}

/* ══ SUBMISSIONS ═════════════════════════════ */
@media (max-width: 700px) {
    .sub-table-header { display: none !important; }

    .sub-row {
        display: flex !important;
        flex-direction: column !important;
        gap: .6rem !important;
        padding: 1rem !important;
    }
    .sub-student-cell {
        width: 100% !important;
        padding-bottom: .6rem !important;
        border-bottom: 1px solid rgba(42,250,223,.1) !important;
    }
    .sub-cell {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        background: rgba(10,25,47,.4) !important;
        border: 1px solid rgba(42,250,223,.08) !important;
        border-radius: 10px !important;
        padding: .55rem .9rem !important;
    }
    .sub-cell:nth-child(2)::before { content: '📝 Assignment 1'; font-size: .82rem; font-weight: 600; color: #2afadf; }
    .sub-cell:nth-child(3)::before { content: '📝 Assignment 2'; font-size: .82rem; font-weight: 600; color: #b388ff; }
    .sub-cell:nth-child(4)::before { content: '📒 Record Book';  font-size: .82rem; font-weight: 600; color: #64b5f6; }
    .sub-cell:nth-child(5)::before { content: '🔬 Obs. Book';    font-size: .82rem; font-weight: 600; color: #ffd54f; }
    .sub-cell:nth-child(6)::before { content: '📊 PPT';          font-size: .82rem; font-weight: 600; color: #f48fb1; }
}

/* ══ MARKS ═══════════════════════════════════ */
@media (max-width: 700px) {
    .marks-col-header   { display: none !important; }
    .marks-table-header { display: none !important; }
    .marks-row { display: flex !important; flex-wrap: wrap !important; gap: .6rem; padding: 1rem; }
    .marks-student-cell { flex: 0 0 100% !important; padding-bottom: .5rem; border-bottom: 1px solid rgba(42,250,223,.08); }
    .mark-cell { flex: 0 0 calc(50% - .3rem) !important; }
    .mark-inp  { font-size: .88rem; padding: .55rem .4rem; }
    .marks-total-cell {
        flex: 0 0 100% !important;
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        padding: .5rem .8rem;
    }
    .marks-save-cell { flex: 0 0 100% !important; }
    .btn-save-row { width: 100%; justify-content: center; padding: .65rem; font-size: .85rem; }
}

/* ══ ATTENDANCE ══════════════════════════════ */
@media (max-width: 600px) {
    .att-date-row { flex-direction: column; align-items: stretch; gap: .7rem; }
    .att-date-wrap { width: 100%; }
    .att-quick-actions { display: flex !important; flex-direction: row; gap: .5rem; }
    .btn-quick { flex: 1; justify-content: center; font-size: .82rem; padding: .6rem .5rem; }
    .att-day-stats, .day-stats-bar { grid-template-columns: 1fr 1fr !important; }
    .att-day-num, .ds-num { font-size: 1.5rem; }
    .att-row { flex-wrap: wrap; gap: .6rem; padding: .8rem; }
    .att-student-info { flex: 1; min-width: 0; }
    .att-student-name { font-size: .88rem; }
    .att-status-btns { display: flex !important; flex-direction: row !important; width: 100%; gap: .4rem; }
    .att-status-btn  { flex: 1; justify-content: center; font-size: .75rem; padding: .42rem .2rem; }
    .att-tabs, .att-tab-bar { width: 100% !important; border-radius: 12px; }
    .att-tab { flex: 1; justify-content: center; font-size: .82rem; padding: .65rem .4rem; }
    .summary-grid { grid-template-columns: 1fr !important; }
}

/* ══ HIGHLIGHTS ══════════════════════════════ */
@media (max-width: 600px) {
    .hl-row { display: flex !important; flex-wrap: wrap; padding: .8rem; gap: .6rem; }
    .hl-student { flex: 0 0 100%; }
    .hl-btn     { flex: 1; justify-content: center; }
    .warn-area  { flex: 1; justify-content: flex-end; }
    .warn-label { display: none; }
    .w-dot      { width: 20px; height: 20px; }
}

/* ══ PROFILE CARDS ═══════════════════════════ */
@media (max-width: 480px) {
    .overview-bar { grid-template-columns: repeat(3,1fr) !important; }
    .ov-num { font-size: 1.3rem; }
    .ov-lbl { font-size: .6rem; }
    .pc-header { padding: 1rem; gap: .7rem; }
    .pc-avatar, .pc-avatar-ph { width: 48px; height: 48px; }
    .pc-name { font-size: .92rem; }
    .pc-grade-badge { width: 38px; height: 38px; font-size: 1.1rem; }
    .pc-score-row { padding: 0 1rem .8rem; gap: .7rem; }
    .pc-chips { padding: .7rem 1rem; }
    .pc-nav-btn { font-size: .6rem; padding: .7rem .3rem; }
}

/* ══ MISC ════════════════════════════════════ */
@media (max-width: 480px) {
    .auth-modal { padding: 1.4rem !important; max-height: 92vh; }
    .modal-header h2 { font-size: 1.4rem; }
    .no-class-placeholder { padding: 3rem 1rem; }
    .no-class-placeholder i  { font-size: 2.5rem; }
    .no-class-placeholder h3 { font-size: 1.1rem; }
    .no-class-placeholder p  { font-size: .85rem; }
    .toast { bottom: 1rem; right: .8rem; left: .8rem; max-width: unset; font-size: .88rem; }
}