/* ============================================================
 * SmartLease Theme Switcher — drop-in UI styles
 * Optional. Skip if you're rendering your own switcher chrome.
 * ============================================================ */

.sl-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  font-family: var(--sl-font-sans, system-ui, sans-serif);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.sl-theme-switcher--vertical {
  flex-direction: column;
  align-items: stretch;
}

.sl-theme-switcher__label {
  padding: 6px 10px 6px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  align-self: center;
}

.sl-theme-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.75);
  font: 600 11px/1 var(--sl-font-sans, system-ui, sans-serif);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.sl-theme-switcher__btn:hover:not(.is-active) {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.sl-theme-switcher__btn.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sl-theme-switcher__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}

.sl-theme-switcher__name {
  white-space: nowrap;
}

/* Floating top-right placement helper — opt in by adding `.sl-theme-switcher--floating` */
.sl-theme-switcher--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
}

/* Footer context: slightly more transparent background */
#footer-theme-bar .sl-theme-switcher {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Sidebar context: transparent, flush */
#sidebar-theme-bar .sl-theme-switcher,
#sidebar-admin-theme-bar .sl-theme-switcher {
  background: transparent;
  box-shadow: none;
  padding: 2px;
  gap: 1px;
  flex-wrap: wrap;
}
#sidebar-theme-bar .sl-theme-switcher__btn,
#sidebar-admin-theme-bar .sl-theme-switcher__btn {
  padding: 5px 8px;
  font-size: 10px;
}

/* Nav dropdown context (inside a white dropdown) */
#nav-theme-bar .sl-theme-switcher {
  background: transparent;
  box-shadow: none;
  padding: 2px;
  gap: 1px;
}
#nav-theme-bar .sl-theme-switcher__btn {
  color: var(--sl-fg-2, #344054);
  font-size: 11px;
  padding: 6px 10px;
}
#nav-theme-bar .sl-theme-switcher__btn:hover:not(.is-active) {
  color: var(--sl-fg-1, #0f172a);
  background: var(--sl-paper, #f8fafc);
}
#nav-theme-bar .sl-theme-switcher__btn.is-active {
  background: var(--sl-brand-soft, #e8f5ee);
  color: var(--sl-brand, #0a9959);
}

/* Daylight: sidebar switcher needs dark text since sidebar is white */
[data-theme="daylight"] #sidebar-admin-theme-bar .sl-theme-switcher__btn,
[data-theme="daylight"] #sidebar-theme-bar .sl-theme-switcher__btn {
  color: var(--sl-fg-2);
}
[data-theme="daylight"] #sidebar-admin-theme-bar .sl-theme-switcher__btn:hover:not(.is-active),
[data-theme="daylight"] #sidebar-theme-bar .sl-theme-switcher__btn:hover:not(.is-active) {
  color: var(--sl-brand);
  background: var(--sl-brand-soft);
}
[data-theme="daylight"] #sidebar-admin-theme-bar .sl-theme-switcher__btn.is-active,
[data-theme="daylight"] #sidebar-theme-bar .sl-theme-switcher__btn.is-active {
  background: var(--sl-brand-soft);
  color: var(--sl-brand);
}