/* BudunOS left sidebar variants
 * Body: bos-sidebar-v-{id}
 * Root: .budun-sidebar.bos-sidebar--{id}
 */

/* ---------- Ink night — charcoal + luminous active ---------- */
.budun-sidebar.bos-sidebar--ink {
  --sb-bg: #0f1419;
  --sb-ink: #e8eaed;
  --sb-text: #e8eaed;
  --sb-muted: #8b949e;
  --sb-faint: #8b949e;
  --sb-line: rgba(255, 255, 255, 0.06);
  --sb-soft: rgba(255, 255, 255, 0.04);
  --sb-hover: rgba(255, 255, 255, 0.06);
  --sb-active-bg: color-mix(in srgb, var(--link-color) 22%, #0f1419);
  --sb-accent: var(--link-color);
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--link-color) 18%, transparent), transparent 55%),
    #0f1419 !important;
  box-shadow:
    0 18px 48px -28px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.budun-sidebar.bos-sidebar--ink .main-side-nav a {
  color: #d0d7de;
}

.budun-sidebar.bos-sidebar--ink .main-side-nav a:hover {
  color: #fff;
}

.budun-sidebar.bos-sidebar--ink .main-side-nav > li.active > a,
.budun-sidebar.bos-sidebar--ink .main-side-nav .active > a {
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--link-color) 32%, transparent), color-mix(in srgb, var(--link-color) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link-color) 35%, transparent);
}

.budun-sidebar.bos-sidebar--ink .bos-sb-section .text-muted,
.budun-sidebar.bos-sidebar--ink .main-side-nav > .bos-sb-section small {
  color: #6e7681 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px !important;
}

.budun-sidebar.bos-sidebar--ink .main-icon,
.budun-sidebar.bos-sidebar--ink .bos-sb-ico,
.budun-sidebar.bos-sidebar--ink a > i.main-icon {
  color: #fff !important;
}

.budun-sidebar.bos-sidebar--ink .main-icon svg,
.budun-sidebar.bos-sidebar--ink .bos-sb-ico svg,
.budun-sidebar.bos-sidebar--ink .main-icon svg *,
.budun-sidebar.bos-sidebar--ink .bos-sb-ico svg path,
.budun-sidebar.bos-sidebar--ink .bos-sb-ico svg circle,
.budun-sidebar.bos-sidebar--ink .bos-sb-ico svg rect,
.budun-sidebar.bos-sidebar--ink .bos-sb-ico svg line,
.budun-sidebar.bos-sidebar--ink .bos-sb-ico svg polyline,
.budun-sidebar.bos-sidebar--ink .bos-sb-ico svg polygon {
  color: #fff !important;
  stroke: #fff !important;
}

.budun-sidebar.bos-sidebar--ink .main-side-nav .active > a .main-icon,
.budun-sidebar.bos-sidebar--ink .main-side-nav .active > a .bos-sb-ico,
.budun-sidebar.bos-sidebar--ink .main-side-nav a:hover .main-icon,
.budun-sidebar.bos-sidebar--ink .main-side-nav a:hover .bos-sb-ico {
  color: #fff !important;
}

.budun-sidebar.bos-sidebar--ink .main-side-nav .active > a .bos-sb-ico svg *,
.budun-sidebar.bos-sidebar--ink .main-side-nav a:hover .bos-sb-ico svg * {
  stroke: #fff !important;
  color: #fff !important;
}

/* ---------- Frost pane — glass over page ---------- */
.budun-sidebar.bos-sidebar--glass {
  --sb-bg: rgba(255, 255, 255, 0.55);
  --sb-ink: #191b20;
  --sb-line: rgba(255, 255, 255, 0.55);
  --sb-hover: rgba(255, 255, 255, 0.45);
  --sb-active-bg: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.48) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 12px 40px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
}

