/* =====================================================================
 * Site-wide responsive fix - admin panel
 * ---------------------------------------------------------------------
 * This theme (AdminCAST-based) was never actually built with a working
 * mobile off-canvas menu: below 992px it just set the sidebar's
 * margin-left to -220px and visibility:hidden, with no way to open it
 * again except toggling a class meant for desktop "icon only" mode -
 * which, combined with .fixed-layout, hides the sidebar completely
 * instead of shrinking it. There was also no touch-friendly scrolling
 * inside the sidebar (jQuery slimScroll doesn't play well with the
 * transform-based drawer here), no width limit on the notification/
 * inbox dropdowns, and several fixed-width elements that don't shrink.
 *
 * This file adds a real slide-in/out sidebar with a backdrop for
 * tablet and phone widths, plus general small-screen fixes, on top of
 * the existing theme instead of rewriting it. It is linked from
 * header.php, so it applies to every admin page automatically.
 * The matching JS (open/close/backdrop/resize handling) lives in
 * assets/js/mobile-responsive.js. The sidebar's native scrolling (as
 * opposed to slimScroll) is switched on in footer.php below 992px.
 * ===================================================================== */

* ,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Backdrop element is appended to <body> by mobile-responsive.js on
   every screen size; keep it fully inert above the tablet breakpoint
   (it only gets positioned/shown inside the media query below). */
.mobile-sidebar-backdrop {
    display: none;
}

/* Universal fallback: the sidebar scrolls natively on its own even if
   slimScroll's JS never runs (e.g. a page-specific script error, or a
   page that reloads jQuery mid-page and wipes out plugins registered
   in <head>). Desktop's slimScroll, where it does load, just draws a
   thinner custom scrollbar on top of this - it doesn't replace it. */
#sidebar-collapse {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
 * Login / auth pages (login.php etc. reuse header.php + footer.php but
 * have no sidebar/topbar). They previously opened a second, invalid
 * <body> tag just to set a background class, which browsers silently
 * drop since <body> already has a class from header.php. Fixed by
 * giving the wrapping div the same look here instead, centred and
 * padded on every screen size.
 * ------------------------------------------------------------------- */
.auth-page-content {
    background-color: #d1d5d8;
    min-height: 100vh;
    padding: 30px 15px;
}

