/* Shared pill-style light/dark toggle (track + sliding thumb + monochrome sun/moon
   line icons at each end), used by the customer portal's toggle (see
   portal_theme_toggle.js). Lives as a real <li> in the navbar's own right-aligned nav
   list (.santek-navbar-control below), immediately before the profile dropdown --
   not a position:fixed overlay. .navbar > .container is a centered, width-capped
   Bootstrap container (confirmed live via getBoundingClientRect: it starts ~47px in
   from the viewport edge at common widths, not flush with it), so a fixed offset
   from the viewport edge only lined up with the real avatar by coincidence at one
   specific width -- exactly the misalignment this rule set used to have. The
   --floating variant below is kept only as a fallback for pages with no navbar nav
   list at all (e.g. /login).

   Deliberately styled via the same var(--fg-color, ...)/var(--border-color, ...)
   tokens this app's other CSS already uses with light-mode fallbacks --
   portal_theme.css redefines the same token names under :root[data-theme="glass-dark"], so
   this one stylesheet needs no dark-mode rules of its own. */
.santek-theme-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 52px;
	height: 26px;
	padding: 0 5px;
	border-radius: 999px;
	border: 1px solid var(--border-color, #d1d8dd);
	background: var(--fg-color, #f4f5f6);
	cursor: pointer;
	vertical-align: middle;
}

.santek-theme-switch-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	width: 12px;
	height: 12px;
	color: var(--text-muted, #6b7280);
	pointer-events: none;
}

.santek-theme-switch-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Always white/opaque regardless of theme -- the track (var(--fg-color, ...) above)
   is what changes color between light and dark. A plain white thumb plus its own
   drop shadow reads clearly against either track color. */
.santek-theme-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease;
}

/* 28px, not the track/thumb-width-implied 26px -- measured live via
   getBoundingClientRect: the icons sit 5px inset (this element's own `padding: 0
   5px` above), not the thumb's 2px inset, so a naive track-width-minus-thumb-width
   math undershoots by 2px. 26px left the thumb's center 1.4px short of the moon
   icon's real center, letting the crescent's tip visibly poke past the circle's
   edge -- reported live as "the circle doesn't fully cover the toggle icon." 28px
   mirrors the unchecked state's own 2px inset exactly: track(52) - thumb(20) -
   2*inset(2) = 28, landing dead-center on each icon in both states. */
.santek-theme-switch[aria-checked="true"] .santek-theme-switch-thumb {
	transform: translateX(28px);
}

/* The <li> wrapper around the toggle and around #language-switcher (see below) both
   get this -- a little breathing room from the avatar/each other in the nav row,
   nothing else. .navbar-nav's own align-items: center (confirmed live) already
   handles vertical centering, no extra flex rules needed here. */
.santek-navbar-control {
	margin-left: 10px;
	display: flex;
}

.santek-theme-switch--floating {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 1050;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Global language switcher (portal_lang_switch.js) -- a fully custom dropdown, not
   a native <select>. Confirmed live that a <select>'s own closed box themes fine
   but its open option list is OS-rendered chrome CSS can't reach (background-color/
   color on <option> had no visible effect in testing, and the rest of the popup --
   padding, hover/selection highlight, borders -- is never stylable in any browser).
   Built the same way portal_theme_toggle.js's own toggle button already is: a real
   element this app owns end to end, so the *open* state can actually match the
   theme too, not just the closed one. */
.santek-lang-picker {
	position: relative;
	display: inline-flex;
}

.santek-lang-picker-trigger {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 0.6rem;
	font-size: 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--border-color, #d1d8dd);
	background-color: var(--fg-color, #f4f5f6);
	color: var(--text-color, #1c2126);
	cursor: pointer;
}

.santek-lang-picker-chevron {
	display: inline-flex;
	color: var(--text-muted, #6b7280);
	pointer-events: none;
}

/* Dropdown-menu-style glass panel, matching the same tokens portal_theme.css's own
   .dropdown-menu rules already use for this app's other popovers -- consistent
   look, not a one-off. Anchored to the trigger's own right edge (menus opening off
   the right end of a right-aligned navbar control, not the left) rather than a
   fixed pixel offset, so it stays correctly positioned regardless of where the
   trigger itself ends up sitting in the nav row. */
/* Solid, not var(--fg-color)'s usual translucent white (0.55 alpha) -- confirmed
   live that's a real problem here, not just a stylistic choice: --fg-color is
   tuned to sit on top of this app's own frosted glass cards, where seeing a bit of
   the card's blur through it reads as intentional. A floating menu has to stay
   legible over *whatever* it happens to land above -- page content, other cards,
   the gradient background itself -- and translucent here just let all of that
   bleed through and muddy the two option labels. Matches the same solid-background
   choice portal_theme.css's own .dropdown-menu rule already makes for exactly this
   reason.

   This is now the *panel* (search row + scrollable list together) rather than the
   list itself -- confirmed live with the site's real ~85 enabled languages (not
   the "two"/"17" this control was originally sized for) that one unbounded <ul>
   ran 3200px+ down the page, well past the viewport, with no way to reach anything
   near the end. The search row has to stay put while only the list beneath it
   scrolls, so the bordered/shadowed/background box moved up to this wrapper and
   the <ul> below is just the scrolling region within it. */
.santek-lang-picker-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 1060;
	display: flex;
	flex-direction: column;
	width: 220px;
	max-height: min(60vh, 420px);
	border-radius: 10px;
	border: 1px solid var(--border-color, #d1d8dd);
	background-color: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

html[data-theme$="-dark"] .santek-lang-picker-panel {
	background-color: var(--santek-navy, #1c1c38);
}

.santek-lang-picker-search {
	flex: none;
	padding: 8px;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
}

.santek-lang-picker-search-input {
	width: 100%;
	height: 30px;
	padding: 0 10px;
	font-size: 0.85rem;
	border-radius: 6px;
	border: 1px solid var(--border-color, #d1d8dd);
	background-color: var(--fg-color, #f4f5f6);
	color: var(--text-color, #1c2126);
}

.santek-lang-picker-search-input:focus {
	outline: none;
	border-color: var(--santek-accent, #3f8ae0);
}

.santek-lang-picker-menu {
	flex: 1 1 auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.santek-lang-picker-option {
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 0.85rem;
	color: var(--text-color, #1c2126);
	cursor: pointer;
}

.santek-lang-picker-option:hover {
	background-color: var(--santek-accent, #3f8ae0);
	color: #ffffff;
}

.santek-lang-picker-option-active {
	font-weight: 600;
}

.santek-lang-picker-empty {
	flex: none;
	padding: 12px 10px;
	font-size: 0.8rem;
	text-align: center;
	color: var(--text-muted, #6b7280);
}

/* Fallback position (no navbar nav list on this page, e.g. /login): sits left of the
   theme toggle's own --floating fallback (52px wide at right:14px, so
   14 + 52 + 10px gap = 76px). */
.santek-lang-picker--floating {
	position: fixed;
	top: 12px;
	right: 76px;
	z-index: 1050;
}

.santek-lang-picker--floating .santek-lang-picker-trigger {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}