body.night-mode .budun-sidebar.bos-sidebar--glass,
html[data-bs-theme="dark"] .budun-sidebar.bos-sidebar--glass {
  --sb-bg: rgba(30, 37, 43, 0.55);
  --sb-ink: #e8eaed;
  --sb-line: rgba(255, 255, 255, 0.1);
  --sb-hover: rgba(255, 255, 255, 0.06);
  --sb-active-bg: rgba(255, 255, 255, 0.1);
  background: rgba(30, 37, 43, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

.budun-sidebar.bos-sidebar--glass .main-side-nav > li.active > a,
.budun-sidebar.bos-sidebar--glass .main-side-nav .active > a {
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* ---------- Accent stripe — Material left rail ---------- */
.budun-sidebar.bos-sidebar--stripe {
  --sb-radius: 22px;
  --sb-item-radius: 14px;
  --sb-active-bg: color-mix(in srgb, var(--link-color) 10%, #ffffff);
  border-radius: 22px !important;
}

body.night-mode .budun-sidebar.bos-sidebar--stripe,
html[data-bs-theme="dark"] .budun-sidebar.bos-sidebar--stripe {
  --sb-active-bg: color-mix(in srgb, var(--link-color) 18%, transparent);
}

.budun-sidebar.bos-sidebar--stripe .main-side-nav a {
  padding-left: 14px;
}

.budun-sidebar.bos-sidebar--stripe .main-side-nav > li.active > a,
.budun-sidebar.bos-sidebar--stripe .main-side-nav .active > a {
  color: var(--link-color);
  font-weight: 650;
}

.budun-sidebar.bos-sidebar--stripe .main-side-nav > li.active > a::before,
.budun-sidebar.bos-sidebar--stripe .main-side-nav li.active > a::before {
  display: block !important;
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--link-color);
}

.budun-sidebar.bos-sidebar--stripe .main-side-nav .active > a .main-icon,
.budun-sidebar.bos-sidebar--stripe .main-side-nav .active > a .bos-sb-ico {
  color: var(--link-color);
}

.budun-sidebar.bos-sidebar--stripe .bos-sb-section {
  margin-top: 10px;
}

/* ---------- Icon bubbles — tinted wells ---------- */
.budun-sidebar.bos-sidebar--bubble {
  --sb-item-radius: 16px;
  --sb-active-bg: color-mix(in srgb, var(--link-color) 8%, #ffffff);
  border-radius: 24px !important;
  padding: 2px;
}

body.night-mode .budun-sidebar.bos-sidebar--bubble,
html[data-bs-theme="dark"] .budun-sidebar.bos-sidebar--bubble {
  --sb-active-bg: color-mix(in srgb, var(--link-color) 16%, transparent);
}

.budun-sidebar.bos-sidebar--bubble .card-body.with-nav {
  padding: 14px 12px 16px !important;
}

.budun-sidebar.bos-sidebar--bubble .main-side-nav > li {
  margin: 4px 0;
}

.budun-sidebar.bos-sidebar--bubble .main-side-nav a {
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px 8px 8px;
  border-radius: 16px;
}

.budun-sidebar.bos-sidebar--bubble .main-side-nav a:hover {
  background: color-mix(in srgb, var(--link-color) 6%, transparent);
}

.budun-sidebar.bos-sidebar--bubble .main-icon,
.budun-sidebar.bos-sidebar--bubble .bos-sb-ico,
.budun-sidebar.bos-sidebar--bubble a > i.main-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border-radius: 11px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--link-color) 12%, transparent);
  color: var(--link-color);
}

.budun-sidebar.bos-sidebar--bubble .main-icon svg,
.budun-sidebar.bos-sidebar--bubble .bos-sb-ico svg {
  width: 16px !important;
  height: 16px !important;
}

.budun-sidebar.bos-sidebar--bubble .main-side-nav > li.active > a,
.budun-sidebar.bos-sidebar--bubble .main-side-nav .active > a {
  background: color-mix(in srgb, var(--link-color) 12%, #ffffff);
  color: var(--link-color);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--link-color) 18%, transparent);
}

body.night-mode .budun-sidebar.bos-sidebar--bubble .main-side-nav > li.active > a,
body.night-mode .budun-sidebar.bos-sidebar--bubble .main-side-nav .active > a,
html[data-bs-theme="dark"] .budun-sidebar.bos-sidebar--bubble .main-side-nav > li.active > a,
html[data-bs-theme="dark"] .budun-sidebar.bos-sidebar--bubble .main-side-nav .active > a {
  background: color-mix(in srgb, var(--link-color) 22%, transparent);
  color: #fff;
}

.budun-sidebar.bos-sidebar--bubble .main-side-nav .active > a .main-icon,
.budun-sidebar.bos-sidebar--bubble .main-side-nav .active > a .bos-sb-ico {
  background: var(--link-color);
  color: #fff;
}

.budun-sidebar.bos-sidebar--bubble .main-side-nav .active > a .bos-sb-ico svg,
.budun-sidebar.bos-sidebar--bubble .main-side-nav .active > a .bos-sb-ico svg * {
  stroke: #fff !important;
  color: #fff !important;
}

.budun-sidebar.bos-sidebar--bubble .bos-sb-section .text-muted {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}