/* Shared UI components for Lucid24 pages (sidebar TOC + menus)
   Uses theme variables set by themes.js:
   --main-bg, --main-text, --header-bg, --header-text,
   --button-bg, --button-text, --button-border
*/

/* ---------- Sidebar (TOC) ---------- */
.sidebar {
  height: 100%;
  width: 0;
  /* opened by JS */
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: 0.25s ease;
  background: var(--l24-sidebar-bg, var(--main-bg));
  color: var(--main-text);
  border-right: 1px solid var(--button-border);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.12);
}

/* top button strip inside sidebar */
.sidebar-nav {
  position: sticky;
  top: 0;
  display: flex;
  gap: 6px;
  padding: 8px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--button-border);
  z-index: 2;
}

.sidebar-nav-btn {
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.sidebar-nav-btn:hover {
  filter: brightness(0.97);
}


/* ===== NEW SIDE TOC (native <details> based structure) ===== */
.side-toc {
  padding: 8px 0;
}

.side-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-toc-item {
  /* STABLE INDENTATION: Uses CSS variable set by Python */
  padding-left: calc(var(--side-toc-level, 1) * 5px);
  margin: 2px 0;
}

/* Base link styling */
.side-toc-link {
  font-family: inherit;  display: inline-block;
  padding: 7px 10px;
  font-size: 1em;
  line-height: 1.35;
  font-weight: 400;
  text-decoration: none;
  color: var(--main-text);
  border-radius: 6px;
  transition: all 150ms ease;
  position: relative;
}

.side-toc-link:hover {
  background: var(--toc-hover-bg, var(--button-bg));
  color: var(--toc-hover-text, var(--main-text));
  transform: translateX(2px);
}

.side-toc-link:active {
  transform: translateX(1px);
}

/* Active/current link state */
.side-toc-link.active,
.side-toc-link[aria-current="page"] {
  background: var(--toc-active-bg, var(--button-bg));
  color: var(--toc-active-text, var(--main-text));
  font-weight: 500;
  border-left: 3px solid var(--link-color, #0066cc);
  padding-left: 7px;
}

/* Leaf nodes (no children) - slightly lighter weight */
.side-toc-leaf {
  opacity: 0.95;
}

/* Summary (collapsible group header) */
.side-toc-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}

/* Remove default details markers */
.side-toc-summary::-webkit-details-marker,
.side-toc-summary::marker {
  display: none;
}

/* Summary link inherits base link styling but with flex adjustments */
.side-toc-summary .side-toc-link {
  font-family: inherit;
  flex: 1;
  font-weight: 500;
}

/* Chevron indicator */
.side-toc-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 150ms ease, transform 150ms ease;
}

.side-toc-summary:hover .side-toc-chevron {
  opacity: 0.9;
}

.side-toc-chevron::after {
  content: "▶";
  font-size: 0.8em;
  transition: transform 200ms ease;
  display: block;
}

/* Rotate chevron when open */
details.side-toc-group[open]>.side-toc-summary .side-toc-chevron::after {
  transform: rotate(90deg);
}

/* Nested list spacing */
.side-toc-group>.side-toc-list {
  margin-top: 2px;
  padding-bottom: 4px;
}

/* Visual grouping for open details */
details.side-toc-group[open] {
  margin-bottom: 6px;
}

/* Subtle border for open groups */
details.side-toc-group[open]>.side-toc-list {
  border-left: 1px solid var(--button-border);
  margin-left: 8px;
  padding-left: 4px;
}


/* ============================================================
   Side TOC – Top-level (Level 1) emphasis
   ------------------------------------------------------------
   PURPOSE:
     Make top-level TOC entries visually dominant so the
     document structure is obvious at a glance.

   WHAT TO TUNE:
     - font-weight : 600–800 (boldness)
     - font-size   : 1.10em–1.20em (relative size)
     - line-height : spacing comfort
   ============================================================ */

/* ============================================================
   Side TOC – Top-level (Level 1) emphasis
   ------------------------------------------------------------
   NOTE:
     Level is stored as inline style: --side-toc-level: N
     We match top level by style attribute containing level 1.
   ============================================================ */
/* NOTE (2026-01-07):
   Top-level TOC emphasis is matched via inline "--side-toc-level: 1"
   set by sidebar-toc-custom.py (not data-level attrs). */

/* Match both "--side-toc-level: 1" and "--side-toc-level:1" */
.side-toc-item[style*="--side-toc-level: 1"]>.side-toc-row>.side-toc-link,
.side-toc-item[style*="--side-toc-level:1"]>.side-toc-row>.side-toc-link {
  font-weight: 700;
  /* Tune: 600–800 */
  font-size: 1.15em;
  /* Tune: 1.10–1.20 */
  line-height: 1.25;
  /* Tune: 1.2–1.35 */
}


