/* ═══════════════════════════════════════════════════ */
/*  GROUNDWORK OPS — Collapsible sidebar (shared)     */
/*  Loaded on dashboard.html, admin.html, copilot.html */
/* ═══════════════════════════════════════════════════ */

/* ── Toggle button (sits next to logo) ── */
.gw-sb-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  background: transparent; border: 1px solid #282828;
  color: #888; cursor: pointer; transition: all .15s;
  flex-shrink: 0; padding: 0;
}
.gw-sb-toggle:hover { color: #C8F04A; border-color: rgba(200,240,74,.45); background: rgba(200,240,74,.05); }
.gw-sb-toggle svg { width: 14px; height: 14px; transition: transform .25s; }

/* ── Header layout (logo + toggle on one row) ── */
.gw-sb-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}

/* Mark logo (icon-only) shown when collapsed */
[data-sb-logo="mark"] { display: none; }
[data-sb-logo="mark"] svg { width: 28px; height: 28px; display: block; }

/* ── User profile row (sits above sidebar-footer) ── */
.gw-sb-user {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 8px 12px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid #1e1e1e;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.gw-sb-user:hover { background: rgba(255,255,255,.05); border-color: #2a2a2a; }
.gw-sb-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #C8F04A 0%, #a5c93e 100%);
  color: #0A0A0A; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; font-family: 'Syne', sans-serif;
  flex-shrink: 0; overflow: hidden;
}
.gw-sb-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gw-sb-user-text { flex: 1; min-width: 0; }
.gw-sb-user-name { font-size: 13px; font-weight: 600; color: #F5F4F0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-sb-user-email { font-size: 11px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-sb-user-chev {
  width: 22px; height: 22px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: #666;
  flex-shrink: 0; padding: 0; transition: color .15s, background .15s;
}
.gw-sb-user-chev:hover { color: #C8F04A; background: rgba(200,240,74,.08); }
.gw-sb-user-chev svg { width: 12px; height: 12px; }

/* ── Dropdown menu ── */
.gw-sb-menu {
  position: absolute;
  bottom: calc(100% + 6px); left: 0; right: 0;
  background: #161616; border: 1px solid #282828; border-radius: 10px;
  padding: 6px; z-index: 200;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  display: none;
}
.gw-sb-menu.is-open { display: block; }
.gw-sb-menu a, .gw-sb-menu button {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 6px;
  font-size: 13px; color: #ccc; text-decoration: none;
  background: transparent; border: none; width: 100%;
  font-family: 'DM Sans', sans-serif; cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.gw-sb-menu a:hover, .gw-sb-menu button:hover { background: rgba(255,255,255,.05); color: #F5F4F0; }
.gw-sb-menu .gw-sb-menu-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.gw-sb-menu .gw-sb-menu-divider { height: 1px; background: #1e1e1e; margin: 4px 2px; }
.gw-sb-menu .gw-sb-signout { color: #f04a4a; }
.gw-sb-menu .gw-sb-signout:hover { background: rgba(240,74,74,.08); color: #f04a4a; }

/* ── Tooltip chip (collapsed nav icons) ── */
/* Only render when sidebar is collapsed. Gated by aside.is-collapsed below. */
.gw-sb-tooltip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #1e1e1e; color: #F5F4F0; font-size: 12px; font-family: 'DM Sans', sans-serif;
  font-weight: 500; padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s;
  border: 1px solid #2a2a2a; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  z-index: 250;
}

/* ═══ Collapsed state — generic across all 3 pages ═══ */
aside.is-collapsed [data-sb-logo="full"] { display: none !important; }
aside.is-collapsed [data-sb-logo="mark"] { display: inline-flex !important; }

/* Hide nav labels (anything wrapped in [data-sb-label]); keep icons */
aside.is-collapsed [data-sb-label] { display: none !important; }

/* Hide nav-section group headings */
aside.is-collapsed .dash-nav-section,
aside.is-collapsed .nav-section,
aside.is-collapsed .cs-section-label { display: none !important; }

/* Hide badges / counts on collapsed icons */
aside.is-collapsed .dash-nav-badge,
aside.is-collapsed .admin-badge { display: none !important; }

/* Hide footer entirely when collapsed (incl. copilot's .cs-bottom children except user wrap) */
aside.is-collapsed .dash-sidebar-footer,
aside.is-collapsed .sidebar-footer { display: none !important; }
aside.is-collapsed .cs-bottom > .cs-nav-link { display: none !important; }

/* Center icons inside nav links */
aside.is-collapsed .dash-nav-link,
aside.is-collapsed .nav-link,
aside.is-collapsed .cs-nav-link {
  justify-content: center;
  padding: 10px 0;
  position: relative;
}

/* Show tooltip on hover only when collapsed */
aside.is-collapsed [data-tip]:hover .gw-sb-tooltip,
aside.is-collapsed [data-tip]:focus-visible .gw-sb-tooltip { opacity: 1; }

/* Header row alignment in collapsed mode — center the icon mark */
aside.is-collapsed .gw-sb-header-row { justify-content: center; flex-wrap: wrap; row-gap: 10px; }

/* User row collapses to just the avatar; click opens menu */
aside.is-collapsed .gw-sb-user {
  padding: 8px; margin: 8px auto;
  justify-content: center;
  width: 44px;
}
aside.is-collapsed .gw-sb-user-text,
aside.is-collapsed .gw-sb-user-chev { display: none; }
aside.is-collapsed .gw-sb-menu {
  left: calc(100% + 8px); right: auto; bottom: 0;
  min-width: 200px;
}

/* Copilot-specific: hide conversation list & search & new-conversation button when collapsed */
aside.copilot-sidebar.is-collapsed .cs-new-btn,
aside.copilot-sidebar.is-collapsed .cs-search-wrap,
aside.copilot-sidebar.is-collapsed .cs-conv-list,
aside.copilot-sidebar.is-collapsed .cs-context-pill { display: none !important; }
aside.copilot-sidebar.is-collapsed .cs-bottom { border-top: 1px solid #1e1e1e; padding: 8px 4px; }

/* Smooth width animation across all 3 pages */
aside.dash-sidebar, aside.sidebar, aside.copilot-sidebar { transition: width .25s ease, transform .25s ease; }

/* ── Mobile: collapse mode is desktop-only. On small screens the existing
       slide-in drawer (.open) takes over, so make sure collapsed state
       doesn't leave the sidebar at 68px (which would be a weird tiny drawer). */
@media (max-width: 960px) {
  /* Desktop collapsed-state UX is irrelevant on mobile; the page uses a slide-in drawer.
     Force everything back to the expanded look so the drawer has its full layout. */
  aside.dash-sidebar.is-collapsed,
  aside.sidebar.is-collapsed,
  aside.copilot-sidebar.is-collapsed { width: 260px !important; }
  aside.is-collapsed [data-sb-label],
  aside.is-collapsed .dash-nav-section,
  aside.is-collapsed .nav-section,
  aside.is-collapsed .cs-section-label,
  aside.is-collapsed .dash-sidebar-footer,
  aside.is-collapsed .sidebar-footer,
  aside.is-collapsed .cs-bottom > .cs-nav-link,
  aside.is-collapsed .cs-new-btn,
  aside.is-collapsed .cs-search-wrap,
  aside.is-collapsed .cs-conv-list,
  aside.is-collapsed .cs-context-pill,
  aside.is-collapsed .dash-nav-badge { display: revert !important; }
  aside.is-collapsed [data-sb-logo="full"] { display: block !important; }
  aside.is-collapsed [data-sb-logo="mark"] { display: none !important; }
  aside.is-collapsed .gw-sb-user { padding: 10px 12px; margin: 8px 12px 4px; width: auto; justify-content: flex-start; }
  aside.is-collapsed .gw-sb-user-text,
  aside.is-collapsed .gw-sb-user-chev { display: flex; }
  aside.is-collapsed .gw-sb-tooltip { display: none; }
  /* Hide the toggle button on mobile — the drawer toggle handles open/close. */
  .gw-sb-toggle { display: none; }
}