/* ============================================================
   Canvas 2.0 — Adaptive Shell layout
   Ported from canvas2.0-handoff (handoff-full.css) targeting the
   real class names emitted by DesktopShell / TopNav / LeftRail.

   Class-name mapping vs handoff prototype:
     .topbar              → .canvas-shell-topbar   (header in DesktopShell)
     .rail                → .canvas-shell-leftrail  (aside in DesktopShell)
     .canvas / .main-grid → .canvas-shell-main      (main in DesktopShell)
     .canvas-desktop-shell → root wrapper (data-canvas-mode / data-canvas-chrome)
     .rail-section-label  → .canvas-leftrail-bucket (LeftRail h3)
     .rail-group-body ul  → .canvas-leftrail-items  (LeftRail ul)
     .rail-item           → .canvas-leftrail-item / .canvas-leftrail-link
     .rail-badge          → .canvas-leftrail-badge
     TopNav → .canvas-topnav / .canvas-topnav-list / .canvas-topnav-item
              .canvas-topnav-link[data-active="true"]
     NotificationCenter → .canvas-notif-bell / .canvas-notif-badge

   All colour via var(--app-*) or var(--basalt-*) / var(--canvas-*).
   Zero hardcoded hex. Radius via var(--app-radius) / var(--app-radius-sm)
   or var(--radius) fallback. Transitions via var(--liquid-ease).
   Consumers: import '@supraforge/ui/canvas/nav/nav-shell.css'
   ============================================================ */

/* ============================================================
   1. Root shell — full-height column layout
   ============================================================ */
.canvas-desktop-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  height: 100dvh;
  background: var(--app-bg, rgb(var(--basalt-deep)));
  color: var(--app-ink, rgb(var(--text)));
  font-family: var(--app-font-body, var(--font-inter));
  font-size: calc(14px * var(--app-density, 1));
  overflow: hidden;
  /* smooth tenant/theme transitions (mirrors handoff .app rule) */
  transition:
    background-color 260ms var(--liquid-ease),
    color 260ms var(--liquid-ease);
}

/* ============================================================
   2. Topbar — sticky glass chrome, 56 px min-height
      Handoff: .topbar   →  .canvas-shell-topbar
      Layout: [left: wordmark+burger] [center: TopNav module bar] [right: actions+notif]
   ============================================================ */
.canvas-shell-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 0 16px;
  min-height: 56px;
  background: var(--app-glass-bg, var(--app-surface));
  backdrop-filter: var(--app-glass-blur, blur(24px));
  -webkit-backdrop-filter: var(--app-glass-blur, blur(24px));
  border-bottom: 1px solid var(--app-rule);
  flex-shrink: 0;
  transition:
    background-color 260ms var(--liquid-ease),
    border-color 260ms var(--liquid-ease);
}

/* ============================================================
   3. Body — flex row, below topbar
   ============================================================ */
.canvas-shell-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   4. Left rail — 220 px sidebar with bucket sections
      Handoff: .rail  →  aside.canvas-shell-leftrail > nav.canvas-leftrail
   ============================================================ */
.canvas-shell-leftrail {
  width: 220px;
  flex-shrink: 0;
  background: var(--app-surface);
  border-right: 1px solid var(--app-rule);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--app-rule) transparent;
  transition:
    width 220ms var(--liquid-ease),
    background-color 260ms var(--liquid-ease),
    border-color 260ms var(--liquid-ease);
}

/* nav.canvas-leftrail — the LeftRail <nav> inside the aside */
.canvas-leftrail {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 8px;
  gap: 0;
}

/* section.canvas-leftrail-section — one bucket (content / market / community) */
.canvas-leftrail-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

/* h3.canvas-leftrail-bucket — bucket label (CONTENT / MARKET / COMMUNITY)
   Maps to handoff .rail-section-label */
.canvas-leftrail-bucket {
  font-size: 10px;
  font-weight: 500;
  font-family: var(--app-font-mono, var(--font-jetbrains));
  color: var(--app-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 8px 10px 4px;
  margin: 0;
  line-height: 1;
}

/* ul.canvas-leftrail-items */
.canvas-leftrail-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* li.canvas-leftrail-item */
.canvas-leftrail-item {
  list-style: none;
}

/* a.canvas-leftrail-link — Maps to handoff .rail-item */
.canvas-leftrail-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--app-radius-sm, var(--radius));
  color: var(--app-ink-soft);
  border-left: 2px solid transparent;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  transition:
    background-color 180ms var(--liquid-ease),
    color 180ms var(--liquid-ease),
    border-left-color 180ms var(--liquid-ease);
}