/* ===== LEGACY VAGGA STRUCTURE (keep for backwards compatibility) ===== */
.vagga-group {
  padding: 6px 8px;
}

.collapsible-header.active {
  outline: 2px solid rgba(0, 0, 0, 0.08);
}

.collapsible-content {
  display: none;
  /* opened by JS */
  padding: 4px 0 10px 0;
}

.collapsible-content.active {
  display: block;
}

/* --- Right-side chevron alignment for collapsible headers --- */
.collapsible-header {
  position: relative;
  padding-right: 34px;
}

.collapsible-header::after {
  content: "▶";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  width: 16px;
  text-align: center;
  opacity: 0.75;
}

.collapsible-header.active::after {
  transform: translateY(-50%) rotate(90deg);
}

.sutta-list {
  display: block;
  margin-top: 4px;
  border-left: 2px solid var(--button-border);
  padding-left: 6px;
}

.sutta-list a {
  display: block;
  padding: 2px 6px;
  font-size: 0.85rem;
  line-height: 1.25;
  font-weight: 400;
  text-decoration: none;
  color: var(--main-text);
  border-radius: 6px;
}

.sutta-list a:hover {
  background: var(--button-bg);
}


/* ---------- Top menus (language + settings) ---------- */
.menu-container {
  position: relative;
  display: inline-block;
}

.menu-button,
.settings-btn {
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-border);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.menu-content {
  display: none;
  /* toggled by JS */
  position: absolute;
  right: 0;
  top: 40px;
  min-width: 220px;
  background: var(--l24-sidebar-bg, var(--main-bg));
  color: var(--main-text);
  border: 1px solid var(--button-border);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  overflow: hidden;
}

.menu-content a,
.menu-content .theme-item {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--main-text);
  cursor: pointer;
  font-size: 13px;
}

.menu-content a:hover,
.menu-content .theme-item:hover {
  background: var(--button-bg);
}

.menu-divider {
  border-top: 1px solid var(--button-border);
  margin: 4px 0;
}

/* submenu headers inside menu-content blocks */
.menu-section-header {
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
  background: var(--header-bg);
  color: var(--header-text, var(--main-text));
  border-bottom: 1px solid var(--button-border);
}

/* Inputs inside menus */
.menu-content select,
.menu-content button {
  font-family: inherit;
}


/* ===== Global TOC expand / collapse buttons ===== */
.toc-global-controls {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-left: 6px;
}

.toc-global-btn {
  width: 20px;
  height: 20px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  color: var(--main-text);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

/* horizontal stroke (minus) */
.toc-global-btn::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* vertical stroke for PLUS only */
.toc-expand-all::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 12px;
  background: currentColor;
  border-radius: 1px;
}

.toc-global-btn:hover {
  background: var(--button-hover-bg, rgba(0, 0, 0, 0.05));
}

.toc-global-btn:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}


/* ===== Sidebar nav plus/minus override ===== */
.sidebar-nav-btn.toc-global-btn {
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--panel-bg);
  color: var(--main-text);
  border: 1px solid var(--border-color);
}


/* ===== TOC header icon buttons: +, -, X (consistent sizing) ===== */
.toc-icon-btn {
  width: var(--l24-icon-btn-size);
  height: var(--l24-icon-btn-size);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--button-bg);
  color: var(--button-text);

  border: 1px solid var(--button-border);
  border-radius: 8px;

  cursor: pointer;
  position: relative;
  user-select: none;

  transition: transform 80ms ease, background 120ms ease, border-color 120ms ease;
}

.toc-icon-btn:hover {
  background: var(--button-bg-hover, rgba(0, 0, 0, 0.06));
}

.toc-icon-btn:active {
  transform: translateY(1px);
}

.toc-icon-btn:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

/* base stroke (minus) */
.toc-icon-btn::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* PLUS: add vertical stroke */
.toc-expand-all::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 12px;
  background: currentColor;
  border-radius: 1px;
}

/* CLOSE: override to draw an X with two diagonals */
.toc-close::before,
.toc-close::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.toc-close::before {
  transform: rotate(45deg);
}

.toc-close::after {
  transform: rotate(-45deg);
}

/* Ensure sidebar header buttons keep their layout styling */
.sidebar-nav-btn.toc-icon-btn {
  margin-left: 6px;
}


/* ===== Icon button sizing unification (Top/Lang/Settings/+/-/X) ===== */
:root {
  --l24-icon-btn-size: 26px;
  --l24-icon-stroke: 12px;
  --l24-icon-stroke-thickness: 2px;
  --l24-icon-radius: 8px;

  /* Sidebar shading (theme-aware, via color-mix) */
  --l24-sidebar-shade-pct: 10%;
  --l24-sidebar-mix-color: rgba(0, 0, 0, 1);
  /* light themes: darken */
}

