/*
 * mobile.css — Minimal mobile usability improvements
 * Targets: phones and small tablets (≤ 768px)
 */


/* =============================================================
   1. GLOBAL — tighten container padding on small screens
   NOTE: intentionally NOT setting overflow-x:hidden on body or
   containers — that clips fixed/absolute positioned elements
   like dropdowns, the dashboard sidebar, and the calendar.
   ============================================================= */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* =============================================================
   2. PUBLIC HEADER — background fix
   The <header> element has bg-white but its inner container is
   bg-primary. On mobile if the inner container doesn't fully
   fill the header height, white leaks out. Force the header
   background to match primary so no white shows.
   ============================================================= */
@media (max-width: 991px) {
    #site-header {
        background-color: var(--primary-color) !important;
    }
}


/* =============================================================
   3. NAVBAR / HEADER LOGO
   Logo text uses white-space: nowrap. On very small phones
   the subtitle can push the toggler off-screen.
   ============================================================= */
@media (max-width: 480px) {
    .logo-text {
        font-size: 1.05rem !important;
    }

    .logo-subtitle {
        display: none; /* hide subtitle on very small screens */
    }

    .menubar-logo {
        max-height: 32px;
    }
}


/* =============================================================
   3. SITE LOGO IMAGE — hardcoded 400px width breaks mobile
   ============================================================= */
@media (max-width: 768px) {
    #site-logo-image {
        width: 100% !important;
        max-width: 280px;
    }
}


/* =============================================================
   4. TABLES — horizontal scroll instead of page overflow
   This app uses DataTables 2.x which uses .dt-container instead
   of the old .dataTables_wrapper class.
   ============================================================= */
@media (max-width: 768px) {

    /* DataTables 2.x: outer container gets horizontal scroll */
    .dt-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* DataTables 2.x: search input left-aligned */
    .dt-search {
        justify-content: flex-start;
        margin-bottom: 0.5rem;
    }

    /* DataTables 2.x: pagination wraps on small screens */
    .dt-paging ul.pagination {
        flex-wrap: wrap;
        gap: 2px;
    }

    /* DataTables 2.x: length select full width */
    .dt-length select {
        width: auto;
    }

    /* Legacy DataTables 1.x fallback (kept for safety) */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_filter {
        justify-content: flex-start;
        margin-bottom: 0.5rem;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        flex-wrap: wrap;
        gap: 2px;
    }

    /* Plain Bootstrap tables not managed by DataTables */
    table.table:not(.dataTable) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent cells from being too narrow */
    table.table td,
    table.table th {
        min-width: 80px;
    }
}


/* =============================================================
   5. FORMS — stretch inputs on mobile
   ============================================================= */
@media (max-width: 768px) {

    .form-control,
    .form-select,
    .input-group {
        width: 100% !important;
    }

    .form-inline .form-group,
    .form-inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-group,
    .mb-3 {
        margin-bottom: 0.75rem;
    }
}


/* =============================================================
   6. BUTTONS — minimum touch-target size
   ============================================================= */
@media (max-width: 768px) {
    .btn {
        min-height: 38px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .btn-sm {
        min-height: 32px;
    }
}


/* =============================================================
   7. DASHBOARD SIDEBAR (layouts/dashboard.blade.php)
   On mobile the sidebar collapses via Bootstrap collapse.
   When shown, it overlays content cleanly.
   ============================================================= */
@media (max-width: 767.98px) {

    #sidebarMenu.show,
    #sidebarMenu.collapsing {
        z-index: 200;
        background-color: #fff;
        box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 56px;
        left: 0;
        height: calc(100vh - 56px);
        overflow-y: auto;
        width: 220px;
    }

    main[role="main"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 1.5rem; !important;
    }

    /* Stack role label + collection name vertically, both centered.
       48px of horizontal padding leaves room for the abs-positioned
       hamburger button on the right. */
    .dashboard-navbar {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 56px !important;
        padding: 4px 48px !important;
    }

    /* Remove the right-border separator that only makes sense
       in the horizontal desktop layout */
    .dashboard-navbar .logo-font {
        border-right: none !important;
        width: auto !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Collection name: no truncation needed now that it's centered
       below the role label. Hide the "(role)" part in parens. */
    #navbar-program {
        font-size: 0.75rem !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* Hide the "(Admin)" / "(participant)" role suffix */
    #navbar-program span.text-capitalize {
        display: none !important;
    }

    /* Re-center the hamburger button vertically in the taller navbar */
    .dashboard-navbar .navbar-toggler {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* rows with Bootstrap 4 ml-3/mr-3 — wastes 32px on mobile */
    .row.ml-3 {
        margin-left: 0 !important;
    }
    .row.mr-3 {
        margin-right: 0 !important;
    }
}


/* =============================================================
   8. FOOTER — center-align text on small screens
   ============================================================= */
@media (max-width: 768px) {
    .copyright-footer .col-md-7,
    .copyright-footer .col-md-5 {
        text-align: center;
        margin-bottom: 0.5rem;
    }
}


/* =============================================================
   9. HOMEPAGE HERO SECTION
   ============================================================= */
@media (max-width: 768px) {
    .homepage-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .homepage-logo {
        margin-right: 0 !important;
        margin-bottom: 12px;
    }

    .contact-header {
        margin-left: 0 !important;
    }
}


/* =============================================================
   10. MODALS — full-width on small phones
   ============================================================= */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 8px;
        max-width: calc(100vw - 16px);
    }
}


