/* mobile-fix.css – add this after home.css in your HTML */
/* Does not change any existing rule – only adds responsive overrides */

@media (max-width: 768px) {
    /* Header – prevent overflow */
    header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .logo {
        padding: 8px 0;
    }

    .curved-text-svg {
        width: 70px;
        height: 70px;
        top: -8px;
    }

    .logo-img {
        width: 32px;
        height: 32px;
    }

    .bottom {
        font-size: 8px;
        bottom: -2px;
    }

    /* Navigation – horizontal scroll if needed, but better wrapping */
    .navigation {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .navigation a {
        margin-left: 0;
        font-size: 0.85rem;
        padding: 6px 0;
    }

    /* Action buttons wrap nicely */
    .action-buttons {
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-signup, .btnLogin {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .stats-badge {
        padding: 4px 10px;
        gap: 8px;
        font-size: 0.7rem;
    }

    /* Hero section */
    .container {
        flex-direction: column;
        padding: 120px 5% 20px 5%;
        gap: 20px;
    }

    .content-area {
        flex-basis: auto;
        padding-right: 0;
        text-align: center;
    }

    .main-heading {
        font-size: 2rem;
    }

    .intro-paragraph {
        font-size: 1rem;
    }

    .illustration-wrapper {
        max-width: 280px;
        margin: 0 auto;
    }

    /* Cards grid – becomes 2 columns (or 1 on very small) */
    .cards_container {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px;
        max-width: 500px;
    }

    .action_card {
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        padding: 12px 8px;
    }

    .action_card h3 {
        font-size: 0.9rem;
    }

    .action_card p {
        font-size: 0.75rem;
    }

    /* Forms overlay – better padding */
    .form_container {
        margin: 0 16px;
        padding: 24px 20px;
    }

    .input_box input {
        font-size: 13px;
    }

    /* User profile dropdown on mobile */
    .user-profile {
        padding: 3px 8px 3px 5px;
    }

    .username {
        max-width: 60px;
        font-size: 0.75rem;
    }

    .dropdown-menu {
        right: -10px;
        min-width: 140px;
    }
}

/* Extra small devices (below 480px) */
@media (max-width: 480px) {
    .cards_container {
        grid-template-columns: 1fr;
        max-width: 280px;
    }

    .action_card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        text-align: left;
        padding: 12px 16px;
    }

    .action_card .card_icon {
        margin: 0;
    }

    .action_card h3, .action_card p {
        margin: 0;
    }

    .action_card p {
        padding-top: 0;
    }

    .main-heading {
        font-size: 1.75rem;
    }

}

/*path*/
/* ========== PATH MODAL – MOBILE STYLES ========== */
@media (max-width: 768px) {
    /* Modal container – better fit on small screens */
    .path-form-container {
        max-width: 90%;
        padding: 24px 20px;
        margin: 20px auto;
        border-radius: 20px;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Make the close button larger and easier to tap */
    .path-form-close {
        top: 12px;
        right: 16px;
        width: 32px;
        height: 32px;
        padding: 4px;
        border-radius: 50%;
        background: rgba(0,0,0,0.05);
    }

    /* Stack dropdown items vertically */
    .dropdown {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin-bottom: 18px;
    }

    /* Labels now above selects */
    .dropdown label {
        width: auto;
        text-align: left;
        font-size: 0.85rem;
        font-weight: 500;
        color: #1f2b1c;
        margin-bottom: 0;
    }

    /* Selects take full width */
    .dropdown select {
        width: 100%;
        max-width: none;
        height: 48px;
        font-size: 15px;
    }

    /* Button group – stack vertically */
    .path-btn-group {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
    }

    .save-changes,
    .cancel-changes {
        width: 100%;
        margin-top: 0 !important;
        padding: 12px 0;
        font-size: 1rem;
    }

    /* Onboarding mode adjustments */
    .is-onboarding .path-form-container {
        padding: 28px 20px;
    }

    .is-onboarding .onboarding-subtitle {
        max-width: 100%;
        font-size: 0.9rem;
        margin-bottom: 24px;
    }

    /* Helper text */
    .helper-text {
        font-size: 0.75rem;
        margin-top: 10px;
    }

    /* Make the modal title more compact */
    #modal-main-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }
}

/* Extra small devices (below 480px) – tighten further */
@media (max-width: 480px) {
    .path-form-container {
        padding: 20px 16px;
    }

    .dropdown select {
        height: 44px;
        font-size: 14px;
    }

    .save-changes,
    .cancel-changes {
        padding: 10px 0;
    }
}

/* ===== EXTRA MOBILE POLISH (no existing rules changed) ===== */
@media (max-width: 550px) {
    /* Make header row more compact */
    .header-row {
        padding: 12px 12px;
        gap: 10px;
        border-radius: 24px;
    }

    /* Reduce icon+label size */
    .hint-group, .difficulty-group {
        padding: 4px 8px;
        min-width: auto;
    }
    .hint-icon, .difficulty-icon {
        font-size: 1.2rem;
    }
    .hint-label, .difficulty-label {
        font-size: 0.6rem;
    }

    /* Progress text smaller */
    .progress-text {
        font-size: 0.7rem;
    }
    .stats span {
        font-size: 0.65rem;
        padding: 2px 8px;
    }

    /* Question card padding */
    .question-card {
        padding: 16px;
        font-size: 0.95rem;
    }

    /* Answer input zone */
    .answer-zone {
        padding: 12px 20px;
        border-radius: 50px;
    }
    .input-field {
        font-size: 1rem;
        padding: 4px 0;
    }

    /* Submit button */
    .submit-btn {
        padding: 10px 28px;
        font-size: 1rem;
        width: 100%;
    }

    /* Feedback sliding card */
    .sliding-card-glass {
        padding: 16px 20px;
    }
    .feedback-text {
        font-size: 1rem;
    }
    .next-btn {
        padding: 8px 24px;
        font-size: 0.9rem;
    }

    /* Modals – make them fit better */
    .modal-content, .difficulty-modal-content, .full-solutions-content {
        padding: 24px 16px;
        width: 95%;
        border-radius: 32px;
    }
    .difficulty-options {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .difficulty-option {
        text-align: center;
        padding: 8px 12px;
    }

    /* Full solutions cards */
    .full-solutions-card {
        padding: 16px;
    }
    .q-text {
        font-size: 0.9rem;
    }
    .ans-details p {
        font-size: 0.85rem;
    }

    /* Back arrow – ensure it doesn't block top content */
    .arrow-back {
        top: 12px;
        left: 12px;
        width: 40px;
        height: 40px;
    }
    .arrow-back svg {
        width: 20px;
        height: 20px;
    }
}

/* Extra small (below 400px) */
@media (max-width: 400px) {
    .header-row {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .progress-container {
        order: 1;
        width: 100%;
        margin-top: 8px;
    }
    .hint-group, .difficulty-group {
        order: 0;
    }
    .stats {
        gap: 6px;
    }
    .question-card {
        padding: 14px;
    }
}

/* ===== EXTRA MOBILE POLISH (no existing rules changed) ===== */
@media (max-width: 768px) {
    .progress-container {
        padding: 80px 20px 40px;
    }

    .hero-section h1 {
        font-size: 1.8rem;
    }

    .subtitle {
        font-size: 0.95rem;
    }

    /* Level card – stack vertically on phones */
    .level-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 20px;
    }

    .level-badge {
        justify-content: center;
    }

    .xp-details {
        width: 100%;
    }

    .xp-text {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    /* Milestones grid – wrap nicely */
    .milestones-grid {
        justify-content: center;
    }

    .milestone-badge {
        font-size: 0.85rem;
        padding: 6px 14px;
    }

    /* Subject cards – one column */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card {
        padding: 18px;
    }

    .stat-card .score {
        font-size: 2rem;
    }

    /* Back arrow – keep visible and not overlapping */
    .arrow-back {
        top: 16px;
        left: 16px;
        width: 44px;
        height: 44px;
    }

    .arrow-back svg {
        width: 20px;
        height: 20px;
    }
}

/* Extra small devices (below 480px) */
@media (max-width: 480px) {
    .progress-container {
        padding: 70px 16px 30px;
    }

    .hero-section h1 {
        font-size: 1.5rem;
    }

    .level-card {
        padding: 16px;
    }

    .level-number {
        font-size: 2rem;
    }

    .level-icon {
        font-size: 2rem;
    }

    .milestone-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
    }

    .stat-card h3 {
        font-size: 1.1rem;
    }

    .stat-card .score {
        font-size: 1.8rem;
    }
}

/* ========== PHONE OPTIMIZATION ========== */
@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    /* Sidebar becomes a bottom navigation bar (more usable on phones) */
    .sidebar {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        flex-direction: row;
        justify-content: space-around;
        padding: 8px 12px;
        background: #028090;
        border-radius: 30px 30px 0 0;
        z-index: 1100;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    }

    .sidebar-header,
    .sidebar-footer {
        display: none; /* hide header/footer text on phone */
    }

    .sidebar-nav {
        display: flex;
        justify-content: space-around;
        width: 100%;
        margin: 0;
    }

    .sidebar-nav li {
        margin: 0;
    }

    .sidebar-nav a {
        flex-direction: column;
        padding: 8px 0;
        gap: 4px;
        font-size: 0.7rem;
        text-align: center;
    }

    .sidebar-nav a svg {
        width: 24px;
        height: 24px;
    }

    /* main content – no left margin, add bottom padding to avoid overlap with bottom bar */
    .dashboard, .content-area {
        margin-left: 0;
        width: 100%;
        padding: 20px 16px 80px 16px; /* bottom space for the nav bar */
    }

    /* admin header */
    .admin-header h1 {
        font-size: 1.5rem;
    }

    /* cards grid – single column */
    .cards-container, .cards_container {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 10px;
    }

    .admin-card {
        min-height: auto;
        aspect-ratio: auto;
        padding: 20px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        text-align: left;
    }

    .admin-card .card-icon {
        margin-bottom: 0;
    }

    .admin-card h3, .admin-card p {
        margin: 0;
    }

    /* profile page adjustments */
    .profile-container {
        padding: 24px 20px;
        margin-top: 10px;
    }

    .avatar-wrapper {
        width: 100px;
        height: 100px;
    }

    #avatarDisplay {
        font-size: 40px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .input-group input {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .btn-save, .btn-password {
        padding: 12px;
    }

    /* back arrow – reposition so it doesn't overlap the bottom bar */
    .arrow-back {
        top: 16px;
        left: 16px;
        width: 44px;
        height: 44px;
        z-index: 1200;
    }

    /* tables (reported data) – horizontal scroll */
    .reported-data {
        padding: 12px;
        overflow-x: auto;
    }

    table {
        font-size: 0.75rem;
        min-width: 500px;
    }

    th, td {
        padding: 8px 6px;
    }

    /* remove any duplicate arrow-back that may be floating */
    .arrow-back:not(:first-of-type) {
        display: none;
    }
}

/* Extra small devices (below 480px) – tighten more */
@media (max-width: 480px) {
    .sidebar-nav a {
        font-size: 0.6rem;
    }
    .sidebar-nav a svg {
        width: 20px;
        height: 20px;
    }
    .admin-card {
        padding: 16px;
    }
    .admin-card h3 {
        font-size: 1rem;
    }
    .profile-container {
        padding: 20px 16px;
    }
}


/* ========== VIEW.CSS – MOBILE OPTIMIZATION ========== */
@media (max-width: 768px) {
    body {
        padding: 12px;
    }

    header {
        margin-bottom: 24px;
    }

    .main-cards {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 30px;
    }

    .card {
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 20px;
        text-align: left;
    }

    .icon {
        font-size: 32px;
        margin-bottom: 0;
    }

    .card div:not(.icon) {
        flex: 1;
    }

    .info {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-top: none;
        padding-top: 0;
        margin-top: 8px;
    }

    .table-container {
        padding: 12px;
        overflow-x: auto;
    }

    table {
        min-width: 500px;
        font-size: 0.85rem;
    }

    th, td {
        padding: 10px 8px;
    }

    h2 {
        font-size: 1.3rem;
    }

    /* back arrow – reposition for small screens */
    .arrow-back {
        top: 12px;
        left: 12px;
        width: 44px;
        height: 44px;
    }

    .arrow-back svg {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    .card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .info {
        justify-content: center;
        gap: 12px;
    }

    th, td {
        font-size: 0.75rem;
        padding: 8px 6px;
    }

    .table-header {
        gap: 8px;
    }
}


/* extra phone polish for admin page */
@media (max-width: 480px) {
    body {
        padding: 1rem 0.8rem;
    }
    h1:last-of-type {
        font-size: 1.6rem;
    }
    h3 {
        font-size: 1.1rem;
        margin-top: 1.2rem;
    }
    div[id$="_uploading_status"] {
        font-size: 0.75rem;
        padding: 0.6rem 0.9rem;
    }
}