/* Dark themes: make sidebar a bit brighter */
:root[data-theme="tokyo-storm"],
:root[data-theme="catppuccin-mocha"],
:root[data-theme="material-dark"],
:root[data-theme="dracula"],
:root[data-theme="github-dark"] {
  --l24-sidebar-shade-pct: 10%;
  --l24-sidebar-mix-color: rgba(255, 255, 255, 1);
}

/* Derived sidebar background */
:root {
  --l24-sidebar-bg: color-mix(in srgb,
      var(--main-bg) calc(100% - var(--l24-sidebar-shade-pct)),
      var(--l24-sidebar-mix-color) var(--l24-sidebar-shade-pct));
}


/* Make language/settings/top buttons slightly smaller (match TOC buttons) */
.menu-button,
.settings-btn {
  width: var(--l24-icon-btn-size);
  height: var(--l24-icon-btn-size);
  line-height: var(--l24-icon-btn-size);
  padding: 0;
  border-radius: var(--l24-icon-radius);
}

/* Ensure the top button looks like a button, not a bare link */
.menu-button.top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Sidebar TOC header buttons: enforce same size + border */
.sidebar-nav-btn.toc-icon-btn {
  width: var(--l24-icon-btn-size);
  height: var(--l24-icon-btn-size);
  border-radius: var(--l24-icon-radius);
  padding: 0;
}

/* Unify the icon strokes */
.toc-icon-btn::before {
  width: var(--l24-icon-stroke);
  height: var(--l24-icon-stroke-thickness);
}

.toc-expand-all::after {
  height: var(--l24-icon-stroke);
  width: var(--l24-icon-stroke-thickness);
}

/* Also draw the X using same stroke sizes */
.toc-close::before,
.toc-close::after {
  width: var(--l24-icon-stroke);
  height: var(--l24-icon-stroke-thickness);
}


/* ===== Sticky toolbar spacing for Top/Lang/Settings ===== */
.menu-container {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}


/* ===== Jump-to (🦘) control ===== */
label[for="fname"]>abbr {
  width: var(--l24-icon-btn-size);
  height: var(--l24-icon-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--button-bg);
  color: var(--button-text);

  border: 1px solid var(--button-border);
  border-radius: 8px;

  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}

label[for="fname"]>abbr:hover {
  background: var(--button-hover-bg);
}

label[for="fname"]>abbr:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

/* Keep the form aligned with the other toolbar buttons */
form[onsubmit*="load_sutta"] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 6px 0 0;
}


/* ===== TOC hover/active contrast ===== */
.sutta-list a:hover,
.sutta-list a:hover * {
  background: var(--toc-hover-bg) !important;
  color: var(--toc-hover-text) !important;
}

.sutta-list a.active,
.sutta-list a.current,
.sutta-list a.open,
.sutta-list a[aria-current="page"],
.sutta-list a[aria-current="true"],
.sutta-list a.active *,
.sutta-list a.current *,
.sutta-list a.open *,
.sutta-list a[aria-current="page"] *,
.sutta-list a[aria-current="true"] * {
  background: var(--toc-active-bg) !important;
  color: var(--toc-active-text) !important;
}

/* Collapsible headers */
.collapsible-header:hover {
  background: var(--toc-hover-bg) !important;
  color: var(--toc-hover-text) !important;
}

.collapsible-header.active,
.collapsible-header.active * {
  background: var(--toc-active-bg) !important;
  color: var(--toc-active-text) !important;
}


/* ===== Monochrome emoji wrapper ===== */
.monochrome-emoji {
  filter: grayscale(1) saturate(0);
}

/* Sidebar TOC inherits page typography */
.side-toc-sidebar{ font: inherit; }


/* ===== Sidebar TOC (button + link tree) ===== */
.side-toc-row{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Toggle (chevron) hit target */
.side-toc-toggle{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 150ms ease, transform 150ms ease;
}
.side-toc-row:hover .side-toc-toggle{ opacity: 0.9; }

.side-toc-toggle::after{
  content: "▶";
  font-size: 0.8em;
  display:block;
  transition: transform 200ms ease;
}
.side-toc-toggle[aria-expanded="true"]::after{
  transform: rotate(90deg);
}

/* Spacer takes remaining row width; clicking it toggles (JS) */
.side-toc-toggle-spacer{
  flex: 1 1 auto;
  height: 100%;
  min-height: 28px;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Leaf placeholders keep alignment without suggesting expandability */
.side-toc-toggle-placeholder{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0;
  cursor: default;
}
.side-toc-toggle-placeholder::after{
  content: "";
}
/* Keep placeholders hidden even on row hover */
.side-toc-row:hover .side-toc-toggle-placeholder{
  opacity: 0;
}

/* Children container visual (vertical guide line) */
.side-toc-item.is-open > .side-toc-children{
  margin-bottom: 6px;
}
.side-toc-children{
  margin-top: 2px;
  padding-bottom: 4px;
  border-left: 1px solid var(--button-border);
  margin-left: 8px;
  padding-left: 4px;
}