/* Sidebar identity card + collapsible 3-folder menu — Phase 1 of mockup H rollout.
 *
 * REBUILD 2026-06-16: copied verbatim from
 *   docs/mockups/dashboard/mockup_h_dashboard_warm.html
 *   lines 76-162 (.sidebar-identity, .sidebar-identity-card,
 *                 .identity-menu, .menu-folder*)
 *
 * 2026-06-27: refactored to use --sidebar-* theme tokens from
 * static/styles.css so the identity card adapts per theme. Token values
 * per theme come from the matching mockup files (mockup_h_dashboard_pro
 * / _medium / _warm). Theme-neutral values (avatar gradient, soon-pill
 * amber palette, danger rose palette, shadow rgba) remain as shared
 * single-value tokens.
 *
 * If the mockup updates, this file updates the token MAPPINGS — the
 * raw color values still belong in styles.css's theme blocks so we
 * don't fork a per-theme palette across files.
 */

/* Identity card */
.sidebar-identity {
  position: relative;
  border-top: 1px solid var(--sidebar-border);
  /* Pinned to the bottom of the .sidebar flex column. .sidebar already
     declares display:flex; flex-direction:column; height:100vh (see
     static/styles.css), so margin-top:auto absorbs the remaining space
     above the card and lands it as a true footer — matching the mockup
     (docs/mockups/dashboard/mockup_h_dashboard_warm.html .sidebar-identity
     sits at the column's bottom edge with the border-top divider above).
     The legacy .sidebar-profile used the same pin-to-bottom pattern;
     this mirrors that contract for the new card. */
  margin-top: auto;
}
.sidebar-identity-card {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: background 0.1s;
}
.sidebar-identity-card:hover { background: var(--sidebar-hover); }
.sidebar-identity-card .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sidebar-avatar-from), var(--sidebar-avatar-to));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sidebar-identity-card .id-text { flex-grow: 1; min-width: 0; }
.sidebar-identity-card .id-name {
  font-size: 12px; font-weight: 600; color: var(--sidebar-text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-identity-card .id-org {
  font-size: 11px; color: var(--sidebar-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.sidebar-identity-card .chev { color: var(--sidebar-muted); font-size: 10px; }

.identity-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 8px; right: 8px;
  background: var(--sidebar-menu-bg);
  border: 1px solid var(--sidebar-menu-border);
  border-radius: 10px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
  padding: 6px 0;
  display: none;
  z-index: 200;
  max-height: 85vh; overflow-y: auto;
}
body.identity-open .identity-menu { display: block; }
.identity-menu .menu-divider {
  height: 1px; background: var(--sidebar-menu-divider); margin: 5px 0;
}
.identity-menu .menu-item {
  padding: 7px 14px;
  display: flex; align-items: center; gap: 9px;
  color: var(--sidebar-text); font-size: 12px;
  cursor: pointer; text-decoration: none;
}
.identity-menu .menu-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.identity-menu .menu-item.danger { color: var(--sidebar-danger-text); }
.identity-menu .menu-item.danger:hover { background: var(--sidebar-danger-hover-bg); }
.identity-menu .menu-item .icon { width: 16px; text-align: center; opacity: 0.85; }
.identity-menu .menu-item .soon {
  background: var(--sidebar-soon-bg);
  color: var(--sidebar-soon-text);
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 8px;
  margin-left: auto;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--sidebar-soon-border);
}
.identity-menu .menu-item.soon-item { opacity: 0.7; }
.identity-menu .menu-item.soon-item:hover { opacity: 1; }
.menu-folder { border-bottom: 1px solid var(--sidebar-menu-divider); }
.menu-folder:last-of-type { border-bottom: none; }
.menu-folder-header {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: background 0.1s;
}
.menu-folder-header:hover { background: var(--sidebar-hover); }
.menu-folder-header .folder-icon { font-size: 14px; opacity: 0.9; }
.menu-folder-header .title-block { flex-grow: 1; min-width: 0; }
.menu-folder-header .title { font-size: 12px; font-weight: 600; color: var(--sidebar-text-strong); }
.menu-folder-header .sub { font-size: 11px; color: var(--sidebar-muted); margin-top: 1px; }
.menu-folder-header .chev { color: var(--sidebar-muted); font-size: 10px; transition: transform 0.15s; }
.menu-folder.open .menu-folder-header .chev { transform: rotate(180deg); }
.menu-folder-content { display: none; background: var(--sidebar-menu-folder-bg); padding: 4px 0 6px; }
.menu-folder.open .menu-folder-content { display: block; }
.menu-folder-content .menu-item { padding-left: 22px; font-size: 12px; }

/* --- Additions outside the mockup CSS, kept minimal and segregated --- */

/* Theme control (Pro / Slate / Dark) in the identity menu (2026-07-23).
   The always-reachable theme control — moved here from the dashboard-hidden
   topbar picker. Items reuse `.menu-item`; theme.js marks the .active one
   from the server value (user_profiles.theme) and the check appears there. */
.identity-menu .identity-theme-label {
  padding: 8px 14px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sidebar-text);
  opacity: 0.55;
}
.identity-menu .identity-theme-item .check {
  margin-left: auto;
  opacity: 0;                 /* hidden until this theme is active */
  color: var(--sidebar-accent, var(--sidebar-text-strong));
  font-weight: 700;
}
.identity-menu .identity-theme-item.active {
  color: var(--sidebar-text-strong);
  background: var(--sidebar-active, var(--sidebar-hover));
}
.identity-menu .identity-theme-item.active .check {
  opacity: 1;
}


/* Collapsed-sidebar hiding rule for the identity card body.
 * The existing .sidebar-collapsed pattern (static/styles.css) hides
 * `.sidebar span` and `.sidebar-org-name`. The identity-card text
 * block uses .id-text + .chev which need to follow that same rule so
 * a collapsed sidebar shows only the avatar circle. The id-name
 * inside id-text is a `<div>` with the avatar; without this rule the
 * text remains visible in collapsed mode and wraps awkwardly. */
.sidebar-collapsed .sidebar-identity-card .id-text,
.sidebar-collapsed .sidebar-identity-card .chev,
.sidebar-collapsed .identity-menu { display: none !important; }
.sidebar-collapsed .sidebar-identity-card { justify-content: center; padding: 12px 8px; }

/* Minimal fallback toast for the Soon-item handler. The chat-panel
 * polish bundle exposes window.showToast; on pages without it the JS
 * falls back to creating .sidebar-identity-toast nodes — these styles
 * give them a presentable shape. */
.sidebar-identity-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  background: var(--sidebar-menu-bg);
  color: var(--sidebar-text-strong);
  border: 1px solid var(--sidebar-menu-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.sidebar-identity-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}