.canvas-leftrail-link:hover {
  background: var(--app-elevated);
  color: var(--app-ink);
}

.canvas-leftrail-link[aria-current="page"],
.canvas-leftrail-link[data-active="true"] {
  background: var(--app-accent-dim);
  color: var(--app-accent);
  border-left-color: var(--app-accent);
}

/* span.canvas-leftrail-badge — Maps to handoff .rail-badge */
.canvas-leftrail-badge {
  margin-left: auto;
  background: var(--app-signal);
  color: var(--app-bg);
  font-family: var(--app-font-mono, var(--font-jetbrains));
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.6;
  flex-shrink: 0;
}

/* ============================================================
   5. Main content area
      Handoff: .canvas  →  main.canvas-shell-main
   ============================================================ */
.canvas-shell-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background-color 260ms var(--liquid-ease);
}

/* ============================================================
   6. TopNav module bar — nav.canvas-topnav
      Lives inside .canvas-shell-topbar center column.
      Handoff: module tabs in topbar center.
   ============================================================ */
.canvas-topnav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.canvas-topnav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.canvas-topnav-item {
  list-style: none;
}

/* a.canvas-topnav-link — each module pill */
.canvas-topnav-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  height: 32px;
  border-radius: var(--app-radius-sm, var(--radius));
  font-family: var(--app-font-mono, var(--font-jetbrains));
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--app-ink-soft);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background-color 180ms var(--liquid-ease),
    color 180ms var(--liquid-ease),
    border-color 180ms var(--liquid-ease);
}

.canvas-topnav-link:hover {
  background: var(--app-elevated);
  color: var(--app-ink);
}

/* Active module — accent bg + accent-ink text (black on cyan for AaaS) */
.canvas-topnav-link[aria-current="page"],
.canvas-topnav-link[data-active="true"] {
  background: var(--app-accent);
  color: var(--app-accent-ink);
  border-color: var(--app-accent);
}

/* ============================================================
   7. NotificationCenter elements — .canvas-notif-bell / .canvas-notif-badge
   ============================================================ */
.canvas-notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: var(--app-radius-sm, var(--radius));
  background: transparent;
  border: 1px solid transparent;
  color: var(--app-ink-soft);
  cursor: pointer;
  transition:
    background-color 180ms var(--liquid-ease),
    color 180ms var(--liquid-ease);
}

.canvas-notif-bell:hover {
  background: var(--app-elevated);
  color: var(--app-ink);
}

.canvas-notif-bell[data-unread="true"] {
  color: var(--app-accent);
}

.canvas-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--app-signal);
  color: var(--app-bg);
  font-family: var(--app-font-mono, var(--font-jetbrains));
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ============================================================
   8. Stage dots — .stage-dots / .stage-dot
      Ported from handoff, used in pipeline/status surfaces
   ============================================================ */
.stage-dots {
  display: inline-flex;
  gap: 3px;
}

.stage-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-rule);
  flex-shrink: 0;
}

.stage-dot.st-ok   { background: var(--app-success); }
.stage-dot.st-run  { background: var(--app-running); animation: canvas-dot-pulse 1.6s ease-in-out infinite; }
.stage-dot.st-fail { background: var(--app-fail); }
.stage-dot.st-warn { background: var(--app-warn); }
.stage-dot.st-idle { background: var(--app-rule); }

@keyframes canvas-dot-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.35; }
  100% { opacity: 1; }
}

/* ============================================================
   9. Responsive — collapse left rail under 768 px
      Hamburger wiring is handled at page/app level.
   ============================================================ */
@media (max-width: 767px) {
  .canvas-desktop-shell {
    /* switch to single-column flow */
  }

  .canvas-shell-topbar {
    /* collapse to two-column: [wordmark] [actions] */
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  /* Hide the module tab bar on narrow viewports */
  .canvas-topnav {
    display: none;
  }

  .canvas-shell-body {
    flex-direction: column;
  }

  /* Rail collapses off-screen; toggled via data-rail-open or a class
     applied by the parent page shell */
  .canvas-shell-leftrail {
    position: fixed;
    inset: 56px 0 0 0;
    width: 80vw;
    max-width: 280px;
    z-index: 190;
    transform: translateX(-100%);
    transition:
      transform 260ms var(--liquid-ease),
      background-color 260ms var(--liquid-ease);
    box-shadow: var(--app-shadow);
  }

  .canvas-shell-leftrail[data-open="true"] {
    transform: translateX(0);
  }

  .canvas-shell-main {
    padding: 16px;
  }
}