/* ═══════════════════════════════════════════════════════════════════════
   Ch XVIII customer sidebar shell (Sendy 2026-07-23)
   Extracted from templates/index.html C2 inline styles into a shared file
   at C4 so /akun, /langganan, /data-saya pages can reuse the exact same
   sidebar without CSS drift. Palette matches _admin_sidebar.html.

   Namespaced `cx-*` so nothing collides with the existing chat sidebar
   / main CSS in style.css.

   UX-nav 2026-07-23 — Sendy asked for: (1) sidebar always visible on the
   authenticated shell (not hidden by landing-mode chat CSS), (2) collapse
   to icon-only rail with expand toggle, (3) mobile drawer triggered by
   the Lexnesia diamond logo. All handled by rules further down that
   target `.cx-sidebar` (namespaced ADDITIONAL class on the same element
   the old chat sidebar used) so `.cx-sidebar` rules override the old
   `.sidebar` mode-specific hiding without breaking JS bound to `#sidebar`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── UX-nav: sidebar visibility + collapse/expand + mobile ────────── */
/* Forced-visible on ALL screens ≥769px, regardless of what the old chat
   app's landing-mode CSS wants. #sidebar takes the .cx-sidebar class too;
   this selector is more specific than `.sidebar` so it wins the cascade. */
.cx-sidebar {
  display: flex !important;
  flex-direction: column;
  width: 240px;
  flex-shrink: 0;
  background: #F1EBDC;
  color: #0E1B33;
  border-right: 1px solid #D6CDB7;
  z-index: 100;
  transition: width .18s ease;
  /* Sendy 2026-07-24 — on short viewports the three clusters + footer
     overflow the sidebar height; without a scroll, the AKUN cluster
     items (Akun / Langganan / Data Saya / Pusat Bantuan) were cut off
     and unreachable. Enable inline scrolling. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Slim, palette-matched scrollbar (WebKit-only; other browsers use default). */
.cx-sidebar::-webkit-scrollbar { width: 6px; }
.cx-sidebar::-webkit-scrollbar-thumb {
  background: rgba(124, 83, 22, 0.28); border-radius: 3px;
}
.cx-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(124, 83, 22, 0.5); }
/* Header inherits the cream background; add a subtle bottom rule so it
   separates from the first cluster header. */
