/* header.css — Glassmorphic Sticky Header, Tabs, Popovers & Theme Toggle */
.dash-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: var(--bg-blur);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--border);

  padding: 8px 16px;

  margin-bottom: var(--gap);

  box-shadow: 0 10px 30px var(--shadow-base);

  border-radius: 0 0 var(--radius) var(--radius);

  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;

}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.header-left {

  display: flex;

  align-items: center;

  gap: 16px;

}

.header-logo {

  height: 38px;

  width: 38px;

  border-radius: 50%;

  border: 2px solid var(--accent);

  object-fit: contain;

  background: var(--bg-card);

}

.header-divider {

  height: 20px;

  width: 1px;

  background: var(--border);

}

.tabs {

  display: flex;

  gap: 4px;

  flex-wrap: wrap;

}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* Header Info Tooltip Popover (Hold-over) */
.header-info-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--badge-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.header-info-pill:hover,
.header-info-pill:focus-visible,
.header-info-tooltip-wrap:hover .header-info-pill,
.header-info-tooltip-wrap.active .header-info-pill {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(232, 163, 61, 0.2);
}

.header-info-pill .info-icon {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Tooltip Popover Box */
.header-info-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 270px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 16px 36px var(--shadow-base, rgba(0, 0, 0, 0.45));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              visibility 0.2s;
  pointer-events: none;
}

/* Triangle Caret */
.header-info-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

/* Hover, Focus, and Active State (Hold-over) */
.header-info-tooltip-wrap:hover .header-info-popover,
.header-info-tooltip-wrap:focus-within .header-info-popover,
.header-info-tooltip-wrap.active .header-info-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.header-info-popover .popover-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
}

.header-info-popover .popover-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.header-info-popover .popover-label {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.header-info-popover .popover-val {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.header-info-popover .popover-badge {
  background: rgba(232, 163, 61, 0.16);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.header-info-popover .popover-footer {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-secondary);
  opacity: 0.8;
  line-height: 1.35;
}
/* WatchList Info Tooltip Popover */
.watchlist-title-row,
.top-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.watchlist-title-row h3,
.top-title-row h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
  white-space: nowrap;
  line-height: 1;
}
.watchlist-tooltip-wrap,
.top-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.watchlist-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--badge-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.watchlist-info-btn:hover,
.watchlist-info-btn:focus-visible,
.watchlist-tooltip-wrap:hover .watchlist-info-btn,
.watchlist-tooltip-wrap.active .watchlist-info-btn,
.top-tooltip-wrap:hover .watchlist-info-btn,
.top-tooltip-wrap.active .watchlist-info-btn {
  background: rgba(232, 168, 32, 0.12);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(232, 168, 32, 0.25);
}
.watchlist-tooltip-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 16px 36px var(--shadow-base, rgba(0, 0, 0, 0.45));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.2s;
  pointer-events: none;
}
.watchlist-tooltip-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 8px;
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.watchlist-tooltip-wrap:hover .watchlist-tooltip-popover,
.watchlist-tooltip-wrap:focus-within .watchlist-tooltip-popover,
.watchlist-tooltip-wrap.active .watchlist-tooltip-popover,
.top-tooltip-wrap:hover .watchlist-tooltip-popover,
.top-tooltip-wrap:focus-within .watchlist-tooltip-popover,
.top-tooltip-wrap.active .watchlist-tooltip-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.watchlist-popover-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  margin-bottom: 3px;
}
.watchlist-popover-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 9px;
  line-height: 1.35;
}
.watchlist-popover-tiers {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}
.watchlist-popover-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 11.5px;
}
.watchlist-popover-val {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 11.5px;
}
.watchlist-popover-note {
  font-size: 10.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 7px;
  line-height: 1.35;
}

.badge{

  font-size:11.5px;

  background:var(--badge-bg);

  padding:5px 10px;

  border-radius:20px;

  color:var(--badge-text);

  white-space:nowrap;

}
/* Nav tabs */

.tab-btn{

  background:transparent;

  border:none;

  color:var(--tab-text);

  padding:8px 16px;

  border-radius:8px;

  font-size:13.5px;

  font-weight:600;

  cursor:pointer;

  transition:background .15s, color .15s;

}

.tab-btn:hover{

  background:var(--tab-hover-bg);

  color:var(--tab-hover-text);

}

.tab-btn.active{

  background:var(--accent);

  color:var(--accent-text);

}

