/* ═══════════════════════════════════════════════════════════════
   Network Monitor v5.0 — Responsive CSS
   Media queries for tablet, mobile, and small screen layouts
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet / Small Desktop (max-width: 1200px) ── */
@media (max-width: 1200px) {
    /* Stat grid: 3 columns */
    .S {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Content grid: single column */
    .G {
        grid-template-columns: 1fr;
    }

    /* Sidebar: auto-collapse, no hover expand on narrow screens */
    .sidebar {
        width: var(--sidebar-collapsed);
    }

    .sidebar .logo-text,
    .sidebar .nav-label,
    .sidebar .sidebar-section-title,
    .sidebar .nav-badge:not(.dot) {
        opacity: 0;
        pointer-events: none;
    }

    .sidebar:hover {
        width: var(--sidebar-width);
    }

    .sidebar:hover .logo-text,
    .sidebar:hover .nav-label,
    .sidebar:hover .sidebar-section-title,
    .sidebar:hover .nav-badge:not(.dot) {
        opacity: 1;
        pointer-events: auto;
    }

    /* Header adjusts to collapsed sidebar */
    .H {
        left: var(--sidebar-collapsed);
    }

    .main-content {
        margin-left: var(--sidebar-collapsed);
    }

    /* Modals align with collapsed sidebar on tablet */
    .mb {
        left: var(--sidebar-collapsed);
    }

    /* Reduce grid columns */
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Stats grid adjusts */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Mobile Landscape / Small Tablet (max-width: 768px) ── */
@media (max-width: 768px) {
    /* Stat grid: 2 columns */
    .S {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Page padding reduced */
    .P {
        padding: 8px;
    }

    /* Sidebar becomes overlay */
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
        box-shadow: 4px 0 20px rgba(0, 0, 0, .3);
        z-index: 300;
    }

    .sidebar.expanded {
        transform: translateX(0);
    }

    .sidebar.expanded .logo-text,
    .sidebar.expanded .nav-label,
    .sidebar.expanded .sidebar-section-title,
    .sidebar.expanded .nav-badge:not(.dot) {
        opacity: 1;
    }

    .sidebar:hover {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .sidebar:hover .logo-text,
    .sidebar:hover .nav-label,
    .sidebar:hover .sidebar-section-title {
        opacity: 0;
    }

    .sidebar.expanded:hover {
        transform: translateX(0);
    }

    .sidebar.expanded:hover .logo-text,
    .sidebar.expanded:hover .nav-label,
    .sidebar.expanded:hover .sidebar-section-title {
        opacity: 1;
    }

    /* Header goes full width */
    .H {
        left: 0;
    }

    /* Main content full width */
    .main-content {
        margin-left: 0;
    }

    /* Modals go full width on mobile (sidebar is off-screen) */
    .mb {
        left: 0;
    }

    /* Content grids stack */
    .G {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Stats grid adjusts */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Filter bar wraps better */
    .fb {
        flex-wrap: wrap;
        gap: 4px;
    }

    .fb input {
        min-width: 100px;
    }

    /* Tabs scroll horizontally */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modal: narrower, scrollable on mobile */
    .md {
        width: 95%;
        padding: 18px;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Toast narrower */
    .toast-container {
        left: 10px;
        right: 10px;
    }

    .toast {
        min-width: auto;
        max-width: 100%;
    }

    /* Kill chain scrolls */
    .kill-chain {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* Table scroll */
    .ts {
        max-height: 400px;
    }
}

/* ── Mobile Portrait (max-width: 480px) ── */
@media (max-width: 480px) {
    /* Stat grid: single column */
    .S {
        grid-template-columns: 1fr;
    }

    /* Header wraps */
    .H {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--header-height);
        padding: 6px 10px;
        gap: 6px;
    }

    /* Hide search on small screens */
    .header-search {
        display: none;
    }

    /* Header right section wraps */
    .Hr {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Header badges smaller */
    .Hb {
        font-size: 8px;
        padding: 2px 6px;
    }

    /* All grids single column */
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-6 {
        grid-template-columns: 1fr;
    }

    /* Stats grid single column */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Smaller page padding */
    .P {
        padding: 6px;
    }

    /* Stat cards compact */
    .sc {
        padding: 10px 12px;
    }

    .sc .v {
        font-size: 16px;
    }

    /* Charts shorter */
    .ch {
        height: 150px;
    }

    .cht {
        height: 100px;
    }

    /* Alert list compact */
    .al {
        padding: 6px 8px;
        max-height: 260px;
    }

    .ald {
        padding: 6px 8px;
    }

    /* World map shorter */
    .world-map {
        height: 120px;
    }

    /* Flow diagram wraps */
    .flow-diagram {
        flex-wrap: wrap;
        gap: 8px;
    }

    .flow-line {
        width: 20px;
    }

    /* Login box tighter */
    .login-box {
        padding: 20px;
    }

    .login-box h1 {
        font-size: 16px;
    }

    /* MITRE heatmap smaller cells */
    .mitre-heatmap {
        grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
        gap: 2px;
    }

    /* User menu hides name on tiny screens */
    .user-menu .info .name {
        display: none;
    }

    /* Table font smaller */
    tbody td {
        font-size: 9px;
        padding: 5px 6px;
    }

    thead th {
        font-size: 8px;
        padding: 6px;
    }

    /* Notification panel full width on mobile */
    .notification-panel {
        width: 100%;
    }

    /* Export/help buttons hidden on tiny screens */
    .Hr > .btn:not(#btnScan) {
        display: none;
    }

    /* Theme toggle compact */
    .theme-toggle { gap: 2px; padding: 2px; }
    .theme-toggle button { width: 20px; height: 20px; font-size: 10px; }

    /* Incident/health modal grids stack */
    .md [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── Print Styles ── */
@media print {
    .sidebar, .H, .AB, .tabs, .toast-container,
    .notification-panel, .mb, .btn, .notif-bell { display: none !important; }
    .main-content { margin: 0 !important; }
    .P { padding: 0 !important; max-width: 100% !important; }
    body { background: #fff !important; color: #000 !important; }
    .sc { border: 1px solid #ddd !important; background: #f8f8f8 !important; }
}