/* layout.css — page skeleton, app shell, grids, login hero */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* ── App shell: sidebar + content ───────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--color-bg-dark);
  color: var(--color-ink-white);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-8);
}

.sidebar__nav { display: flex; flex-direction: column; gap: var(--space-1); }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-card);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-body);
}
.sidebar__link i { font-size: 20px; }
.sidebar__link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.sidebar__link.is-active { color: #fff; background: rgba(255, 255, 255, 0.12); }

.sidebar__footer { margin-top: auto; padding-top: var(--space-5); }
.sidebar__user { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); margin-bottom: var(--space-3); word-break: break-all; }

/* Logout button: white outline on dark; inverts to a solid white pill on hover */
.sidebar__logout {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.sidebar__logout:hover {
  background: #fff;
  color: var(--color-ink-primary);
  border-color: #fff;
  opacity: 1;
}

.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8);
}

/* Page header */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.page-head__title h2 { margin-bottom: var(--space-1); }
.page-head__title p { color: var(--color-ink-muted); }

/* Grids */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.row--between { justify-content: space-between; align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* Two-pane editor (templates / compose) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-6);
  align-items: start;
}

/* ── Login hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg-dark);
  padding: var(--space-8);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.75) 100%);
}
.hero__content { position: relative; z-index: 3; width: 100%; max-width: 420px; }

/* Mobile-only chrome — hidden on desktop */
.mobile-bar, .mobile-dock { display: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { display: none; }

  /* Slim sticky top bar: brand + logout */
  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 30;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
  }

  .content__inner {
    padding: var(--space-5) var(--space-4);
    /* leave room for the floating dock */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Floating bottom navigation dock */
  .mobile-dock {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 40;
    padding: 6px;
    background: var(--color-bg-dark);
    border-radius: var(--radius-pill);
    max-width: calc(100% - 24px);
  }
  .dock__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-round);
    color: rgba(255, 255, 255, 0.65);
  }
  .dock__link i { font-size: 24px; }
  .dock__link.is-active { color: #fff; background: rgba(255, 255, 255, 0.16); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}