/**
 * Student Panel - Small Screens Fixes
 * ===================================
 * Breakpoints for school laptops and low-height screens.
 * Target resolutions: 1366×768, 1280×720, 1024×768 (Chromebooks).
 *
 * IMPORTANT: The main issue is viewport HEIGHT, not width.
 * At 1366×768, usable browser height is ~620-680px.
 *
 * Mobile (≤768px) is EXCLUDED - keeps original layout.
 */

/* ==========================================================================
   REFERENCE BREAKPOINTS
   ==========================================================================
   - 1366×768: Lenovo 11"-14" laptops, school notebooks (most common)
   - 1280×720: basic laptops
   - 1360×768: variation close to 1366
   - 1280×800: some small laptops
   - 1024×768: school Chromebooks
   ========================================================================== */

/* --------------------------------------------------------------------------
   ZONE 1: Low height (main cause of hidden buttons)
   Applies when viewport height ≤ 800px (excludes mobile)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-height: 800px) {
    /* 1. Hide Logout button (mobile-teacher-warning-buttons) */
    .mobile-teacher-warning-buttons a[href="/logout-teacher"] {
        display: none !important;
    }

    /* 2. Reduce Change Voice button size */
    .btn-change-voice-header {
        padding: 8px 16px;
        font-size: 14px;
    }
    .btn-change-voice-header .icon-wrapper {
        width: 24px;
        height: 24px;
        margin-right: 6px;
    }
    .btn-change-voice-header .icon-wrapper img {
        width: 18px;
        height: 18px;
    }
    .btn-change-voice-header .change-voice-label {
        font-size: 0.9em;
    }

    /* 3. Reduce header padding */
    header {
        padding: 0.3em 0;
    }

    /* 4. Reduce notification badge */
    .notification-number {
        position: absolute;
        background: #dc3027db;
        color: #FFF;
        font-size: 11px;
        width: 20px;
        height: 20px;
        text-align: center;
        border-radius: 50%;
        top: -5px;
        right: -2px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 19px;
    }

    /* 5. Custom row gap */
    .custom-row {
        gap: 10px;
    }

    /* 5b. Avatar profile area - compact for small screens */
    .wrapper-avatar-profile {
        padding: 0.35em 6px;
        gap: 6px;
    }
    .wrapper-avatar-profile-image {
        width: 72px;
        height: 72px;
        min-width: 72px;
    }
    .wrapper-avatar-profile-image .avatar-profile {
        padding: 3px;
    }
    .wrapper-avatar-profile-info h3 {
        font-size: 14px;
        margin-top: 6px;
    }

    /* 5c. Word Lists detail - compact layout */
    .lesson-fixed-top,
    .hero-image .current-lesson-block {
        display: none !important;
    }
    .hero-image nav[aria-label="breadcrumb"] {
        display: none !important;
    }
    .hero-image {
        padding: 1em 0;
    }
    .hero-image h1 {
        font-size: 1.5rem;
    }
    .hero-image h2 {
        font-size: 14px;
        margin-top: 0.35em;
    }

    /* 5d. Hero area buttons - compact for small screens */
    .btn-back-page-module {
        padding: 5px 10px !important;
        font-size: 14px !important;
        margin-right: 0.6em;
    }
    .btn-back-page-module i {
        font-size: 1.1em;
    }
    .hero-badge {
        padding: 6px 10px;
        font-size: 13px;
    }
    .hero-image .btn-tts.minify {
        margin-top: 2px;
    }
    .hero-image .btn-tts.minify img {
        height: 20px;
    }
    .hero-image nav {
        padding: 0.4em 0.6em;
    }
    .hero-image nav .breadcrumb {
        font-size: 13px;
    }
    .custom-row-inside-my-lists {
        gap: 0.75rem;
        margin-top: 1rem !important;
    }
    .custom-card-list .card-text {
        padding: 0.6em;
    }
    .custom-card-list .card-text .lesson-name {
        font-size: 15px;
    }
    .custom-card-list .card-header {
        min-height: 44px;
        padding: 0.5rem 0.8rem;
        font-size: 14px;
    }
    .custom-card-list .card-header h3 {
        font-size: 13px;
    }
    .card-list-lesson .card-image {
        height: 110px;
    }
    .card-list-lesson .card-lesson-bottom {
        padding: 6px 8px;
    }
    .card-list-lesson .btn-lesson,
    .card-list-lesson .btn-lesson-secondary {
        font-size: 13px;
        padding: 6px 10px;
    }
    .card-list-lesson .card-lesson-bottom-locked h2 {
        font-size: 14px;
    }
    .card-lesson-bottom-locked img {
        height: 28px;
    }
    .card-image .completed-badge {
        top: 8px;
        gap: 4px;
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 12px;
    }
    .card-image .completed-badge i {
        font-size: 12px;
    }

    /* 6. Premium card header */
    .premium-card-header {
        display: flex;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 10px 11px 10px 10px;
    }

    /* 7. Card category badge */
    .card-category-badge {
        font-size: 10px;
    }

    /* 8. Card main title - single line with ellipsis */
    .card-main-title {
        font-size: 15px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 6px 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 1.4em;
    }

    /* 9. Premium card image - auto height */
    .premium-card-image {
        height: auto;
    }
    .premium-card-image img {
        height: auto;
        min-height: 120px;
        object-fit: cover;
    }

    /* 10. Premium card info - aligned and compact stats */
    .premium-card-info {
        padding: 12px 14px;
    }
    .info-stats {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .stat-item {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #64748b;
        font-size: 12px;
    }
    .stat-item i {
        font-size: 14px;
        color: #3b82f6;
        flex-shrink: 0;
    }
    .stat-item span {
        white-space: nowrap;
        line-height: 1.3;
    }
    .stat-item strong {
        color: #1e293b;
        font-weight: 700;
    }
    .stat-divider {
        width: 1px;
        height: 18px;
        background: #e2e8f0;
    }

    /* 11. Panel sidebar links */
    .panel-sidebar ul li a {
        font-size: 14px;
        padding: 6px 1em;
    }
    .panel-sidebar .teacher-name {
        font-size: 13px;
    }
    .panel-sidebar ul li a span {
        width: 35px;
        height: 23px;
        top: 5px;
        background: #b6f7c4;
        color: #002d02;
        border-radius: 8px;
        transform: scale(0.8);
    }

    /* 11b. Lesson sidebar - compact layout */
    .panel-sidebar {
        padding: 6px 8px;
    }
    .panel-sidebar .mt-1.mb-3 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    .panel-sidebar .mt-1.mb-3 img {
        max-height: 36px;
    }
    .panel-sidebar .exit-nav-bar a {
        padding: 4px 6px;
        font-size: 13px;
    }
    .panel-sidebar .panel-cover {
        padding: 6px 8px;
        margin-top: 0.5em;
    }
    .panel-sidebar .panel-cover img {
        max-height: 120px;
        max-width: 140px;
    }
    .panel-sidebar .panel-cover h2 {
        padding: 6px 0 4px 0;
        font-size: 14px;
    }
    .panel-sidebar .wrapper-avatar-profile-info h3 {
        font-size: 12px;
        margin-top: 4px;
    }
    .panel-sidebar .article-nav-content {
        margin-top: 0.35em;
    }
    .panel-sidebar .article-nav-content.mt-2 {
        margin-top: 0.35em !important;
    }
    .panel-sidebar .btn-toggle-section.btn-book-options {
        padding: 0.35em 0.5em;
    }
    .panel-sidebar .btn-book-options span {
        font-size: 13px;
    }
    .panel-sidebar .btn-book-options span img {
        height: 20px;
    }
    .panel-sidebar .article-nav-content h2 {
        padding: 6px 8px;
        font-size: 0.9em;
    }
    .panel-sidebar #menu-sidebar.mb-2.mt-3 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* 12. Reduce Open Lessons button */
    .premium-view-btn {
        padding: 8px 16px;
        font-size: 14px;
        gap: 8px;
        border-radius: 10px;
    }
    .premium-view-btn i {
        font-size: 18px;
    }

    /* 13. Reduce shortcut button */
    .bn-shortcuts-inner {
        display: flex;
        gap: 6px;
    }
    .bn-shortcut-btn {
        padding: 6px 10px;
        font-size: 0.85em;
        gap: 6px;
    }

    /* 14. Word of the day row - full width, hide Avatar and Badges */
    .widget-row .widget-column.small-widget.image-widget.widget-contest,
    .widget-row .widget-column.small-widget.image-widget.leader-board-widget {
        display: none !important;
    }
    .widget-row .widget-column.large-widget.word-of-the-day {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Override grid (75% 25%) from student-panel.css when widgets are hidden */
    .widget-row {
        display: grid !important;
        grid-template-columns: 100% !important;
        grid-template-rows: auto !important;
    }

    /* 15. Word footer - compact buttons */
    .word-footer {
        padding: 0.5em 0.75em;
        gap: 0.6rem;
    }
    .word-footer .wad-button {
        padding: 0.35rem 1rem;
        font-size: 13px;
    }
    .word-footer .wad-button i {
        font-size: 14px;
    }

    /* 15b. Word a Day page - first card title and ribbon */
    .word-of-the-day-label .word-title {
        font-size: 2em;
    }
    .word-of-the-day-label::before {
        width: 280px;
        height: 40px;
        font-size: 12px;
        top: 120px;
    }

    /* 16. Zoodle Daily Missions + My Garden - compact layout */
    .container.mt-4 .row.mt-4 {
        margin-top: 0.75rem !important;
    }
    .widget-pet-care-panel,
    .widget-plant-pet-panel {
        border-width: 4px;
        border-bottom-width: 6px;
        border-radius: 14px;
        padding: 8px;
    }
    .widget-pet-care-inner,
    .widget-plant-pet-inner {
        padding: 10px;
    }
    .widget-pet-care-head,
    .widget-plant-pet-head {
        padding: 2px 2px 6px 2px;
        margin-bottom: 8px;
    }
    .widget-pet-care-title,
    .widget-plant-pet-title {
        font-size: 1.1rem;
    }
    .widget-chip-refresh {
        padding: 5px 8px;
        font-size: 0.8rem;
    }
    .widget-chip-refresh svg {
        width: 12px;
        height: 12px;
    }
    .widget-pet-care-notice {
        padding: 8px 10px;
        margin-bottom: 8px;
        font-size: 0.9rem;
    }
    .widget-pet-care-missions {
        gap: 8px;
    }
    .widget-pet-care-mission {
        padding: 8px;
        border-radius: 10px;
    }
    .widget-pet-care-mission-inner {
        padding: 8px 10px;
        grid-template-columns: 48px 1fr auto;
        gap: 8px;
    }
    .widget-pet-care-ico {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
    .widget-pet-care-mission h3 {
        font-size: 0.95rem;
    }
    .widget-pet-care-status {
        font-size: 0.82rem;
    }
    .widget-pet-care-mission-inner .widget-pet-care-btn-go,
    .widget-pet-care-notice .widget-pet-care-btn-go {
        padding: 6px 12px;
        font-size: 0.85rem;
        min-width: 56px;
    }
    .widget-plant-pet-grid {
        gap: 8px;
    }
    .widget-plant-pet-tile {
        padding: 8px;
        border-radius: 10px;
    }
    .widget-plant-pet-card {
        padding: 8px 10px;
        min-height: 120px;
        grid-template-columns: 64px 1fr;
        gap: 8px;
    }
    .widget-plant-pet-pico {
        width: 64px;
        height: 64px;
    }
    .widget-plant-pet-pico img.plant-icon {
        width: 52px;
        height: 52px;
    }
    .widget-plant-pet-ptitle {
        font-size: 0.9rem;
    }
    .widget-plant-pet-psub {
        font-size: 0.78rem;
    }
    .widget-plant-pet-tag {
        padding: 4px 8px;
        font-size: 0.72rem;
    }
    .widget-plant-pet-btn-go {
        padding: 6px 12px;
        font-size: 0.85rem;
        min-width: 56px;
    }
    .widget-plant-pet-pot-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
    .widget-plant-pet-tile-empty .ghost {
        font-size: 24px;
    }

    /* 17. Inner module (activity detail: Spelling Test, etc.) - compact layout */
    #inner-module .container.mt-4 {
        margin-top: 0.75rem !important;
    }
    #inner-module .card-white {
        padding: 0.6em 0.9em;
    }
    #inner-module .card-white h4 {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    #inner-module .wrapper-activity-image {
        margin-bottom: 0.5rem;
    }
    #inner-module .wrapper-activity-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    /* Completed state: alert, retake button, date - compact */
    #inner-module .card-white .alert.alert-success {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    #inner-module .card-white .btn-retake-test {
        margin-top: 0.4rem !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    #inner-module .card-white .test-date-info {
        margin-top: 0.5rem !important;
        margin-bottom: 0.25rem !important;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    #inner-module .card-white .test-date-info i {
        font-size: 0.95rem;
    }
    #inner-module .btn-pulse-blue.btn-custom-blue.mt-4 {
        margin-top: 0.5rem !important;
        padding: 8px 20px;
        font-size: 15px;
    }
    #inner-module .card-white-glass {
        padding: 0.6em 0.8em;
    }
    #inner-module .card-white-glass.mt-2 {
        margin-top: 0.5rem !important;
    }
    #inner-module .card-body {
        padding: 0.6rem 0.8rem;
    }
    #inner-module .card-body h4,
    #inner-module .card-white-glass h4 {
        font-size: 0.95rem;
        margin-bottom: 0.5rem !important;
    }
    #inner-module .results-grid {
        gap: 6px;
    }
    #inner-module .result-item {
        padding: 0.6em 0.5em;
    }
    #inner-module .result-item img {
        max-width: 48px;
        margin-bottom: 4px;
    }
    #inner-module .result-item span {
        font-size: 13px;
    }
    #inner-module .result-item strong {
        font-size: 13px;
    }
    #inner-module .container-feedback {
        margin-top: 0.5em;
        padding: 4px 6px;
    }
    #inner-module .feedback {
        gap: 10px;
        padding: 0.5em;
    }
    #inner-module .rating {
        gap: 6px;
    }
    #inner-module .rating .star {
        width: 32px !important;
        height: 32px !important;
    }
    #inner-module .emoji {
        width: 40px;
        height: 40px;
    }
    #inner-module .vote-locked span {
        font-size: 0.95em;
    }
    #inner-module .vote-locked img {
        width: 28px;
    }

    /* 18. My progress - compact cards */
    #bn-my-progress + .col-12 h4 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    #loading-data-cards {
        gap: 0.6rem;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    /* Banked-words page: 3 equal columns, no overflow */
    .row-wrapper-banked-words#loading-data-cards {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* Banked-words cards: compact layout for narrow columns */
    .row-wrapper-banked-words#loading-data-cards .card-item {
        padding: 0.5em;
        gap: 6px;
    }
    .row-wrapper-banked-words#loading-data-cards .card-item img {
        width: 56px;
        height: 56px;
    }
    .row-wrapper-banked-words#loading-data-cards .card-item-info h3 {
        font-size: 1.25rem;
    }
    .row-wrapper-banked-words#loading-data-cards .card-item-info p {
        font-size: 12px;
    }
    #loading-data-cards .card-item {
        padding: 0.6em;
        gap: 6px;
    }
    #loading-data-cards .card-item img {
        width: 72px;
        height: 72px;
    }
    #loading-data-cards .card-item-info h3 {
        font-size: 1.4rem;
    }
    #loading-data-cards .card-item-info p {
        font-size: 13px;
        margin-top: 4px;
    }
    #loading-data-cards .tool-tip-form-float-card {
        font-size: 18px !important;
        top: 4px;
        right: 8px;
    }

    /* Banked-words: compact mastery-info-section */
    .mastery-info-section {
        padding: 16px;
        gap: 14px;
    }
    .mastery-info-section .mastery-title {
        font-size: 1.2rem;
        margin-bottom: 6px;
    }
    .mastery-info-section .mastery-description {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    .mastery-info-section #zoodleCanvas {
        width: 140px;
        height: 140px;
    }
    .mastery-info-section .green-shine-button {
        font-size: 14px;
        padding: 8px 16px;
    }

    /* 17c. Practice Words Modal - max height 100% so footer buttons stay visible */
    .practice-modal-overlay .practice-modal {
        max-height: 100vh;
        height: 100vh;
    }
    .practice-modal-overlay .practice-modal-body {
        overflow-y: auto;
    }
    /* 17d. Practice column footer buttons - compact */
    .practice-column-footer .practice-select-all-btn,
    .practice-column-footer .practice-review-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    .practice-select-all-btn i {
        font-size: 14px;
    }
    .practice-review-btn i {
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   ZONE 2: 1366×768 and similar (usable height ~620-680px)
   Width 769-1366px + height ≤ 768px
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1366px) and (max-height: 768px) {
    /* Fixes for the most problematic resolution */
}

