/* ============================================================
   Awall surface stylesheet: responsive.css
   Split from styles.css (F1, issue #186) — NO rule changes.
   Owns: existing responsive @media layer (F5 extends this)
   Concatenating every surfaces/*.css in base.html <link> order
   reproduces the original styles.css byte-for-byte.
   ============================================================ */
@media (max-width: 1100px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   Mobile top bar + drawer (≤ 768px)
   The sidebar becomes a slide-in drawer on small screens; the
   top bar is the only nav affordance until it's opened.
   --------------------------------------------------------- */
.mobile-topbar,
.mobile-overlay { display: none; }

.mobile-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 90;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}

.mobile-menu-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text-heading);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}

.mobile-menu-toggle:hover {
  background: var(--color-surface);
}

.mobile-menu-toggle:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-focus-ring);
}

.mobile-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-heading);
  text-decoration: none;
  min-width: 0;
}

.mobile-topbar-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.mobile-topbar-name {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--color-overlay-panel);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}

.mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .mobile-topbar { display: flex; }

  /* Center the floating theme toggle within the 56px top bar (default
     top:16px on a 40px button leaves it ~8px low against the bar). #208 */
  .theme-toggle {
    top: 8px;
  }

  /* The top bar carries the compact org switcher on mobile, so the body's
     admin strip would show a second, duplicate switcher. Hide it (#208).
     The salesperson demo strip has no top-bar twin, so it stays. */
  .admin-topstrip:not(.admin-topstrip--salesperson) {
    display: none;
  }

  /* Sidebar becomes a drawer that slides in from the left. */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 280ms var(--ease-out);
    z-index: 100;
    box-shadow: 0 0 0 transparent;
  }

  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  }

  .mobile-overlay { display: block; }

  /* Lock body scroll while drawer is open. */
  body.is-drawer-open {
    overflow: hidden;
  }

  .main-content {
    margin-left: 0;
    padding-top: 56px;
  }

  .content-wrapper {
    padding: var(--space-4);
  }

  .detail-panel {
    width: 100%;
    max-width: 100%;
  }

  .guardrail-cards {
    grid-template-columns: 1fr;
  }

  .guardrail-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .guardrails-header-row .page-controls {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .guardrail-stats {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* Reduced motion: drawer just appears, no slide. */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .mobile-overlay {
    transition: none;
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: var(--space-8) var(--space-6);
  }

  .metrics-grid {
    gap: var(--space-4);
  }
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  margin-top: 8px;
}
.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.pagination-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.pagination-current {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-body);
  padding: 6px 12px;
}
@media (max-width: 600px) {
  .pagination { flex-direction: column; gap: 12px; }
}

/* ── Search bar (logs page) ───────────────────────────────────── */
.search-bar {
  margin-bottom: 16px;
}
.search-bar-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search-input-group {
  flex: 1;
  min-width: 200px;
}
.search-date-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-date-sep {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.search-date-group .form-input {
  width: 160px;
}
@media (max-width: 768px) {
  .search-bar-fields {
    flex-direction: column;
    align-items: stretch;
  }
  .search-input-group {
    min-width: auto;
  }
  .search-date-group .form-input {
    width: auto;
    flex: 1;
  }
}

/* ── #210: logs filter bar on mobile ──────────────────────────────────────
   The status cards wrap to several lines on a phone, so swap them for the
   compact dropdown; and keep Range + Auto-refresh on one shared row instead
   of letting them stack. Scoped to .filter-bar so the shared page-controls
   (S2-owned) aren't touched on other pages. */
@media (max-width: 768px) {
  .filter-group {
    display: none;
  }
  .filter-select {
    display: block;
    width: 100%;
  }

  .filter-bar .page-controls {
    width: 100%;
    flex-wrap: nowrap;
  }
  .filter-bar .page-control {
    min-width: 0;
  }
  .filter-bar .page-control-select {
    width: 100%;
    min-width: 0;
  }
  .filter-bar .page-control-countdown {
    min-width: 0;
  }
}

/* ── F5 (#190): responsive framework additions ──────────────────────────
   Canonical breakpoint ladder (author @media against these px; documented in
   DESIGN.md §9): 480 / 600 / 768 / 1100. The system stays desktop-first
   (max-width). These rules close the gaps the F5 audit found. */

/* Data tables reflow: on small screens each data table becomes its own
   horizontal scroll container instead of forcing whole-page overflow at
   375px. display:block keeps internal row/cell layout while enabling
   overflow-x (fixed per-column widths make the table wider than the
   viewport, so it scrolls within the card rather than the page). */
@media (max-width: 768px) {
  /* Let the main column shrink below its content's intrinsic width. A flex
     item defaults to min-width:auto (= min-content), so a wide non-wrapping
     row (filter bar, controls) forces the whole page wider than the viewport.
     min-width:0 lets it shrink so the flex-wrap rows wrap and tables scroll. */
  .main-content {
    min-width: 0;
  }
  .admin-topstrip {
    flex-wrap: wrap;
  }

  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Log detail-panel meta: stack label over value on very narrow screens so
   the two-column grid never overflows the full-width mobile panel. */
@media (max-width: 480px) {
  .detail-meta {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }
  .detail-meta-label {
    margin-top: var(--space-2);
  }
}

/* Touch devices: enlarge small controls to a >=44px tap target (WCAG 2.5.5)
   without changing the dense desktop layout. pointer:coarse = touch/stylus,
   so mouse users keep the compact controls. */
@media (pointer: coarse) {
  .form-checkbox-label,
  .toggle-switch,
  .btn-sm,
  .pagination-btn,
  .filter-btn,
  .row-actions-trigger {
    min-height: 44px;
  }
}