/* ---------------------------------------------------------------------
 * Tablet & phone (< 992px): real off-canvas sidebar
 * ------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Sidebar is always in the DOM; we hide/show it by sliding it off
       the left edge with a transform instead of the theme's
       margin-left/visibility trick, which had no open state. The
       !important pairs here intentionally out-rank the theme's own
       body.fixed-layout.sidebar-mini rules regardless of which
       combination of those classes happens to be on <body>. */
    body .page-sidebar {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        max-width: 85vw !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
        transform: translateX(-100%);
        transition: transform .25s ease-in-out;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1040;
        background-color: #2a3543;
        box-shadow: 2px 0 14px rgba(0, 0, 0, .3);
    }

    body.mobile-sidebar-open .page-sidebar {
        transform: translateX(0) !important;
    }

    /* Content never gets pushed over on small screens - the sidebar
       floats above it instead. */
    body .content-wrapper,
    body.fixed-layout.sidebar-mini .content-wrapper {
        margin-left: 0 !important;
    }

    /* Sidebar's own scroll area: native touch scrolling. slimScroll is
       explicitly turned off at this width from footer.php. */
    #sidebar-collapse {
        height: 100% !important;
        max-height: 100%;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 60px;
    }

    /* Dimmed backdrop behind the open sidebar, below the fixed header
       so the hamburger stays reachable to close the menu again. */
    .mobile-sidebar-backdrop {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 1035;
    }

    body.mobile-sidebar-open .mobile-sidebar-backdrop {
        display: block;
    }

    /* Don't let the page scroll behind an open drawer. */
    body.mobile-sidebar-open {
        overflow: hidden;
    }

    /* Bigger, easier to tap hamburger + top icons. */
    .header .navbar-toolbar > li > a {
        padding: 15px 12px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Brand text shrinks instead of forcing horizontal scroll. */
    .header .page-brand {
        width: auto !important;
        max-width: 60vw;
        padding: 0 10px;
    }
    .header .page-brand .brand-tip,
    .header .page-brand .brand {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------------------------------------------------------------------
 * Phone (< 768px)
 * ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body { overflow-x: hidden; }

    h1 { font-size: 22px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }

    .page-heading .page-title { font-size: 20px; margin: 12px 0 8px 0; }
    .page-header { padding-top: 20px; padding-bottom: 10px; }
    .content-wrapper { padding: 0 10px 40px 10px; }

    /* Forms: stop inline groups from overflowing, stack them instead. */
    .form-inline { flex-wrap: wrap; }
    .form-inline .form-control,
    .form-inline .btn,
    .form-inline .input-group { margin-bottom: 8px; width: 100%; }

    /* Card / ibox headers that mix a title with action buttons. */
    .card-header.d-flex,
    .d-flex.justify-content-between,
    .ibox-head { flex-wrap: wrap; }
    .ibox-head .ibox-tools { margin-top: 6px; }

    /* Prevent iOS Safari from auto-zooming the page when a field is
       focused - it requires a >=16px font-size on inputs. */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .form-control { font-size: 16px; }

    /* Tables auto-wrapped in .table-responsive by footer.php's script;
       just make sure the scroll area is touch-friendly and dense. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive table { font-size: 13px; }

    /* DataTables controls (length/search/buttons) stack full-width
       instead of the desktop float layout, which pushes off-screen. */
    .dataTables_wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dt-buttons {
        float: none !important;
        display: block !important;
        width: 100%;
        margin: 4px 0;
        text-align: left !important;
    }
    .dataTables_filter input { width: 100%; margin-left: 0 !important; }
    .dt-buttons .btn { margin-bottom: 4px; }

    /* Notification / inbox dropdowns: never wider than the viewport. */
    .dropdown-menu-media,
    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }
    .dropdown-menu-media { width: calc(100vw - 24px); }

    /* Modals: leave breathing room and cap height so long forms scroll
       inside the dialog instead of pushing the page. */
    .modal-dialog { margin: 10px; }
    .modal-content { max-height: calc(100vh - 20px); }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* Buttons in a group/toolbar wrap instead of overflowing. */
    .btn-toolbar,
    .btn-group { flex-wrap: wrap; }

    /* Pagination wraps instead of forcing a scrollbar. */
    .pagination { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
 * Very small phones (< 400px)
 * ------------------------------------------------------------------- */
@media (max-width: 400px) {
    .header .page-brand { max-width: 50vw; }
    .page-heading .page-title { font-size: 18px; }
    .content-wrapper { padding: 0 8px 30px 8px; }
}

/* ---------------------------------------------------------------------
 * Print: never show the sidebar/backdrop/toggler on a printed page.
 * ------------------------------------------------------------------- */
@media print {
    .mobile-sidebar-backdrop { display: none !important; }
}


/* =====================================================================
 * v9 Responsive Hardening
 * Target: phones, tablets, laptops, desktops and wide monitors.
 * ===================================================================== */

/* Never allow a child component to create page-level horizontal scroll. */
html { width: 100%; max-width: 100%; }
body { width: 100%; max-width: 100%; }
.container, .container-fluid { width: 100%; max-width: 100%; }
.row { max-width: 100%; }
[class*="col-"] { min-width: 0; }
.card, .ibox, .panel, .box, .well, .portlet { max-width: 100%; }

/* Flexible media and long strings. */
img, svg, video, canvas { max-width: 100%; }
pre, code { max-width: 100%; }
pre { overflow-x: auto; }
td, th, .text-break { overflow-wrap: anywhere; word-break: break-word; }

/* Tables: preserve all columns without shrinking the whole page. */
.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-responsive > table {
    margin-bottom: 0;
}
table.dataTable { width: 100% !important; max-width: none; }

/* Inputs and selects must fit their parent. */
input, select, textarea, .form-control, .input-group {
    max-width: 100%;
}
.input-group { min-width: 0; }
.input-group > .form-control { min-width: 0; }

/* Flexible action areas. */
.btn-toolbar, .form-group, .form-row, .d-flex {
    min-width: 0;
}
.btn { max-width: 100%; }

/* Avoid fixed-width page sections from breaking mobile layouts. */
@media (max-width: 1199.98px) {
    .content-wrapper { min-width: 0 !important; }
    .page-content { min-width: 0 !important; }
    .page-heading { min-width: 0 !important; }

    /* Common fixed-width inline styles/classes become viewport-safe. */
    [style*="width:"] {
        max-width: 100% !important;
    }

    .dropdown-menu {
        max-width: min(420px, calc(100vw - 20px));
        overflow-x: hidden;
    }
}

/* Tablet: comfortable 2-column forms where possible, but no overflow. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .content-wrapper { padding-left: 15px; padding-right: 15px; }
    .modal-dialog { max-width: calc(100vw - 40px); }
    .table-responsive { width: 100%; }
}

/* Phone landscape + portrait. */
@media (max-width: 767.98px) {
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }

    .card-body, .ibox-body, .panel-body {
        padding: 12px !important;
    }

    /* Stack common header/action rows. */
    .page-header,
    .ibox-head,
    .card-header,
    .panel-heading {
        gap: 8px;
    }

    .page-header .btn,
    .ibox-tools .btn,
    .card-header .btn,
    .panel-heading .btn {
        margin: 2px 0;
    }

    /* Full-width controls are easier to use with a finger. */
    .btn-group,
    .btn-toolbar {
        width: 100%;
    }
    .btn-group .btn,
    .btn-toolbar .btn {
        margin-bottom: 4px;
    }

    /* DataTables: controls wrap and table scrolls independently. */
    .dataTables_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    .dataTables_wrapper .dataTables_scroll,
    .dataTables_wrapper .dataTables_scrollBody {
        max-width: 100% !important;
    }

    /* Modal content remains inside the viewport. */
    .modal {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .modal-dialog {
        width: auto !important;
        max-width: none !important;
        margin: 8px !important;
    }
    .modal-content {
        width: 100%;
        max-height: calc(100vh - 16px);
    }

    /* Nav/dropdowns should never push the viewport sideways. */
    .navbar-nav, .navbar-toolbar, .nav-tabs, .nav-pills {
        max-width: 100%;
    }
    .nav-tabs, .nav-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs > li, .nav-pills > li {
        flex: 0 0 auto;
    }

    /* Pagination can wrap naturally on narrow screens. */
    .pagination {
        display: flex !important;
        flex-wrap: wrap;
        gap: 2px;
    }
    .pagination > li {
        float: none !important;
    }
}

/* Small phones. */
@media (max-width: 480px) {
    body { font-size: 14px; }
    .content-wrapper { padding-left: 8px !important; padding-right: 8px !important; }
    .page-heading .page-title { font-size: 18px; }
    .table-responsive table { font-size: 12px; }
    .table-responsive th, .table-responsive td { padding: 6px !important; }

    .btn {
        white-space: normal;
        word-break: break-word;
    }

    .form-control { height: auto; min-height: 38px; }
}

/* Very narrow devices (320px–360px). */
@media (max-width: 360px) {
    .content-wrapper { padding-left: 5px !important; padding-right: 5px !important; }
    .card-body, .ibox-body, .panel-body { padding: 8px !important; }
    .header .page-brand { max-width: 45vw !important; }
    .header .page-brand .brand-tip,
    .header .page-brand .brand { font-size: 14px !important; }
}

/* Landscape phones: don't make the drawer consume too much width. */
@media (max-width: 767.98px) and (orientation: landscape) {
    body .page-sidebar {
        width: min(300px, 75vw) !important;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* =====================================================================
 * v10: Mobile sidebar + login redesign
 * ===================================================================== */
@media (max-width: 991.98px) {
    body.fixed-layout .header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1100 !important;
    }

    body.fixed-layout .page-wrapper {
        min-height: 100vh;
    }

    /* True off-canvas drawer. Explicitly cancel the theme's
       fixed-layout.sidebar-mini hiding rules. */
    body.fixed-layout .page-sidebar,
    body.fixed-layout.sidebar-mini .page-sidebar {
        display: block !important;
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 285px !important;
        max-width: 86vw !important;
        height: calc(100vh - 56px) !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translate3d(-105%,0,0) !important;
        transition: transform .25s ease, box-shadow .25s ease !important;
        z-index: 1090 !important;
        overflow: hidden !important;
        box-shadow: none;
    }

    body.mobile-sidebar-open.fixed-layout .page-sidebar,
    body.mobile-sidebar-open.fixed-layout.sidebar-mini .page-sidebar {
        transform: translate3d(0,0,0) !important;
        box-shadow: 6px 0 24px rgba(0,0,0,.24) !important;
    }

    body.fixed-layout .page-sidebar #sidebar-collapse {
        height: 100% !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 24px !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Make the drawer comfortable to use with fingers. */
    body.fixed-layout .page-sidebar .admin-block {
        min-height: 76px;
        padding: 14px 16px !important;
    }
    body.fixed-layout .page-sidebar .side-menu > li > a {
        min-height: 48px;
        padding: 13px 16px !important;
    }
    body.fixed-layout .page-sidebar .side-menu .nav-2-level > li > a {
        min-height: 44px;
        padding: 11px 16px 11px 46px !important;
    }
    body.fixed-layout .page-sidebar .side-menu .sidebar-item-icon {
        width: 28px !important;
    }

    .mobile-sidebar-backdrop {
        top: 56px !important;
        z-index: 1080 !important;
        background: rgba(12,18,28,.58) !important;
        backdrop-filter: blur(1px);
    }

    .header .navbar-toolbar .sidebar-toggler {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 56px;
        cursor: pointer;
        touch-action: manipulation;
    }
}

/* Login page */
.auth-shell {
    min-height: 100vh !important;
    margin-left: 0 !important;
    padding: 0 !important;
}
.auth-page-content {
    min-height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 32px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef5ff 0%, #f7f9fc 48%, #e8f5f5 100%);
}
.auth-card {
    width: 100%;
    max-width: 430px;
    padding: 34px 34px 28px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(32, 54, 80, .14);
    border: 1px solid rgba(30,60,90,.08);
}
.auth-brand { text-align:center; margin-bottom:26px; }
.auth-logo {
    width:58px; height:58px; margin:0 auto 12px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:700; color:#fff;
    background:linear-gradient(135deg,#20a8b8,#1769aa);
    box-shadow:0 10px 22px rgba(32,140,180,.22);
}
.auth-brand-name { font-size:22px; font-weight:700; color:#243447; }
.auth-brand-subtitle { margin-top:3px; color:#8a96a3; font-size:13px; }
.auth-heading { margin-bottom:22px; }
.auth-heading .login-title { margin:0 0 6px; font-size:25px; font-weight:700; color:#243447; }
.auth-heading p { margin:0; color:#8a96a3; font-size:13px; }
.auth-card label:not(.remember-option) { display:block; margin-bottom:7px; font-size:13px; font-weight:600; color:#536273; }
.auth-input-group { position:relative; }
.auth-input-group .form-control {
    height:48px; padding-left:44px; border-radius:10px; border:1px solid #dfe5ec;
    box-shadow:none; font-size:14px;
}
.auth-input-group .form-control:focus { border-color:#29a9bb; box-shadow:0 0 0 3px rgba(41,169,187,.10); }
.auth-input-icon { position:absolute; z-index:2; left:15px; top:0; height:48px; display:flex; align-items:center; color:#8e9baa; }
.auth-options { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 20px; font-size:12px; }
.remember-option { display:flex; align-items:center; gap:7px; margin:0; color:#697787; cursor:pointer; }
.remember-option input { margin:0; width:15px; height:15px; }
.auth-options a { color:#168aa0; white-space:nowrap; }
.auth-login-btn {
    height:48px; border:0; border-radius:10px; color:#fff; font-weight:600; font-size:15px;
    background:linear-gradient(135deg,#20a8b8,#1769aa); box-shadow:0 8px 18px rgba(32,140,180,.20);
}
.auth-login-btn:hover,.auth-login-btn:focus { color:#fff; opacity:.94; }
.auth-login-btn i { margin-right:6px; }
.auth-footer-text { text-align:center; margin-top:22px; color:#a0a9b4; font-size:11px; }

@media (max-width: 480px) {
    .auth-page-content { padding:18px 12px; align-items:flex-start; padding-top:24px; }
    .auth-card { max-width:100%; padding:27px 20px 22px; border-radius:15px; }
    .auth-brand { margin-bottom:22px; }
    .auth-logo { width:52px; height:52px; border-radius:14px; }
    .auth-brand-name { font-size:20px; }
    .auth-heading .login-title { font-size:22px; }
}
@media (max-width: 360px) {
    .auth-page-content { padding:12px 8px; }
    .auth-card { padding:23px 16px 19px; }
    .auth-options { align-items:flex-start; flex-direction:column; }
}

/* =====================================================================
 * Final sidebar reliability override
 * ---------------------------------------------------------------------
 * app.min.js adds .sidebar-mini below 992px. Its original theme rules
 * shrink the sidebar to 60px and hide labels, which can make the mobile
 * drawer look empty/invisible even though the drawer itself is open.
 * Keep the existing mobile drawer behavior, but neutralize those mini
 * sidebar rules while the drawer is being used on touch/tablet devices.
 * ===================================================================== */
@media (max-width: 991.98px) {
    body.sidebar-mini .page-sidebar,
    body.fixed-layout.sidebar-mini .page-sidebar {
        width: 285px !important;
        max-width: 86vw !important;
        margin-left: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.sidebar-mini .page-sidebar .side-menu > li > a > .nav-label,
    body.fixed-layout.sidebar-mini .page-sidebar .side-menu > li > a > .nav-label {
        display: block !important;
        visibility: visible !important;
    }

    body.sidebar-mini .page-sidebar .side-menu li .arrow,
    body.fixed-layout.sidebar-mini .page-sidebar .side-menu li .arrow {
        display: block !important;
    }

    body.sidebar-mini .page-sidebar .admin-block .admin-info,
    body.fixed-layout.sidebar-mini .page-sidebar .admin-block .admin-info {
        display: block !important;
    }

    body.sidebar-mini .page-sidebar .side-menu li .sidebar-item-icon,
    body.fixed-layout.sidebar-mini .page-sidebar .side-menu li .sidebar-item-icon {
        text-align: left !important;
    }

    /* Submenus must remain controlled by MetisMenu rather than the desktop
       mini-sidebar hover rules. */
    body.sidebar-mini .page-sidebar .side-menu li .nav-2-level,
    body.fixed-layout.sidebar-mini .page-sidebar .side-menu li .nav-2-level {
        position: static !important;
        left: auto !important;
        top: auto !important;
        min-width: 0 !important;
    }

    body.sidebar-mini .page-sidebar .side-menu > li:hover > a,
    body.fixed-layout.sidebar-mini .page-sidebar .side-menu > li:hover > a {
        width: auto !important;
        overflow: hidden !important;
    }
}
@media (max-width: 991.98px) {
    body.mobile-sidebar-mobile .page-sidebar {
        margin-left: 0 !important;
    }
}

/* =====================================================================
 * v10.1 FINAL MOBILE HEADER + SIDEBAR RELIABILITY FIX
 * ===================================================================== */
@media (max-width: 991.98px) {
    body.fixed-layout .header {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    body.fixed-layout .header .page-brand {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    body.fixed-layout .header > .flexbox.flex-1 {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        justify-content: space-between !important;
    }
    body.fixed-layout .header > .flexbox.flex-1 > .navbar-toolbar:first-child {
        display: flex !important;
        flex: 0 0 auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
    }
    body.fixed-layout .header > .flexbox.flex-1 > .navbar-toolbar:last-child {
        display: flex !important;
        flex: 0 0 auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto !important;
    }
    body.fixed-layout .header .sidebar-toggler,
    body.fixed-layout .header .sidebar-toggler i {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    body.fixed-layout .header .sidebar-toggler {
        width: 48px !important;
        min-width: 48px !important;
        height: 56px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        touch-action: manipulation;
        color: #6d7c85 !important;
    }
    body.fixed-layout .header .sidebar-toggler i {
        font-size: 20px !important;
        line-height: 1 !important;
    }
    .page-heading .btn-toolbar,
    .page-heading .btn-group,
    .page-heading .button-group,
    .page-content .btn-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-width: 100% !important;
    }
    .page-heading .btn-toolbar > *,
    .page-heading .btn-group > *,
    .page-heading .button-group > * {
        flex: 0 1 auto !important;
        max-width: 100% !important;
    }
}
@media (max-width: 480px) {
    body.fixed-layout .header .navbar-toolbar > li > a { padding: 0 !important; }
    body.fixed-layout .header .navbar-toolbar > li > a.sidebar-toggler { width: 46px !important; min-width: 46px !important; }
    body.fixed-layout .header .dropdown-user { padding-right: 2px !important; }
    body.fixed-layout .header .dropdown-user > a.dropdown-toggle { padding: 0 7px !important; }
    body.fixed-layout .header .dropdown-user > a.dropdown-toggle img { margin-right: 4px !important; }
}


/* =====================================================================
 * Mobile DataTables / wide-table fix
 * ---------------------------------------------------------------------
 * Wide ISP/customer tables must remain readable on phones. Never allow
 * table headers to wrap one character per line; keep the table at its
 * natural/minimum readable width and let the DataTables area scroll
 * horizontally instead of squeezing every column into the viewport.
 * ===================================================================== */
@media (max-width: 991.98px) {
    /* DataTables creates its own wrapper around every initialized table. */
    .dataTables_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .dataTables_wrapper > .row,
    .dataTables_wrapper .dataTables_scroll {
        min-width: 0;
    }

    .dataTables_wrapper .dataTables_scrollBody {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid #ddd;
    }

    /* Do not squeeze wide ISP/customer tables to viewport width. */
    .dataTables_wrapper table.dataTable,
    .dataTables_wrapper table.dataTable.no-footer {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }

    .dataTables_wrapper table.dataTable th,
    .dataTables_wrapper table.dataTable td {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        vertical-align: middle !important;
    }

    /* Keep normal text readable without forcing long values to split. */
    .dataTables_wrapper table.dataTable td {
        max-width: none;
    }

    /* The controls stay responsive while only the table itself scrolls. */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dt-buttons {
        max-width: 100%;
    }

    /* Any manually wrapped Bootstrap table gets the same treatment. */
    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive > table {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
    }

    .table-responsive > table th,
    .table-responsive > table td {
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
    }
}