/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  SENTRY-MOBILE-UI-POLISH 5/6 — Typography, Touch Targets, Spacing
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Task: Final typography and spacing pass for mobile usability.
 *  Scope: Mobile only (≤768px) — desktop unchanged.
 *
 *  Sections
 *  1. Typography minimums   — body 16px, labels 14px, headings scaled
 *  2. Touch targets (audit)  — buttons, inputs, selects, nav items, badges
 *  3. Spacing               — cards 16px, sections 24px, form fields 16px
 *  4. Input handling        — 16px font prevents iOS zoom on ALL inputs
 *  5. Readability           — text overflow, URL truncation, no overflow-x
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ══ 1. TYPOGRAPHY MINIMUMS ════════════════════════════════════════════════ */

/*
 * Mobile base font: 16px minimum.
 * This prevents iOS Safari from auto-zooming when focus lands on inputs.
 * Applied globally so it cascades into all inline styles and legacy <style> blocks.
 */
@media (max-width: 768px) {
  body {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}

/*
 * Body text: minimum 16px (iOS Safari auto-zoom threshold).
 * Applied to common text classes. Desktop rules are untouched.
 */
@media (max-width: 768px) {
  .body-text          { font-size: 16px !important; line-height: 1.5 !important; }
  .ovr-card-row       { font-size: 16px !important; }
  .ovr-empty-text     { font-size: 16px !important; }
  .empty-text         { font-size: 16px !important; }
  .report-actions     { font-size: 14px !important; }
  td                  { font-size: 16px !important; line-height: 1.5 !important; }
}

/*
 * Labels and secondary text: minimum 14px.
 * Prevents small print from being unreadable on small screens.
 */
@media (max-width: 768px) {
  .form-label         { font-size: 14px !important; }
  .text-small         { font-size: 14px !important; }  /* was 13px */
  .form-hint          { font-size: 14px !important; }
  .ovr-stat-label     { font-size: 12px !important; }  /* keep labels tight */
  .stat-label          { font-size: 12px !important; }
  .page-sub           { font-size: 14px !important; }
  .detail-back        { font-size: 14px !important; }
  .empty-text         { font-size: 14px !important; }
}

/*
 * Headings: scale down but never below 18px for h3+.
 * Line height ≥1.3 for headings.
 */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  h2, .h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  h3, .h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .page-title {
    font-size: 24px !important;  /* was 22px in mobile override */
    line-height: 1.2 !important;
  }
  .ovr-empty-title {
    font-size: 18px !important;
  }
}

/* ══ 2. TOUCH TARGETS ════════════════════════════════════════════════════════ */

/*
 * All interactive elements on mobile must have a minimum 44px touch target.
 * This is a WCAG 2.2 AA / EN 301 549 requirement.
 */

/* ── Nav items in mobile drawer ──────────────────── */
@media (max-width: 768px) {
  .gl-drawer-nav .nav-item,
  .gl-mobile-drawer .nav-item {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    /* Prevent iOS Safari from applying its default tap highlight
       (light grey #B4D7FF) which causes the drawer to appear "greyed
       out" after tapping a nav item. */
    -webkit-tap-highlight-color: transparent;
    /* Remove iOS 300ms tap delay — tap is immediate on touch devices. */
    touch-action: manipulation;
  }
  /* Also suppress tap highlight on the signout button */
  .gl-drawer-signout {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .gl-drawer-nav .nav-section,
  .gl-mobile-drawer .nav-section {
    font-size: 11px !important;
    padding: 16px 16px 8px !important;
  }
}

/* ── Table row actions ───────────────────────────── */
@media (max-width: 768px) {
  /* Row tap target covers entire row */
  table.responsive-cards tr {
    min-height: 56px !important;
    cursor: pointer;
  }
  /* Action cells in table — ensure icon buttons are 44px */
  .actions-cell button,
  .actions-cell .btn-icon,
  .action-btn,
  button.action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
  }
}

/* ── Checkboxes and radio buttons ──────────────── */
@media (max-width: 768px) {
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    /* Expand tap area to 44px around the visual element */
    padding: 11px !important;
    margin: -11px !important;
    background-size: 22px 22px !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }
  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    background-size: 22px 22px !important;
  }
}

/* ── Select controls ──────────────────────────── */
@media (max-width: 768px) {
  select,
  .form-select,
  select.ovr-filter-bar {
    min-height: 44px !important;
    height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 16px !important;  /* prevents iOS zoom */
    cursor: pointer;
  }
  /* Standalone select buttons in filter bars */
  .settings-tabs-mobile select {
    height: 46px !important;
    min-height: 46px !important;
    font-size: 15px !important;
  }
}

