/* ============================================================
   Admin shell — outer layout grid + body state classes
   ============================================================ */

.admin-layout {
  display: grid;
  grid-template-columns: var(--sb-w-expanded) minmax(0, 1fr);
  grid-template-rows: 100vh;
  height: 100vh;
  transition: grid-template-columns 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--bg-page);
  grid-column: 2;
}

/* Body classes (set by the sidebar Alpine store) drive shell state. */
body.sb-collapsed .admin-layout { grid-template-columns: var(--sb-w-collapsed) minmax(0, 1fr); }
body.sb-flyout    .admin-layout { grid-template-columns: var(--sb-w-collapsed) minmax(0, 1fr); }

/* Page content area */
.page {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 24px 24px;
}
.page-narrow { max-width: 1280px; margin: 0 auto; padding-top: 24px; }
.page-wide   { max-width: 1600px; margin: 0 auto; padding-top: 24px; }

/* System footer — always visible at the bottom of the content area */
.admin-footer {
  flex-shrink: 0;
  padding: 0 24px;
  height: 36px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.admin-footer-text {
  font-size: 11.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile drawer mode — sidebar goes off-canvas (position:fixed), so the
   main column must occupy the single grid track. Without resetting
   grid-column the main panel stays pinned to column 2, leaving a phantom
   empty column and an under-filled height (the gap below the footer).
   100dvh tracks the visible viewport as the mobile URL bar shows/hides. */
@media (max-width: 1023.98px) {
  .admin-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: 100dvh;
    height: 100dvh;
  }
  /* Pin the height directly on the main column too, not just via the grid
     row — guarantees the flex column fills the viewport so the footer sits
     at the bottom even when a page's content is short. */
  .admin-main { grid-column: 1; height: 100dvh; }
}

/* ── License banner (non-blocking, top of page) ───────────────── */

.license-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.4;
}

.license-banner.is-invalid {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.license-banner.is-warning {
  color: var(--warning, #b45309);
  background: color-mix(in srgb, var(--warning, #b45309) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning, #b45309) 30%, transparent);
}

.license-banner-text {
  flex: 1;
  min-width: 0;
}

.license-banner-link {
  flex-shrink: 0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Demo-mode "Buy now" floating CTA — bottom-end corner, above content. */
.demo-buy-now {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.demo-buy-now:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  filter: brightness(1.05);
}
.demo-buy-now:active { transform: translateY(0); }
.demo-buy-now-label { line-height: 1; }

@media (max-width: 640px) {
  .demo-buy-now { inset-block-end: 16px; inset-inline-end: 16px; padding: 11px 15px; }
}
