/* ==========================================================================
   ADMIN MOBILE OVERRIDES
   Applied below Bootstrap lg breakpoint (<992px).
   Load order: after all individual admin-*.css files so these win.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* hide fixed sidenav; navigation moves to the mobile hamburger menu */
    .admin-sidenav {
        display: none;
    }

    /* strip desktop left-offset on all known admin page wrappers */
    .system-wrapper,
    .devices-wrapper,
    .applications-wrapper,
    .vpn-wrapper,
    .backup-wrapper,
    .logs-wrapper {
        margin-left: 0;
        margin-top: var(--topnav-height);
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    /* prevent any admin page from causing horizontal scroll */
    .admin-layout,
    .admin-layout-body {
        overflow-x: hidden;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* admin page wrappers need visible overflow for scrollable tables inside */
    .system-wrapper,
    .devices-wrapper,
    .applications-wrapper,
    .vpn-wrapper,
    .backup-wrapper,
    .logs-wrapper {
        overflow-x: auto;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .admin-layout-body {
        padding: 0;
        min-width: 0;
        width: 100%;
    }

    /* collapse 4-column grids to 2 columns on narrow viewports */
    .system-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .devices-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vpn-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .simple-vpn-grid {
        grid-template-columns: 1fr;
    }

    .app-toolbar {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .search-group {
        width: 100%;
    }

    .app-search {
        width: 100%;
        max-width: 100%;
    }

    .logs-quick-filters {
        flex-wrap: wrap;
    }

    .system-status-hint {
        min-width: 0;
    }

    /* table wrappers: enable horizontal scroll */
    .system-table-wrapper,
    .app-table-wrapper,
    .vpn-table-wrapper,
    .backup-table-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
    }

    /* switch tables to auto layout so inline colgroup widths don't crush them */
    .system-table,
    .device-system-table,
    .service-system-table,
    .security-system-table {
        table-layout: auto !important;
    }

    /* reset inline col widths — CSS can't directly override style attrs,
       but auto layout ignores them when content is wider */
    .system-table colgroup {
        display: none;
    }

    /* give tables a minimum width so they scroll instead of being crushed */
    .system-table-wrapper table,
    .app-table-wrapper table,
    .vpn-table-wrapper table,
    .backup-table-wrapper table {
        min-width: 700px;
        width: max-content;
    }

    /* reduce header/title sizes */
    .system-header h1 {
        font-size: 1.6rem;
    }

    .system-sub {
        font-size: 0.92rem;
    }

    .system-section-header {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }

    .system-section-title {
        font-size: 1.05rem;
    }

    /* smaller table cells on mobile */
    .system-table th,
    .system-table td {
        padding: 10px 8px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    /* action buttons wrap rather than disappear off-screen */
    .table-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 599px) {

    /* switch to auto layout so hidden cols don't leave dead space */
    .system-table,
    .device-system-table,
    .service-system-table,
    .security-system-table {
        table-layout: auto !important;
    }

    /* hide non-essential table columns on very small screens */
    /* 
    .device-system-table th:nth-child(3),
    .device-system-table td:nth-child(3),
    .device-system-table th:nth-child(4),
    .device-system-table td:nth-child(4),
    .device-system-table th:nth-child(5),
    .device-system-table td:nth-child(5) {
        display: none;
    }

    .service-system-table th:nth-child(2),
    .service-system-table td:nth-child(2),
    .service-system-table th:nth-child(4),
    .service-system-table td:nth-child(4) {
        display: none;
    }

    .security-system-table th:nth-child(3),
    .security-system-table td:nth-child(3) {
        display: none;
    } 
    */

    .system-table-wrapper table,
    .app-table-wrapper table,
    .vpn-table-wrapper table,
    .backup-table-wrapper table {
        min-width: 600px; 
        width: 100%;
    }
}

@media (max-width: 479px) {

    .system-overview-grid,
    .devices-grid,
    .vpn-overview-grid {
        grid-template-columns: 1fr;
    }
}