/* =============================================================
   responsive.css — breakpoints + page-specific responsive rules
   ============================================================= */

html { scroll-behavior: smooth; }
img, svg, table { max-width: 100%; }

/* ---- Desktop default: hide mobile-only bits ---- */
.np-hamburger { display: none; }

/* ====================== TABLET (≤1024px) ====================== */
@media (max-width: 1024px) {
  .np-hero-copy h1 { font-size: 56px !important; }
  .np-feat-row { flex-direction: column !important; }
  .np-feat-visual { width: 100%; }
  .np-sb { grid-template-columns: 1fr !important; }
  .np-sb-panel { border-right: none !important; border-bottom: 1px solid var(--color-border-default); max-height: none !important; }
  .np-docs-toc { display: none !important; }
  .np-docs-body { max-width: 100% !important; }
}

/* ====================== MOBILE (≤760px) ====================== */
@media (max-width: 760px) {
  .np-cookie-consent { right: 12px; bottom: 12px; left: 12px; width: auto; align-items: stretch; flex-direction: column; gap: 14px; padding: 16px; }
  .np-cookie-consent__actions { width: 100%; }
  .np-cookie-consent__actions .np-btn { flex: 1 1 0; }

  :root { --nav-height: 60px; }

  /* nav: logo left, hamburger right */
  .np-nav-links { display: none !important; }
  .np-nav-trailing { display: none !important; }
  .np-hamburger { display: inline-flex !important; }
  .np-nav-inner { padding-left: 16px !important; padding-right: 16px !important; gap: 12px !important; }

  /* tighten section gutters globally */
  .np-section, section { box-sizing: border-box; }
  .np-section { padding-left: 18px !important; padding-right: 18px !important; }

  /* hero → single column */
  .np-hero { grid-template-columns: 1fr !important; padding-top: 56px !important; padding-bottom: 48px !important; gap: 32px !important; }
  .np-hero-copy h1 { font-size: 38px !important; }
  .np-hero-art { display: none !important; }

  /* content grids → single column */
  .np-grid-3 { grid-template-columns: 1fr !important; }
  .np-admin-stats { grid-template-columns: 1fr 1fr !important; }
  .np-two-col { grid-template-columns: 1fr !important; gap: 24px !important; }
  .np-roles-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .np-svc-grid { grid-template-columns: 1fr !important; }

  /* account & admin go single-column */
  .np-acct-layout { grid-template-columns: minmax(0,1fr) !important; min-width: 0 !important; gap: 20px !important; padding-left: 18px !important; padding-right: 18px !important; padding-top: 28px !important; }
  .np-acct-aside { position: static !important; margin: 0 -18px; }
  .np-acct-side { flex-direction: row !important; overflow-x: auto !important; gap: 8px !important; padding: 0 18px 10px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .np-acct-side::-webkit-scrollbar { display: none; }
  .np-acct-side a, .np-acct-side button { width: auto !important; flex-shrink: 0 !important; padding: 9px 14px !important; border: 1px solid var(--color-border-default) !important; border-radius: var(--radius-full) !important; background: var(--color-surface-raised) !important; }
  .np-acct-side a[data-active="true"], .np-acct-side button[data-active="true"] { border-color: var(--color-brand-primary) !important; background: var(--color-brand-tint) !important; }
  .np-docs-body h2 { font-size: 26px !important; }

  /* docs → single column */
  .np-docs-grid { grid-template-columns: minmax(0,1fr) !important; min-width: 0 !important; gap: 0 !important; padding-top: 28px !important; }

  /* admin → sidebar becomes horizontal top bar */
  .np-admin-shell { flex-direction: column !important; }
  .np-admin-side { width: 100% !important; flex-direction: row !important; overflow-x: auto !important; border-right: none !important; border-bottom: 1px solid var(--color-border-default); padding: 10px 12px !important; gap: 6px !important; align-items: center; }
  .np-admin-side > a, .np-admin-side > button { flex-shrink: 0; white-space: nowrap; }
  .np-admin-side > div:first-child { display: none !important; }
  .np-admin-main { padding: 20px !important; min-width: 0 !important; }

  /* page headers shrink */
  .t-display-lg { font-size: 36px !important; }
  .t-display-md { font-size: 30px !important; }

  /* tables scroll horizontally inside their card */
  .np-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* configure stepper: hide step labels, keep dots */
  .np-stepper-label { display: none !important; }

  /* token / list rows: actions wrap full-width */
  .np-row-actions { width: 100%; }

  /* modals fill width */
  .np-modal { width: 100% !important; }

  /* collaboration partners: grid → single column, marquee logos stay compact */
  .np-collab-grid { grid-template-columns: 1fr !important; }
  .np-logo { padding: 10px 14px 10px 10px !important; }
  .np-logo__img { width: 42px !important; height: 42px !important; }

  /* partners filter bar + tabs/segments wrap instead of overflowing */
  .np-filterbar { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .np-segment { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .np-segment::-webkit-scrollbar { display: none; }
  .np-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; }
  .np-tabs::-webkit-scrollbar { display: none; }
  .np-tabs a { white-space: nowrap; }

  /* partners head: title + "see all" stack */
  .np-partners-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }

  /* database browser: list above the table */
  .np-db-grid { grid-template-columns: 1fr !important; }
}

/* ====================== SMALL MOBILE (≤480px) ====================== */
@media (max-width: 480px) {
  .np-cookie-consent__actions { flex-direction: column; }
  .np-cookie-consent__actions .np-btn { width: 100%; }
  .np-legal { padding-right: 16px; padding-left: 16px; }

  .np-hero-copy h1 { font-size: 32px !important; }
  .np-admin-stats { grid-template-columns: 1fr !important; }
  .np-logobar { gap: 20px !important; }
}

/* ---- Account/admin sidebars are handled in JS classes ---- */
.np-acct-side { display: flex; flex-direction: column; gap: 2px; }

/* table row hover */
.np-row:hover td { background: var(--color-surface-sunken); }