/**
 * orchid-mobile.css
 * Global mobile overrides for Orchid admin panel (Bootstrap 5 based).
 *
 * KEY RULE: Never set display:block on <table> — it breaks table layout.
 * Instead, ensure parent containers have overflow-x:auto.
 */

/* ==========================================================================
   Bootstrap md breakpoint: max-width 767.98px
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ------------------------------------------------------------------
       1. Tables — horizontal scroll via parent container
       ------------------------------------------------------------------ */

    /* Orchid's .table-responsive already handles scroll — reinforce */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Orchid cards that contain tables directly (no .table-responsive wrapper):
       make the CARD scrollable, not the table. */
    .bg-white.rounded.shadow-sm,
    .card-body,
    .bg-white.p-4 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Compact table cells */
    .table th,
    .table td {
        padding: .5rem .4rem;
        font-size: .8125rem;
    }

    /* Prevent header text from wrapping — keeps columns stable for scrolling */
    .table thead th {
        white-space: nowrap;
    }

    /* ------------------------------------------------------------------
       2. Command bar — wrap buttons and reduce size
       ------------------------------------------------------------------ */

    .command-bar {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .command-bar .btn {
        font-size: .8125rem;
        padding: .35rem .65rem;
    }

    /* ------------------------------------------------------------------
       3. Workspace — reduce padding
       ------------------------------------------------------------------ */

    .workspace-limit {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    .container-xl {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    /* ------------------------------------------------------------------
       4. Filter rows — full-width stacking
       ------------------------------------------------------------------ */

    [data-controller="filter"] .col-sm-auto,
    [data-controller="filter"] .col-md {
        flex: 0 0 100%;
        max-width: 100%;
    }

    [data-controller="filter"] .col-sm-auto.ms-auto {
        text-align: start !important;
        margin-left: 0 !important;
    }

    [data-controller="filter"] .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }

    /* ------------------------------------------------------------------
       5. Breadcrumbs — smaller font
       ------------------------------------------------------------------ */

    .breadcrumb {
        font-size: .75rem;
    }

    /* ------------------------------------------------------------------
       6. Card padding — compact
       ------------------------------------------------------------------ */

    .bg-white.rounded.shadow-sm > .p-4,
    .bg-white .p-4:first-child {
        padding: .75rem !important;
    }

    .card .card-body {
        padding: .75rem;
    }

    /* ------------------------------------------------------------------
       7. Pagination — compact
       ------------------------------------------------------------------ */

    .pagination {
        flex-wrap: wrap;
        gap: .25rem;
    }

    .pagination .page-link {
        padding: .3rem .5rem;
        font-size: .8125rem;
    }

    /* ------------------------------------------------------------------
       8. Modal dialogs — near full-width
       ------------------------------------------------------------------ */

    .modal-dialog {
        margin: .5rem;
        max-width: calc(100vw - 1rem);
    }

    /* ------------------------------------------------------------------
       9. Screen title — compact
       ------------------------------------------------------------------ */

    .workspace-limit legend,
    .workspace-limit .display-6 {
        font-size: 1.25rem;
    }

    /* ------------------------------------------------------------------
       10. Sidebar — full width when toggled open
       ------------------------------------------------------------------ */

    aside.bg-dark,
    .aside {
        width: 100% !important;
    }
}


/* ==========================================================================
   Bootstrap xs breakpoint: max-width 575.98px
   ========================================================================== */

@media (max-width: 575.98px) {

    /* ------------------------------------------------------------------
       1. Command bar — stack buttons vertically
       ------------------------------------------------------------------ */

    .command-bar {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
    }

    .command-bar .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ------------------------------------------------------------------
       2. Even more compact workspace
       ------------------------------------------------------------------ */

    .workspace-limit {
        padding-left: .25rem !important;
        padding-right: .25rem !important;
    }

    /* ------------------------------------------------------------------
       3. Tabs — scrollable horizontally
       ------------------------------------------------------------------ */

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    .nav-tabs .nav-link {
        font-size: .8125rem;
        padding: .4rem .65rem;
        white-space: nowrap;
    }

    /* ------------------------------------------------------------------
       4. Even more compact table cells
       ------------------------------------------------------------------ */

    .table th,
    .table td {
        padding: .35rem .3rem;
        font-size: .75rem;
    }
}