/* rk-modern-tabs.css
   v=tabsmodern_20260728_gloss
   Glossy light-blue 3D pill tabs (single color) with soft colored shadow.
   Dashboard page-1 excluded — rk-tab / v0-tab unchanged. */

/* ========== TAB RAIL ========== */
html body:not(.page-1) .t-Tabs,
html body:not(.page-1) .a-Tabs,
html body:not(.page-1) .apex-rds,
html body:not(.page-1) .apex-rds-container .apex-rds,
html body:not(.page-1) .t-Region .t-Tabs,
html body:not(.page-1) .t-Region .a-Tabs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 8px 6px !important;
  margin-bottom: 14px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  list-style: none !important;
}

html body:not(.page-1) .t-Tabs-item,
html body:not(.page-1) .a-Tabs-item,
html body:not(.page-1) .apex-rds-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
}

/* ========== GLOSSY LIGHT-BLUE PILL ========== */
html body:not(.page-1) .t-Tabs-link,
html body:not(.page-1) .a-Tabs-link,
html body:not(.page-1) .apex-rds a,
html body:not(.page-1) .apex-rds .apex-rds-item a,
html body:not(.page-1) .t-Region .t-Tabs-link,
html body:not(.page-1) .t-Region .a-Tabs-link,
html body:not(.page-1) li.apex-rds-item > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 8px 20px !important;
  margin: 0 !important;
  border: 1px solid #5eb8ea !important;
  border-top-color: #9fd8f5 !important;
  border-bottom-color: #2f8fc4 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 1px rgba(15, 74, 120, 0.35) !important;
  /* light blue body */
  background:
    radial-gradient(ellipse 70% 55% at 28% 22%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.12) 45%, transparent 70%),
    linear-gradient(180deg, #7ec8f0 0%, #4aafe0 48%, #2f96cc 100%) !important;
  background-color: #4aafe0 !important;
  box-shadow:
    0 6px 16px rgba(47, 150, 204, 0.42),
    0 2px 4px rgba(47, 150, 204, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(20, 90, 140, 0.22) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, opacity 0.15s ease !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* soft top gloss flare (extra specular) */
html body:not(.page-1) .t-Tabs-link::before,
html body:not(.page-1) .a-Tabs-link::before,
html body:not(.page-1) .apex-rds a::before,
html body:not(.page-1) .t-Region .t-Tabs-link::before,
html body:not(.page-1) li.apex-rds-item > a::before {
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  right: 28% !important;
  top: 3px !important;
  height: 42% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 70%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html body:not(.page-1) .t-Tabs-link::after,
html body:not(.page-1) .a-Tabs-link::after,
html body:not(.page-1) .apex-rds a::after,
html body:not(.page-1) .t-Region .t-Tabs-link::after,
html body:not(.page-1) li.apex-rds-item > a::after {
  content: none !important;
  display: none !important;
}

/* Inactive — same light blue, slightly dimmer + softer shadow */
html body:not(.page-1) .t-Tabs-item:not(.is-active):not(.a-Tabs-selected) .t-Tabs-link,
html body:not(.page-1) .a-Tabs-item:not(.is-active):not(.a-Tabs-selected) .a-Tabs-link,
html body:not(.page-1) .apex-rds-item:not(.apex-rds-selected) > a {
  filter: brightness(0.96) saturate(0.92) !important;
  opacity: 0.82 !important;
  box-shadow:
    0 4px 10px rgba(47, 150, 204, 0.28),
    0 1px 2px rgba(47, 150, 204, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(20, 90, 140, 0.16) !important;
  transform: translateY(0) !important;
}

/* Active — brighter gloss + stronger light-blue glow shadow */
html body:not(.page-1) .t-Tabs-item.is-active .t-Tabs-link,
html body:not(.page-1) .t-Tabs-item.a-Tabs-selected .t-Tabs-link,
html body:not(.page-1) .a-Tabs-item.is-active .a-Tabs-link,
html body:not(.page-1) .a-Tabs-item.a-Tabs-selected .a-Tabs-link,
html body:not(.page-1) .apex-rds-item.apex-rds-selected > a,
html body:not(.page-1) .apex-rds .apex-rds-selected a,
html body:not(.page-1) .apex-rds a.is-active {
  filter: none !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  background:
    radial-gradient(ellipse 70% 55% at 28% 22%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.16) 45%, transparent 70%),
    linear-gradient(180deg, #8fd0f5 0%, #4eb3e4 46%, #2a8ec6 100%) !important;
  background-color: #4eb3e4 !important;
  box-shadow:
    0 8px 20px rgba(47, 150, 204, 0.55),
    0 3px 6px rgba(47, 150, 204, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(20, 90, 140, 0.24) !important;
}

html body:not(.page-1) .t-Tabs-link:hover,
html body:not(.page-1) .a-Tabs-link:hover,
html body:not(.page-1) .apex-rds a:hover,
html body:not(.page-1) .t-Region .t-Tabs-link:hover,
html body:not(.page-1) li.apex-rds-item > a:hover {
  filter: none !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  box-shadow:
    0 8px 18px rgba(47, 150, 204, 0.48),
    0 3px 6px rgba(47, 150, 204, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(20, 90, 140, 0.22) !important;
}

html body:not(.page-1) .t-Tabs-link:focus,
html body:not(.page-1) .a-Tabs-link:focus,
html body:not(.page-1) .apex-rds a:focus {
  outline: none !important;
  box-shadow:
    0 8px 20px rgba(47, 150, 204, 0.5),
    0 0 0 3px rgba(158, 207, 242, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ========== DASHBOARD custom tabs — leave previous look (page-1 only) ========== */
body.page-1 .rk-tab,
body.page-1 .v0-tab {
  border: 1px solid #dbe4ef !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  background-color: #f8fafc !important;
  color: #334155 !important;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08) !important;
  text-shadow: none !important;
  clip-path: none !important;
  text-transform: none !important;
}

body.page-1 .rk-tab.is-active,
body.page-1 .rk-tab.active,
body.page-1 .v0-tab.is-active,
body.page-1 .v0-tab.active {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.14) !important;
  transform: translateY(-1px) !important;
}

body.page-1 .rk-tab:hover,
body.page-1 .v0-tab:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
}