/* ============================================================
   responsive.css — Mobile drawer, breakpoints, touch targets
   Loaded LAST so it can override layout/components when needed.
   ============================================================ */

/* ── Hamburger button (hidden on desktop) ──────────────────── */
.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  background: rgba(0, 0, 0, 0.25);
  position: relative;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hamburger:hover {
  background: var(--cyan-dim);
  border-color: var(--border-cyan);
}

.hamburger span {
  position: absolute;
  left: 9px;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-fast), top var(--transition-base);
}

.hamburger span:nth-child(1) { top: 11px; }
.hamburger span:nth-child(2) { top: 17px; }
.hamburger span:nth-child(3) { top: 23px; }

/* Animated X state when sidebar is open */
.sidebar-open .hamburger span:nth-child(1) { top: 17px; transform: rotate(45deg); background: var(--cyan); }
.sidebar-open .hamburger span:nth-child(2) { opacity: 0; }
.sidebar-open .hamburger span:nth-child(3) { top: 17px; transform: rotate(-45deg); background: var(--cyan); }

/* ── Backdrop overlay (hidden on desktop) ──────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 13, 0.65);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 95;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.sidebar-open .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ── Tablet & laptop: < 1200px ──────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --sidebar-width: 184px;
    --content-gap: 12px;
    --card-padding: 12px 14px;
  }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ── Mid laptop: < 1050px — grid-2 collapses ─────────────────
   This is the critical breakpoint. With sidebar (184px) + grid-2
   (2 cards) + gaps, sub-1050px viewports squeezed each card to
   ~360px, which then forced 3-column meta-tables to overflow. */
@media (max-width: 1050px) {
  .grid-2          { grid-template-columns: 1fr; }
  .col-2-1         { grid-template-columns: 1fr; }
  .col-score-threat{ grid-template-columns: 1fr; }
}

/* ── Tablet portrait: < 900px — field-grid stacks ───────────── */
@media (max-width: 900px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* ── Mobile drawer mode: < 820px ────────────────────────────── */
@media (max-width: 820px) {
  .hamburger { display: block; }
  .sidebar-backdrop { display: block; }

  /* Topbar reorganization */
  .topbar {
    padding: 0 var(--space-3);
    gap: var(--space-3);
  }
  .topbar-status-text,
  .topbar-divider,
  .tbar-version { display: none; }
  .topbar-logo { font-size: var(--text-md); letter-spacing: 0.12em; }
  .topbar-clock {
    font-size: var(--text-xs);
    margin-left: auto;
  }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 84vw;
    z-index: 96;
    transform: translateX(-100%);
    transition: transform 280ms var(--ease-out);
    box-shadow: 16px 0 40px -16px rgba(0, 0, 0, 0.7);
    /* Stronger glass — drawer needs to read as overlay */
    background: linear-gradient(180deg, rgba(14, 20, 34, 0.96), rgba(8, 12, 20, 0.96));
  }

  .sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Larger touch targets on drawer items */
  .nav-item {
    padding: 12px var(--space-5);
    font-size: var(--text-base);
    min-height: 44px;
  }

  .nav-icon { width: 16px; height: 16px; }

  /* Main content takes full width */
  .main-content {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  /* Locked body scroll when drawer is open */
  body.sidebar-open { overflow: hidden; }

  /* Cards a bit tighter on phone */
  :root {
    --card-padding: 14px 14px;
    --cell-padding: 10px 12px;
  }

  .card-header { padding: var(--space-3) var(--space-4); }
  .card-title { font-size: 10px; letter-spacing: 0.14em; }
  .card-tag   { font-size: 9px; padding: 2px 7px; }

  /* Gauges shrink */
  .gauge-svg { width: 132px; height: 132px; }
  .grade-circle { width: 48px; height: 48px; font-size: 24px; }
}

/* ── Small phones: < 480px ──────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --text-base: 12.5px;
    --text-sm:   11px;
    --topbar-height: 48px;
  }

  .topbar { padding: 0 var(--space-2); gap: var(--space-2); }
  .topbar-logo { font-size: var(--text-base); }
  .topbar-clock { font-size: 10px; }

  .live-dot::after { display: none; }

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

  .main-content { padding: var(--space-2); gap: var(--space-2); }

  .card-body    { padding: 12px 14px; }
  .card-body-sm { padding: 10px 14px; }

  .gauge-svg { width: 116px; height: 116px; }

  /* Section labels go lighter to reclaim space */
  .section-label { letter-spacing: 0.12em; }

  /* Field columns full width, smaller text */
  .field-key { font-size: 9px; letter-spacing: 0.12em; margin-bottom: 4px; }
  .field-val { font-size: var(--text-sm); }
  .field-val.large { font-size: 18px; }

  /* Threat rows wrap value below */
  .threat-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .t-val { padding-left: 16px; text-align: left; margin-left: 0; }
}

/* ── Mobile table tuning ────────────────────────────────────
   The base meta-table CSS in components.css already does the heavy
   lifting (forces last-column to shrink, wraps everything else with
   overflow-wrap: anywhere). On mobile we just tighten font sizes and
   padding so more content fits per row before wrapping.

   We intentionally DO NOT force `white-space: nowrap` here — that's
   the bug that caused tables to overflow into a horizontal scroll
   instead of wrapping to multiple lines. */
@media (max-width: 820px) {
  .meta-table          { font-size: var(--text-xs); }
  .meta-table th,
  .meta-table td       { padding: 7px 8px; }
  .meta-table th:first-child,
  .meta-table td:first-child { padding-left: 10px; }
  .meta-table th:last-child,
  .meta-table td:last-child  { padding-right: 10px; }

  /* DNS probe rows wrap on phone */
  .dns-probe-row  { flex-wrap: wrap; }
  .dns-probe-name { min-width: 80px; }
  .dns-probe-desc { width: 100%; margin-left: 0; }
}

/* ── Accessibility: ensure focus visible on mobile ──────────── */
@media (hover: none) and (pointer: coarse) {
  .nav-item:active { background: var(--cyan-glow); }
  .card:hover     { transform: none; }   /* no lift on touch */
  .card:hover::after { opacity: 0; }
}

/* ── Print: clean black-on-white if anyone prints a report ─── */
@media print {
  body::before, body::after { display: none; }
  .topbar, .sidebar, .sidebar-backdrop, .hamburger, .rerun-btn,
  .progress-bar-wrap { display: none !important; }
  body { background: white !important; color: black !important; }
  .card {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .card-title, .field-key, .section-label { color: #333 !important; }
  .field-val, .t-name { color: black !important; }
  .field { background: #f8f9fb !important; border: 1px solid #ddd !important; }
}