/* Keep the legacy desktop layout intact; all phone overrides live here. */
.mobile-only { display: none; }
.timetable-scroll { display: contents; }

@media screen and (max-width: 767px), screen and (max-width: 979px) and (pointer: coarse) {
    html, body { width: 100%; height: auto; }
    body { padding: 0; }
    .page-wrapper { min-width: 0; }
    .mobile-only { display: block; }
    .navbar-static-top { margin: 0; }
    #topMenuNavbar { padding: 6px 12px; }
    #topMenuNavbar > .pull-right { margin: 0; }
    #topMenuNavbar .brand { padding: 5px; margin: 0; }
    #topMenuNavbar .brand img { max-height: 34px; width: auto; }
    #topMenuNavbar .nav { margin: 0; }
    #topMenuNavbar .nav > li > a.btn { min-height: 44px; box-sizing: border-box; margin: 0; padding: 12px 8px; }
    #semestersTabs { display: flex; align-items: center; gap: 8px; margin: 8px 12px !important; }
    #semestersTabs > .nav { float: none; width: auto; margin: 0; }
    #semestersTabs > .nav:first-child { flex: 1; display: flex; }
    #semestersTabs .nav > li { float: none !important; }
    #semestersTabs .nav a { padding: 12px 10px !important; white-space: nowrap; font-size: 16px !important; }
    #semestersTabs #yearTab a { font-size: 12px !important; padding: 8px 0 !important; }
    .content-wrapper { padding: 0 12px; }
    #tableRF > [class*="span"] { float: none; width: 100%; margin: 0; padding: 0 !important; }
    #search, .modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .modal textarea {
        font-size: 16px; min-height: 44px; box-sizing: border-box; max-width: 100%;
    }
    .btn { min-height: 44px; padding: 11px 14px; box-sizing: border-box; }
    #chooseCourses_btn { font-size: 16px; }
    #myCoursesStack { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; min-height: 44px; }
    #clearTimeTableDiv { width: 44px !important; height: 44px !important; display: flex; align-items: center; justify-content: center; }
    #accordionParentDiv { height: auto !important; max-height: 320px; margin: 0; float: none; }
    #coursesNotChosenYetText { padding: 12px; }
    #coursesNotChosenYetText:empty { display: none; }
    #accordion2 { margin: 8px 0; }
    #accordion2 .accordion-heading, #chosenCourses > .row-fluid, #courseTable > .row-fluid {
        display: flex; align-items: center; direction: ltr; width: 100%;
    }
    #accordion2 .accordion-heading > .span1, #chosenCourses > .row-fluid > .span1, #courseTable > .row-fluid > .span2 {
        flex: 0 0 44px; width: 44px; margin: 0;
    }
    #accordion2 .accordion-heading > .span8, #chosenCourses > .row-fluid > .span10, #courseTable > .row-fluid > .span10 {
        flex: 1; width: auto; min-width: 0; margin: 0; direction: rtl;
    }
    #accordion2 .accordion-heading a, #chosenCourses a, #courseTable a {
        min-height: 44px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    }
    #accordion2 .accordion-toggle { justify-content: flex-start; padding: 10px; }
    .courseGroup { padding: 12px 8px; min-height: 44px; box-sizing: border-box; }
    #optimizeButtons { width: auto; float: right; }
    #hoursDiv { width: auto; float: left; padding: 12px 0; font-size: 16px !important; }
    #optimizeButton { height: 44px !important; }
    .timetable-hint { clear: both; margin: 8px 0; color: #526879; font-size: 13px; }
    .timetable-days { display: flex; gap: 4px; margin-bottom: 8px; }
    .timetable-days button { flex: 1; min-width: 0; min-height: 44px; padding: 4px; border: 1px solid #c1d6e4; border-radius: 5px; background: #f3f8fc; color: #245269; font: inherit; font-size: 13px; }
    .timetable-scroll { display: block; overflow-x: auto; direction: rtl; width: 100%; -webkit-overflow-scrolling: touch; border-radius: 6px; }
    #timetable { position: relative; float: none; width: 800px; max-width: none; margin: 0; }
    #timetable::after { content: ''; display: block; clear: both; }
    #timeTable { margin-bottom: 0; table-layout: fixed; }
    #timeTable td { height: 42px; }
    #timeTable th:first-child { width: 54px; }
    #timeTable .timesColumn, #ttHead th:first-child { position: sticky; right: 0; z-index: 6; background: #f5f5f5; }
    #lowerWide { float: none; margin: 20px 0 0; padding: 0 12px; box-sizing: border-box; }
    #rightFooterAreatStrip { display: none; }
    #leftFooterAreatStrip { width: 100%; margin: 0; }
    #examsForPrint { float: none; width: 100%; margin: 10px 0 !important; max-height: none !important; overflow-x: auto; }
    #calendarStrip { min-width: 0 !important; min-height: 0 !important; }
    #calendarStrip > table, #calendarStrip > table > tbody > tr > td { width: 100%; height: auto; }
    #txtDate .ui-datepicker { width: 100% !important; box-sizing: border-box; }
    #txtDate .ui-datepicker td a, #txtDate .ui-datepicker td span { padding: 8px 2px; text-align: center; }
    .footer-wrapper { position: static; width: 100%; margin-top: 20px; }
    .footer-wrapper .navbar-inner { padding: 8px 12px; }
    .footer-wrapper .nav { margin: 0; }
    #alertsArea { position: fixed !important; top: 8px !important; left: 12px !important; right: 12px; width: auto !important; margin: 0 !important; z-index: 1100; pointer-events: none; }
    #alertsArea .alert { pointer-events: auto; }
    .typeahead.dropdown-menu { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: 45vh; overflow: auto; box-sizing: border-box; }
    .typeahead.dropdown-menu > li > a { padding: 12px 8px; white-space: normal; direction: rtl; text-align: right; }

    /* Full-height dialogs with a scrolling body and always reachable actions. */
    body.mobile-modal-open { overflow: hidden; }
    body .modal, body .modal.fade, body .modal.fade.in {
        position: fixed; inset: 0; width: 100% !important; height: 100%; height: 100dvh;
        max-height: none !important; margin: 0 !important; border: 0; border-radius: 0; box-sizing: border-box;
        transform: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    }
    body .modal.in, body #alertModal:not(.hide) { display: flex !important; flex-direction: column; }
    .modal-header { flex: 0 0 auto; padding: 10px 12px; }
    .modal-header h3 { font-size: 18px; line-height: 26px; padding-left: 42px; margin: 0; }
    .modal-header .close { min-width: 44px; min-height: 44px; padding: 8px; box-sizing: border-box; margin: -6px 0 0; opacity: .7; }
    body .modal > .modal-body, body #aboutModal > .pre-scrollable {
        flex: 1 1 auto; min-height: 0; height: auto; max-height: none; max-width: none; width: auto !important;
        overflow: auto !important; margin: 0 !important; padding: 12px; direction: rtl; -webkit-overflow-scrolling: touch;
    }
    .modal-footer { flex: 0 0 auto; min-height: 0; padding: 10px 12px; }
    .modal-footer .btn { margin-top: 4px; }
    .modal .container-fluid { padding: 0; }
    .modal .row-fluid > [class*="span"] { float: none; width: 100%; margin-left: 0; box-sizing: border-box; }
    .modal #courseTable > .row-fluid > .span2, .modal #chosenCourses > .row-fluid > .span1 { width: 44px; }
    .modal #courseTable > .row-fluid > .span10, .modal #chosenCourses > .row-fluid > .span10 { width: auto; }
    .catalog-navigation { display: flex; clear: both; gap: 6px; padding-top: 10px; }
    .catalog-navigation button { flex: 1; min-height: 44px; border: 1px solid #c1d6e4; border-radius: 6px; background: #f3f8fc; color: #245269; font: inherit; }
    .catalog-navigation button.active { background: #006dcc; color: #fff; border-color: #006dcc; }
    .modal .catalog-panel { display: none !important; float: none; width: 100%; margin: 0; }
    .catalog-panel.mobile-active { display: block !important; }
    #catalogFilters .filter-header-light-blue br { display: none; }
    #catalogFilters .filter-header-light-blue { padding: 0; }
    #catalogFilters .accordion-toggle { padding: 12px; }
    #catalogFilters .pre-scrollable { max-height: none !important; }
    #catalogFilters li { min-height: 44px; padding: 12px; box-sizing: border-box; }
    #courseTable, #catalogChosen .pre-scrollable { max-height: none !important; overflow: visible !important; }
    #courseTable:empty::before, #chosenCourses:empty::before { display: block; padding: 24px 12px; color: #526879; text-align: center; }
    #courseTable:empty::before { content: 'בחרו פקולטה וחוג כדי להציג קורסים'; }
    #chosenCourses:empty::before { content: 'עדיין לא נבחרו קורסים. לחצו על קורס ברשימה כדי לבחור אותו.'; }
    #catalogCourses > .row-fluid:first-child, #catalogChosen > .row-fluid:first-child { display: none; }
    #courseTable > .row-fluid { border-bottom: 1px solid #dce5eb; }
    #courseTable .span10 { padding: 12px 8px; font-size: 16px; }
    #catalogModalFooter > .row-fluid { display: flex; flex-wrap: wrap; gap: 8px; }
    #idChosenFilters { width: 100%; }
    #idChosenFiltersCrumbs { margin: 0; padding: 4px 8px; font-size: 12px; }
    #addCourses { flex: 1; margin: 0; }
    #courseCatalogExit2 { margin: 0; }
    #optimizeModal .row-fluid { margin-right: 0 !important; }
    #maxDaysRow, #daysOffRow, #afterHourRow, #beforeHourRow, #examsGapRow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    #optimizeModal .row-fluid > .span6 { min-width: 0; }
    #dropDownDays { min-width: 160px; }
    #dropDownDays li { min-height: 44px; }
    #courseProfileModal .nav-tabs { display: flex; flex-wrap: wrap; }
    #courseProfileModal .nav-tabs > li { flex: 1; }
    #courseProfileModal .nav-tabs a { padding: 12px 8px; white-space: nowrap; }
    #courseProfileModal .tab-pane { max-height: none !important; width: 100%; box-sizing: border-box; }
    #courseProfileModal .tab-content { overflow-x: auto; }

    /* Bidding history becomes labelled cards instead of squeezed Bootstrap columns. */
    #courseProfileModal #tab4 { overflow-x: hidden !important; direction: rtl; }
    #courseProfileModal #tab4 #bid-row-title { display: none; }
    #courseProfileModal #table_table { max-height: none !important; overflow: visible !important; margin: 0; }
    #courseProfileModal #table_table .accordion-group { border: 0; margin: 0 0 12px; }
    #courseProfileModal #table_table .accordion-heading .accordion-toggle { padding: 0; color: inherit; text-decoration: none; }
    #courseProfileModal #table_table .accordion-inner { padding: 8px 0 0; border-top: 0; }
    #courseProfileModal .bid-stat-card {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
        width: 100%; margin: 0; padding: 1px; box-sizing: border-box; overflow: hidden;
        border: 1px solid #c8d9e3; border-radius: 8px; background: #c8d9e3;
    }
    #courseProfileModal .bid-stat-card .bid-cell {
        display: block; float: none; width: auto !important; min-width: 0; min-height: 54px;
        margin: 0 !important; padding: 8px 10px; box-sizing: border-box;
        background: #fff; text-align: right; overflow-wrap: anywhere;
    }
    #courseProfileModal .bid-stat-card .bid-cell::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        color: #526879; font-size: 12px; font-weight: normal;
    }
    #courseProfileModal .bid-year { order: 1; }
    #courseProfileModal .bid-semester { order: 2; }
    #courseProfileModal .bid-group { order: 3; }
    #courseProfileModal .bid-lecturer { order: 4; grid-column: 1 / -1; }
    #courseProfileModal .bid-places { order: 5; }
    #courseProfileModal .bid-requested { order: 6; }
    #courseProfileModal .bid-accepted { order: 7; }
    #courseProfileModal .bid-rejected { order: 8; }
    #courseProfileModal .bid-points { order: 9; }
    #courseProfileModal .bid-row-lesson .bid-cell { background: #fcf8e3; }
    #courseProfileModal .bid-row-lesson .bid-points:empty,
    #courseProfileModal .bid-stat-card .bid-lecturer:empty { display: none; }
    #courseProfileModal .bid-row-lesson .bid-rejected { grid-column: 1 / -1; }
}

/* Fit tablet dialogs without altering their desktop column layout. */
@media screen and (min-width: 768px) and (max-width: 979px) and (pointer: fine) {
    #courseCatalogModal, #courseProfileModal { left: 16px; right: 16px; width: auto; margin-left: 0; }
}