/* ============================================================
   Base: reset, typography, app shell (topbar/brand). Minimalist,
   professional look built on the Altavia brand palette (deep
   green + beige) rather than a generic tech-SaaS look.
   ============================================================ */

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
::selection{ background: var(--brand-beige); color: var(--ink-900); }
a{ color: inherit; }

.app{ min-height: 100%; display: flex; flex-direction: column; }

/* ---------- Top bar ---------- */
.topbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: var(--brand-green-deep);
  color: var(--paper-0);
  box-shadow: var(--shadow-md);
  position: sticky; top: 0; z-index: 40;
}
.brand{ display: flex; align-items: center; gap: 12px; }
.brand-mark{
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-beige);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--brand-green-deep);
  flex-shrink: 0;
}
.brand-text .title{ font-size: 15px; font-weight: 700; letter-spacing: .2px; line-height: 1.2; }
.brand-text .subtitle{ font-size: 11.5px; color: var(--brand-beige); opacity: .8; letter-spacing: .3px; }
.topbar-actions{ display: flex; align-items: center; gap: 14px; }
.topbar-nav{ display: flex; align-items: center; gap: 4px; margin-left: 24px; }
.topbar-nav a{
  font-size: 13px; font-weight: 600; color: var(--paper-100); opacity: .75; padding: 8px 12px;
  border-radius: 8px; text-decoration: none; transition: background .15s ease, opacity .15s ease;
}
.topbar-nav a:hover, .topbar-nav a.active{ background: rgba(255,255,255,.1); opacity: 1; }
.user-chip{ font-size: 13px; color: var(--paper-100); opacity: .85; display: flex; align-items: center; gap: 10px; }
.user-chip .logout-link{ color: var(--st-followup-dot); text-decoration: none; font-weight: 600; opacity: 1; }
.user-chip .logout-link:hover{ text-decoration: underline; }

.theme-toggle{
  width: 44px; height: 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); position: relative; cursor: pointer; flex-shrink: 0;
  transition: background .2s ease;
}
.theme-toggle .knob{
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 0 1px 3px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
:root[data-theme="dark"] .theme-toggle .knob{ transform: translateX(18px); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .knob{ transform: translateX(18px); } }

.main{ flex: 1; padding: 26px 28px 60px; max-width: 1600px; width: 100%; margin: 0 auto; }

.footer-note{ text-align: center; font-size: 12px; color: var(--text-secondary); padding: 26px 10px 10px; }

@media (max-width: 640px){
  .main{ padding: 16px; }
  .topbar{ padding: 12px 16px; }
  .brand-text .subtitle{ display: none; }
  .topbar-nav{ display: none; }
}