/* =====================================================================
   GLOBAL RESPONSIVE LAYER  — loaded LAST in App.razor so it can safely
   override the desktop-only theme (NewLayoutStyle.css / Site.css / inline).
   Design rules:
     - Almost everything here is scoped to small/medium screens via @media,
       so the desktop layout is left exactly as-is.
     - Additive only: no existing rule is edited. Delete this file + its
       <link> to fully revert.
   Breakpoints (match Bootstrap 5): sm<576, md<768, lg<992, xl<1200.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Kill sideways scrolling of the whole page on phones/tablets.
   (Scoped to <=lg so desktop position:sticky headers are untouched.)
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    html, body { max-width: 100%; overflow-x: hidden; }
}

/* Content shell must be allowed to shrink (min-width:0 lets fl/grid children
   shrink below their content width instead of forcing page overflow). */
main, .main-container, .maincontent, .content, .page {
    min-width: 0;
    max-width: 100%;
}

/* Media and canvases never overflow their container. */
img, canvas, video, svg { max-width: 100%; }
.content img, .maincontent img { height: auto; }

/* Mobile drawer backdrop is inert on desktop (only shown inside the phone
   media query below), so it can never leave an empty box in the desktop flex row. */
.sidebar-backdrop { display: none; }

/* ---------------------------------------------------------------------
   2) Wide data tables — scroll INSIDE their own area, not the whole page.
   Works for both Bootstrap .table-responsive wrappers and bare tables.
   --------------------------------------------------------------------- */
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
    /* Any table inside page content becomes an independently-scrolling block. */
    .content table,
    .maincontent table,
    .table-responsive > table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------
   3) Forms — controls go full width and rows wrap on tablets & phones.
   Bootstrap col-lg-* already stacks < 992px; this backstops inline widths.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .content .form-control,
    .content .form-select,
    .content input:not([type=checkbox]):not([type=radio]),
    .content select,
    .content textarea {
        max-width: 100%;
    }

    /* Bootstrap rows should wrap (defensive against flex-nowrap). */
    .content .row { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   4) Fixed-width chrome becomes fluid on small screens.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .searchbar { width: 100% !important; }
    .card { max-width: 100% !important; }

    /* Header top bar: let its two sections wrap instead of overflowing. */
    .top-row { flex-wrap: wrap; gap: 6px; }
    .left-section, .right-section { flex: 1 1 auto !important; }
    #icon i, #icon img { margin: 0 10px; }
}

/* ---------------------------------------------------------------------
   5) Header pop-overs (language / page / notification / search) were
   positioned with hard-coded left/top percentages tuned for desktop.
   On small screens re-anchor them centered and on-screen.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #lang-modal, #page-modal, #notification-modal, #search-modal {
        left: 50% !important;
        right: auto !important;
        top: 4rem !important;
        transform: translate(-50%, 0) !important;
        width: 94% !important;
        max-width: 94% !important;
    }

    #langcard, #noti-card, #langcard.card { width: 100% !important; }
    .modal-content { width: auto !important; max-width: 100% !important; }
    .modal-dialog { max-width: 100%; margin: 0.5rem auto; }
}

/* ---------------------------------------------------------------------
   5b) The app's SHARED custom modal (`.modal-Tcontent`, used on ~47 pages
   for the "Add/Edit" pop-ups) is a fixed 500px box pushed 40% from the
   left — on narrow screens it runs off the right edge. Make it fluid and
   centered inside its `.modal` overlay. Applies up to <=lg because the
   40%+500px combination already overflows on tablets too.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .modal-Tcontent {
        width: 92% !important;
        max-width: 520px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 8% !important;
        box-sizing: border-box;
    }
}

/* ---------------------------------------------------------------------
   6) Sidebar → off-canvas drawer on phones.
   IMPORTANT: there are TWO nested `.sidebar` divs — the OUTER one
   (MainLayout, direct child of `.page`, carries the gradient + the
   `nav-open` toggle) and the INNER one (NavMenu, holds the actual
   `.nav-links` menu). The drawer transform must apply ONLY to the outer
   one (`.page > .sidebar`); the inner one must flow normally, otherwise it
   gets translated off-screen and the drawer looks empty.
   The top-bar hamburger sets `.nav-open` (a dedicated mobile flag,
   independent of the desktop `.collapsed`/hover rail). Desktop (>=641px)
   is untouched because every rule is inside this phone media query.
   --------------------------------------------------------------------- */
@media (max-width: 640.98px) {
    .page > .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh !important;
        width: 82% !important;
        max-width: 300px !important;
        z-index: 1060;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    }

    /* Open state (hamburger adds `nav-open` to the OUTER sidebar). */
    .page > .sidebar.nav-open {
        transform: translateX(0);
    }

    /* INNER NavMenu sidebar: render in normal flow inside the drawer so the
       menu is visible (do NOT inherit the fixed/translated drawer styles or
       the collapsed 60px width). */
    .page > .sidebar > .sidebar {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 100%;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Menu list fills the drawer and scrolls if long. */
    .page > .sidebar .nav-links { max-height: none; }

    /* Dim backdrop behind the open drawer; tapping it closes the drawer. */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1055;
    }

    /* Main content spans the full width since the drawer is out of flow. */
    .main-container { width: 100%; }

    /* Ensure the ☰ menu button is fully visible: the desktop theme pulls the
       header's left section 22px to the left (to tuck under the sidebar),
       which shoved the hamburger off the screen edge on phones. */
    .left-section { margin-left: 0 !important; }
    .nav-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        font-size: 1.4rem;
        padding: 4px 14px 4px 4px;
    }
}

/* ---------------------------------------------------------------------
   7) Shared page chrome (CommonHeader + main content area) — used on
   EVERY authenticated page. On desktop the content area has 25px side
   margins + 25px padding (~100px) and the page header is a big 30px title
   with a space-between description/breadcrumb row; both waste space and
   cramp on small screens.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Reclaim the ~100px of horizontal chrome the desktop theme reserves. */
    article.maincontent {
        margin: 0 !important;
        padding: 12px !important;
    }
}

@media (max-width: 767.98px) {
    /* Page header card: smaller title + tighter padding. */
    .header { padding: 14px !important; }
    .header .title { font-size: 20px !important; line-height: 1.2; }

    /* Description and breadcrumb stack instead of squeezing side-by-side. */
    .smllhead {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* Expandable-header absolute mode uses a hard-coded 250px sidebar offset —
       neutralise it on phones where the sidebar is an off-canvas drawer. */
    .header[style*="250px"] {
        left: 0 !important;
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------------
   8) Pagination — most list pages render EVERY page number as a <li> in a
   `display:flex` `.pagination` row (no wrap). With many pages that row
   overflows and breaks the layout / pushes the page sideways. Make the
   pagination WRAP and stay inside its container at ALL widths (the overflow
   happens on desktop too once there are lots of pages). Applied globally;
   for a few pages it stays a single row exactly as before.
   --------------------------------------------------------------------- */
.pagination {
    flex-wrap: wrap;
    row-gap: 4px;
    max-width: 100%;
}

.dataTables_paginate {
    max-width: 100%;
    overflow: hidden;   /* never let the paginate block force horizontal page scroll */
}

/* On phones, drop the desktop negative top-margin the paginate column uses
   (it pulls the controls up over the "Showing x of y" line) and center them. */
@media (max-width: 767.98px) {
    .dataTables_paginate { margin-top: 8px !important; }
    .pagination { justify-content: center; }
    .dataTables_info { text-align: center; }
}