/* =============================================================
   11. SELECT PROGRAM BOX
   Fixed width: 300px — replace with a flexible width on mobile
   ============================================================= */
@media (max-width: 768px) {
    .select-program-box {
        width: 90% !important;
        max-width: 300px;
    }
}


/* =============================================================
   12. CALENDAR PAGE — calendar.css uses padding: 0 1in (≈96px
   per side) on BOTH wrapper and container, leaving no width on
   a phone. Also the calendar header is at top:45px which sits
   behind the fixed public nav on mobile.
   ============================================================= */
@media (max-width: 768px) {

    /* The public nav is ~65px tall on mobile.
       Push calendar header below it. */
    .header-container {
        top: 32px !important;
        flex-wrap: wrap !important;
        gap: 4px;
        padding: 6px 10px !important;
    }

    .calendar-title {
        font-size: 1.1em !important;
    }

    /* Year selector was absolutely positioned to the right;
       let it flow normally on mobile */
    .year-selector {
        position: static !important;
        font-size: 13px;
        margin-top: 4px;
    }

    .learn-more-link {
        position: static !important;
        display: block;
        font-size: 0.75em;
    }

    /* The wrapper is fixed with 1-inch padding — kill that */
    .calendar-container-wrapper {
        top: 120px !important;   /* nav + calendar header */
        bottom: 60px !important;
        padding: 0 8px !important;
    }

    /* Container also has 1-inch padding — remove it */
    .calendar-container {
        padding: 0 !important;
    }

    /* Shrink cell heights so months fit on screen */
    .calendar-table th {
        font-size: 0.65em !important;
        padding: 3px !important;
        height: 36px !important;
        line-height: 1.2 !important;
    }

    .calendar-table td {
        height: 55px !important;
        padding: 2px !important;
        font-size: 0.75em;
    }

    .month h2 {
        font-size: 1.1em !important;
    }

    .month h2 small {
        font-size: 0.8em !important;
    }
}


/* =============================================================
   13. MISCELLANEOUS SMALL FIXES
   ============================================================= */
@media (max-width: 768px) {

    .admin-row-wrapper {
        margin-bottom: 60px;
    }

    .timesheet-title {
        min-width: unset;
    }

    #movetop {
        right: 12px !important;
        bottom: 12px !important;
    }
}


/* =============================================================
   14. DASHBOARD HOME PAGE
   .dashboard-section uses p-5 (48px all sides) — far too much
   on mobile. Reduce padding and tighten topic-card title height.
   ============================================================= */
@media (max-width: 767.98px) {

    /* p-5 = 48px padding — replace with tight mobile padding */
    .dashboard-section.p-5 {
        padding: 12px 12px 24px !important;
    }

    /* Topic card: inline min-height: 50px on h5 wastes space for
       long topic names — let it wrap naturally */
    .topic-card .card-title {
        min-height: unset !important;
        font-size: 1rem !important;
    }

    /* Topics/Announcements section top spacing */
    .topics-section {
        margin-top: 1.25rem !important;
    }
}


/* =============================================================
   15. DASHBOARD ADMIN LIST PAGES — tighten top spacing & the
   gap between Create buttons and the data table.

   All admin list pages (Learning Resources, Announcements,
   Topics, Manage Users, Manage Settings) share this structure:

     <main role="main">
       <div class="mt-5">          ← layout's nav-clearance div
       <div class="container mt-5">← page content
         <div class="row mb-5">   ← Create-button row
         <div class="row …">
           <table class="… mt-5"> ← data table

   The layout's div.mt-5 already provides the 48 px of
   clearance needed to clear the fixed 48 px navbar.
   The page's own container.mt-5 + row.mb-5 + table.mt-5
   stack up to ~144 px of empty space on mobile — way too much.
   ============================================================= */
@media (max-width: 767.98px) {

    /* Reduce the content container's top margin.
       The layout div.mt-5 already clears the navbar. */
    main[role="main"] > .container.mt-5 {
        margin-top: 0.75rem !important;
    }

    /* Reduce the Create-button row bottom margin */
    main[role="main"] .row.mb-5 {
        margin-bottom: 0.5rem !important;
    }

    /* Remove the extra top margin on data tables inside
       the admin row wrapper (the row.mb-5 above already
       provides enough visual separation) */
    .admin-row-wrapper table.mt-5 {
        margin-top: 0 !important;
    }

    /* style.css has a ≤991px media query that adds margin-top: 150px
       to .admin-row-wrapper — far too much on a phone */
    .admin-row-wrapper {
        margin-top: 0 !important;
    }
}