/* ============================================================
   Top Navigation Shell (CR-8)
   Sift-inspired horizontal header nav with dropdown section menus.
   Adopts Sift's LAYOUT + interaction pattern; keeps the product's
   purple brand palette (brand direction wins over the sampled look).
   Fully responsive: desktop top-nav -> mobile hamburger offcanvas.
   Scoped file; does not override style.css except the shell layout.
   ============================================================ */

:root {
  --tn-header-h: 56px;
  /* Centered content column (match Sift sample) */
  --shell-width: 76rem;
  --shell-gutter: 1.5rem;
  --tn-radius: 8px;
  --tn-radius-sm: 6px;
  --tn-shadow-menu: 0 10px 30px rgba(15, 8, 40, 0.18);
  --tn-z-header: 1000;
  --tn-z-menu: 1100;
  --tn-z-mobile: 1200;
}

/* ---- Shell layout: header on top, content below (was sidebar) ---- */
body:has(.app-shell) { /* no-op guard for browsers supporting :has */ }

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

/* ---- Header bar ---- */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--tn-z-header);
  display: flex;
  flex-direction: column;
  background: var(--surface-color, #ffffff);
  border-bottom: 1px solid var(--border-color, #e3e0ea);
}
/* Row 1: brand (left) + tools: search, help, account, tenant (right) */
.app-header-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--tn-header-h);
  padding: 0 calc(var(--shell-gutter) + max(0px, (100% - var(--shell-width)) / 2));
}
/* Row 2: primary nav menu, full width, its own line */
.app-header .app-nav {
  padding: 0 calc(var(--shell-gutter) + max(0px, (100% - var(--shell-width)) / 2));
  border-top: 1px solid var(--border-color, #ece9f3);
  min-height: 44px;
}

.app-header .app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-header .app-brand .brand-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.app-header .app-brand .brand-text-full { display: inline; }
.app-header .app-brand .brand-text-short { display: none; }

/* ---- Primary nav (section menus) ---- */
.app-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.nav-section { position: relative; }

.nav-section-btn,
.app-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 36px;
  padding: 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #5b5766);
  background: transparent;
  border: 0;
  border-radius: var(--tn-radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.nav-section-btn:hover,
.app-nav-link:hover {
  color: var(--text-primary, #1a1a1a);
  background: var(--bg-surface-hover, #f0eef8);
}
.nav-section-btn:focus-visible,
.app-nav-link:focus-visible,
.nav-menu-item:focus-visible,
.header-action-btn:focus-visible {
  outline: 2px solid var(--brand-accent, #F5A623);
  outline-offset: 2px;
}
.nav-section-btn[aria-expanded="true"],
.nav-section.is-active > .nav-section-btn,
.app-nav-link.is-active {
  color: #ffffff;
  background: var(--brand-primary, #6320e8);
}
.nav-caret {
  width: 11px;
  height: 11px;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.nav-section-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* ---- Dropdown menu ---- */
.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  max-width: min(320px, calc(100vw - 24px));
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--surface-color, #ffffff);
  border: 1px solid var(--border-color, #e3e0ea);
  border-radius: var(--tn-radius);
  box-shadow: var(--tn-shadow-menu);
  z-index: var(--tn-z-menu);
}
.nav-menu[hidden] { display: none; }

.nav-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  text-decoration: none;
  border-radius: var(--tn-radius-sm);
  border-left: 2px solid transparent;
}
.nav-menu-item:hover,
.nav-menu-item:focus-visible {
  background: var(--bg-surface-hover, #f0eef8);
  outline: none;
}
.nav-menu-item.active {
  border-left-color: var(--brand-primary, #6320e8);
  background: var(--bg-surface-hover, #f0eef8);
  font-weight: 600;
}
.nav-menu-item svg { flex-shrink: 0; opacity: 0.75; }
.nav-menu-item .nav-ext-icon { margin-left: auto; opacity: 0.5; }

/* ---- Right-side header actions ---- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}
.header-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  color: var(--text-secondary, #5b5766);
  background: transparent;
  border: 0;
  border-radius: var(--tn-radius-sm);
  cursor: pointer;
}
.header-action-btn:hover {
  color: var(--text-primary, #1a1a1a);
  background: var(--bg-surface-hover, #f0eef8);
}

/* Account menu reuses the dropdown mechanics */
.account-menu { position: relative; }
.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0.4rem 0 0.4rem;
  background: transparent;
  border: 0;
  border-radius: var(--tn-radius-sm);
  cursor: pointer;
  color: var(--text-primary, #1a1a1a);
}
.account-btn:hover { background: var(--bg-surface-hover, #f0eef8); }
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-primary, #6320e8);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.account-name { font-size: 0.82rem; font-weight: 600; }
.account-menu .nav-menu { right: 0; left: auto; }

/* ---- Mobile hamburger (hidden on desktop) ---- */
.nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  color: var(--text-primary, #1a1a1a);
  background: transparent;
  border: 0;
  border-radius: var(--tn-radius-sm);
  cursor: pointer;
}
.nav-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 5, 19, 0.45);
  z-index: var(--tn-z-mobile);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.nav-mobile-backdrop.open { opacity: 1; pointer-events: auto; }

/* ---- Main content region ---- */
.app-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--shell-width);
  margin: 0 auto;              /* centered: space on left and right */
  padding: 0 var(--shell-gutter);
}
.content-body { padding: 1.25rem 0 2rem; }

/* ===================== RESPONSIVE ===================== */

/* Tablet: shorten brand text, tighten nav */
@media (max-width: 1024px) {
  .app-header .app-brand .brand-text-full { display: none; }
  .app-header .app-brand .brand-text-short { display: inline; }
  .app-nav { gap: 0.05rem; }
  .nav-section-btn, .app-nav-link { padding: 0 0.45rem; }
  .account-name { display: none; }
}

/* Mobile: collapse nav into an off-canvas panel behind a hamburger */
@media (max-width: 768px) {
  .nav-mobile-toggle { display: inline-flex; }

  .app-header .app-nav,
  .app-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    margin: 0;
    padding: calc(var(--tn-header-h) + 0.5rem) 0.75rem 1.5rem;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.1rem;
    background: var(--surface-color, #ffffff);
    border-top: 0;
    border-right: 1px solid var(--border-color, #e3e0ea);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: calc(var(--tn-z-mobile) + 1);
  }
  .app-nav.open { transform: translateX(0); }

  .nav-section { position: static; }

  /* Section buttons become full-width accordion headers */
  .nav-section-btn,
  .app-nav-link {
    width: 100%;
    height: 48px;             /* >= 44px touch target */
    justify-content: space-between;
    padding: 0 0.85rem;
    font-size: 0.95rem;
  }

  /* Dropdowns become inline accordions (static flow, not absolute) */
  .nav-menu {
    position: static;
    min-width: 0;
    max-width: none;
    margin: 0.1rem 0 0.35rem;
    padding: 0.15rem 0 0.15rem 0.6rem;
    border: 0;
    border-left: 2px solid var(--border-color, #e3e0ea);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav-menu-item { min-height: 44px; }

  .account-name { display: inline; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .app-nav, .nav-mobile-backdrop, .nav-caret { transition: none; }
}

/* ---- Page title bar (inside main, replaces old content-header title) ---- */
.page-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 0 0;
}
.page-titlebar .page-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
}
.page-title-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  :root { --shell-gutter: 1rem; }
  .page-titlebar { padding: 0.85rem 0 0; }
  .page-titlebar .page-title { font-size: 1.2rem; }
  .content-body { padding: 1rem 0; }
}

/* ============================================================
   CR-9: Kindo brand lockup + Sift-style account menu
   ============================================================ */

/* Brand lockup: Kindo mark (theme-swapping) + Kindo wordmark + product name */
.app-brand .brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.app-brand .brand-mark {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.app-brand .brand-mark img { display: block; width: 26px; height: 26px; }
/* Theme swap: show light mark by default, dark mark under [data-theme="dark"] */
.app-brand .brand-mark .brand-mark-dark { display: none; }
:root[data-theme="dark"] .app-brand .brand-mark .brand-mark-light { display: none; }
:root[data-theme="dark"] .app-brand .brand-mark .brand-mark-dark { display: block; }

.app-brand .brand-wordmark {
  display: block;
  height: 16px;
  width: 56px;            /* viewBox 2603x747 at 16px tall -> ~55.7px wide */
  flex-shrink: 0;
  overflow: visible;
  color: var(--text-primary, #1a1a1a);
}
.app-brand .brand-sep {
  width: 1px;
  height: 18px;
  background: var(--border-color, #d9d6e0);
  margin: 0 0.15rem;
  flex-shrink: 0;
}
.app-brand .brand-text-full,
.app-brand .brand-text-short {
  font-weight: 650;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--text-primary, #1a1a1a);
  white-space: nowrap;
}
.app-brand .brand-text-short { display: none; }

/* Sift-style tool button (account trigger) */
.account-btn.app-tool {
  color: var(--text-secondary, #5b5766);
  padding: 0.3rem 0.45rem;
  gap: 0.3rem;
}
.account-btn.app-tool:hover,
.account-btn.app-tool[aria-expanded="true"] {
  color: var(--text-primary, #1a1a1a);
  background: var(--bg-surface-hover, #f0eef8);
}
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-color, #d9d6e0);
  color: inherit;
  flex-shrink: 0;
}
.account-btn.app-tool[aria-expanded="true"] .account-avatar,
.account-btn.app-tool:hover .account-avatar {
  border-color: var(--brand-primary, #6320e8);
  color: var(--brand-primary, #6320e8);
}

/* Account popover (who / appearance / actions) */
.account-popover {
  padding: 0.5rem;
  min-width: 250px;
}
.account-who {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem 0.55rem;
}
.account-who-name { font-size: 0.9rem; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.account-who-role {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--brand-primary, #6320e8);
}
.account-section {
  padding: 0.35rem 0.25rem;
  border-top: 1px solid var(--border-color, #ece9f3);
}
.account-section-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #8884);
  color: var(--text-secondary, #5b5766);
  padding: 0.1rem 0.35rem 0.3rem;
}
/* Appearance segmented control (Sift-style: Auto / Light / Dark) */
.theme-picker {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.1rem;
}
.theme-option {
  flex: 1;
  padding: 0.35rem 0.1rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text-secondary, #5b5766);
  background: var(--bg-surface, transparent);
  border: 1px solid var(--border-color, #d9d6e0);
  border-radius: var(--tn-radius-sm);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.theme-option:hover {
  color: var(--text-primary, #1a1a1a);
  background: var(--bg-surface-hover, #f0eef8);
  border-color: var(--brand-primary, #6320e8);
}
.theme-option:focus-visible {
  outline: 2px solid var(--brand-accent, #F5A623);
  outline-offset: 2px;
}
.theme-option-on,
.theme-option[aria-pressed="true"] {
  color: var(--brand-primary, #6320e8);
  border-color: var(--brand-primary, #6320e8);
  background: color-mix(in srgb, var(--brand-primary, #6320e8) 12%, transparent);
  font-weight: 600;
}
:root[data-theme="dark"] .theme-option-on,
:root[data-theme="dark"] .theme-option[aria-pressed="true"] {
  color: var(--brand-primary-a11y, #9e70f8);
  border-color: var(--brand-primary-a11y, #9e70f8);
  background: color-mix(in srgb, var(--brand-primary-a11y, #9e70f8) 18%, transparent);
}
.theme-following {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--text-secondary, #5b5766);
  text-transform: capitalize;
}
.account-actions { display: flex; flex-direction: column; gap: 0.1rem; }
.account-signout { color: var(--danger-color, #b91c1c); }
.account-signout:hover { background: rgba(185, 28, 28, 0.08); }

@media (max-width: 1024px) {
  .app-brand .brand-text-full { display: none; }
  .app-brand .brand-text-short { display: inline; }
}
@media (max-width: 768px) {
  .app-brand .brand-sep,
  .app-brand .brand-text-full,
  .app-brand .brand-text-short { display: none; }
}

/* CR-12: ensure the tenant switcher dropdown stacks ABOVE the nav section
   menus (--tn-z-menu: 1100) so it is not hidden behind 'Resources'. */
.tenant-switcher { position: relative; }
.tenant-switcher-dropdown { z-index: 1150; }

/* ============================================================
   CR-16: Help drawer must sit ABOVE the sticky top-nav header.
   The two-row header is z-index var(--tn-z-header)=1000; the help
   drawer in style.css was z-index:200, so the header occluded the
   drawer's top. Raise the whole drawer (overlay dims the header too,
   panel covers full height) above the mobile overlay (1200).
   topnav.css loads after style.css, so this override wins.
   ============================================================ */
.help-drawer {
  z-index: 1300;
}
.help-drawer-panel {
  /* full viewport height, over the header, flush to the top-right */
  top: 0;
  height: 100%;
}