/* Stabilise Finance — layout.
 * Sidebar (256 px, collapsible to 60 px) + main content area.
 * No topbar — branding + theme toggle live in the sidebar.
 */

:root {
  --sidebar-width-expanded: 16rem;
  --sidebar-width-collapsed: 3.75rem;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width-expanded) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--transition);
}
html.sidebar-collapsed .app {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  grid-column: 1;
  background-color: var(--sidebar);
  color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--sidebar-width-expanded);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) 0 var(--space-2);
  display: flex;
  flex-direction: column;
  transition: width var(--transition);
}
html.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }

/* Brand row: mark + brand text + collapse button */
.sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: var(--space-3);
  min-height: 2.5rem;
}
.sidebar__brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  min-width: 0;
}
.sidebar__brand-link:hover { text-decoration: none; }
.sidebar__mark {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}
.sidebar__brand-text {
  color: var(--foreground);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__brand-text span { color: var(--primary); font-weight: 500; }

.sidebar__collapse {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 0;
}
.sidebar__collapse:hover { background-color: var(--muted); color: var(--foreground); }
.sidebar__collapse svg { width: 16px; height: 16px; }
.sidebar__collapse svg:nth-of-type(2) { display: none; }
html.sidebar-collapsed .sidebar__collapse svg:nth-of-type(1) { display: none; }
html.sidebar-collapsed .sidebar__collapse svg:nth-of-type(2) { display: inline; }

/* In collapsed mode, hide the brand text + entire collapse-button parent's text */
html.sidebar-collapsed .sidebar__brand-text { display: none; }
html.sidebar-collapsed .sidebar__brand { justify-content: center; padding-inline: var(--space-2); }
html.sidebar-collapsed .sidebar__brand-link { gap: 0; }

/* Local-dev notice */
.sidebar__notice {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-3);
}
html.sidebar-collapsed .sidebar__notice { display: none; }

/* Nav groups */
.sidebar__group {
  padding: 0 var(--space-2);
  margin-bottom: var(--space-3);
}
.sidebar__group-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  padding: var(--space-1) var(--space-3);
}
html.sidebar-collapsed .sidebar__group-title { display: none; }

.sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--sidebar-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
  position: relative;
}
.sidebar__nav a:hover  { background-color: var(--muted); text-decoration: none; }
.sidebar__nav a.active {
  background-color: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}
.sidebar__nav .nav-icon {
  flex-shrink: 0;
  color: var(--muted-foreground);
}
.sidebar__nav a.active .nav-icon,
.sidebar__nav a:hover .nav-icon { color: var(--foreground); }
.sidebar__nav .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.sidebar-collapsed .sidebar__nav a { justify-content: center; padding-inline: var(--space-2); }
html.sidebar-collapsed .nav-label { display: none; }

/* Footer (theme toggle + signed in + sign out) */
.sidebar__footer {
  margin-top: auto;
  padding: var(--space-2) var(--space-2) var(--space-2);
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sidebar__action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--sidebar-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.sidebar__action:hover { background-color: var(--muted); }
.sidebar__action .nav-icon, .sidebar__action svg { flex-shrink: 0; color: var(--muted-foreground); }
.sidebar__action:hover svg { color: var(--foreground); }
.theme-icon-wrap { display: inline-flex; align-items: center; }
.theme-icon-wrap svg { color: var(--muted-foreground); }
html.sidebar-collapsed .sidebar__action { justify-content: center; padding-inline: var(--space-2); }

.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.sidebar__user-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--foreground);
  font-weight: 500;
}
.sidebar__user form { margin: 0; }
.sidebar__user .sidebar__action { width: auto; padding: var(--space-1) var(--space-2); }
html.sidebar-collapsed .sidebar__user { padding: 0; flex-direction: column; }
html.sidebar-collapsed .sidebar__user .sidebar__action { padding: var(--space-2); }

/* ── Main column ─────────────────────────────────────────────── */
.main {
  grid-column: 2;
  margin-inline-start: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Page wrapper ────────────────────────────────────────────── */
.page {
  padding: var(--space-6);
  max-width: var(--page-max);
  margin: 0 auto;
  width: 100%;
}
.page--wide {
  max-width: none;
  padding: var(--space-5) var(--space-6);
}

.page-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.page-header__title { flex: 1; min-width: 0; }
.page-header__title h1 { margin: 0; }
.page-header__title .subtitle {
  margin-top: var(--space-1);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}
.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Footer ──────────────────────────────────────────────────── */
.app-footer {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  padding: var(--space-6);
}

/* ── Auth page (no sidebar) ──────────────────────────────────── */
body.auth-page {
  background: linear-gradient(180deg, #0f1a2b 0%, #14181f 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.auth-page .app-footer {
  color: rgba(255, 255, 255, 0.5);
  position: fixed;
  inset-inline: 0;
  bottom: 0;
}
.auth-card {
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 22rem;
  box-shadow: var(--shadow-lg);
}
.auth-card h1 {
  font-size: var(--text-xl);
  font-family: var(--font-heading);
  margin-bottom: var(--space-1);
}
.auth-card h1 span { color: var(--primary); font-weight: 500; }
.auth-card .subtitle {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

/* "or" divider between passkey button and password form */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-5) 0;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* "First time? Set up your account." footnote */
.auth-meta {
  margin-top: var(--space-5);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  text-align: center;
}
.auth-meta a { color: var(--primary); }

/* Setup-wizard step breadcrumb */
.auth-steps {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.auth-steps li {
  flex: 1;
  text-align: center;
  padding: var(--space-1) 0;
  border-bottom: 2px solid var(--border);
  letter-spacing: 0.02em;
}
.auth-steps li.is-current {
  color: var(--foreground);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.auth-steps li.is-done {
  color: var(--muted-foreground);
  border-bottom-color: var(--primary);
}

/* TOTP QR + secret fallback */
.totp-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.totp-qr img {
  width: 200px;
  height: 200px;
  background: white;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.totp-fallback {
  width: 100%;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.totp-fallback summary { cursor: pointer; }
.totp-secret {
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--muted);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  word-break: break-all;
  user-select: all;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  html.sidebar-collapsed .app { grid-template-columns: 1fr; }
  .sidebar { position: static; width: 100%; height: auto; }
  .main { grid-column: 1; }
  .page { padding: var(--space-4); }
}