/* Responsive layer.
 *
 * All desktop rules live in the other component files; everything here is in
 * @media blocks so the desktop build is untouched. Two breakpoints:
 *   <=1024px (tablet) relaxes the widest two-column layouts;
 *   <=760px  (phone)  is the full single-column treatment + the admin drawer.
 *
 * Linked last in base.html so these overrides win. */

/* ---- Mobile admin bar + drawer scrim (hidden on desktop) ---- */
.kw-admin-mobilebar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--kw-deep-space);
  color: #fff;
}
.kw-admin-mobilebar img { height: 20px; display: block; }
.kw-admin-mobilebar__burger {
  margin-inline-start: auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}
.kw-drawer-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 33, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* ============================ TABLET ============================ */
@media (max-width: 1024px) {
  .kw-container { padding-inline: 1.5rem; }
  /* Narrow the admin rail; drop the public nav's "Agent Marketplace" tag. */
  .kw-adminnav { width: 208px; }
  .kw-topnav__brand-text--muted { display: none; }
}

/* ============================ PHONE ============================ */
@media (max-width: 760px) {
  .kw-container { padding-inline: 1rem; }
  .kw-admin-main__inner { padding: 1.25rem 1rem 2.5rem; }

  /* Public top nav wraps: logo + avatar on row 1, links centered on row 2.
     Tenant/Dashboard chips move behind the avatar (hidden here). */
  .kw-topnav { padding: 12px 1rem; }
  .kw-topnav__inner { flex-wrap: wrap; gap: 8px; row-gap: 6px; padding: 8px 12px; }
  .kw-topnav__brand-text--muted { display: none; }
  .kw-topnav__chip { display: none; }
  .kw-topnav__actions { margin-inline-start: auto; }
  .kw-topnav__nav { order: 3; flex-basis: 100%; justify-content: center; margin-inline-start: 0; }
  .kw-topnav__link { padding: 7px 11px; font-size: 13px; }

  /* Hero */
  .kw-hero { padding: 2.5rem 1rem 2.25rem; }
  .kw-hero__art { display: none; }

  /* Grids → single column. */
  .kw-grid-cards,
  .kw-grid-cards--two,
  .kw-grid-cards--four,
  .kw-catalog .kw-grid-cards { grid-template-columns: 1fr; }

  /* Headers that were justified rows now stack. */
  .kw-page-header--row { flex-direction: column; align-items: flex-start; }
  .kw-access-editor__cols { grid-template-columns: 1fr; }

  /* Detail hero stacks; actions go full width. */
  .kw-detail-hero__inner { flex-direction: column; }
  .kw-detail-hero__rhs { align-items: stretch; width: 100%; min-width: 0; }

  /* Data tables scroll horizontally inside their card instead of stretching
     the page (the #1 mobile-overflow cause). */
  .kw-section--flush { overflow-x: auto; }
  .kw-table { min-width: 720px; }
  .kw-tabs__list { overflow-x: auto; }

  /* Banner + upgrade callout stack gracefully. */
  .kw-update-banner { padding: 10px 16px; gap: 10px; justify-content: flex-start; }
  .kw-update-banner__cta { margin-inline-start: 0; }
  .kw-upgrade-callout { flex-direction: column; align-items: flex-start; }

  /* ---- Admin shell → off-canvas drawer ---- */
  .kw-admin-mobilebar { display: flex; }
  .kw-drawer-scrim { display: block; }
  .kw-admin-shell { display: block; }
  .kw-admin-topbar { display: none; }   /* replaced by the mobile bar */
  /* The always-dark rail becomes a fixed slide-in drawer (overrides the
     desktop sticky/full-height rule). Never display:none — that would leave
     admins with no nav. */
  .kw-adminnav {
    position: fixed;
    top: 0; inset-inline-start: 0; bottom: 0;
    height: 100dvh;
    width: 286px;
    max-width: 86vw;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    align-self: auto;
  }
  /* RTL: the rail sits on the inline-start (right) edge, so it hides off the
     right. translateX has no logical form, so flip the off-screen direction
     here; the open `translateX(0)` rule below already wins for both dirs. */
  [dir="rtl"] .kw-adminnav { transform: translateX(100%); }
  body.kw-drawer-open .kw-adminnav { transform: translateX(0); box-shadow: 0 0 60px rgba(0, 0, 0, 0.5); }
  body.kw-drawer-open .kw-drawer-scrim { opacity: 1; pointer-events: auto; }
}