/* ============================================================================
 * Project Onboarding UI — header pill, slide-over drawer, welcome modal.
 *
 * Design goals:
 *   - Pill fits in with the existing nav controls (height/spacing).
 *   - Progress ring is a CSS conic-gradient driven by --pct (0..100).
 *   - Drawer is fixed-position, slides in from the right, dismissable.
 *   - Light & dark theme support via :root + html[data-theme="dark"].
 * ============================================================================ */


/* ---------------------------------------------------------------------------
 * Theme variables
 * --------------------------------------------------------------------------- */
:root {
  --onb-accent: #2563eb;
  --onb-accent-soft: rgba(37, 99, 235, 0.12);
  --onb-accent-border: rgba(37, 99, 235, 0.32);
  --onb-success: #16a34a;
  --onb-success-soft: rgba(22, 163, 74, 0.14);
  --onb-warn: #f59e0b;
  --onb-ring-bg: rgba(0, 0, 0, 0.10);
  --onb-text: #1f2937;
  --onb-text-muted: #6b7280;
  --onb-card-bg: #ffffff;
  --onb-card-border: rgba(0, 0, 0, 0.08);
  --onb-row-bg: #ffffff;
  --onb-row-bg-hover: #f9fafb;
  --onb-drawer-bg: #ffffff;
  --onb-drawer-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
}

html[data-theme="dark"] {
  --onb-accent: #6ea8fe;
  --onb-accent-soft: rgba(110, 168, 254, 0.18);
  --onb-accent-border: rgba(110, 168, 254, 0.42);
  --onb-success: #4ade80;
  --onb-success-soft: rgba(74, 222, 128, 0.18);
  --onb-warn: #fbbf24;
  --onb-ring-bg: rgba(255, 255, 255, 0.10);
  --onb-text: #e5e7eb;
  --onb-text-muted: #9ca3af;
  --onb-card-bg: #1f2937;
  --onb-card-border: rgba(255, 255, 255, 0.08);
  --onb-row-bg: #1f2937;
  --onb-row-bg-hover: #273241;
  --onb-drawer-bg: #111827;
  --onb-drawer-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}


/* ---------------------------------------------------------------------------
 * Header pill
 *
 * Critical UI element: stays visible whenever a project has incomplete
 * setup tasks. data-nav-priority-rank=210 means it only collapses to the
 * overflow menu AFTER weather, QR invite, helper search, Guide Me, Home,
 * and the company display have all collapsed first. If it does end up in
 * the overflow menu, the rules at the bottom of this file restore the
 * full label so the user can read it clearly.
 * --------------------------------------------------------------------------- */
.onboarding-pill {
  --pct: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  margin-right: 0.5rem;
  border: 1px solid var(--onb-accent-border);
  border-radius: 999px;
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  /* Belt-and-suspenders: never let other nav siblings overlap the pill,
     and reserve enough min-width for the ring + 3-digit percentage so the
     ring can't clip if a parent flex container under-allocates space. */
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  min-width: 2.2rem;
  white-space: nowrap;
}
.onboarding-pill:hover { filter: brightness(1.06); }
.onboarding-pill:active { transform: translateY(1px); }
.onboarding-pill[hidden] { display: none !important; }

.onboarding-pill.is-complete {
  background: var(--onb-success-soft);
  border-color: var(--onb-success);
  color: var(--onb-success);
}

