/* Responsive layout for the whole Super Admin.
   Loaded LAST on every page so it wins over page-specific CSS.
   Breakpoints: <=1100px tablet, <=820px phone (sidebar becomes a drawer), <=560px small phone. */

/* ---------- Desktop: side nav stays in view while the page scrolls ---------- */
.sidebar{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;align-self:start}
.main{min-width:0}
.topbar__left{display:flex;align-items:center;gap:12px;min-width:0}
.topbar h1{margin:0}

/* Mobile-only controls are hidden on desktop. */
.nav-toggle,.sidebar__close,.nav-backdrop{display:none}

/* Wide tables scroll sideways inside their box instead of squashing or breaking the page. */
.table-wrap{-webkit-overflow-scrolling:touch}
.table-wrap table,div[style*="overflow-x:auto"]>table{min-width:640px}

dialog.modal{max-height:calc(100dvh - 24px);overflow:auto}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .app-shell{grid-template-columns:224px 1fr}
  .main{padding:30px 28px 52px}
  .card{padding:24px}
}
@media (max-width:900px){
  .preview-card{position:static}
}

/* ---------- Phone: slide-in side drawer ---------- */
@media (max-width:820px){
  .app-shell{grid-template-columns:1fr}

  .sidebar{
    position:fixed;top:0;bottom:0;left:0;height:auto;align-self:auto;
    width:min(288px,84vw);z-index:60;padding:22px 18px 18px;
    transform:translateX(-102%);visibility:hidden;
    transition:transform .26s var(--ease),visibility 0s linear .26s;
  }
  body.nav-open .sidebar{
    transform:none;visibility:visible;box-shadow:var(--shadow-lg);
    transition:transform .26s var(--ease),visibility 0s;
  }
  .sidebar__brand{margin:4px 4px 26px}
  .sidebar__nav{flex-direction:column}
  .sidebar__link{padding:14px 15px;font-size:.95rem}
  .sidebar__link.is-active::before{left:-18px;right:auto;top:8px;bottom:8px;width:3px;height:auto;border-radius:0 3px 3px 0}
  .sidebar__footer{display:block}
  .sidebar__close{
    display:grid;place-items:center;position:absolute;top:14px;right:12px;width:38px;height:38px;
    border:0;border-radius:10px;background:rgba(255,255,255,.1);color:var(--white);font-size:1.4rem;line-height:1;cursor:pointer;
  }
  .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:50;background:rgba(20,1,33,.55);
    opacity:0;pointer-events:none;transition:opacity .22s var(--ease);-webkit-tap-highlight-color:transparent;
  }
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}

  /* Sticky top bar with the menu button */
  .main{padding:0 16px 36px}
  .topbar{
    position:sticky;top:0;z-index:30;margin:0 -16px 18px;padding:12px 16px;
    background:rgba(246,245,251,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
  }
  .topbar__left{flex:1;gap:10px}
  .topbar h1{font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-toggle{
    display:inline-grid;place-items:center;width:42px;height:42px;flex-shrink:0;
    border:1px solid var(--border);border-radius:10px;background:var(--white);color:var(--purple-deep);cursor:pointer;
  }
  .btn-logout{padding:9px 14px;font-size:.82rem;flex-shrink:0}

  /* Cards, stats, forms */
  .card{padding:18px 16px;border-radius:14px}
  .card + .card{margin-top:16px}
  .card__title{margin-bottom:14px}
  .stat-grid,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stat-grid>:last-child:nth-child(odd),.kpi-grid>:last-child:nth-child(odd){grid-column:1/-1}
  .stat-card,.kpi-card{padding:16px}
  .stat-card__value{font-size:1.5rem}
  .kpi-card__value{font-size:1.45rem}

  .filter-bar{gap:10px}
  .filter-bar__search{flex:1 1 100%;min-width:0}
  .filter-bar select,.filter-bar input[type=date]{flex:1 1 calc(50% - 5px);min-width:0}
  .filter-bar .custom-range.is-visible{flex:1 1 100%;flex-wrap:wrap}
  .toolbar .btn{flex:1 1 auto}
  .pagination{justify-content:center;flex-wrap:wrap}

  th,td{padding:10px 12px}

  /* iOS Safari zooms the page when a focused field is smaller than 16px. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{font-size:16px!important}
}

/* ---------- Small phone ---------- */
@media (max-width:560px){
  .export-form__two-col{grid-template-columns:1fr}
  .export-tab{flex:1 1 auto;justify-content:center;padding:11px 12px}
  .export-actions .btn{flex:1 1 100%}
  .modal__body{padding:18px}
  .modal__foot .btn{flex:1 1 auto}
  .login-card{padding:28px 20px}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.nav-backdrop{transition:none!important}
}