/*
 * sidebar-collapse.css
 * ─────────────────────────────────────────────────────────────────
 * Collapsible sidebar — loaded by every page that has a sidebar.
 *
 * State is stored in localStorage key: 'sett_sidebar_collapsed'
 * The class `sidebar-collapsed` is applied to <html> so an inline
 * <script> in <head> can set it before first paint (no flash).
 * ─────────────────────────────────────────────────────────────────
 */

:root {
  --sidebar-collapsed-w: 54px;
}

/* ── Smooth transitions ───────────────────────────────── */
.sidebar  { transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.main     { transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Toggle button ────────────────────────────────────── */
/*
 * The toggle is positioned with `position: fixed` and appended to <body>
 * by sidebar-collapse.js.  This lifts it out of the sidebar's stacking
 * context so it can paint above any fixed overlay the host page may have
 * (e.g. exec-page at z-index 460, plan-page at z-index 461 in
 * project-detail.html).  z-index 470 clears both of those.
 *
 * `left` is derived from --sidebar-w (set per page on :root).  The
 * `left` transition keeps the handle in sync with the sidebar's width
 * animation (same duration & easing).
 */
.sidebar-toggle {
  position: fixed;
  top: 36px;
  /* centre the 22px button on the sidebar's right border (right: -11px equiv) */
  left: calc(var(--sidebar-w, 200px) - 11px);
  width: 22px; height: 22px;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e8e8e6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  /* Must exceed exec-page (460) and plan-page (461) */
  z-index: 470;
  color: var(--ink, #0c0c0c);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s,
              left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}
.sidebar-toggle:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}
.sidebar-toggle svg {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* Handle moves left when sidebar collapses */
html.sidebar-collapsed .sidebar-toggle {
  left: calc(var(--sidebar-collapsed-w) - 11px);
}

/* Arrow rotates when collapsed */
html.sidebar-collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════
   COLLAPSED STATE
══════════════════════════════════════════════════════ */

/* Sidebar narrows */
html.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-w);
}

/* Content shifts left */
html.sidebar-collapsed .main {
  margin-left: var(--sidebar-collapsed-w);
}

/* Logo → "S." only */
html.sidebar-collapsed .sidebar-logo {
  font-size: 0;
  padding: 0;
  margin-bottom: 40px;
  display: flex; align-items: center; justify-content: center;
  height: 15px;
}
html.sidebar-collapsed .sidebar-logo::after {
  content: 'S.';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, #0c0c0c);
}

/* Nav links: icon only, centered */
html.sidebar-collapsed .nav-link {
  font-size: 0;
  padding: 0;
  justify-content: center;
  gap: 0;
}
html.sidebar-collapsed .nav-icon {
  width: var(--sidebar-collapsed-w);
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Hide expand chevron + submenu */
html.sidebar-collapsed .nav-expand {
  display: none;
}
html.sidebar-collapsed .nav-submenu {
  max-height: 0 !important;
  overflow: hidden;
}

/* Keep active indicator visible and properly sized */
html.sidebar-collapsed .nav-link.is-active::before {
  height: 24px;
}

/* Profile: avatar only */
html.sidebar-collapsed .profile-text,
html.sidebar-collapsed .profile-chevron {
  display: none;
}
html.sidebar-collapsed .sidebar-profile {
  justify-content: center;
  padding: 8px 0;
  margin: 0;
  width: 100%;
}
html.sidebar-collapsed .profile-dropdown {
  left: 6px;
  right: auto;
  width: 220px;
  bottom: calc(100% + 8px);
}

/* ── Tooltips (collapsed only) ────────────────────────── */
html.sidebar-collapsed .nav-link {
  position: relative;
}
html.sidebar-collapsed .nav-link[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(var(--sidebar-collapsed-w) + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink, #0c0c0c);
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 300;
  line-height: 1.4;
}

/* ── Mobile: collapse disabled ────────────────────────── */
@media (max-width: 767px) {
  .sidebar-toggle { display: none; }

  /* Reset all collapsed overrides on mobile */
  html.sidebar-collapsed .sidebar  { width: var(--sidebar-w, 200px); }
  html.sidebar-collapsed .main     { margin-left: 0; }
  html.sidebar-collapsed .sidebar-logo {
    font-size: 12px; padding: 0 28px; margin-bottom: 44px;
    display: block; height: auto;
  }
  html.sidebar-collapsed .sidebar-logo::after { content: none; }
  html.sidebar-collapsed .nav-link {
    font-size: 11px; padding: 0 28px;
    justify-content: flex-start; gap: 11px;
  }
  html.sidebar-collapsed .nav-icon  { width: 16px; height: auto; }
  html.sidebar-collapsed .nav-expand { display: flex; }
  html.sidebar-collapsed .nav-submenu { max-height: 0; }
  html.sidebar-collapsed .nav-submenu.is-open { max-height: 220px !important; }
  html.sidebar-collapsed .profile-text    { display: flex; }
  html.sidebar-collapsed .profile-chevron { display: flex; }
  html.sidebar-collapsed .sidebar-profile {
    justify-content: flex-start; padding: 10px 18px; margin: 0 10px; width: auto;
  }
  html.sidebar-collapsed .profile-dropdown { left: 10px; right: 10px; width: auto; }
}
