/*
 * mobile-fixes.css — global responsive polish for IspBills admin pages
 *
 * Goals: keep the existing premium / AdminLTE layout intact on desktop,
 * but rescue the long list of small-screen breakages users have reported
 * (router action buttons, customer detail status badges, dark "blank"
 * surfaces, premium cards overflowing, datatables horizontal scroll, etc).
 */

@media (max-width: 768px) {
    /* AdminLTE / premium card padding tightening */
    .content-wrapper > .content,
    .content-wrapper .premium-card,
    .content-wrapper .card { padding-left: .6rem !important; padding-right: .6rem !important; }
    .content-wrapper .premium-card-body,
    .content-wrapper .card-body { padding: .85rem !important; }
    .content-wrapper .premium-card-header,
    .content-wrapper .card-header { padding: .7rem .85rem !important; }
    .content-wrapper h1, .content-wrapper h2 { font-size: 1.15rem !important; }
    .content-wrapper h3 { font-size: 1.05rem !important; }

    /* Horizontal-scroll wrappers for data tables */
    .table-responsive, .premium-table-responsive { -webkit-overflow-scrolling: touch; }
    table.dataTable, table.premium-table, table.table { font-size: .82rem; }
    table.dataTable td, table.dataTable th,
    table.premium-table td, table.premium-table th { padding: .45rem .55rem !important; white-space: nowrap; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { float: none !important; text-align: left !important; margin-bottom: .5rem; }
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; max-width: 240px; }

    /* Action-button groups (routers / customers / olts list pages) */
    .btn-group, .btn-group-sm, .premium-btn-group {
        flex-wrap: wrap; gap: 4px;
    }
    .btn-group .btn, .btn-group-sm .btn { padding: .25rem .5rem; font-size: .78rem; }
    .action-buttons, .table-actions { display: flex; flex-wrap: wrap; gap: 4px; }
    .action-buttons .btn, .table-actions .btn { padding: .25rem .5rem; font-size: .78rem; }

    /* Forms: make 2-col layouts stack and inputs bigger for touch */
    .premium-form-group, .form-group { margin-bottom: .85rem; }
    .premium-input, .form-control { font-size: .9rem; }
    .row.no-gutters > [class*="col-"], .row > [class*="col-"] { margin-bottom: .25rem; }

    /* Dashboard / cards grid */
    .sgw-grid, .gis-kpi-grid, .topo-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }

    /* AdminLTE sidebar pushdown adjustments */
    .main-header.navbar { padding: 0 .35rem; }
    .navbar-nav .nav-item .nav-link { padding: .45rem .55rem; }

    /* Status / online badges (customer detail "blace" / black surface bug) */
    .status-badge, .badge-online, .badge-offline,
    .premium-badge, .badge { font-size: .72rem !important; padding: .25em .5em; }

    /* Fix the "black panel" some pages render: usually a panel-default missing bg */
    .panel, .info-box, .small-box { background: #fff !important; color: var(--premium-text-main, #1e293b) !important; }
    .info-box .info-box-text, .small-box .inner h3 { color: #fff !important; }

    /* Customer details page online/last-seen widget alignment */
    .customer-status-strip { display: flex; flex-direction: column; gap: .45rem; align-items: stretch; }
    .customer-status-strip > * { width: 100%; }

    /* Modal full-screen on phones */
    .modal-dialog { margin: .35rem; max-width: calc(100% - .7rem); }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100% - .7rem); }
    .modal-body { padding: .9rem; }

    /* Tabs: allow wrap */
    .nav-tabs { flex-wrap: wrap; }
    .nav-tabs .nav-link { padding: .45rem .65rem; font-size: .82rem; }

    /* Tools that pop into the top-right (terminal, copilot bubbles) shouldn't overflow */
    .floating-toolbar, .copilot-fab, .terminal-toolbar { right: 8px !important; bottom: 76px !important; }

    /* Block buttons should fill width on touch */
    .btn-block-sm { display: block; width: 100%; }
}

/* Very small screens (<480px): hide non-essential columns marked .hide-xs */
@media (max-width: 480px) {
    .hide-xs, .d-none-xs { display: none !important; }
    .text-truncate-xs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; display: inline-block; vertical-align: middle; }
}

/* Touch-friendly tap targets globally (no harm on desktop) */
.btn, .premium-btn, .form-control, .premium-input { min-height: 36px; }

/* ---------------------------------------------------------------------------
 * Group-admin mobile polish (audit 2026-06)
 *
 * Many group_admin pages render wide tables directly inside .card-body /
 * .imp-table-card without a .table-responsive wrapper, causing horizontal
 * overflow on phones. Add overflow-x to common table containers so any
 * existing layout becomes mobile-friendly without touching 300+ blade files.
 * Also fix the sidebar so it can slide off-screen on phones (AdminLTE's
 * default), and trim a few dense headers.
 * ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Force horizontal scroll for any table that has not been wrapped */
    .content-wrapper .card-body > .table,
    .content-wrapper .card-body > table,
    .content-wrapper .imp-table-card,
    .content-wrapper .premium-card-body > .table,
    .content-wrapper .premium-card-body > table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Allow AdminLTE's default mobile push-menu behavior: the sidebar
     * should be translated off-canvas until the user opens it. The
     * group_admin sidebar pins width:250px !important at all sizes,
     * which is fine as long as we let AdminLTE's transform animate it. */
    body.sidebar-mini:not(.sidebar-open) .main-sidebar { transform: translateX(-250px); }
    body.sidebar-mini.sidebar-open .main-sidebar { transform: translateX(0); box-shadow: 0 0 20px rgba(0,0,0,.18); }
    body.sidebar-mini .content-wrapper,
    body.sidebar-mini .main-header,
    body.sidebar-mini .main-footer { margin-left: 0 !important; }

    /* Backdrop while the sidebar is open on mobile */
    body.sidebar-mini.sidebar-open::after {
        content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35);
        z-index: 1037; /* below sidebar (1038) */
    }
}

@media (max-width: 768px) {
    /* Trim dense uppercase headers that some list pages still use */
    .imp-page-title, .premium-page-title { font-size: 1.05rem !important; }
    .imp-page-subtitle, .premium-page-subtitle { font-size: .8rem !important; }
    .imp-table-card th, .premium-table th { font-size: .7rem !important; letter-spacing: .02em; }

    /* Long action labels in list tables → icon-only on phones */
    .imp-details-link .imp-details-text,
    .table-actions .btn-text { display: none; }
}