/*
 * Dashboard mobile responsiveness
 * Loaded on every page, after main.css / dashboard-rtl.css / dashboard-ltr.css.
 */

/* Small preview icon overlaid on image/video thumbnails, opens a Fancybox lightbox */
.img-preview-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.img-preview-icon {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 10px;
    text-decoration: none;
}

.img-preview-icon:hover {
    background: rgba(0, 0, 0, .85);
    color: #fff;
}

/* Off-canvas backdrop: only visible while the mobile drawer is open (<992px) */
.app .sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .app .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 66px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 90;
    }

    .app.active .sidebar-backdrop {
        display: block;
    }

    /* Sit above the backdrop while the off-canvas drawer is open
       (the base fixed positioning itself now applies at every screen size) */
    .app .sidebar {
        z-index: 100;
    }

    /* Prevent the page behind the drawer from scrolling while it's open */
    body:has(.app.active) {
        overflow: hidden;
    }
}

/* Shrink the dashboard tables on small screens for readability */
@media (max-width: 767.98px) {
    .main-table thead th {
        font-size: 11px;
        padding: 8px 10px;
        white-space: nowrap;
    }

    .main-table tbody td {
        font-size: 11px;
        padding: 8px 10px;
        white-space: nowrap;
    }
}

/* Let the filter/status pill bar scroll horizontally instead of wrapping awkwardly */
@media (max-width: 575.98px) {

    /* Page header (breadcrumb title + edit/back buttons): 21 views share this
       exact "d-flex justify-content-between" row with a .main-title on one
       side and a .btn-holder on the other, with no wrap handling at all — on
       narrow screens the long breadcrumb text and the buttons fight for the
       same row. Stack them instead. */
    div.d-flex.justify-content-between:has(> .main-title) {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .main-title {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    div.d-flex.justify-content-between:has(> .main-title) > .btn-holder {
        width: 100%;
    }

    div.d-flex.justify-content-between:has(> .main-title) > .btn-holder .main-btn {
        flex: 1 1 0;
        justify-content: center;
    }

    /* Stack the button-group and the search box as two full-width rows... */
    .bar-options,
    .bar-obtions {
        flex-wrap: wrap;
    }

    .bar-options>div,
    .bar-obtions>div {
        width: 100%;
    }

    /* ...and make the actual pill row (the button-group div nested inside
       .bar-obtions > .row) scroll horizontally instead of stacking one
       button per line. Targeted structurally since not every page's button
       group carries the .flex-wrap utility class. */
    .bar-options .row>div,
    .bar-obtions .row>div {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bar-options .row>div>a,
    .bar-options .row>div>button,
    .bar-obtions .row>div>a,
    .bar-obtions .row>div>button {
        flex: 0 0 auto;
    }

    .btn-holder,
    .bar-options .btn-holder,
    .bar-obtions .row {
        flex-wrap: nowrap !important;
    }

    /* Date-range filter row (community subscriptions / course enrollments):
       two fixed-width date fields + a Filter/Reset button next to the search
       box wrap unpredictably at this width, sometimes leaving the button
       sandwiched between the two dates. Stack everything as full-width rows
       instead. */
    .date-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .date-filter-form {
        width: 100%;
    }

    .date-filter-field {
        width: 100%;
    }

    .date-filter-form .main-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Search box: the base CSS hardcodes input width:270px and never makes the
       icon + input a flex row, so at full width the input wraps onto its own
       line and pushes the icon out above the box. Make it a proper flex row. */
    .box-search {
        width: 100%;
        margin-top: .5rem;
    }

    .box-search form {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .box-search img {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
    }

    .box-search input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .stat-card,
    .info-card {
        padding: 1rem;
    }

    .info-number {
        font-size: 1.8rem;
    }

    /* Pagination on mobile: we publish our own copy of Laravel's pagination
       view (resources/views/vendor/pagination/bootstrap-5.blade.php) which
       renders a fixed window of at most 5 page numbers + prev/next for the
       d-sm-none (mobile) block — no boundary/ellipsis links, so it always
       fits on one row with no scrolling needed. This just styles that block;
       Laravel's own d-sm-none / d-sm-flex breakpoint classes already pick
       the right block for the screen size. */
    nav > .d-flex.d-sm-none .pagination {
        gap: 3px;
    }

    nav > .d-flex.d-sm-none .pagination .page-link {
        display: block;
        min-width: 30px;
        padding: 7px 6px;
        text-align: center;
        border-radius: 8px !important;
        font-size: 11px;
        font-weight: 600;
    }

    /* Keep the header (logo/hamburger + user/lang controls) on a single row.
       Keep every bit of content visible (avatar, name, subtitle, language
       label) — just tighten the padding/gaps that don't carry information
       so it all actually fits (once it does, space-between no longer has
       leftover room to stretch apart, so no extra justify-content override
       is needed).
       IMPORTANT: never use overflow/scroll on a container that holds a
       Bootstrap dropdown-menu — it clips the popover instead of scrolling it. */
    .main-navbar .container-fluid {
        flex-wrap: nowrap !important;
        min-width: 0;
    }

    .main-navbar .logo {
        flex: 0 0 auto;
    }

    .main-navbar .d-flex.gap-2rem {
        flex-wrap: nowrap !important;
        flex: 0 0 auto;
        margin-right: .5rem;
        margin-left: 0;
    }

    [dir="ltr"] .main-navbar .d-flex.gap-2rem {
        margin-left: .5rem;
        margin-right: 0;
    }

    .main-navbar .d-flex.gap-2rem,
    .main-navbar .gap-3 {
        gap: .4rem !important;
    }


    .main-navbar .logo .img {
        width: 90px;
    }

    /* Language dropdown: base CSS uses .btn-sm.px-4 (1.5rem side padding) — way
    more than a narrow header can spare */
    .main-navbar .dropdown .btn.dropdown-toggle {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        font-size: 11px;
    }

    /* .ms-auto no longer has room to push against once the container hugs
       its content, but neutralize it explicitly so it can't reintroduce a gap */
    .main-navbar .info-user.ms-auto {
        margin-inline-start: 0 !important;
    }

    /* User menu: shrink the avatar and the border/padding that separates it
       from the language dropdown, but keep the name + "Management" label */
    .main-navbar .info-user .content .img {
        width: 32px;
        height: 32px;
    }

    .main-navbar .info-user .content .text .name {
        font-size: 12px;
    }

    .main-navbar .info-user .content .text .dic {
        font-size: 10px;
    }

    [dir="rtl"] .main-navbar .info-user,
    [dir="ltr"] .main-navbar .info-user,
    .main-navbar .info-user {
        padding-right: .4rem;
        padding-left: .4rem;
    }

    /* Thin, subtle scrollbar for the mobile-only pill-filter strip,
       instead of the browser's default thick bar. */
    .bar-options .row>div,
    .bar-obtions .row>div {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, .25) transparent;
    }

    .bar-options .row>div::-webkit-scrollbar,
    .bar-obtions .row>div::-webkit-scrollbar {
        height: 4px;
        width: 4px;
    }

    .bar-options .row>div::-webkit-scrollbar-track,
    .bar-obtions .row>div::-webkit-scrollbar-track {
        background: transparent;
    }

    .bar-options .row>div::-webkit-scrollbar-thumb,
    .bar-obtions .row>div::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .25);
        border-radius: 4px;
    }
}

/* Thin, subtle scrollbar for horizontally-scrolling tables, at any screen size
   (a wide table can need this well above the 575px phone breakpoint). */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .25) transparent;
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-radius: 4px;
}