.cx-sidebar .sidebar-header {
  border-bottom: 1px solid rgba(124, 83, 22, 0.14);
  padding: 12px 12px;
}
.cx-sidebar .logo { color: #0E1B33; }
.cx-sidebar .icon-btn { color: #7C5316; }
.cx-sidebar .icon-btn:hover { color: #0E1B33; background: rgba(168, 115, 39, 0.15); }

/* Collapsed rail — icon-only, 64px wide. Text labels hidden; toggle
   chevron flips to point right. Persisted via localStorage key
   `lex_sidebar_expanded`. Nav items get centered icons + tooltips on
   hover (native title="…" attribute already on every item). */
.cx-sidebar.collapsed { width: 64px; }
.cx-sidebar.collapsed .cx-nav-label,
.cx-sidebar.collapsed .cx-sidebar-word,
.cx-sidebar.collapsed .cx-tier-badge,
.cx-sidebar.collapsed .cx-cluster-hd,
.cx-sidebar.collapsed .cx-ui-lang,
.cx-sidebar.collapsed .lang-bar,
.cx-sidebar.collapsed .cx-signout-btn,
.cx-sidebar.collapsed .cx-new-chat-label,
.cx-sidebar.collapsed .theme-btn > #theme-label,
.cx-sidebar.collapsed .conversations-list {
  display: none !important;
}
.cx-sidebar.collapsed .cx-nav {
  justify-content: center;
  padding: 10px 0;
  margin: 2px 6px;
}
.cx-sidebar.collapsed .cx-nav-icon { font-size: 18px; margin: 0; }
.cx-sidebar.collapsed .sidebar-header { padding: 6px 8px; justify-content: center; }
.cx-sidebar.collapsed .sidebar-actions { flex-direction: column; gap: 4px; }
.cx-sidebar.collapsed .cx-sidebar-toggle svg { transform: rotate(180deg); }
.cx-sidebar-toggle svg { transition: transform .18s ease; }

/* Nav items — flex layout so icon + label are separately controllable. */
.cx-sidebar .cx-nav-icon {
  display: inline-block; width: 22px; text-align: center;
  font-size: 15px; line-height: 1; flex-shrink: 0;
}
.cx-sidebar .cx-nav-label { flex: 1; }

/* Chevron toggle button — sits next to logo. Hidden on mobile (drawer
   opens/closes via the diamond logo instead). */
.cx-sidebar-toggle {
  background: transparent; color: #7C5316;
  border: none; padding: 4px; cursor: pointer;
  border-radius: 4px;
}
.cx-sidebar-toggle:hover { color: #0E1B33; background: rgba(168, 115, 39, 0.15); }

/* Sidebar-header logo is a link (anchor) — return-to-home affordance. */
.cx-sidebar .cx-sidebar-home {
  text-decoration: none; color: inherit;
  display: flex; align-items: center; gap: 8px;
}
.cx-sidebar .cx-sidebar-home:hover { opacity: 0.85; }

/* ── Mobile drawer (Sendy 2026-07-23) ─────────────────────────────
   Hides sidebar off-canvas by default; the Lexnesia diamond logo in the
   outer public header (with data-lex-nav-open) toggles body.cx-mobile-open
   to slide the sidebar in from the left with a dark scrim behind it. */
.cx-sidebar-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(9, 20, 40, 0.55);
  z-index: 99;
}
@media (max-width: 768px) {
  .cx-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px !important;   /* full-text width on mobile drawer */
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }
  body.cx-mobile-open .cx-sidebar { transform: translateX(0); }
  body.cx-mobile-open .cx-sidebar-scrim { display: block; }
  /* Toggle chevron useless on mobile (drawer is either fully open or
     fully closed via the diamond logo) — hide it. */
  .cx-sidebar-toggle { display: none; }
}

/* Sendy 2026-07-23 — flip sidebar from dark-navy to cream palette so it
   visually merges with the existing library rail (no more "two vertical
   bars" complaint). Ink on cream; burgundy active pill stays. */
.cx-tier-badge {
  display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: #A87327; color: #FBF8F2;
}
.cx-tier-badge.tier-gold { background: #A87327; color: #FBF8F2; }
.cx-tier-badge.tier-unlimited { background: #091428; color: #F1EBDC; }
.cx-cluster {
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(124, 83, 22, 0.14);
  margin: 0 8px;
}
.cx-cluster:last-of-type { border-bottom: none; }
.cx-cluster-hd {
  font-size: 10px; font-weight: 700;
  color: #7C5316;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 6px 8px 6px;
}
.cx-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; margin: 1px 4px;
  font-size: 13px; color: #0E1B33;
  text-decoration: none; border-radius: 6px;
  transition: background .12s, color .12s;
  cursor: pointer; user-select: none;
}
.cx-nav:hover { background: rgba(168, 115, 39, 0.18); color: #7C5316; }
.cx-nav.active {
  background: #8B1A1A; color: #FBF8F2; font-weight: 600;
}
.cx-nav.active:hover { background: #6e1515; color: #FBF8F2; }
.cx-nav.cx-disabled {
  opacity: 0.42; cursor: not-allowed;
  background: transparent !important; color: rgba(14, 27, 51, 0.5) !important;
}
.cx-nav.cx-nav-inert { cursor: default; opacity: 0.6; }

/* Ch XIX D1 (Sendy 2026-07-27) — nested sidebar item. Parent is a
   non-clickable label with the standard icon+label layout; children
   are indented one level, no icon. Active state on either parent or
   child paints the burgundy pill via the shared .cx-nav.active rule. */
.cx-nav-parent { display: block; }
.cx-nav-parent-hd { cursor: default; }
.cx-nav-parent-hd:hover { background: transparent; color: #0E1B33; }
.cx-nav-parent-hd.active:hover { background: #6e1515; color: #FBF8F2; }
.cx-nav.cx-nav-child {
  padding-left: 34px;   /* aligns with the parent's label after the icon */
  font-size: 12.5px;
}
.cx-sidebar.collapsed .cx-nav-child { display: none; }
.cx-sidebar.collapsed .cx-nav-parent-hd .cx-nav-label { display: none; }
.cx-chip {
  margin-left: auto;
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  background: #A87327; color: #FBF8F2;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cx-chip-gold { background: #A87327; color: #FBF8F2; }
.cx-chip-corporate { background: #091428; color: #F1EBDC; }
.cx-ui-lang {
  display: flex; gap: 3px;
  padding: 6px 8px 4px;
  margin-bottom: 4px;
}
.cx-ui-lang-btn {
  flex: 1; padding: 4px 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  background: transparent; color: #7C5316;
  border: 1px solid rgba(124, 83, 22, 0.28); border-radius: 4px;
  cursor: pointer; transition: background .12s, color .12s;
}
.cx-ui-lang-btn:hover { color: #0E1B33; border-color: #A87327; }
.cx-ui-lang-btn.active {
  background: rgba(168, 115, 39, 0.28); color: #0E1B33;
  border-color: #A87327;
}
/* Sendy 2026-07-24 — Compose-icon "New chat" pill button, moved out of
   the sidebar-header actions row (was a bare `+` next to the collapse
   chevron, which read as a math formula). Full-width in expanded state,
   icon-only centered when collapsed via `.cx-new-chat-label { display:none }`. */
.cx-new-chat-btn {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 10px 4px; padding: 8px 12px;
  background: rgba(139, 26, 26, 0.06);
  color: #7C5316;
  border: 1px solid rgba(139, 26, 26, 0.22);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.cx-new-chat-btn:hover {
  background: rgba(139, 26, 26, 0.12);
  color: #8B1A1A;
  border-color: rgba(139, 26, 26, 0.38);
}
.cx-new-chat-btn:focus-visible {
  outline: 2px solid #A87327; outline-offset: 1px;
}
.cx-new-chat-icon { flex-shrink: 0; }
.cx-sidebar.collapsed .cx-new-chat-btn {
  justify-content: center;
  padding: 8px 0;
  margin: 8px 8px 4px;
}

.cx-signout-btn {
  display: block; width: calc(100% - 16px); margin: 6px 8px 0;
  padding: 8px 10px;
  font-size: 12px; font-weight: 600; text-align: left;
  background: transparent; color: #8B1A1A;
  border: 1px solid rgba(139, 26, 26, 0.55); border-radius: 6px;
  cursor: pointer; transition: background .12s;
  font-family: inherit;
}
.cx-signout-btn:hover { background: rgba(139, 26, 26, 0.12); }

/* ── Page-heading typography (used by _customer_base.html children) ──
   Sendy 2026-07-24 — the .cx-shell / .cx-shell .sidebar / .cx-main
   layout block was removed here. Account pages now use the exact same
   .app + .sidebar + .main skeleton as index.html (see _customer_base.html);
   the .cx-shell dark-navy sidebar was the ROOT CAUSE of Sendy's
   "account pages have dark-navy ghosted sidebar" screenshots. Its
   removal is what makes the cream sidebar palette actually apply on
   Akun / Langganan / Data Saya / Privasi.

   The typography rules below stay: templates reference .cx-page-h1 /
   .cx-page-desc / .cx-placeholder / .cx-main-inner directly. */
.cx-page-h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500; font-size: 28px; color: #0E1B33;
  margin: 0 0 8px; letter-spacing: -0.005em;
}
.cx-page-desc {
  font-size: 15px; line-height: 1.55; color: #4E5A70;
  margin: 0 0 24px;
}
.cx-placeholder {
  background: #FBF8F2; border: 1px dashed #E6DEC8;
  border-radius: 8px; padding: 32px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px; color: #7E8398; text-align: center;
  line-height: 1.7;
}
.cx-placeholder strong { color: #8B1A1A; }