/* ============================================================
   Overwatch OSINT — Mobile-Responsive Overrides
   Loaded on every page. Applies only at mobile breakpoints.
   ============================================================ */

/* ── Prevent horizontal overflow globally ─────────────────── */
body {
  overflow-x: hidden;
}

/* ── Touch targets: minimum 44×44px (Apple HIG) ──────────── */
button,
a,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   768px breakpoint — tablets and large phones (landscape)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { font-size: 14px; }

  /* ── Navigation ─────────────────────────────────────────── */
  .nav-links,
  .nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .nav-links a,
  .nav-menu a {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* ── Main content areas ─────────────────────────────────── */
  .main-content,
  .page-content,
  main {
    padding: 8px !important;
  }

  /* ── Case / card grids — single column ──────────────────── */
  .cases-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Tables — horizontal scroll ─────────────────────────── */
  table,
  .table-wrapper {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── D3 / graph canvas ──────────────────────────────────── */
  #graph-container,
  .graph-panel,
  svg.graph-svg {
    width: 100% !important;
    height: 300px !important;
  }

  /* ── Sidebar panels — collapse to full width ────────────── */
  .sidebar,
  .left-panel,
  .panel-left {
    width: 100% !important;
    position: static !important;
  }

  /* ── Split / flex row layouts — stack vertically ────────── */
  .flex-row,
  .split-view,
  .two-column {
    flex-direction: column !important;
  }

  /* ── Toolbar / button groups ────────────────────────────── */
  .btn-group,
  .toolbar {
    flex-wrap: wrap;
  }
  .toolbar button,
  .btn-group button {
    flex: 1 1 80px;
    min-width: 80px;
    padding: 8px 4px;
    font-size: 12px;
  }

  /* ── Modal dialogs — full screen ────────────────────────── */
  .modal,
  .modal-content {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* ── Node / info detail panels — slide-up sheet ─────────── */
  .node-detail-panel,
  .info-panel {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 50vh;
    overflow-y: auto;
    border-radius: 12px 12px 0 0;
    z-index: 1000;
  }

  /* ── Search / results grids ─────────────────────────────── */
  .search-results,
  .results-list {
    grid-template-columns: 1fr !important;
  }

  /* ── Notification bell — larger tap target ───────────────── */
  #notification-bell {
    padding: 12px !important;
  }

  /* ── Tier / status badges ───────────────────────────────── */
  .tier-badge,
  .badge {
    display: inline-block;
    padding: 2px 6px;
  }

  /* ── Omnibar ─────────────────────────────────────────────── */
  #omnibar-input {
    width: 90vw !important;
  }

  /* ── Long values — truncate gracefully ───────────────────── */
  .node-value,
  .finding-value {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Case creation CTA — always visible ─────────────────── */
  .btn-new-case,
  [data-action="new-case"] {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 900;
    border-radius: 50%;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px;
    padding: 0;
    font-size: 24px;
    line-height: 56px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
  }
}

/* ═══════════════════════════════════════════════════════════
   480px breakpoint — small phones (portrait)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  body { font-size: 13px; }

  h1 { font-size: 18px; }
  h2 { font-size: 16px; }
  h3 { font-size: 14px; }

  .page-title { font-size: 16px; }

  /* Hide optional table columns on very small screens */
  .col-optional,
  th.col-optional,
  td.col-optional {
    display: none !important;
  }

  /* Dossier panel — stack photo above facts */
  .dossier-panel {
    flex-direction: column !important;
    align-items: center;
  }
  .dossier-photo {
    width: 80px !important;
    height: 80px !important;
  }

  /* Executive dashboard stat cards — single column */
  .stats-grid,
  .metric-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Reduce chart heights further */
  #graph-container,
  .graph-panel,
  svg.graph-svg {
    height: 220px !important;
  }
}

/* ── Last-online timestamp stored by SW offline page ─────── */
/* (script in each page stores it; offline.html reads it) */