/* ============================================================
   Sidebar v3 — off-canvas drawer + optional always-visible mode.

   Default: slim topbar (burger + pin + logo + controls). Burger
   opens an overlay drawer; content stays full-width.

   Always-visible (body.s-sidebar-pinned): sidebar stays open and
   pushes content right, triggered by the pin button (cookie
   SidebarPinned=1).
   ============================================================ */

/* ── Hide Serenity's built-in blue header ────────────────────── */
.s-sidebar-header { display: none !important; }

/* ── Content sizing ─────────────────────────────────────────── */
section.content {
  min-height: calc(100dvh - var(--s-topbar-h)) !important;
  padding: 2.2rem 2.2rem 0.6rem 2.2rem !important;
}
@media (min-width: 768px) {
  /* At >=768px the topbar is removed (desktop shell) and the taskbar
     takes its place, so full-height content must clear the taskbar. */
  .full-height-page section.content {
    height: calc(100dvh - var(--s-taskbar-h)) !important;
  }
}

/* Main content: clear the topbar / floating burger. Never pushed. */
.s-main {
  padding: var(--s-topbar-h) 0 0 0 !important;
  margin: 0 !important;
  min-height: 100dvh !important;
  transition: margin var(--s-transition-slow);
  /* stop two-finger swipe-back from horizontally scrolling/ghosting
     this region — see overrides.css html/body rule */
  overscroll-behavior-x: none;
}

/* ── Mobile page scrolling (<768px) ───────────────────────────────
   The desktop shell makes .s-main a fixed-height scroll region
   (see taskbar.css @min-width:768px → height:calc(100dvh - taskbar);
   overflow-y:auto). Below 768px there was NO such rule, so .s-main kept
   only min-height:100dvh and grew to its content height — nothing was
   bounded to the viewport. Combined with body{overflow-x:hidden} (which
   makes the body its own content-tall scroll box), the page could not
   scroll in place; it only moved "from behind" when a fixed overlay
   (sidebar / tab-switcher) was open. Fix: mirror the desktop model and
   make .s-main the single viewport-tall scroller. The fixed topbar stays
   put and .s-main's padding-top keeps content clear of it. taskbar.js
   already targets .s-main for scroll-to-top, so this is the intended box. */
@media (max-width: 767.98px) {
  .s-main {
    height: 100vh;            /* fallback for browsers without dvh */
    height: 100dvh;
    min-height: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;   /* momentum scrolling on iOS */
  }
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR (header mode only — element absent in compact markup)
   ═══════════════════════════════════════════════════════════════ */
.s-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--s-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.85rem;
  background: var(--s-sidebar-bg, rgba(252, 254, 255, 0.92));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--s-card-border);
  box-shadow: var(--s-shadow-sm);
  z-index: 1100;
}
.s-topbar-left,
.s-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.s-topbar .s-site-logo-img {
  max-width: 120px;
  max-height: 30px;
  height: auto;
  width: auto;
  object-fit: contain;
  object-position: left center;
  margin-left: 0.4rem;
}
/* Dark theme: render the BeirutFlow logo as a white silhouette so it stays legible
   on the dark topbar/brand (mirrors the desktop Start-panel brand rule). */
.theme-cosmos-dark .s-topbar .s-site-logo-img,
.theme-cosmos-dark .s-sidebar-brand .s-site-logo-img {
  filter: brightness(0) invert(1);
}
/* Topbar burger: flat, inline */
.s-topbar .s-sidebar-toggler {
  width: 40px !important;
  height: 40px !important;
  border: none;
  background: transparent;
  border-radius: 11px;
  color: var(--s-sidebar-icon);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  transition: background var(--s-transition), color var(--s-transition);
}
.s-topbar .s-sidebar-toggler:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--bs-body-color);
}