.onboarding-pill-ring {
  --size: 1.85rem;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(currentColor calc(var(--pct) * 1%), var(--onb-ring-bg) 0);
  flex: none;
}
.onboarding-pill-ring-inner {
  background: var(--onb-card-bg);
  border-radius: 50%;
  width: calc(var(--size) - 0.35rem);
  height: calc(var(--size) - 0.35rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.onboarding-pill-pct {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--onb-text);
}
html[data-theme="dark"] .onboarding-pill-pct { color: #e5e7eb; }

.onboarding-pill-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.onboarding-pill-title { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; }
.onboarding-pill-sub { font-size: 0.7rem; opacity: 0.85; font-weight: 600; }

.onboarding-pill.is-pulse { animation: onb-pulse 1.6s ease-in-out 0s 2; }
@keyframes onb-pulse {
  0%   { box-shadow: 0 0 0 0 var(--onb-accent-soft); }
  50%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}


/* ---------------------------------------------------------------------------
 * Slide-over drawer
 *
 * Drawer + dim overlay anchor to ``--onboarding-top-offset`` — a dedicated
 * variable owned by this module so we don't fight with page-chrome.css
 * (which pins ``--page-chrome-navbar-offset`` to 56px = exact nav height,
 * leaving no breathing room and clipping the drawer's title bar behind
 * the nav's bottom border).
 *
 * Default ``64px`` = 56px ``.top-nav`` height + 8px clearance. On mobile
 * the nav switches to ``height: auto; flex-wrap: wrap`` so it can grow
 * taller; ``onboarding.js`` re-measures the live nav and rewrites this
 * variable just before the drawer slides in.
 *
 * The drawer footer reserves ~80px on the right so its Recheck / Snooze
 * buttons clear the always-on AI chat icon (``.floating-chat-icon`` is
 * fixed at ``right: 20px; width: 50px``, taking the bottom-right ~70px
 * of any drawer that touches the viewport's right edge).
 * --------------------------------------------------------------------------- */
:root {
  --onboarding-top-offset: 64px;
  --onboarding-footer-right-clear: 80px;
}

.onboarding-drawer-overlay {
  position: fixed;
  top: var(--onboarding-top-offset, 64px);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 1080;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.onboarding-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.onboarding-drawer {
  position: fixed;
  top: var(--onboarding-top-offset, 64px);
  right: 0;
  bottom: 0;
  height: auto;                    /* implicit: 100vh − top offset */
  width: min(440px, 96vw);
  background: var(--onb-drawer-bg);
  color: var(--onb-text);
  z-index: 1090;
  box-shadow: var(--onb-drawer-shadow);
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform 0.25s ease;
  border-left: 1px solid var(--onb-card-border);
  border-top: 1px solid var(--onb-card-border);
}
.onboarding-drawer.is-open { transform: translateX(0); }
.onboarding-drawer[hidden] { display: flex; }

.onboarding-drawer-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--onb-card-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.onboarding-drawer-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.onboarding-drawer-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--onb-text-muted);
}
.onboarding-drawer-close {
  background: transparent;
  border: 0;
  font-size: 1.15rem;
  color: var(--onb-text-muted);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
}
.onboarding-drawer-close:hover { background: var(--onb-row-bg-hover); color: var(--onb-text); }

.onboarding-drawer-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--onb-card-border);
  padding: 0 0.5rem;
  background: var(--onb-row-bg);
}
.onboarding-drawer-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--onb-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.onboarding-drawer-tab.active {
  color: var(--onb-accent);
  border-bottom-color: var(--onb-accent);
}
.onboarding-drawer-tab-count {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--onb-row-bg-hover);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  color: var(--onb-text-muted);
}
.onboarding-drawer-tab.active .onboarding-drawer-tab-count {
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
}

.onboarding-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.75rem 0.75rem 1rem;
}
.onboarding-drawer-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--onb-text-muted);
}

.onboarding-drawer-footer {
  /* Right padding is bumped to var(--onboarding-footer-right-clear) so the
     Recheck / Snooze buttons don't sit underneath the always-on AI chat
     icon (.floating-chat-icon, fixed bottom-right at z-index 10050 — well
     above the drawer's 1090). 1.25rem on the left keeps visual balance
     with the rest of the drawer's column gutter. */
  padding: 0.75rem var(--onboarding-footer-right-clear, 80px) 0.75rem 1.25rem;
  border-top: 1px solid var(--onb-card-border);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  background: var(--onb-row-bg);
}


/* ---------------------------------------------------------------------------
 * Step card (rendered by JS into the drawer body)
 * --------------------------------------------------------------------------- */
.onb-step {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  background: var(--onb-row-bg);
  border: 1px solid var(--onb-card-border);
  border-radius: 10px;
  margin-bottom: 0.55rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.onb-step:hover { background: var(--onb-row-bg-hover); }
.onb-step.is-complete { border-color: var(--onb-success); background: var(--onb-success-soft); }

.onb-step-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.onb-step.is-complete .onb-step-icon { background: var(--onb-success); color: #fff; }

.onb-step-body { flex: 1 1 auto; min-width: 0; }
.onb-step-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--onb-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.onb-step-label .onb-step-status-pill {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--onb-row-bg-hover);
  color: var(--onb-text-muted);
}
.onb-step.is-complete .onb-step-status-pill {
  background: var(--onb-success);
  color: #fff;
}
.onb-step-recently {
  background: var(--onb-warn);
  color: #fff !important;
}

.onb-step-desc {
  font-size: 0.825rem;
  color: var(--onb-text-muted);
  margin: 0.2rem 0 0.45rem;
  line-height: 1.35;
}
.onb-step-why {
  font-size: 0.78rem;
  color: var(--onb-text-muted);
  margin: 0.1rem 0 0.45rem;
  font-style: italic;
  opacity: 0.85;
}
.onb-step-hint {
  font-size: 0.78rem;
  color: var(--onb-text-muted);
  margin: 0.1rem 0 0.45rem;
}
.onb-step-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.onb-step-go {
  appearance: none;
  border: 0;
  background: var(--onb-accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
}
.onb-step-go:hover { filter: brightness(1.07); }
.onb-step.is-complete .onb-step-go { background: var(--onb-success); }
.onb-step-locked {
  font-size: 0.72rem;
  color: var(--onb-text-muted);
  font-style: italic;
}


/* ---------------------------------------------------------------------------
 * Banner (visible in chat or near top of the page) — currently rendered
 * inside the welcome modal lead. Kept here for future inline banner use.
 * --------------------------------------------------------------------------- */
.onb-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
  border: 1px solid var(--onb-accent-border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.onb-banner .onb-banner-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.8;
}
.onb-banner .onb-banner-close:hover { opacity: 1; }


/* ---------------------------------------------------------------------------
 * Welcome modal
 * --------------------------------------------------------------------------- */
.onboarding-welcome-content {
  background: var(--onb-drawer-bg);
  color: var(--onb-text);
}
html[data-theme="dark"] .onboarding-welcome-content .modal-header,
html[data-theme="dark"] .onboarding-welcome-content .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}
.onboarding-welcome-lead {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.onboarding-welcome-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.4rem;
}
.onboarding-welcome-points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--onb-row-bg);
  border: 1px solid var(--onb-card-border);
  border-radius: 8px;
  font-size: 0.9rem;
}
.onboarding-welcome-points li.is-complete { opacity: 0.75; }
.onboarding-welcome-points li .badge-ok {
  color: var(--onb-success);
}

