/* Keep the bright brand accents while maintaining readable text on active order tabs. */
:root[data-user-theme="v8"] .v8-order-tabs .v8-order-tab.active,
:root[data-user-theme="hd"] .v8-order-tabs .v8-order-tab.active,
:root[data-user-theme="v9"] .v8-order-tabs .v8-order-tab.active,
:root[data-user-theme="v10"] .v8-order-tabs .v8-order-tab.active,
:root[data-user-theme="v11"] .v8-order-tabs .v8-order-tab.active,
:root[data-user-theme="v12"] .v8-order-tabs .v8-order-tab.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

:root[data-user-theme="v8"] .v8-order-tabs .v8-order-tab.active {
  background-image: linear-gradient(180deg, #198044, #10582f) !important;
}

:root[data-user-theme="hd"] .v8-order-tabs .v8-order-tab.active {
  background-image: linear-gradient(180deg, #087878, #075b5d) !important;
}

:root[data-user-theme="v9"] .v8-order-tabs .v8-order-tab.active {
  background-image: linear-gradient(180deg, #167543, #10552f) !important;
}

:root[data-user-theme="v10"] .v8-order-tabs .v8-order-tab.active {
  background-image: linear-gradient(180deg, #1c659d, #174b7a) !important;
}

:root[data-user-theme="v11"] .v8-order-tabs .v8-order-tab.active {
  background-image: linear-gradient(180deg, #006b73, #07565e) !important;
}

:root[data-user-theme="v12"] .v8-order-tabs .v8-order-tab.active {
  background-image: linear-gradient(180deg, #704183, #523263) !important;
}

/* V15 uses the shared V8 tab geometry; darken its green-purple active fill for white-label contrast. */
:root[data-user-theme="v15"] .v8-order-tabs .v8-order-tab.active {
  background-image: linear-gradient(135deg, #166534, #5b21b6) !important;
}

:root[data-user-theme="v16"] .v8-order-tabs .v8-order-tab.active {
  background-image: linear-gradient(135deg, #14532d, #1e40af) !important;
}

/* Dark V8-family pages use a translucent dark tab rail; keep inactive labels light on it. */
:root[data-user-theme="v8"] .v8-order-tabs .v8-order-tab:not(.active),
:root[data-user-theme="hd"] .v8-order-tabs .v8-order-tab:not(.active),
:root[data-user-theme="v9"] .v8-order-tabs .v8-order-tab:not(.active),
:root[data-user-theme="v10"] .v8-order-tabs .v8-order-tab:not(.active),
:root[data-user-theme="v11"] .v8-order-tabs .v8-order-tab:not(.active) {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

:root[data-user-theme="v12"] .v8-order-tabs .v8-order-tab:not(.active) {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

/* The V7 shared family uses a bright green active fill over the dark V8 tab rail. */
:root[data-user-theme="v7"] .v8-order-tabs .v8-order-tab.active {
  color: #102317 !important;
  -webkit-text-fill-color: #102317 !important;
}

:root[data-user-theme="v7"] .v8-order-tabs .v8-order-tab:not(.active) {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

/* React button versions keep the reference tab geometry instead of browser button chrome. */
:root[data-user-theme] .v8-order-tabs button.v8-order-tab,
:root[data-user-theme="rose"] .index_header .index_menu > button.nav {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 8px;
  font-family: inherit;
  cursor: pointer;
}

:root[data-user-theme="rose"] .index_header .index_menu > button.nav {
  padding: 0;
  border: 0;
  background-color: transparent;
}

:root[data-user-theme="v13"] .v13o-tabs .tab.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-image: linear-gradient(135deg, #4f46e5, #3730a3) !important;
}

/* V13's shared order page uses the v14o shell classes rather than its reference-page v13o tabs. */
:root[data-user-theme="v13"] .v14o-tabs .tab.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-image: linear-gradient(135deg, #4f46e5, #3730a3) !important;
  border-color: transparent !important;
}

:root[data-user-theme="v13"] .v14o-tabs .tab:not(.active) {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  background: #14142b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

:root[data-user-theme="v13"] .v14o-tabs .tab .count {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(15, 23, 42, 0.82) !important;
}

:root[data-user-theme="v13"] .v13o-tabs .tab:not(.active) {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  background: #14142b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

:root[data-user-theme="v13"] .v13o-tabs .tab .count {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(15, 23, 42, 0.82) !important;
}

:root[data-user-theme="v14"] .v14o-tabs .tab.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-image: linear-gradient(135deg, #be123c, #881337) !important;
}

:root[data-user-theme="v7"] .v7_order_tabs .v7_tab_item.active {
  color: #102317 !important;
  -webkit-text-fill-color: #102317 !important;
}

:root[data-user-theme="v7"] .v7_order_tabs .v7_tab_underline {
  background: #102317 !important;
}

:root[data-user-theme="v15"] .v15-tabs .tab.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-image: linear-gradient(120deg, #0e7490, #4c1d95 52%, #9d174d) !important;
}

:root[data-user-theme="v15"] .v15-tabs .tab.active .count {
  opacity: 1;
}

:root[data-user-theme="v16"] .v16-seg.od-tabs .v16-seg-thumb {
  background-image: linear-gradient(120deg, #2052a3, #075e6e) !important;
}

:root[data-user-theme="v16"] .v16-seg.od-tabs .v16-seg-tab.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

:root[data-user-theme="rose"] body.v14-orders-page .nav_active,
:root[data-user-theme="rose"] .user-orders-shell .nav_active {
  background-image: linear-gradient(126deg, #a3133d, #7f1234) !important;
}

:root[data-user-theme="rose"] .index_header:has(+ .common_main #order_list) .nav_active {
  background-image: linear-gradient(126deg, #a3133d, #7f1234) !important;
}

:root[data-user-theme="rose"] body.v14-orders-page .nav_active .title,
:root[data-user-theme="rose"] .user-orders-shell .nav_active .title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

:root[data-user-theme="rose"] .index_header:has(+ .common_main #order_list) .nav_active .title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

:root[data-user-theme="legacy"] .v14o-tabs .tab .count,
:root[data-user-theme="azure"] .v14o-tabs .tab .count,
:root[data-user-theme="v13"] .v13o-tabs .tab .count,
:root[data-user-theme="v13"] .v14o-tabs .tab .count,
:root[data-user-theme="v14"] .v14o-tabs .tab .count {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-color: rgba(15, 23, 42, 0.72) !important;
}

:root[data-user-theme] :is(
  .orders-tabs button,
  .v8-order-tabs .v8-order-tab,
  .v7_order_tabs .v7_tab_item,
  .v13o-tabs .tab,
  .v14o-tabs .tab,
  .v15-tabs .tab,
  .v16-seg-tab,
  .m-filter .f
):focus-visible,
:root[data-user-theme="rose"] body.v14-orders-page .nav:focus-visible,
:root[data-user-theme="rose"] .user-orders-shell .nav:focus-visible {
  outline: 2px solid #f8fafc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.72);
}