@import url('../assets/css/theme.css');
/**
 * BE Academy - Master Responsive Mobile & Performance Stylesheet
 * Ensures 100% rock-solid layout, touch-friendly UI, and fast rendering on all smartphones and tablets.
 */

/* -------------------------------------------------------------
 * 1. BASE SYSTEM & VIEWPORT OPTIMIZATIONS
 * ------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* Optimize touch responsiveness (removes 300ms tap delay on mobile) */
a, button, input, select, textarea, label, .btn, .portal-nav-link {
    touch-action: manipulation;
}

/* -------------------------------------------------------------
 * 2. PREVENT IOS FORM ZOOM GLITCH (Font size >= 16px on inputs)
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="date"],
    select.form-select,
    textarea.form-control {
        font-size: 16px !important;
    }
}

/* -------------------------------------------------------------
 * 3. SMOOTH MOBILE HORIZONTAL SCROLLBARS (Pills, Tabs, Nav)
 * ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .portal-mobile-scroll,
    .portal-mobile-nav,
    .d-flex.d-lg-none.overflow-auto,
    .nav-pills.overflow-auto,
    .categories-scroll-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding-bottom: 4px;
    }
}

@media (min-width: 992px) {
    .portal-mobile-scroll,
    .portal-mobile-nav,
    .d-lg-none {
        display: none !important;
    }
}

.portal-mobile-scroll::-webkit-scrollbar,
.d-flex.d-lg-none.overflow-auto::-webkit-scrollbar,
.nav-pills.overflow-auto::-webkit-scrollbar,
.categories-scroll-bar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* -------------------------------------------------------------
 * 4. TOUCH-FRIENDLY HITBOXES & BUTTONS (Min 42px)
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
    .btn:not(.btn-sm),
    .portal-nav-link {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 34px;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Option choices in tests and exams */
    .option-choice-card,
    .quiz-option-card {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 12px 14px !important;
        margin-bottom: 8px !important;
    }
}

/* -------------------------------------------------------------
 * 5. MOBILE HERO BANNER & CONTAINERS
 * ------------------------------------------------------------- */
@media (max-width: 576px) {
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Student Portal Hero Banner */
    .welcome-hero,
    .portal-hero,
    .library-hero {
        padding: 1.5rem 1.1rem !important;
        border-radius: 16px !important;
        margin-bottom: 1.25rem !important;
    }

    .welcome-hero h1,
    .portal-hero h2,
    .library-hero h2 {
        font-size: 1.35rem !important;
        line-height: 1.3;
    }

    .welcome-hero p,
    .library-hero p {
        font-size: 0.88rem !important;
    }

    /* Feature Cards on Student Portal */
    .feature-card {
        padding: 18px 14px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }

    .feature-card h5 {
        font-size: 1.05rem !important;
    }
}

/* -------------------------------------------------------------
 * 6. MOBILE TABLES (HORIZONTALLY SAFE)
 * ------------------------------------------------------------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
    .table-responsive table {
        min-width: 600px;
    }
}

/* -------------------------------------------------------------
 * 7. MOBILE MODALS (BOTTOM SHEET & SAFE TOUCH)
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 8px auto !important;
        max-width: calc(100% - 16px) !important;
    }

    .modal-content {
        border-radius: 18px !important;
        max-height: calc(100vh - 32px);
        display: flex;
        flex-direction: column;
    }

    .modal-header {
        padding: 14px 18px !important;
        border-top-left-radius: 18px !important;
        border-top-right-radius: 18px !important;
    }

    .modal-body {
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-footer {
        padding: 12px 18px !important;
        position: sticky;
        bottom: 0;
        background: #f8fafc;
        border-bottom-left-radius: 18px !important;
        border-bottom-right-radius: 18px !important;
        z-index: 5;
    }
}

/* -------------------------------------------------------------
 * 8. E-LIBRARY & READING ROOM MOBILE ADAPTATIONS
 * ------------------------------------------------------------- */
@media (max-width: 576px) {
    /* 2 columns on phone for folders and books */
    .student-folder-card {
        padding: 1rem 0.85rem !important;
        border-radius: 14px !important;
    }

    .student-folder-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.35rem !important;
    }

    .book-card {
        border-radius: 14px !important;
    }

    .book-cover-container {
        height: 140px !important;
    }

    .book-cover-image {
        height: 140px !important;
    }

    /* Reader canvas & top toolbar on mobile */
    .reader-navbar {
        padding: 8px 10px !important;
    }

    .reader-btn {
        padding: 5px 10px !important;
        font-size: 0.78rem !important;
    }

    #viewerContainer {
        padding: 12px 4px !important;
    }

    #pdfCanvas {
        max-width: 100% !important;
        height: auto !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
        border-radius: 4px;
    }
}

/* -------------------------------------------------------------
 * 9. ONLINE TESTS & EXAM MOBILE OPTIMIZATION (test.php)
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
    .sticky-test-header {
        padding: 8px 12px !important;
    }

    .timer-badge {
        font-size: 0.95rem !important;
        padding: 4px 12px !important;
    }

    .q-palette-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 6px 0 !important;
        gap: 6px !important;
    }

    .q-palette-container::-webkit-scrollbar {
        display: none !important;
    }

    .q-palette-btn {
        flex-shrink: 0 !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
    }
}

/* -------------------------------------------------------------
 * 10. FULLCALENDAR MOBILE ADAPTATION
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
    .calendar-card {
        padding: 1rem 0.75rem !important;
        border-radius: 14px !important;
    }

    .fc .fc-toolbar {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .fc .fc-toolbar-title {
        font-size: 1.15rem !important;
        text-align: center;
    }

    .fc .fc-button {
        padding: 5px 9px !important;
        font-size: 0.8rem !important;
    }

    .fc-col-header-cell-cushion {
        font-size: 0.75rem !important;
        padding: 4px 1px !important;
    }

    .fc-daygrid-day-number {
        font-size: 0.75rem !important;
        padding: 2px 4px !important;
    }

    .fc-event {
        font-size: 0.68rem !important;
        padding: 1px 3px !important;
        margin-bottom: 1px !important;
        border-radius: 3px !important;
    }
}

/* -------------------------------------------------------------
 * 11. LMS VIDEO PLAYER & LESSON VIEW (lesson_view.php)
 * ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .player-navbar {
        padding: 8px 14px !important;
    }

    .player-video-wrapper {
        aspect-ratio: 16 / 9;
        width: 100%;
        background: #000;
        border-radius: 12px;
        overflow: hidden;
    }

    .player-sidebar {
        height: auto !important;
        position: static !important;
        border-right: none !important;
        border-top: 1px solid #e2e8f0;
        padding: 16px 12px !important;
    }
}

/* -------------------------------------------------------------
 * 12. PORTAL HOME & NEWS RESPONSIVE OPTIMIZATIONS (welcome.php)
 * ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .portal-hero {
        padding: 1.5rem 1.25rem !important;
        border-radius: 14px !important;
    }
    
    .portal-hero h2 {
        font-size: 1.5rem !important;
    }

    .quick-tile {
        padding: 0.85rem !important;
        gap: 0.75rem !important;
        border-radius: 12px !important;
    }

    .quick-tile-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
        border-radius: 10px !important;
    }

    .news-header-box {
        padding: 1rem !important;
    }

    .news-pinned-card {
        padding: 1.15rem !important;
    }

    .news-item-card {
        padding: 1rem !important;
    }

    .widget-card, .widget-wisdom, .widget-about {
        padding: 1.15rem !important;
        border-radius: 14px !important;
    }
}