/* Pin button — keeps the sidebar always visible */
.s-sidebar-pin {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--s-sidebar-icon);
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--s-transition), color var(--s-transition), transform var(--s-transition);
}
.s-sidebar-pin:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--bs-body-color);
}
.s-sidebar-pin.active {
  color: var(--bs-primary);
  transform: rotate(45deg);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR shell — off-canvas drawer
   ═══════════════════════════════════════════════════════════════ */
.s-sidebar {
  position: fixed;
  top: var(--s-topbar-h) !important;       /* header mode: below topbar */
  left: 0;
  width: var(--s-sidebar-pane-width) !important;
  height: calc(100dvh - var(--s-topbar-h));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--s-sidebar-bg, rgba(252, 254, 255, 0.92)) !important;
  box-shadow: var(--s-shadow-sm);
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform var(--s-transition-slow);
  z-index: 1050;
}
/* Compact mode: no topbar, so the drawer spans the full height */
body.s-topbar-hidden .s-sidebar {
  top: 0 !important;
  height: 100dvh;
}
[dir="rtl"] .s-sidebar { left: auto; right: 0; transform: translateX(100%); }

/* Drawer open */
body.s-sidebar-expanded .s-sidebar { transform: translateX(0) !important; }
[dir="rtl"] body.s-sidebar-expanded .s-sidebar { transform: translateX(0) !important; }

/* Backdrop (drawer mode only — never when pinned/always-visible) */
body.s-sidebar-expanded:not(.s-sidebar-pinned)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  z-index: 1040;
}

/* ═══════════════════════════════════════════════════════════════
   PINNED (docked) sidebar — when open it PUSHES content instead of
   overlaying. The burger still toggles open/closed (s-sidebar-expanded);
   pin only controls docked-vs-overlay + no backdrop.
   ═══════════════════════════════════════════════════════════════ */
body.s-sidebar-pinned.s-sidebar-expanded .s-main {
  margin-left: var(--s-sidebar-pane-width) !important;
}
[dir="rtl"] body.s-sidebar-pinned.s-sidebar-expanded .s-main {
  margin-left: 0 !important;
  margin-right: var(--s-sidebar-pane-width) !important;
}

/* Topbar hidden: no topbar to clear, so content starts at the very top */
body.s-topbar-hidden .s-main { padding-top: 0 !important; }
body.s-topbar-hidden section.content { min-height: 100dvh !important; }

