/* ============================================================
   layout.css — the app shell. Gradient header instead of flat
   white gives instant brand identity; sidebar nav items get a
   left accent bar + tinted icon chip when active, instead of a
   plain background tint.
   ============================================================ */
#app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* ── Top header ──────────────────────────────────────────── */
.app-header {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-5);
  background: var(--gradient-brand);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-brand);
}
.app-header .brand {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
  color: #fff; display: flex; align-items: center; gap: 8px;
}
.app-header .brand::before {
  content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--color-accent);
  display: inline-block; transform: rotate(45deg);
}
.app-header .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.2);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  cursor: pointer;
}
.app-header span { color: rgba(255,255,255,0.9) !important; }

/* ── Mobile hamburger button (header) ───────────────────── */
.mobile-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: none; border: none;
  color: #fff; cursor: pointer; padding: 0; margin-right: 10px; flex-shrink: 0;
}
.mobile-menu-btn svg { width: 22px; height: 22px; }
@media (min-width: 1024px) {
  /* The sidebar covers navigation at this width — no need for the
     hamburger once it's visible. */
  .mobile-menu-btn { display: none; }
}

/* ── Body: sidebar (desktop) + content ──────────────────── */
.app-body { flex: 1; display: flex; }
.app-sidebar { display: none; }
@media (min-width: 1024px) {
  .app-sidebar {
    display: block; width: var(--sidebar-w); flex-shrink: 0;
    background: var(--color-bg-alt); border-right: 1px solid var(--color-border);
    padding: var(--sp-4) var(--sp-2);
  }
  .sidebar-section-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-text-dim); padding: var(--sp-3) var(--sp-3) var(--sp-1);
  }
  .app-sidebar .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 7px;
    color: #4A4560; font-weight: 600; font-size: 13.5px; margin-bottom: 1px;
    border-left: 3px solid transparent; transition: all 0.12s ease;
  }
  .app-sidebar .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
  .app-sidebar .nav-item:hover { background: rgba(255,255,255,0.7); text-decoration: none; color: var(--color-text); }
  .app-sidebar .nav-item.active {
    background: var(--color-surface); color: var(--color-primary);
    border-left-color: var(--color-primary); font-weight: 700;
    box-shadow: var(--shadow-sm);
  }
  .app-sidebar .nav-item.active svg { opacity: 1; }
}
#content {
  flex: 1; min-width: 0;
  padding: var(--sp-4);
  padding-bottom: calc(var(--bottomnav-h) + var(--sp-5));
}
@media (min-width: 1024px) {
  #content { padding: var(--sp-6); padding-bottom: var(--sp-6); max-width: 1140px; margin: 0 auto; width: 100%; }
}

/* ── Bottom tab bar (mobile only) ───────────────────────── */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottomnav-h);
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  display: flex; z-index: 100; box-shadow: 0 -4px 16px rgba(28,21,51,0.06);
}
@media (min-width: 1024px) { .bottom-nav { display: none; } }
.bottom-nav .bnav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 11px; color: var(--color-text-dim); font-weight: 700;
}
.bottom-nav .bnav-item.active { color: var(--color-primary); }
.bottom-nav .bnav-item.active svg { filter: drop-shadow(0 2px 4px rgba(76,58,227,0.3)); }
.bottom-nav .bnav-item svg { width: 22px; height: 22px; }

/* ── Mobile hamburger menu overlay ──────────────────────── */
/* Reuses the exact same nav content as the desktop sidebar, so nothing
   ever needs separate curation between the two — every route reachable
   on desktop is reachable here too, including items the bottom nav has
   no room for (Billing, Templates, Profile, Backup, Trash) and Log out,
   which previously had no path to it at all below 1024px. */
.mobile-nav-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(28,21,51,0.55);
  display: flex;
}
@media (min-width: 1024px) {
  /* Never show alongside the desktop sidebar, regardless of open/closed
     toggle state — avoids needing to track viewport width in JS. */
  .mobile-nav-overlay { display: none !important; }
}
.mobile-nav-panel {
  width: 82%; max-width: 300px; height: 100%;
  background: var(--color-surface);
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-2);
  box-shadow: var(--shadow-md);
}
.mobile-nav-panel .mobile-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
}
.mobile-nav-panel .mobile-nav-close {
  background: none; border: none; color: var(--color-text-dim); cursor: pointer;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.mobile-nav-panel .sidebar-section-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-dim); padding: var(--sp-3) var(--sp-3) var(--sp-1);
}
.mobile-nav-panel .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 7px;
  color: #4A4560; font-weight: 600; font-size: 14px; margin-bottom: 1px;
  border-left: 3px solid transparent;
}
.mobile-nav-panel .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; }
.mobile-nav-panel .nav-item:hover,
.mobile-nav-panel .nav-item.active {
  background: var(--color-bg-alt); color: var(--color-primary); border-left-color: var(--color-primary);
}