/* ── Inline text links — expand surrounding tap area ─── */
@media (max-width: 768px) {
  /* Links within body text: ensure at least 44px tap height */
  td a,
  .ovr-card-row a,
  .text-secondary a,
  p a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    vertical-align: middle;
  }
}

/* ── Tab items in mobile bottom tab bar ────────── */
@media (max-width: 768px) {
  .gl-tab-item {
    min-height: 56px !important;  /* 60px bar - 4px padding = 56px tap zone */
    padding: 4px !important;
  }
}

/* ── Filter bar toggle button ─────────────────── */
@media (max-width: 768px) {
  .ovr-filter-toggle {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
}

/* ── Badge buttons (interactive) ──────────────── */
@media (max-width: 768px) {
  a.badge,
  button.badge {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ── Nav signout / footer buttons ──────────────── */
@media (max-width: 768px) {
  .gl-drawer-signout,
  .sidebar-footer button,
  .sidebar-footer .btn {
    min-height: 44px !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
  }
}

/* ── Copilot FAB — safe offset above tab bar ──── */
@media (max-width: 768px) {
  .copilot-fab,
  .ovr-copilot-fab {
    bottom: 80px !important;
  }
}

/* ══ 3. SPACING ══════════════════════════════════════════════════════════════ */

/*
 * Cards: minimum 16px padding on mobile.
 * Previous rules set padding:16px on responsive-cards rows.
 * Ensure all card variants meet this minimum.
 */
@media (max-width: 768px) {
  .stat-card {
    padding: 16px !important;
  }
  .ovr-stat-card {
    padding: 16px !important;
  }
  .current-plan-card,
  .exploit-box,
  .retest-box,
  .action-card,
  .rail-card {
    padding: 16px !important;
  }
  .table-wrap {
    padding: 0 !important;
  }
  .table-header {
    padding: 14px 16px !important;
  }
  .table-wrap {
    overflow-x: auto !important;
  }
}

/*
 * Screen edge margin: minimum 16px horizontal.
 * Ensures no content touches the screen edge on small devices.
 */
@media (max-width: 768px) {
  .main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .gl-page-bar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ovr-filter-bar,
  .ovr-filter-toggle {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .stats-strip {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ovr-empty {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/*
 * Section spacing: minimum 24px between major sections.
 */
@media (max-width: 768px) {
  .page-header {
    margin-bottom: 20px !important;
  }
  .stats-grid {
    margin-bottom: 20px !important;
  }
  .table-wrap,
  .ovr-sev-chart {
    margin-bottom: 20px !important;
  }
  .ovr-quick-actions {
    margin-bottom: 20px !important;
  }
  .ovr-stats {
    margin-bottom: 20px !important;
  }
}

/*
 * Form field spacing: minimum 16px between fields.
 */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 16px !important;
  }
  .modal-body .form-group,
  .ovr-drawer-body .form-group {
    margin-bottom: 14px !important;
  }
}

/*
 * Button groups: minimum 12px gap between adjacent buttons.
 * Vertical stacking already handled above — gap here for horizontal groups.
 */
@media (max-width: 768px) {
  .modal-actions,
  .modal-footer {
    gap: 10px !important;
  }
  .report-actions,
  .ovr-drawer-actions {
    gap: 10px !important;
  }
}

/* ══ 4. INPUT HANDLING ══════════════════════════════════════════════════════ */

/*
 * CRITICAL: font-size 16px on ALL inputs prevents iOS Safari from
 * auto-zooming when focus lands on a text field.
 * This applies to ALL inputs site-wide, not just those in modals.
 */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  input.form-input,
  input.modal-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  textarea,
  textarea.form-textarea,
  textarea.modal-textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  textarea,
  textarea.form-textarea {
    min-height: 80px !important;
  }
}

/*
 * Proper inputmode attributes where relevant.
 * These are set inline in HTML — this CSS provides a fallback visual cue.
 * Applied globally so even inline styles are partially addressed.
 */
@media (max-width: 768px) {
  input[type="url"]    { input-mode: url !important; }
  input[type="email"]  { input-mode: email !important; }
  input[type="tel"]    { input-mode: tel !important; }
  input[type="number"] { input-mode: decimal !important; }
  input[type="search"] { input-mode: search !important; }
}

/*
 * Labels positioned above inputs on mobile (not beside).
 */
@media (max-width: 768px) {
  .form-label {
    display: block !important;
    margin-bottom: 6px !important;
  }
  .form-group {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ══ 5. READABILITY ══════════════════════════════════════════════════════════ */

/*
 * No text overflow hidden without a way to see full content.
 * Truncate with ellipsis + full value accessible via tap/hover.
 */
@media (max-width: 768px) {
  /* Truncate long text with ellipsis — full content in detail drawer */
  .ovr-card-title {
    max-width: calc(100% - 80px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .ovr-card-meta {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
  }
  /* Table cells — truncate gracefully */
  td.name-cell {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Mono values (URLs, paths, IPs) — truncate, show on hover/focus */
  code,
  .font-mono,
  td code,
  pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre !important;
    word-break: break-all !important;
  }
}

/*
 * No horizontal scrolling on any page.
 * Horizontal scrolling is a major usability issue on mobile.
 */
@media (max-width: 768px) {
  html {
    overflow-x: hidden !important;
  }
  body {
    overflow-x: hidden !important;
  }
  .main {
    overflow-x: hidden !important;
  }
}

/*
 * Zoom to 200% works without layout breaking (WCAG 1.4.4).
 * At 200% zoom, a 320px viewport becomes 160px — layout must reflow.
 * The single-column layouts at 768px breakpoint handle this.
 * Additional refinement for ultra-zoomed states:
 */
@media (max-width: 768px) and (max-resolution: 2dppx) {
  /* Force reflow for zoomed text */
  .stats-grid,
  .ovr-stats {
    grid-template-columns: 1fr !important;
  }
  .ovr-quick-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ══ 320px WIDTH FLOOR ══════════════════════════════════════════════════════ */

/*
 * Smallest supported viewport: 320px.
 * At this width, even single-column layouts may need further compression.
 */
@media (max-width: 320px) {
  body {
    font-size: 15px !important;  /* slightly smaller at floor — not below 15px */
  }
  .page-title {
    font-size: 20px !important;
  }
  .main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .stat-card {
    padding: 12px !important;
  }
  .stat-value {
    font-size: 18px !important;
  }
  .ovr-stat-value {
    font-size: 1.2rem !important;
  }
  .btn {
    font-size: 13px !important;
    padding: 8px 14px !important;
    min-height: 40px !important;
  }
  .modal-actions .btn,
  .modal-footer .btn {
    min-height: 44px !important;
    font-size: 14px !important;
  }
  .gl-tab-label {
    font-size: 0.55rem !important;
  }
  /* Ensure table cards still work at floor width */
  table.responsive-cards td {
    padding: 6px 0 !important;
  }
}

/* ══ 6. GENERAL BUTTON TOUCH TARGETS ══════════════════════════════════════ */

/*
 * Any .btn or .btn-sm that isn't already covered by a more specific rule
 * above must still clear 44px on mobile.
 * Inline styles with explicit min-height on individual buttons take precedence.
 */
@media (max-width: 768px) {
  .btn {
    min-height: 44px !important;
    /* Prevent overly compressed buttons at small widths */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 0.9rem !important;
  }
  /* btn-sm gets the same 44px floor on mobile — "small" is a desktop concept */
  .btn.btn-sm,
  .btn-sm {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 0.85rem !important;
  }
}

/* ── Header & sidebar icon buttons ────────────────── */
@media (max-width: 768px) {
  /*
   * gl-sidebar-toggle is 34×34 on desktop.
   * On mobile it needs to be at least 44×44.
   */
  .gl-sidebar-toggle,
  .gl-header-action,
  .header-icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* gl-search-trigger: expand hit area on mobile */
  .gl-search-trigger {
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* ══ 7. MODAL & DRAWER CLOSE BUTTONS ══════════════════════════════════════ */

/*
 * Any close button without explicit inline min-height must still meet 44px.
 * Named patterns across the codebase: modal-close, drawer-close, slideover-close.
 */
@media (max-width: 768px) {
  [class*="modal-close"],
  [class*="drawer-close"],
  [class*="slideover-close"],
  button[aria-label="Close"],
  button[aria-label="Close dialog"],
  button[aria-label="Dismiss"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ══ 8. MOBILE CARD TYPOGRAPHY — Assessment cards, finding cards, scan cards ══ */

/*
 * Task: SENTRY-MOBILE-DASHBOARD-DECLUTTER #5 — Typography, Spacing & Breathing Room
 *
 * Mobile card titles must be ≥16px on mobile (assessment name, finding title, scan name).
 * Card body text must be 16px/1.5 for readability.
 * Section headers (table-header, chart-title) must be ≥18px on mobile.
 * Gap between card sections (scan launcher, findings, history) must be ≥16px.
 */
@media (max-width: 768px) {
  /* ── Card titles: 16px bold (was 0.88rem ≈ 14px) ─────────────────────── */
  .ovr-card-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    white-space: normal !important;       /* Allow multi-line titles to breathe */
    overflow: visible !important;
    text-overflow: unset !important;
    margin-bottom: 6px !important;        /* Breathing room below title */
  }

  /* ── Card body rows: ≥16px / 1.5 line-height (task requirement) ─────────── */
  .ovr-card-row {
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--text-secondary) !important;
    padding: 5px 0 !important;           /* Generous row spacing */
    border-bottom: none !important;
  }
  .ovr-card-row:last-child {
    border-bottom: none !important;
  }
  .ovr-card-row span:first-child {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-family: 'JetBrains Mono', monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 70px !important;          /* Consistent label column width */
    flex-shrink: 0 !important;
  }
  .ovr-card-row span:last-child {
    font-size: 16px !important;
    text-align: right !important;
    line-height: 1.4 !important;
  }

  /* ── Card list gap: 16px between cards (was 12px) ──────────────────────── */
  .ovr-card-list {
    gap: 14px !important;
  }
  .ovr-card-item {
    padding: 16px !important;
    min-height: 72px !important;
    border-radius: 10px !important;
    margin-bottom: 0 !important;
  }

  /* ── Section headers: ≥18px semibold ──────────────────────────────────── */
  .table-header {
    padding: 14px 16px !important;
  }
  .table-title {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  .chart-title {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  .section-lbl {
    font-size: 11px !important;
  }
  .page-title {
    font-size: 22px !important;           /* Assessment title: 20-24px bold */
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  /* ── Between-section breathing room: 20px gap ─────────────────────────── */
  /* Scan launcher → findings → history sections get 20px gap */
  .sl-scan-cta {
    margin-bottom: 20px !important;
  }
  .table-wrap {
    margin-bottom: 20px !important;
  }
  .ovr-empty {
    margin-bottom: 20px !important;
  }
  .ovr-quick-actions {
    margin-bottom: 20px !important;
  }
  .ovr-stats {
    margin-bottom: 20px !important;
  }
  /* General section gap: 20px between consecutive card lists */
  .ovr-card-list + .table-wrap,
  .table-wrap + .ovr-card-list,
  .ovr-card-list + .ovr-empty,
  .ovr-card-list + .ovr-quick-actions,
  .ovr-card-list + .ovr-stats,
  .sl-scan-cta + .ovr-card-list,
  .ovr-card-list + .ovr-card-list {
    margin-top: 20px !important;
  }
}

/* ══ 9. BADGE DENSITY REDUCTION ON MOBILE ════════════════════════════════════ */

/*
 * Task: SENTRY-MOBILE-DASHBOARD-DECLUTTER #5 — Visual Noise Reduction
 *
 * Badge strategy on mobile:
 * - Severity: conveyed by card LEFT BORDER (data-sev attribute → CSS border color).
 *   The text badge in the card top is redundant when the border color is visible.
 * - Status: keep ONE status badge in the card row (user needs to know Open/Remediated/etc).
 * - Tags (OWASP, CWE): belong in the detail drawer, not in the card list. Hide them.
 *
 * Result: Each card shows 1 left-border-color + 1 status badge + text rows.
 * No competing badges. Clean scan at a glance.
 */
@media (max-width: 768px) {
  /* ── Severity badge text: hidden on mobile (border color is sufficient) ─── */
  .ovr-card-top .badge {
    display: none !important;
  }

  /* ── Tag badges (OWASP, CWE type tags): hidden on mobile ─────────────────── */
  .ovr-card-tags {
    display: none !important;
  }

  /* ── Card meta: max 1 badge visible (status badge in card row) ─────────── */
  .ovr-card-meta {
    display: none !important;  /* Meta area is hidden; status is in card row */
  }

  /* ── Status badge inside card row: keep readable, ensure good contrast ──── */
  .ovr-card-row .badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
    min-height: 22px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 4px !important;
  }
}

/* ══ 10. CONTRAST FIX — text-dim on dark background ══════════════════════════ */

/*
 * WCAG 2.1 SC 1.4.3 Contrast (Minimum) — Level AA requires 4.5:1 for normal text.
 * #64748b on #0A1428 achieves only ~3.5:1 — FAILS 4.5:1.
 *
 * Fix: Replace #64748b body-text uses with #94a3b8 (≈5.2:1) on mobile.
 * Exception: Form hints and monospace labels can remain #64748b — they're secondary
 * and WCAG 1.4.3 doesn't apply to non-text contrast (icons, decorative elements).
 *
 * Note: We only override in mobile-typography.css to preserve desktop design intent.
 */
@media (max-width: 768px) {
  /* Body text instances of text-dim — bump to pass 4.5:1 */
  .ovr-card-row span:first-child,
  .form-hint,
  .stat-label,
  .text-small,
  .text-dim {
    color: #94a3b8 !important;  /* was #64748b ≈ 3.5:1 → now #94a3b8 ≈ 5.2:1 */
  }

  /* Monospace labels / secondary text — these are intentionally dimmer */
  .section-lbl,
  .table-header th,
  .ovr-stat-label {
    color: #8898B0 !important;  /* Monospace labels — #8898B0 passes WCAG AA (≥5:1) */
  }
}

/* ══ 11. WCAG 2.2 AA — FOCUS INDICATORS ══════════════════════════════════════ */

/*
 * WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum) —
 * When a component receives focus, it cannot be completely hidden by other content.
 * We also enforce 3px solid outline for visibility per SC 2.4.7.
 *
 * Also: ensure focus indicator is visible on all interactive elements on mobile.
 */
@media (max-width: 768px) {
  /* ── Global focus ring: 3px solid, high contrast ──────────────────────── */
  :focus-visible {
    outline: 3px solid #00B8FF !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
  }

  /* ── Nav items and sidebar links ───────────────────────────────────────── */
  .gl-drawer-nav .nav-item:focus-visible,
  .gl-mobile-drawer .nav-item:focus-visible {
    outline: 3px solid #00B8FF !important;
    outline-offset: -3px !important;
    border-radius: 6px !important;
    background: var(--green-subtle) !important;
  }

  /* ── Buttons ────────────────────────────────────────────────────────────── */
  .btn:focus-visible,
  .btn-primary:focus-visible {
    outline: 3px solid #00B8FF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(0,184,255,0.25) !important;
  }

  /* ── Tab items (bottom tab bar) ───────────────────────────────────────── */
  .gl-tab-item:focus-visible {
    outline: 3px solid #00B8FF !important;
    outline-offset: -2px !important;
    border-radius: 4px !important;
  }

  /* ── Card items (clickable cards) ────────────────────────────────────── */
  .ovr-card-item:focus-visible {
    outline: 3px solid #00B8FF !important;
    outline-offset: 2px !important;
    border-color: rgba(0,184,255,0.4) !important;
  }

  /* ── Table rows ─────────────────────────────────────────────────────────── */
  table.responsive-cards tr:focus-visible {
    outline: 3px solid #00B8FF !important;
    outline-offset: -3px !important;
    background: rgba(0,184,255,0.05) !important;
  }

  /* ── Modals / drawers ─────────────────────────────────────────────────── */
  .modal-close:focus-visible,
  .drawer-close:focus-visible,
  [class*="modal-close"]:focus-visible {
    outline: 3px solid #00B8FF !important;
    outline-offset: 2px !important;
    border-radius: 6px !important;
  }
}

/* ══ 12. REDUCE BORDER/OUTLINE NOISE ON MOBILE ═══════════════════════════════ */

/*
 * Too many competing borders create visual noise on mobile.
 * Reduce: use subtle background-color changes instead of borders for hover states.
 * Keep severity-colored borders (essential for security scanning context).
 */
@media (max-width: 768px) {
  /* ── Reduce border intensity on stat cards ──────────────────────────────── */
  .stat-card {
    border-width: 1px !important;
    border-color: var(--border) !important;  /* Keep border but lighter */
  }

  /* ── Scan CTA: reduce border, increase background ────────────────────── */
  .sl-scan-cta {
    border-width: 1px !important;
    padding: 16px !important;
  }

  /* ── Quick action cards: softer border ────────────────────────────────── */
  .action-card {
    border-width: 1px !important;
    border-color: rgba(30,48,85,0.7) !important;
    background: var(--bg-card) !important;
  }

  /* ── Table wrapper: no border needed on mobile (cards replace table) ─── */
  .table-wrap {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .table-header {
    border: none !important;
    background: transparent !important;
    padding: 12px 16px !important;
  }
}