/* Three-pillars list shown in the welcome modal. The pillar list is a
   static "lay of the land" summary — Project Settings, Employees,
   Material Catalogue — so users see the system's foundational shape
   before they dive into the full per-step checklist. The icon column
   stays a fixed width so the wrapped descriptions align cleanly. */
.onboarding-welcome-pillars {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.55rem;
}
.onboarding-welcome-pillar {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: var(--onb-row-bg);
  border: 1px solid var(--onb-card-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.onboarding-welcome-pillar.is-complete {
  border-color: var(--onb-success);
  background: var(--onb-success-soft);
}
.onboarding-welcome-pillar-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--onb-accent-soft);
  color: var(--onb-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex: 0 0 auto;
}
.onboarding-welcome-pillar.is-complete .onboarding-welcome-pillar-icon {
  background: var(--onb-success);
  color: #fff;
}
.onboarding-welcome-pillar-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.92rem;
  line-height: 1.35;
}
.onboarding-welcome-pillar-body strong { font-weight: 700; }
.onboarding-welcome-pillar-body span {
  color: var(--onb-text-muted);
  font-size: 0.86rem;
}

.onboarding-welcome-foot { color: var(--onb-text-muted); font-size: 0.85rem; margin-bottom: 0; }


/* ---------------------------------------------------------------------------
 * Empty states
 * --------------------------------------------------------------------------- */
.onb-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--onb-text-muted);
  font-size: 0.9rem;
}
.onb-empty .onb-empty-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.4rem;
  color: var(--onb-success);
}


/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Pill rendering shrinks in stages as horizontal space tightens:
 *
 *   ≥ 1200px ............ full pill: ring + "Project Setup" + "X of Y done"
 *   1100–1199px ......... drop the sub-label ("X of Y done"); keep title
 *   900–1099px .......... drop the title; keep the ring + percentage only
 *   ≤ 899px ............. ring + percentage, slightly tighter padding
 *
 * `body.nav-compact` is toggled by the top-nav overflow logic when items
 * have been pushed into the overflow menu — we mirror the same compact
 * rendering even on wider physical viewports so the pill never widens
 * back out after compaction has started.
 * --------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .onboarding-pill .onboarding-pill-sub { display: none; }
}
@media (max-width: 1099px) {
  .onboarding-pill .onboarding-pill-title { display: none; }
  .onboarding-pill { padding: 0.3rem 0.55rem 0.3rem 0.35rem; gap: 0.35rem; }
}
@media (max-width: 899px) {
  .onboarding-pill { padding: 0.25rem 0.45rem 0.25rem 0.3rem; }
}
@media (max-width: 540px) {
  .onboarding-drawer { width: 100vw; }
}

/* Same compact rendering when the header has shoved items into the
   overflow menu — keeps the pill from re-expanding into the row. */
body.nav-compact .onboarding-pill .onboarding-pill-sub,
body.nav-super-compact .onboarding-pill .onboarding-pill-sub {
  display: none;
}
body.nav-super-compact .onboarding-pill .onboarding-pill-title {
  display: none;
}


/* ---------------------------------------------------------------------------
 * Pill inside the overflow menu
 *
 * If the user's window is tiny enough that even the pill gets pushed into
 * the overflow menu, the menu has plenty of vertical space — restore the
 * full label so the user can read what the pill represents.
 * --------------------------------------------------------------------------- */
.nav-overflow-menu .onboarding-pill {
  width: 100%;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin-right: 0;
}
.nav-overflow-menu .onboarding-pill .onboarding-pill-label { display: inline-flex !important; }
.nav-overflow-menu .onboarding-pill .onboarding-pill-title,
.nav-overflow-menu .onboarding-pill .onboarding-pill-sub {
  display: inline-block !important;
}