/* ── Sidebar pane ────────────────────────────────────────────── */
.s-sidebar-pane {
  position: relative !important;
  width: 100% !important;
  background: transparent !important;
  border-right: none !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Brand (logo) — only when topbar is hidden ───────────────── */
.s-sidebar-brand {
  padding: 0.95rem 1rem 0.25rem;
  flex-shrink: 0;
}
.s-sidebar-brand .s-site-logo-img {
  max-width: 140px;
  height: auto;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
[dir="rtl"] .s-sidebar-brand .s-site-logo-img { object-position: right center; }

/* ── Search ──────────────────────────────────────────────────── */
.s-sidebar-search {
  padding: 0.85rem 0.85rem 0.4rem;
  flex-shrink: 0;
  position: relative;
}
.s-sidebar-search-icon {
  position: absolute;
  left: 1.65rem;
  top: 55%;
  transform: translateY(-50%);
  color: var(--s-placeholder);
  font-size: 0.82rem;
  pointer-events: none;
}
[dir="rtl"] .s-sidebar-search-icon { left: auto; right: 1.65rem; }
.s-sidebar-search-input {
  padding-left: 2.1rem !important;
  border-radius: var(--bs-border-radius) !important;
  border-color: var(--s-cell-input-border) !important;
  background: var(--s-input-bg) !important;
  color: var(--s-input-text) !important;
  font-size: 0.875rem;
  height: var(--s-input-inner-height);
  line-height: var(--s-input-line-height);
}
[dir="rtl"] .s-sidebar-search-input {
  padding-left: 0.75rem !important;
  padding-right: 2.1rem !important;
}
.s-sidebar-search-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 3px var(--s-input-outline) !important;
}

/* ── Recent quick-launch chips (Start panel, from history) ───── */
.s-sidebar-recent {
  flex-shrink: 0;
  padding: 0.2rem 0.85rem 0.5rem;
}
.s-sidebar-recent[hidden] { display: none; }
.s-recent-head {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--s-placeholder);
  margin: 0.1rem 0 0.35rem;
}
.s-recent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.s-recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--bs-primary-bg-subtle, rgba(62, 111, 176, 0.1));
  color: var(--s-sidebar-link);
  font-size: 0.78rem;
  text-decoration: none;
}
.s-recent-chip:hover { background: var(--bs-primary); color: #fff; }
.s-recent-chip .s-recent-ico { font-size: 0.75rem; flex-shrink: 0; }
.s-recent-chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Search results (flat list shown while the search box has text) ── */
.s-sidebar-results {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.4rem 0.6rem 0.75rem;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}
.s-sidebar-results:hover { scrollbar-color: var(--s-scroll-thumb) transparent; }
.s-sidebar-results[hidden] { display: none; }
.s-sidebar-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  color: var(--s-sidebar-link);
  text-decoration: none;
}
.s-sidebar-result:hover {
  background: var(--bs-primary-bg-subtle, rgba(62, 111, 176, 0.12));
  color: var(--bs-primary);
}
.s-sidebar-result .s-result-icon {
  width: 1.15rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--s-sidebar-icon);
}
.s-sidebar-result:hover .s-result-icon { color: var(--bs-primary); }
.s-result-text { display: flex; flex-direction: column; min-width: 0; }
.s-result-title {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-result-crumb {
  font-size: 0.72rem;
  color: var(--s-placeholder);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-result-crumb:empty { display: none; }
.s-sidebar-noresult {
  padding: 0.9rem 0.7rem;
  font-size: 0.85rem;
  color: var(--s-placeholder);
  text-align: center;
}

/* ── Scrollable nav area ─────────────────────────────────────── */
.s-sidebar-groups {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.4rem 0 0.75rem;
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}
.s-sidebar-groups:hover { scrollbar-color: var(--s-scroll-thumb) transparent; }

/* ── Menu list ───────────────────────────────────────────────── */
.s-sidebar-menu {
  padding: 0 0.6rem;
  list-style: none;
  margin: 0;
}
.s-sidebar-item {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  position: relative;
}
.s-sidebar-item.has-children { margin-top: 0.2rem; }

/* ── Sidebar link ────────────────────────────────────────────── */
.s-sidebar a,
.s-sidebar a:visited,
.s-sidebar a:hover { text-decoration: none; }
.s-sidebar .s-sidebar-link,
.s-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--s-sidebar-link);
  text-decoration: none;
  transition: background var(--s-transition), color var(--s-transition);
}
.s-sidebar .s-sidebar-link:hover,
.s-sidebar-link:hover {
  background: rgba(0, 0, 0, 0.045);
  color: var(--bs-body-color);
  text-decoration: none;
}

