/* ============================================================================
   portal-mobile.css — Mobile overrides for all portal-*.html pages
   Loaded via: <link media="screen and (max-width: 640px)">
   No @media wrapper needed — the media attribute on the link tag handles it.
   ============================================================================ */

/* --- Body --- */
body {
    padding: 8px;
}

/* --- Header --- */
header {
    padding: 16px;
    margin-bottom: 16px;
}

.header-content {
    flex-wrap: wrap;
    gap: 10px;
}

.logo {
    max-width: 60px;
}

header h1 {
    font-size: 1.3em;
}

.subtitle {
    font-size: 0.9em;
}

/* Hide email on mobile — saves horizontal space */
.user-email {
    display: none;
}

/* Stack actions below header text */
.header-actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
}

/* Back link / nav link: always visible and tappable */
.nav-link,
.logout-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 13px;
}

/* --- Hub grid: single column --- */
.hub-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.hub-card {
    padding: 20px 18px;
}

/* --- Assignment cards: full width, vertical stack --- */
.assignment-card {
    width: 100%;
}

.assignment-header {
    padding: 16px 16px 14px;
}

.assignment-title-row {
    flex-wrap: wrap;
    gap: 8px;
}

.assignment-title {
    font-size: 1.1em;
    width: 100%;
}

.assignment-status {
    font-size: 11px;
    padding: 3px 9px;
}

.assignment-meta {
    flex-direction: column;
    gap: 4px;
}

.assignment-notes {
    font-size: 13px;
    padding: 8px 12px;
}

.assignment-questions {
    padding: 14px 16px 18px;
}

/* --- Question grid: single column --- */
.questions-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.portal-q-card {
    padding: 12px;
}

/* --- Grading status badges: bigger and easier to read --- */
.q-sub-status {
    font-size: 12px;
    padding: 3px 10px;
}

/* --- Submit bar stacks on mobile --- */
.portal-submit-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.portal-submit-btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- All .btn-type buttons: 44px min touch target --- */
.logout-btn,
.nav-link,
.qa-new-btn,
.help-close-btn,
.portal-submit-btn,
.portal-submit-all-btn,
.assignment-view-btn,
.lesson-completed-toggle,
.qa-assignment-ask-btn {
    min-height: 44px;
}

/* Assignment action row: stack buttons vertically */
.assignment-ask-help-row {
    flex-direction: column;
}

.assignment-ask-help-row > * {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* Assignment view modal: full width on mobile */
.assignment-view-modal-box {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
}

.av-question {
    padding: 14px 16px;
}

/* Lightbox: full-screen on mobile */
.lightbox-close {
    top: 10px;
    right: 12px;
    font-size: 30px;
}

.lightbox-img-wrap {
    padding: 10px;
    max-width: 100vw;
    max-height: 100vh;
}

.lightbox-img-wrap img {
    max-height: 92vh;
    border-radius: 4px;
}

/* --- Lesson cards: stack info vertically --- */
.lesson-card-toggle-header {
    padding: 14px 16px;
    gap: 8px;
}

.lesson-card-body {
    padding: 0 16px 16px;
}

.lesson-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.lesson-header-badges {
    flex-wrap: wrap;
}

/* Completed questions grid: single column on very small screens */
.lesson-completed-detail {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

/* Per-assignment action row: stack vertically */
.lesson-assignment-action-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* --- Modals: full-screen bottom-sheet style --- */
.modal-overlay {
    padding: 0;
    align-items: flex-end;
}

.modal-box {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
}

.modal-box-wide {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
}

.modal-header {
    padding: 16px 18px 14px;
}

.modal-body {
    padding: 14px 18px;
}

.modal-footer {
    padding: 14px 18px 18px;
    flex-direction: column-reverse;
    gap: 8px;
}

.modal-cancel,
.modal-save {
    width: 100%;
    min-height: 44px;
    text-align: center;
}

/* --- Q&A modal tab-style answer type options: stack --- */
.qa-type-option {
    padding: 12px 14px;
}

/* --- Q&A section header --- */
.qa-section-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qa-new-btn {
    width: 100%;
    min-height: 44px;
}

/* --- Help post cards: reasonable padding --- */
.help-post-card {
    padding: 16px 18px;
}

/* --- Curriculum topics: full width --- */
.curriculum-card {
    overflow-x: auto;
}

.subtopic-row {
    flex-wrap: wrap;
}

/* --- Section title visible on mobile --- */
.section-title {
    font-size: 1.1em;
}

/* --- Assignment lesson tag: wrap nicely --- */
.assignment-lesson-tag {
    flex-wrap: wrap;
    padding: 6px 10px;
}

.assignment-lesson-view-link {
    margin-left: 0;
    width: 100%;
}

/* --- Lesson resource links: wrap --- */
.lesson-links {
    flex-wrap: wrap;
}

/* --- Lesson links (assignment cards) --- */
.lesson-links .lesson-link {
    font-size: 12px;
    padding: 5px 10px;
}

/* --- Tab question list: padding reduction --- */
.tab-q-main {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.tab-q-left {
    min-width: 0;
    flex: 1;
}

.tab-q-right {
    flex-shrink: 0;
}

/* --- Image previews inside modals: constrained width --- */
.qa-question-preview img {
    max-height: 200px;
}

/* --- Answer type tabs in Q&A modal: stack vertically --- */
.answer-type-tabs {
    flex-direction: column;
    gap: 6px;
}

.tab-btn {
    width: 100%;
    min-height: 44px;
    text-align: center;
}

/* --- Guide sections: comfortable padding --- */
.guide-section-header {
    padding: 14px 16px;
}

.guide-section-body {
    padding: 0 16px 18px;
}

/* --- Login overlay box: reasonable on small screens --- */
.login-box {
    padding: 36px 24px;
    max-width: 95vw;
}

/* --- Feedback attempt cards --- */
.feedback-attempt {
    padding: 12px 14px;
}

/* --- Assignment summary modal question cards --- */
.asummary-q-card {
    padding: 12px 14px;
}