/* Migraine Voice — app shell + auth layouts. */

/* Auth layout */
.auth-wrap { max-width: 420px; margin: 0 auto; padding: var(--space-7) var(--space-4); }
.auth-brand {
  font-family: var(--font-head); font-size: 2rem; font-weight: 700;
  color: var(--primary); text-align: center;
}
.auth-tagline { text-align: center; margin-bottom: var(--space-5); font-size: var(--text-base); }

/* App shell */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--sidebar-w); flex: none; background: var(--primary); color: var(--bg);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.app-sidebar-brand {
  padding: var(--space-5) var(--space-4) var(--space-4);
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: #fff;
}
.app-sidebar-brand span {
  display: block; font-family: var(--font-ui); font-size: var(--text-xs);
  color: var(--accent); font-weight: 500; margin-top: .2rem;
}
.app-nav { display: flex; flex-direction: column; gap: .15rem; padding: var(--space-2); flex: 1; overflow-y: auto; }
.app-nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: .65rem .8rem; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500;
  color: #D9CEDC; transition: background var(--transition), color var(--transition);
}
.app-nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.app-nav-item.is-active { background: var(--accent); color: var(--primary); font-weight: 600; }
.app-nav-item span { flex: 1; }
.app-nav-item .badge { flex: none; }
.app-sidebar-foot { padding: var(--space-3); border-top: 1px solid rgba(255, 255, 255, .1); }
.app-sidebar-user {
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--accent);
  margin: 0 0 var(--space-2); padding: 0 .3rem;
}
.app-sidebar-foot .btn-ghost { width: 100%; justify-content: center; color: #D9CEDC; border-color: rgba(255, 255, 255, .18); }
.app-sidebar-foot .btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { padding: var(--space-6); max-width: var(--content-max); width: 100%; margin: 0 auto; }

/* Mobile top bar */
.app-topbar {
  display: none; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--primary); color: #fff;
}
.app-menu-btn { background: none; border: 0; color: #fff; cursor: pointer; display: flex; padding: 0; }
.app-topbar-brand { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; }
.app-scrim { display: none; }

@media (max-width: 820px) {
  .app-shell { flex-direction: column; }
  .app-topbar { display: flex; }
  .app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; height: 100vh;
    transform: translateX(-100%); transition: transform var(--transition);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-content { padding: var(--space-4); }
  .app-scrim.is-open {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(34, 26, 36, .45);
  }
}