/* ════════════════════════════════════════════════════════════
   SentinelIQ — Responsive / Mobile Layer
   Carga DESPUÉS de tokens/chrome/custom/socify para ganar en
   especificidad. Reglas globales que adaptan TODOS los módulos
   sin tocar cada template.

   Breakpoints:
     ≤1024px  → tablet / móvil ancho
     ≤768px   → móvil estándar (target principal)
     ≤480px   → móvil pequeño
   ════════════════════════════════════════════════════════════ */

/* ── 0. Globales ─────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* Evita scroll horizontal accidental en cualquier vista */
.soc .page-content,
.page-content { overflow-x: hidden; }

/* Permite que cualquier grid hijo (incluso con grid inline) encoja */
.soc .page-content > * { min-width: 0; }
.soc .page-content [style*="grid"] { min-width: 0; }

/* ── 1. Tablas: scroll horizontal automático ─────────────── */
.table-responsive,
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* En móvil envolvemos todas las tablas para que no rompan el layout */
@media (max-width: 1024px) {
  .page-content table { display: table; min-width: 100%; }
  .page-content table:not(.no-responsive) {
    /* Permite scrollear horizontalmente la tabla si excede el viewport */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .page-content table:not(.no-responsive) thead,
  .page-content table:not(.no-responsive) tbody,
  .page-content table:not(.no-responsive) tr { display: table; width: 100%; table-layout: fixed; }
  .page-content table:not(.no-responsive) thead { display: table-header-group; }
  .page-content table:not(.no-responsive) tbody { display: table-row-group; }
  .page-content table:not(.no-responsive) tr { display: table-row; }
}

/* ── 2. Tablet (≤1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
  /* Grid utilities → 2 columnas */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stats grids con N columnas fijas → auto-fit */
  .stats-grid[style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }

  /* Topbar: ocultar la barra de búsqueda si quita espacio */
  .soc .topbar .tb-search { max-width: 280px; }
}

/* ── 3. Móvil estándar (≤768px) ──────────────────────────── */
@media (max-width: 768px) {

  /* 3.1 Padding general más compacto */
  .soc .page-content,
  .page-content { padding: 14px 12px !important; }
  .soc .page-title { padding: 12px 12px 0 !important; }

  /* 3.2 Headings escalan */
  h1 { font-size: 22px !important; line-height: 1.2; }
  h2 { font-size: 18px !important; line-height: 1.25; }
  h3 { font-size: 15px !important; }

  /* 3.3 Cards: padding más compacto */
  .card { padding: 14px !important; }

  /* 3.4 Grids inline a 1 columna en móvil — regla amplia.
         Cubrimos grid-template-columns inline en cualquier
         elemento dentro de .page-content. Las pocas excepciones
         que sí quieren conservar varias columnas usan classes
         (.swelc-flow-grid, .lg-features) o ya tienen su propio
         media query. */
  .page-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Grids auto-fit/auto-fill con minmax: bajar el min para que entren
     a una/dos columnas. Sobrescribe la regla anterior. */
  .page-content [style*="auto-fit,minmax"],
  .page-content [style*="auto-fit, minmax"],
  .page-content [style*="auto-fill,minmax"],
  .page-content [style*="auto-fill, minmax"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }

  /* Grid utilities → 1 columna */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .stats-grid[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-card { padding: 12px !important; gap: 10px !important; }
  .stat-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; }
  .stat-value { font-size: 20px !important; }
  .stat-label { font-size: 11px !important; }

  /* 3.5 Buttons: que sean tappables (44px target). En toolbars
         apretadas, mantenemos los chips pequeños pero el .btn principal
         se hace cómodo. */
  .btn { min-height: 38px; padding: 8px 14px; font-size: 13px; }

  /* Filas de botones / toolbars: que envuelvan */
  .soc .tb-actions { flex-wrap: wrap; }

  /* 3.6 Topbar: oculta breadcrumbs/búsqueda/env, deja menu+título+user */
  .soc .topbar { padding: 6px 10px !important; min-height: 48px; gap: 6px !important; }
  .soc .topbar .tb-crumbs { display: none !important; }
  .soc .topbar .tb-search { display: none !important; }
  .soc .topbar .tb-env    { display: none !important; }
  .soc .topbar .tb-user .col { display: none !important; }
  .soc .topbar .tb-actions { gap: 0 !important; margin-left: auto !important; }
  .soc .topbar .tb-iconbtn { width: 36px; height: 36px; }

  /* 3.7 Modales: full-screen en móvil */
  .modal-overlay { padding: 0 !important; align-items: stretch !important; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh;
    border-radius: 0 !important;
    padding: 16px !important;
    overflow-y: auto;
  }
  .modal h3 { font-size: 16px !important; margin-bottom: 14px !important; }

  /* Drawer SOC reusable: full-width también */
  .soc .soc-drawer { width: 100vw !important; }

  /* 3.8 Tabs scroll horizontal */
  .tabs, .soc .drw-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab { padding: 8px 12px !important; font-size: 12px !important; }

  /* 3.9 Forms: inputs a ancho completo, evita zoom iOS (font ≥ 16px) */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  select,
  textarea { font-size: 16px !important; }

  /* 3.10 Tarjetas/grids con auto-fill por defecto: bajamos a 1col limpio */
  .agent-card, .device-detail-panel { padding: 14px !important; }

  /* 3.11 Charts (canvas Chart.js): que respeten el ancho */
  canvas { max-width: 100% !important; height: auto !important; }

  /* 3.12 Network map: altura razonable en móvil */
  #networkMap, #cyContainer, [id*="cyContainer"] {
    height: 60vh !important;
    min-height: 360px;
  }

  /* 3.13 Tabla "dense" SOC: comprimir un poco */
  .soc table.dense th, .soc table.dense td { padding-left: 8px; padding-right: 8px; }
  .soc table.dense { font-size: 11px; }

  /* 3.14 Login centrado: padding menor */
  .auth { padding: 16px !important; }
  .auth__card { padding: 22px !important; }

  /* 3.15 Toast no tape contenido */
  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none !important; }

  /* 3.16 Definiciones key/value compactas */
  .soc .drw-kv { grid-template-columns: 1fr !important; row-gap: 4px; }
  .soc .drw-kv .k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

  /* 3.17 Tablas internas: scroll horizontal en cualquier contenedor */
  .soc .table-wrap,
  .table-responsive { max-width: 100%; overflow-x: auto; }

  /* 3.18 Botón sidebar móvil siempre visible y cómodo */
  #menuBtn { width: 38px !important; height: 38px !important; display: flex !important; }
  #navCollapseBtn { display: none !important; }

  /* 3.19 Footer del sidebar: no apretar el avatar */
  .soc .sb-footer { padding: 12px 10px !important; }

  /* 3.20 Page-title: deja que envuelva */
  .soc .page-title { flex-wrap: wrap; gap: 8px !important; }
  .soc .page-title h1 { font-size: 20px !important; }

  /* 3.21 Code blocks: scroll horizontal */
  .code-block, pre { overflow-x: auto; font-size: 11px !important; }

  /* 3.22 Imágenes: no desbordar */
  img, svg { max-width: 100%; height: auto; }
}

