/* Tervo — layout · Navy + Teal (v2)
   The app header is now the NAVY brand bar (white wordmark, teal active
   underline). Mark the current page with aria-current="page" on its nav
   <a>. No HTML changes required — the brand mark is injected via CSS. */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 0 32px;
  background: var(--color-brand);
  border-bottom: 1px solid var(--brand-hairline);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-on-brand);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Hexagonal Tervo mark for dark surfaces: teal hexagon, navy inner cut */
.app-brand::before {
  content: "";
  width: 26px;
  height: 26px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4 L40.5 13.5 V32.5 L24 42 L7.5 32.5 V13.5 Z' fill='%233f938c'/%3E%3Cpath d='M24 14.5 L31 18.5 V26.5 L24 30.5 L17 26.5 V18.5 Z' fill='%230e1c30'/%3E%3C/svg%3E") center / contain no-repeat;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-on-brand-muted);
  font-size: 0.95rem;
}

.app-nav a {
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.app-nav a:hover { color: var(--color-on-brand); }
.app-nav a[aria-current="page"] {
  color: var(--color-on-brand);
  font-weight: 600;
  border-bottom-color: var(--teal-bright);
}

/* Logout button sits on navy — make the secondary button readable on dark */
.app-header .btn-secondary {
  color: var(--color-on-brand);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--brand-hairline);
}
.app-header .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.page-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 32px auto;
}

.page-title { margin-bottom: 24px; }
.page-title h1 { margin: 0 0 8px; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
.page-title p { max-width: 720px; margin: 0; color: var(--color-muted); }

/* ---- Login ---- */
.login-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.login-panel { width: min(420px, 100%); }

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

/* App-icon lockup: teal tile, white hexagon, teal inner */
.login-logo {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 11px;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 8 L38 16.5 V31.5 L24 40 L10 31.5 V16.5 Z' fill='%23ffffff'/%3E%3Cpath d='M24 17 L31 21 V29 L24 33 L17 29 V21 Z' fill='%231f5f5b'/%3E%3C/svg%3E") center / 30px no-repeat;
}

.login-kicker {
  margin: 3px 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---- App footer ---- */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1120px, calc(100% - 32px));
  margin: 24px auto 0;
  padding: 18px 0 28px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  font-size: 0.84rem;
}

.app-footer strong {
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .app-header { align-items: flex-start; flex-direction: column; padding: 16px; }
  .app-nav { flex-wrap: wrap; }
  .app-footer { align-items: flex-start; flex-direction: column; }
}