/* --------------------------------------------------------------------------
   ZONE 3: 1280×720 and 1024×768 (Chromebooks, lower screens)
   Height ≤ 720px
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-height: 720px) {
    /* Fixes for very low viewport */
}

/* --------------------------------------------------------------------------
   ZONE 4: Narrow width + low height (1024×768)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) and (max-height: 768px) {
    /* Chromebooks and tablets in landscape */
}

/* --------------------------------------------------------------------------
   Spelling/Vocabulary/Writing module cards: 3 per row at 1024px
   Applies to list-modules (spelling-modules, vocabulary-modules, etc.)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1199px) {
    .row:has(.wrapper-card-module) > .col-md-3 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Module cards: compact text on small screens */
@media (min-width: 769px) and (max-height: 800px) {
    .card-module-info {
        padding: 10px 5px;
    }
    .card-module-info span,
    .wrapper-card-module a {
        font-size: 12px;
    }
}

/* Word a Day page: 2 columns on narrow screens (769-991px) */
@media (min-width: 769px) and (max-width: 991px) {
    .wad-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   ZONE 5: Fixed buttons and actions at bottom
   Ensure close/continue buttons stay visible
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-height: 800px) {
    /* Example: sticky footer buttons
    .bottom-actions,
    .modal-footer,
    .game-actions {
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    */
}

/* --------------------------------------------------------------------------
   ZONE 6: Iframe/game on low-height screens
   Scale or limit game content height
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-height: 768px) {
    /* Example: limit iframe height
    .game-wrapper,
    .modal-iframe-content iframe {
        max-height: calc(100vh - 120px);
    }
    */

    /* Example: scale content
    .game-wrapper {
        transform: scale(0.9);
        transform-origin: top center;
    }
    */
}

/* --------------------------------------------------------------------------
   ZONE 7: Sidebar + body - Desktop medium (992px - 1199px)
   Narrower sidebar (190px) to free space for content
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
    body {
        padding-left: 190px;
    }
    .panel-sidebar {
        width: 190px;
        transform: translateX(0px) !important;
    }
}