/* ── 4. Móvil pequeño (≤480px) ───────────────────────────── */
@media (max-width: 480px) {
  .stats-grid,
  .stats-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .soc .page-content,
  .page-content { padding: 10px 8px !important; }

  .card { padding: 12px !important; border-radius: 12px !important; }

  .btn { width: 100%; justify-content: center; }
  .btn.btn-inline,
  .topbar .btn,
  .tabs .btn,
  .sv-toolbar .btn,
  .modal .btn,
  .form-group .btn { width: auto; }

  h1 { font-size: 19px !important; }
  h2 { font-size: 16px !important; }

  .stat-value { font-size: 18px !important; }

  /* Avatar/user en topbar: solo el avatar */
  .soc .topbar .tb-user { padding: 2px !important; }
}

/* ── 5. Orientación landscape en phones bajos: que el sidebar
       drawer no llene toda la pantalla ─────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .soc .sidebar { width: 80vw !important; max-width: 320px; }
}

/* ── 6. Tap targets: enlaces y botones del menú lateral cómodos ── */
@media (hover: none) and (pointer: coarse) {
  .soc .navitem { padding: 10px 12px; }
  .soc .nav-item { padding: 12px 14px; }
  .tab { min-height: 38px; display: inline-flex; align-items: center; }
  .badge, .nav-badge { min-height: 18px; }
}

/* ── 6.5 Overrides específicos por módulo ─────────────── */
@media (max-width: 768px) {
  /* AI Studio · editor visual de flujos (aipfe) */
  .aipfe-layout {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    height: auto !important;
    overflow-y: auto;
  }
  .aipfe-modal { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; }
  .aipfe-palette, .aipfe-inspector { max-height: 35vh; overflow-y: auto; }

  /* Dashboard builder · grid 12 columnas → 2 columnas usables */
  .wall-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
  }
  .wall-card { grid-column: span 2 !important; }

  /* Mapa de red: ya tiene sus media queries; reforzamos el wrapper */
  .cy-wrapper { height: 60vh !important; min-height: 380px; }
  #minimap { width: 130px !important; height: 90px !important; }

  /* Welcome / hero del index (swelc) */
  .swelc-title { font-size: 22px !important; }

  /* Cairn / settings tablas: hereda overflow-x */

  /* Tabla densa SOC: tras conversión a block scroll, mantén alineación */
  .soc table.dense { white-space: nowrap; }

  /* AI Studio · run-row (24px 1fr auto auto auto) → stack */
  .run-row { grid-template-columns: 1fr !important; row-gap: 4px; }

  /* Vulnerabilities · vuln-modal-body ya tiene su media query, pero
     vuln-probe-row puede romper */
  .vuln-probe-row { grid-template-columns: 1fr !important; gap: 6px !important; }
}

/* ── 7. Print: oculta sidebar/topbar ─────────────────────── */
@media print {
  .soc .sidebar, .soc .topbar { display: none !important; }
  .soc .main-content { margin-left: 0 !important; }
  .soc .page-content { padding: 0 !important; }
}