/* Global Responsive Styles for PaperPro */

@media (max-width: 1024px) {
    .container {
        max-width: 95% !important;
        padding: 1.5rem 1rem !important;
    }
}

@media (max-width: 768px) {
    /* Layout */
    .topbar {
        padding: 0.75rem 1rem !important;
        flex-direction: column;
        align-items: flex-start !important;
    }
    .brand { font-size: 1rem !important; }
    .tb-r { width: 100%; justify-content: space-between; margin-top: 0.5rem; }

    /* Welcome Header */
    .welcome h1 { font-size: 1.5rem !important; }
    
    /* Grids & Cards */
    .feats {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .qcard {
        padding: 1.5rem !important;
    }

    /* Modals & Panels */
    .panel-card, .panel {
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }

    /* Tables */
    .tbl-wrap {
        margin: 0 -1rem !important;
        width: calc(100% + 2rem) !important;
        border-radius: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table {
        min-width: 600px;
    }

    /* Buttons */
    .btn-quiz, .btn-pay {
        width: 100% !important;
        padding: 0.8rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .subj-btns {
        justify-content: flex-start !important;
    }

    /* MCQ Admin Review specific */
    .draft-card {
        padding: 1rem !important;
    }
    .view-mode div[style*="display:flex"] {
        flex-direction: column;
        gap: 0.5rem !important;
    }
    .view-mode button, .view-mode form {
        width: 100% !important;
    }
    .view-mode button {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .brand { font-size: 0.9rem !important; }
    .tb-r { font-size: 0.75rem !important; }
    .tbbtn { padding: 0.3rem 0.6rem !important; font-size: 0.75rem !important; }
    
    .welcome h1 { font-size: 1.25rem !important; }
    
    /* Form elements */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
}