/* ── Active leaf — clean filled pill, no left bar ────────────── */
.s-sidebar .s-sidebar-item.active:not(.has-children) > .s-sidebar-link,
.s-sidebar-item.active:not(.has-children) > .s-sidebar-link {
  background: var(--s-sidebar-active-bg, var(--bs-primary));
  color: var(--s-sidebar-active-color, #fff);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.s-sidebar-item.active:not(.has-children) > .s-sidebar-link .s-sidebar-icon {
  color: var(--s-sidebar-active-color, #fff);
}
.s-sidebar-item.active:not(.has-children) > .s-sidebar-link:hover {
  background: var(--s-sidebar-active-bg, var(--bs-primary));
  color: var(--s-sidebar-active-color, #fff);
}
.s-sidebar-item.active:not(.has-children) > .s-sidebar-link:hover .s-sidebar-icon {
  color: var(--s-sidebar-active-color, #fff);
}

/* ── Active parent group ─────────────────────────────────────── */
.s-sidebar .s-sidebar-item.active.has-children > .s-sidebar-link,
.s-sidebar-item.active.has-children > .s-sidebar-link {
  background: transparent;
  color: var(--bs-body-color);
  font-weight: 500;
}
.s-sidebar-item.active.has-children > .s-sidebar-link .s-sidebar-icon {
  color: var(--s-sidebar-icon-active, var(--bs-primary));
}

/* ── Expanded parent ─────────────────────────────────────────── */
.s-sidebar .s-sidebar-link[aria-expanded="true"],
.s-sidebar-link[aria-expanded="true"] { color: var(--bs-body-color); font-weight: 500; }
.s-sidebar-link[aria-expanded="true"] .s-sidebar-icon { color: var(--s-sidebar-icon); }

/* ── Sidebar icon ─────────────────────────────────────────────── */
.s-sidebar-icon {
  font-size: 1.25rem;
  width: 1.75rem;
  text-align: center;
  color: var(--s-sidebar-icon);
  flex-shrink: 0;
  transition: color var(--s-transition);
}
.s-sidebar .s-sidebar-link:hover .s-sidebar-icon,
.s-sidebar-link:hover .s-sidebar-icon { color: var(--bs-body-color); }

/* ── Chevron toggle ───────────────────────────────────────────── */
.s-sidebar-menu-toggle {
  font-size: 0.72rem;
  margin-left: auto;
  opacity: 0.45;
  transition: transform var(--s-transition);
  flex-shrink: 0;
}
[dir="rtl"] .s-sidebar-menu-toggle { margin-left: 0; margin-right: auto; }
[aria-expanded="true"] > .s-sidebar-menu-toggle { transform: rotate(90deg); }

/* ── Sub-menu ─────────────────────────────────────────────────── */
.s-sidebar-menu .s-sidebar-menu {
  margin-left: 1.35rem;
  margin-right: 0;
  padding: 0.2rem 0 0.25rem 0.6rem;
  border-left: 1px solid rgba(0, 0, 0, 0.10);
}
.s-sidebar-menu .s-sidebar-menu .s-sidebar-link {
  font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  gap: 0.4rem;
}
.s-sidebar-menu .s-sidebar-menu .s-sidebar-icon { font-size: 1.05rem; width: 1.5rem; }
[dir="rtl"] .s-sidebar-menu .s-sidebar-menu {
  margin-left: 0;
  margin-right: 1.35rem;
  padding-left: 0;
  padding-right: 0.6rem;
  border-left: none;
  border-right: 1px solid rgba(0, 0, 0, 0.10);
}

/* ── Section titles ───────────────────────────────────────────── */
.s-sidebar-section-title {
  font-family: var(--header-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-category-title);
  padding: 1.25rem 1rem 0.3rem;
  opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR FOOTER (compact mode) — holds lang/theme/user controls
   ═══════════════════════════════════════════════════════════════ */
.s-sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.6rem 0.6rem;
  border-top: 1px solid var(--s-card-border);
  flex-shrink: 0;
}
/* Controls sit at the far end; pin button stays at the start */
.s-sidebar-footer-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
[dir="rtl"] .s-sidebar-footer-controls { margin-left: 0; margin-right: auto; }

/* ── Control buttons (shared: footer + topbar) ───────────────── */
.s-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--s-sidebar-icon);
  font-size: 1.2rem;
  text-decoration: none;
  transition: background var(--s-transition), color var(--s-transition);
}
.s-control-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--bs-body-color);
}

/* ── Control dropdown menus (shared) ─────────────────────────── */
.s-sidebar-footer .dropdown-menu,
.s-topbar .dropdown-menu {
  border: none;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--s-shadow-lg);
  background: var(--s-card-solid-bg);
  padding: 6px 0;
  min-width: 160px;
  font-size: 0.875rem;
}
.s-sidebar-footer .dropdown-item,
.s-topbar .dropdown-item {
  padding: 7px 13px;
  border-radius: 6px;
  margin: 2px 5px;
  color: var(--s-input-text);
  transition: background var(--s-transition);
}
.s-sidebar-footer .dropdown-item:hover,
.s-topbar .dropdown-item:hover {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}
.s-user-profile-menu { min-width: 200px !important; }
.s-user-card { border-bottom-color: var(--s-card-border) !important; }
.s-user-avatar { color: var(--s-sidebar-icon); font-size: 2rem; }
.s-user-info { color: var(--bs-secondary-color); font-size: 0.85rem; }