/* ════════════════════════════════════════════════════════════════════════
   NETINSIGHT — Global responsive layer
   Industry-standard breakpoints: mobile <640px / tablet 640–1023 / desktop ≥1024
   Mobile-first refinements layered on top of existing styles.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --ni-bp-mobile-max: 639.98px;
  --ni-bp-tablet-min: 640px;
  --ni-bp-tablet-max: 1023.98px;
  --ni-bp-desktop-min: 1024px;
  --ni-touch-min: 44px;
}

/* ─── Box-sizing safety net ──────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   TABLET + MOBILE  (max-width: 1023.98px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {

  /* Touch-friendly targets — WCAG 2.5.5 min 44×44 */
  button,
  a.btn, .btn,
  .icon-btn,
  .pill,
  select,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"] {
    min-height: var(--ni-touch-min);
  }
  /* exception — toggle switches keep their compact size */
  .tog-input + .tog-label,
  .stg-toggle, .stg-toggle-slider,
  .sm-toggle-wrap label {
    min-height: 0 !important;
  }
  /* exception — segmented pill rows that need to fit horizontally */
  .pills-wrap .pill,
  .sm-pills .sm-pill,
  .pill-group .pill,
  .pill-dot { min-height: 36px; }

  /* Tables — horizontal scroll inside a wrapper-ish behavior on the table itself */
  table.as-table,
  table.um-table,
  table.br-table,
  table.fb-port-table,
  .stg-section table,
  .responsive-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.as-table thead, table.um-table thead, table.br-table thead,
  table.fb-port-table thead, .responsive-table thead {
    /* keep header readable while scrolling */
    position: sticky; top: 0; background: var(--card, #161b22); z-index: 1;
  }

  /* Modal overlays — fit to viewport */
  .modal-overlay,
  #ps-overlay, #lp-bug-overlay, #lp-feat-overlay,
  #ni-bug-overlay, #ni-feedback-overlay,
  [id$="-overlay"][class*="modal"] {
    padding: 12px;
  }
  .modal-overlay > *, #ps-overlay > *, #lp-bug-overlay > *,
  #lp-feat-overlay > *, #ni-bug-overlay > *, #ni-feedback-overlay > * {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    box-sizing: border-box;
  }

  /* Settings panels — single-column grids on tablet+mobile */
  .stg-section[style*="grid-template-columns"],
  .stg-section.grid-2,
  #panel-smtp .sm-grid,
  #panel-smtp .sm-test-grid {
    grid-template-columns: 1fr !important;
  }
  /* Settings rows — stack label above control */
  .settings-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* Header bar — wrap items */
  .live-summary-header,
  .stg-header,
  .top-bar,
  header[class*="header"] {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }

  /* Generic auto-fit grids stack on narrow */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE ONLY  (max-width: 639.98px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639.98px) {

  /* Base type slightly larger for readability */
  body { font-size: 15px; }
  h1 { font-size: clamp(20px, 5.2vw, 26px); }
  h2 { font-size: clamp(17px, 4.4vw, 22px); }
  h3 { font-size: clamp(15px, 4vw, 19px); }

  /* Single-column for everything */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Form fields full-width */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Settings sidebar — slimmer/scrollable */
  .stg-sidebar {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    max-height: 220px;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--border, #21262d);
  }
  .stg-shell, .stg-layout, .stg-main-row {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  .stg-content, .stg-main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Padding tightening so content gets max screen real estate */
  .stg-panel, .stg-section, .um-modal, .modal-overlay > * {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Header on dashboard — center-stack on very small */
  .live-summary-header > * {
    flex: 0 1 auto;
  }

  /* Modal bottom-sheet feel: snap to bottom */
  .modal-overlay,
  #ps-overlay, #lp-bug-overlay, #lp-feat-overlay,
  #ni-bug-overlay, #ni-feedback-overlay {
    align-items: flex-end !important;
  }
  .modal-overlay > *, #ps-overlay > *, #lp-bug-overlay > *,
  #lp-feat-overlay > *, #ni-bug-overlay > *, #ni-feedback-overlay > * {
    width: 100% !important;
    max-width: 100% !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Buttons that span flex rows go full width */
  .form-row button[type="submit"],
  .um-actions button,
  .stg-footer button {
    width: 100%;
  }

  /* Hide non-critical decorative items on the smallest screens */
  .ni-decor, .stg-bg-grid { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   FOCUS / ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════════ */
@media (any-pointer: coarse) {
  /* Ensure visible focus on touch devices using TAB to navigate */
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent, #1a6dfb);
    outline-offset: 2px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PRINT — collapse decorations
   ════════════════════════════════════════════════════════════════════════ */
@media print {
  .icon-btn, .stg-sidebar, .live-summary-header, .modal-overlay,
  #fb-toast, #ni-bug-fab, #ni-bug-overlay, #ps-overlay { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ─── Theme toggle icon button ─── */
.theme-toggle-btn { position: relative; }
.theme-toggle-btn .theme-swatch {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, #1a6dfb);
  border: 1.5px solid var(--card, #0d1117);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.25);
  pointer-events: none;
  transition: background .25s;
}

/* ════════════════════════════════════════════════════════════════════════
   v2 — drawer + filter bar + widget grid responsiveness
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Settings hamburger + sidebar drawer (<1024px) ─── */
#stg-hamburger { display: none; }

@media (max-width: 1023.98px) {
  /* Show hamburger */
  #stg-hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border, #21262d);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text, #e6edf3);
    margin-right: 8px;
    transition: background .15s, border-color .15s;
  }
  #stg-hamburger:hover { background: var(--btn-hv, rgba(255,255,255,.06)); border-color: var(--accent, #1a6dfb); }
  #stg-hamburger svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }

  /* Settings sidebar -> off-canvas drawer */
  .stg-sidebar {
    position: fixed !important;
    top: 0; left: 0;
    width: min(280px, 80vw) !important;
    max-width: 280px;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto;
    z-index: 10500;
    background: var(--card, #161b22);
    border-right: 1px solid var(--border, #21262d);
    transform: translateX(-100%);
    transition: transform .25s ease-out;
    box-shadow: 4px 0 24px rgba(0,0,0,.45);
  }
  .stg-sidebar.stg-drawer-open { transform: translateX(0); }

  /* Backdrop */
  #stg-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 10499;
    animation: stg-bd-fade .2s ease-out;
  }
  #stg-drawer-backdrop.visible { display: block; }
  @keyframes stg-bd-fade { from { opacity: 0; } to { opacity: 1; } }

  /* Body lock when drawer open */
  body.stg-drawer-locked { overflow: hidden; }

  /* Layout shifts: content fills full width */
  .stg-layout, .stg-shell, .stg-main-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  .stg-content, .stg-main { width: 100% !important; margin-left: 0 !important; }
}

/* ─── Filter bar stacks on mobile ─── */
@media (max-width: 639.98px) {
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .filter-bar > .ctrl-label { font-size: 11px; opacity: .85; }
  .filter-bar .csel-wrap,
  .filter-bar .filter-sel,
  .filter-bar .filter-range-group,
  .filter-bar select,
  .filter-bar input[type="datetime-local"] {
    width: 100% !important;
    box-sizing: border-box;
  }
  .filter-bar .csel-trigger { width: 100% !important; box-sizing: border-box; }
  .filter-bar .filter-vsep { display: none; }
  .filter-bar .filter-range-group { flex-direction: column; gap: 8px; }
  #custom-range-row { display: flex; flex-direction: column; gap: 8px; }
}

/* ─── Tablet: 2-column widget grid ─── */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .dash-main, .dash-main.abs-layout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px !important;
    align-items: flex-start !important;
  }
  .dash-main .widget,
  .dash-main.abs-layout .widget {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: calc(50% - 6px) !important;
    height: auto !important;
    min-height: 360px;
  }
}

/* ─── Mobile: 1-column widget stack ─── */
@media (max-width: 639.98px) {
  .dash-main, .dash-main.abs-layout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px !important;
    align-items: flex-start !important;
  }
  .dash-main .widget,
  .dash-main.abs-layout .widget {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 320px;
  }
}