/* ──────────────────────────────────────────────────────────────
   App shell — outer container, main column, content area, mobile drawer
   Used by MainLayout and SuperAdminLayout.
   ────────────────────────────────────────────────────────────── */

.wt-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--wt-bg);
  color: var(--wt-fg);
  font-family: var(--wt-font);
}

.wt-shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Content area — has 24px padding (legacy pages); .wt-fullbleed undoes it
   for pages that own their layout edge-to-edge (like .ct-page). */
.wt-shell-content {
  flex: 1;
  overflow-y: auto;
  background: var(--wt-bg);
  padding: 24px;
}

/* Thin scrollbar inside the content area (theme-aware) */
.wt-shell-content {
  scrollbar-width: thin;
  scrollbar-color: var(--wt-border-2) transparent;
}
.wt-shell-content::-webkit-scrollbar { width: 8px; height: 8px; }
.wt-shell-content::-webkit-scrollbar-thumb {
  background: var(--wt-border-2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.wt-shell-content::-webkit-scrollbar-track { background: transparent; }

/* Mobile drawer (sidebar overlay on small screens) */
.wt-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.wt-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 18, 30, 0.5);
  animation: wt-fade-in 0.18s ease-out;
}
.wt-mobile-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 240px;
  z-index: 70;
  background: var(--wt-sidebar-bg);
  border-right: 1px solid var(--wt-sidebar-border);
  animation: wt-slide-in-left 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes wt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wt-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}