/* ============================================================================
   PSR Switch — единая тема для всех сегментных переключателей.

   Вид: светло-серый трек, активный сегмент — белая пилюля с красной окантовкой
   и тёмным жирным текстом. Одинаково во всех разделах:

     .psr-auth-tabs        — Login / Register в auth-модалке
     .segmented-control    — All / Week / Month в фильтрах дашборда
     .nav-tabs.custom-tabs — Dashboard / Shipment History

   Файл подключается ПОСЛЕ auth-modal.css и раньше шаблонных <style>, поэтому
   правила идут с !important — иначе их перебивают локальные стили модалки
   и дашборда.
   ========================================================================== */

:root{
	--psr-switch-track:        #f2f4f8;
	--psr-switch-chip:         #ffffff;
	--psr-switch-chip-shadow:  0 0 0 1.8px #F01A26,
	                           0 3px 10px -2px rgba(15,17,21,.14),
	                           inset 0 1px 0 rgba(255,255,255,.9);
	--psr-switch-label:        #5b5f66;
	--psr-switch-label-hover:  #0f1115;
	--psr-switch-label-active: #0f1115;
	--psr-switch-ease:         cubic-bezier(.2,.8,.2,1);
}

/* ------------------------------------------- модалка: Login / Register
   Отменяем красную заливку из auth-modal.css (правка 2026-07-14) —
   активная вкладка снова белая с красным кольцом. */

.psr-auth-tabs{
	background: var(--psr-switch-track) !important;
}

/* Центрируем свитчер: в auth-modal.css стоит margin-right: 44px
   (резерв под ×), из‑за этого пилюля уезжала влево от логотипа. */
.psr-auth-main .psr-auth-tabs,
.psr-auth-tabs{
	width: min(320px, 100%) !important;
	max-width: 320px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.psr-auth-tabs::before{
	background: var(--psr-switch-chip) !important;
	box-shadow: var(--psr-switch-chip-shadow) !important;
}

.psr-auth-tab{
	color: var(--psr-switch-label) !important;
}

.psr-auth-tab:hover:not(.is-active){
	color: var(--psr-switch-label-hover) !important;
}

.psr-auth-tab.is-active{
	color: var(--psr-switch-label-active) !important;
}

/* ---------------------------------------------- дашборд: All / Week / Month */

.segmented-control{
	background: var(--psr-switch-track) !important;
	border: 0 !important;
	border-radius: 12px !important;
	padding: 4px !important;
	gap: 0 !important;
}

.segmented-control .preset-btn{
	background: transparent !important;
	border: 0 !important;
	border-radius: 9px !important;
	color: var(--psr-switch-label) !important;
	font-weight: 800 !important;
	letter-spacing: .04em !important;
	box-shadow: none !important;
	transition: color .28s var(--psr-switch-ease),
	            background .28s var(--psr-switch-ease),
	            box-shadow .28s var(--psr-switch-ease) !important;
}

.segmented-control .preset-btn:hover:not(.active){
	background: rgba(255,255,255,.6) !important;
	color: var(--psr-switch-label-hover) !important;
}

.segmented-control .preset-btn.active{
	background: var(--psr-switch-chip) !important;
	color: var(--psr-switch-label-active) !important;
	box-shadow: var(--psr-switch-chip-shadow) !important;
}

/* ------------------------------------ дашборд: Dashboard / Shipment History
   Селекторы с `ul` — у шаблона дашборда свои мобильные правила с !important,
   поэтому нужна специфичность выше, чем у `.nav-tabs.custom-tabs .nav-link`. */

ul.nav-tabs.custom-tabs{
	background: var(--psr-switch-track) !important;
	border: 0 !important;
	border-radius: 14px !important;
	padding: 5px !important;
	gap: 0 !important;
	box-shadow: none !important;
}

ul.nav-tabs.custom-tabs .nav-link{
	background: transparent !important;
	border: 0 !important;
	border-radius: 10px !important;
	color: var(--psr-switch-label) !important;
	font-weight: 800 !important;
	letter-spacing: .04em !important;
	box-shadow: none !important;
	transition: color .28s var(--psr-switch-ease),
	            background .28s var(--psr-switch-ease),
	            box-shadow .28s var(--psr-switch-ease) !important;
}

ul.nav-tabs.custom-tabs .nav-link i{
	color: inherit !important;
	background: none !important;
	box-shadow: none !important;
	transition: color .28s var(--psr-switch-ease) !important;
}

ul.nav-tabs.custom-tabs .nav-link:hover:not(.active),
ul.nav-tabs.custom-tabs .nav-link:hover:not(.active) i{
	background: rgba(255,255,255,.6) !important;
	color: var(--psr-switch-label-hover) !important;
}

ul.nav-tabs.custom-tabs .nav-link.active{
	background: var(--psr-switch-chip) !important;
	color: var(--psr-switch-label-active) !important;
	box-shadow: var(--psr-switch-chip-shadow) !important;
}

ul.nav-tabs.custom-tabs .nav-link.active i{
	color: var(--psr-switch-label-active) !important;
	background: none !important;
}

@media (prefers-reduced-motion: reduce){
	.segmented-control .preset-btn,
	ul.nav-tabs.custom-tabs .nav-link{
		transition: none !important;
	}
}