/*
 * udom-mobile.css — Mobile & responsive overrides for UDOM Academia
 * ──────────────────────────────────────────────────────────────────
 * Served as a static file (no build step required).
 * Loaded AFTER the Vite vendor bundle so these rules win.
 *
 * The Paces v1.3.1 template uses --theme-* CSS variables, not --bs-*.
 * Bootstrap's offcanvas sidebar is already handled by Paces JS + CSS.
 * These rules fix application-level issues only.
 */

/* ─────────────────────────────────────────────────────────────────────
   0. Auth box: reduce padding (override _authentication.scss)
   ───────────────────────────────────────────────────────────────────── */
.auth-box {
    padding: 1px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   1. Fix CSS variable prefix bug in global-search dropdown hover
   ───────────────────────────────────────────────────────────────────── */
#globalSearchDropdown .dropdown-item:hover,
#globalSearchDropdown .dropdown-item:focus {
    /* Original used --bs-gray-100, which is undefined in Paces (uses --theme-*) */
    background-color: var(--theme-gray-100, #f3f4f6);
}

/* ─────────────────────────────────────────────────────────────────────
   2. Prevent horizontal overflow on all screens
   ───────────────────────────────────────────────────────────────────── */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────
   3. Tablet & phone  (< 992px)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* Safety net: global search absolute overlay hidden via d-none d-lg-block
       in the blade template; this rule is a backup */
    .dashboard-global-search {
        display: none !important;
    }

    /* Card headers must wrap on screens that can't fit everything in one row */
    .card-header {
        flex-wrap: wrap !important;
    }

    /* Page title: tighten headings */
    .page-title-box h4 {
        font-size: 1rem;
        line-height: 1.3;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   4. Mobile (< 768px)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* ── Content area: safety override for margin-inline-start.
         Paces already handles this via html[data-sidenav-size='offcanvas'],
         but this ensures zero-gap even if the attribute is set late. ── */
    .content-page {
        margin-inline-start: 0 !important;
        min-width: 0;
    }

    /* ── Sessions filter form: stack filter controls full-width ── */
    #sessions-filter-form .col-auto {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #sessions-filter-form .col.ms-auto {
        flex: 0 0 100%;
        max-width: 100%;
        margin-inline-start: 0 !important;
        justify-content: flex-start !important;
    }
    /* Remove inline min-width from filter selects & date inputs */
    #sessions-filter-form select[style*="min-width"],
    #sessions-filter-form input[style*="min-width"] {
        min-width: 0 !important;
        width: 100%;
    }

    /* ── Timeline: compact time column ── */
    .timeline-time {
        min-width: 52px !important;
        font-size: .73rem;
    }

    /* ── Breadcrumb: reclaim vertical space on mobile ── */
    .page-title-box .breadcrumb {
        display: none;
    }

    /* ── Tables: ensure touch-friendly horizontal scroll ── */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* ── Stats row full-width: swap border-end for border-bottom ── */
    .row-cols-1 .col.border-end,
    .row-cols-1 .col.border-end.border-dashed {
        border-right: none !important;
        border-bottom: 1px dashed var(--theme-border-color, #dee2e6) !important;
    }
    .row-cols-1 .col:last-child {
        border-bottom: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   5. Small phones (< 576px)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {

    /* Tighten page padding */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Tighten card padding */
    .card-body {
        padding: 0.75rem;
    }
    .card-header {
        padding: 0.6rem 0.75rem;
    }

    /* Badge labels: truncate very long subject/group names */
    .badge.badge-label {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
        white-space: nowrap;
    }

    /* Timeline: compress further on tiny screens */
    .timeline-content {
        padding-left: 0.5rem !important;
    }

    /* App search inputs: full width */
    .app-search {
        width: 100%;
    }
    .app-search .form-control {
        width: 100%;
    }
}