/* ============================================================
 *  cw-sidebar — Left sidebar layout (2026-05-08 R80 sidebar refactor)
 *  Mockup: Captain Gemini-Flash-Image A/B/C
 *  Co-design: UI/UX agent + HTMX architect + Doctrine compliance agent
 *
 *  CRITICAL: NO id="side-panel" on this sidebar — that ID is reserved
 *  for HTMX workspace panel routing (30+ panels target it).
 * ============================================================ */

/* ============== Body Grid Layout ==============
 * Non-workspace pages: 240px sidebar + main content
 * Workspace pages (body.is-workspace): 56px slim sidebar + main (time grid full width)
 */
body {
  margin: 0;
  font-family: var(--cw-font-family);
  font-size: var(--cw-font-size-base);
  line-height: var(--cw-line-height-base);
  color: var(--cw-color-text-primary);
  background-color: var(--cw-color-main-bg);
  display: grid;
  grid-template-columns: var(--cw-sidebar-width) 1fr;
  grid-template-rows: 100vh;
  min-height: 100vh;
}

body.is-workspace {
  grid-template-columns: var(--cw-sidebar-width-workspace) 1fr;
}

body.cw-sidebar-collapsed {
  grid-template-columns: var(--cw-sidebar-width-collapsed) 1fr;
}

/* ============== Sidebar ============== */
.cw-sidebar {
  background-color: var(--cw-color-sidebar-bg);
  color: var(--cw-color-sidebar-text);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--cw-z-sidebar);
  transition: width var(--cw-transition-base);
}

.cw-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--cw-space-2);
  padding: var(--cw-space-4);
  border-bottom: 1px solid var(--cw-color-divider);
  flex-shrink: 0;
  min-height: var(--cw-topbar-height);
}

.cw-sidebar__logo {
  font-weight: var(--cw-font-weight-semibold);
  font-size: 16px;
  color: var(--cw-color-active-text);
  letter-spacing: 0.02em;
}

.cw-sidebar__phase-badge {
  background: var(--cw-color-active-bg);
  color: var(--cw-color-active-text);
  font-size: 10px;
  font-weight: var(--cw-font-weight-medium);
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
}

.cw-sidebar__nav {
  flex: 1;
  padding: var(--cw-space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--cw-space-1);
}

.cw-sidebar__section-heading {
  font-size: var(--cw-font-size-section);
  font-weight: var(--cw-font-weight-medium);
  color: var(--cw-color-section-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--cw-space-3) var(--cw-space-4) var(--cw-space-1);
  margin: 0;
}

.cw-nav-item {
  display: flex;
  align-items: center;
  gap: var(--cw-space-3);
  padding: 0 var(--cw-space-4);
  height: var(--cw-nav-item-height);
  color: var(--cw-color-sidebar-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: var(--cw-font-size-base);
  white-space: nowrap;
  transition: background-color var(--cw-transition-fast), border-color var(--cw-transition-fast);
}

.cw-nav-item:hover {
  background-color: var(--cw-color-hover-bg);
  color: var(--cw-color-active-text);
}

.cw-nav-item.is-active {
  background-color: var(--cw-color-active-bg);
  color: var(--cw-color-active-text);
  border-left-color: var(--cw-color-active-accent);
  font-weight: var(--cw-font-weight-medium);
}

.cw-nav-item__icon {
  font-size: var(--cw-icon-size);
  width: 20px;
  display: inline-flex;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cw-color-sidebar-icon);
}

.cw-nav-item.is-active .cw-nav-item__icon,
.cw-nav-item:hover .cw-nav-item__icon {
  color: var(--cw-color-active-text);
}

.cw-nav-item__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cw-sidebar__footer {
  padding: var(--cw-space-2);
  border-top: 1px solid var(--cw-color-divider);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.cw-sidebar__toggle {
  background: transparent;
  border: 1px solid var(--cw-color-divider);
  color: var(--cw-color-sidebar-text-dim);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--cw-transition-fast);
}

.cw-sidebar__toggle:hover {
  background: var(--cw-color-hover-bg);
  color: var(--cw-color-active-text);
}

/* ============== Collapsed state (workspace default + manual toggle) ============== */
body.is-workspace .cw-sidebar,
body.cw-sidebar-collapsed .cw-sidebar {
  width: var(--cw-sidebar-width-collapsed);
}

body.is-workspace .cw-nav-item__label,
body.is-workspace .cw-sidebar__phase-badge,
body.is-workspace .cw-sidebar__section-heading,
body.cw-sidebar-collapsed .cw-nav-item__label,
body.cw-sidebar-collapsed .cw-sidebar__phase-badge,
body.cw-sidebar-collapsed .cw-sidebar__section-heading {
  display: none;
}

body.is-workspace .cw-sidebar__logo,
body.cw-sidebar-collapsed .cw-sidebar__logo {
  font-size: 11px;
  text-align: center;
  width: 100%;
}

body.is-workspace .cw-nav-item,
body.cw-sidebar-collapsed .cw-nav-item {
  padding: 0;
  justify-content: center;
}

body.is-workspace .cw-nav-item__icon,
body.cw-sidebar-collapsed .cw-nav-item__icon {
  font-size: 18px;
  width: auto;
}

body.is-workspace .cw-sidebar__toggle,
body.cw-sidebar-collapsed .cw-sidebar__toggle {
  width: 100%;
  font-size: 12px;
}

/* tooltip on hover when collapsed */
body.is-workspace .cw-nav-item:hover::after,
body.cw-sidebar-collapsed .cw-nav-item:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(var(--cw-sidebar-width-collapsed) + 8px);
  background: var(--cw-color-sidebar-bg);
  color: var(--cw-color-active-text);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--cw-z-dropdown);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============== Main area ============== */
.cw-main {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0; /* prevent grid overflow */
}

/* ============== Top bar (non-workspace minimal) ============== */
.cw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cw-space-5);
  height: var(--cw-topbar-height);
  background: var(--cw-color-topbar-bg);
  border-bottom: 1px solid var(--cw-color-topbar-border);
  flex-shrink: 0;
  z-index: var(--cw-z-topbar);
}

.cw-topbar__title {
  font-size: var(--cw-font-size-heading);
  font-weight: var(--cw-font-weight-semibold);
  color: var(--cw-color-topbar-text);
  margin: 0;
}

.cw-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--cw-space-3);
}

.cw-topbar__user {
  display: flex;
  align-items: center;
  gap: var(--cw-space-2);
  color: var(--cw-color-text-secondary);
  font-size: var(--cw-font-size-base);
}

.cw-topbar__user a {
  color: var(--cw-color-primary);
  text-decoration: none;
}

.cw-topbar__user a:hover {
  text-decoration: underline;
}

/* ============== Workspace exception: existing header AS-IS, only body class to slim sidebar ============== */
body.is-workspace .cw-topbar {
  display: none; /* workspace.html provides its own header */
}

/* ============== Responsive (mobile <768px) ============== */
@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  body.is-workspace {
    grid-template-columns: 1fr;
  }
  .cw-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--cw-sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--cw-transition-base);
  }
  body.cw-sidebar-mobile-open .cw-sidebar {
    transform: translateX(0);
  }
}

/* ============== Workspace existing aside.sidebar (line 213-305) — preserve AS-IS ==============
 * This sidebar (workspace right panel) uses class="sidebar" NOT cw-sidebar.
 * No conflict — different class names.
 */