.page{display:none;}

.page.active{display:block;animation:fadein .2s ease;}

@keyframes fadein{from{opacity:0;}to{opacity:1;}}
/* Theme toggle switch CSS styles */

.theme-switch {

  --toggle-size: 8px;

  --container-width: 5.625em;

  --container-height: 2.5em;

  --container-radius: 6.25em;

  --container-light-bg: #3D7EAE;

  --container-night-bg: #1D1F2C;

  --circle-container-diameter: 3.375em;

  --sun-moon-diameter: 2.125em;

  --sun-bg: #ECCA2F;

  --moon-bg: #C4C9D1;

  --spot-color: #959DB1;

  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);

  --stars-color: #fff;

  --clouds-color: #F3FDFF;

  --back-clouds-color: #AACADF;

  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);

  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);

  display: inline-block;

  vertical-align: middle;

}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-size: var(--toggle-size);

}

.theme-switch__container {

  width: var(--container-width);

  height: var(--container-height);

  background-color: var(--container-night-bg);

  border-radius: var(--container-radius);

  overflow: hidden;

  cursor: pointer;

  -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);

  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);

  -webkit-transition: var(--transition);

  -o-transition: var(--transition);

  transition: var(--transition);

  position: relative;

}

.theme-switch__container::before {

  content: "";

  position: absolute;

  z-index: 1;

  inset: 0;

  -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;

  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;

  border-radius: var(--container-radius)

}

.theme-switch__checkbox {

  display: none;

}

.theme-switch__circle-container {

  width: var(--circle-container-diameter);

  height: var(--circle-container-diameter);

  background-color: rgba(255, 255, 255, 0.1);

  position: absolute;

  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));

  top: var(--circle-container-offset);

  border-radius: var(--container-radius);

  -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);

  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-transition: var(--circle-transition);

  -o-transition: var(--circle-transition);

  transition: var(--circle-transition);

  pointer-events: none;

}

.theme-switch__sun-moon-container {

  pointer-events: auto;

  position: relative;

  z-index: 2;

  width: var(--sun-moon-diameter);

  height: var(--sun-moon-diameter);

  margin: auto;

  border-radius: var(--container-radius);

  background-color: var(--sun-bg);

  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;

  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;

  -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));

  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));

  overflow: hidden;

  -webkit-transition: var(--transition);

  -o-transition: var(--transition);

  transition: var(--transition);

}

.theme-switch__moon {

  -webkit-transform: translate(0);

  -ms-transform: translate(0);

  transform: translate(0);

  width: 100%;

  height: 100%;

  background-color: var(--moon-bg);

  border-radius: inherit;

  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;

  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;

  -webkit-transition: var(--transition);

  -o-transition: var(--transition);

  transition: var(--transition);

  position: relative;

}

.theme-switch__spot {

  position: absolute;

  top: 0.75em;

  left: 0.312em;

  width: 0.75em;

  height: 0.75em;

  border-radius: var(--container-radius);

  background-color: var(--spot-color);

  -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;

  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;

}

.theme-switch__spot:nth-of-type(2) {

  width: 0.375em;

  height: 0.375em;

  top: 0.937em;

  left: 1.375em;

}

.theme-switch__spot:nth-last-of-type(3) {

  width: 0.25em;

  height: 0.25em;

  top: 0.312em;

  left: 0.812em;

}

.theme-switch__clouds {

  width: 1.25em;

  height: 1.25em;

  background-color: var(--clouds-color);

  border-radius: var(--container-radius);

  position: absolute;

  bottom: -4.062em;

  left: 0.312em;

  -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);

  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);

  -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);

  -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);

  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);

}

.theme-switch__stars-container {

  position: absolute;

  color: var(--stars-color);

  top: 50%;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  left: 0.312em;

  width: 2.75em;

  height: auto;

  -webkit-transition: var(--transition);

  -o-transition: var(--transition);

  transition: var(--transition);

}

.theme-switch__checkbox:checked + .theme-switch__container {

  background-color: var(--container-light-bg);

}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {

  left: var(--circle-container-offset);

}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {

  left: calc(var(--circle-container-offset) + 0.187em);

}

.theme-switch__circle-container:hover {

  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);

}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {

  -webkit-transform: translateX(100%);

  -ms-transform: translateX(100%);

  transform: translateX(100%);

}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {

  bottom: -0.625em;

}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {

  top: -100%;

}