/*
 * Gate Bots — Aurora Overview presentation
 * A7C148
 *
 * Presentation only.
 *
 * Canonical Overview rendering, chart data, navigation,
 * incident permissions and Bot Details ownership remain
 * in app.js.
 *
 * This stylesheet must never own #tab-overview visibility.
 */

#tab-overview {
  --aurora-overview-line:
    rgba(106, 231, 187, 0.14);
  --aurora-overview-line-strong:
    rgba(106, 231, 187, 0.25);
  --aurora-overview-panel:
    rgba(5, 24, 17, 0.88);
  --aurora-overview-cell:
    rgba(5, 31, 21, 0.72);
  --aurora-overview-muted:
    rgba(151, 190, 176, 0.60);
  --aurora-overview-soft:
    rgba(210, 237, 227, 0.84);
  --aurora-overview-mint:
    var(--positive);
  --aurora-overview-amber:
    var(--warning);
  --aurora-overview-red:
    var(--negative);
}


/* ============================================================
 * 01. METRIC STRIP
 * ============================================================ */

#tab-overview .metric-grid {
  gap: 14px;
  margin-bottom: 16px;
}

#tab-overview .metric-card {
  min-height: 126px;
  padding: 17px 18px;
  border-color:
    rgba(106, 231, 187, 0.14);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 92% -15%,
      rgba(82, 242, 184, 0.10),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(8, 33, 23, 0.96),
      rgba(4, 20, 14, 0.97)
    );
  box-shadow:
    inset 0 1px
      rgba(255, 255, 255, 0.026),
    0 17px 40px
      rgba(0, 0, 0, 0.20);
}

#tab-overview .metric-card::before {
  width: 2px;
  opacity: 0.72;
}

#tab-overview .metric-card > span {
  color:
    rgba(155, 195, 180, 0.62);
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: 0.01em;
}

#tab-overview .metric-card strong {
  margin:
    13px 0
    7px;
  color:
    rgba(241, 255, 249, 0.96);
  font-size:
    clamp(
      1.42rem,
      2.25vw,
      1.92rem
    );
  font-weight: 760;
  font-variant-numeric:
    tabular-nums;
  letter-spacing: -0.035em;
}

#tab-overview .metric-card small {
  color:
    rgba(148, 188, 173, 0.58);
  font-size: 0.72rem;
  font-weight: 560;
}

#tab-overview #currentValue {
  color:
    rgba(241, 255, 249, 0.96)
    !important;
}


/* ============================================================
 * 02. PORTFOLIO / STATUS WORKSPACE
 * ============================================================ */

#tab-overview .dashboard-grid.wide-left {
  grid-template-columns:
    minmax(0, 1.75fr)
    minmax(285px, 0.75fr);
  gap: 16px;
  margin-bottom: 16px;
}

#tab-overview .dashboard-grid.equal {
  gap: 16px;
  margin-bottom: 16px;
}

#tab-overview .panel {
  border-color:
    var(--aurora-overview-line);
  background:
    radial-gradient(
      circle at 90% -10%,
      rgba(74, 225, 171, 0.065),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(7, 31, 22, 0.95),
      rgba(3, 19, 13, 0.97)
    );
  box-shadow:
    inset 0 1px
      rgba(255, 255, 255, 0.022),
    0 18px 45px
      rgba(0, 0, 0, 0.21);
}

#tab-overview .panel-header {
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom:
    1px solid
    rgba(106, 231, 187, 0.095);
}

#tab-overview .panel-header h2 {
  color:
    rgba(240, 255, 249, 0.94);
  font-size: 0.98rem;
  font-weight: 720;
}

#tab-overview .panel-header p {
  margin-top: 3px;
  color:
    rgba(145, 184, 170, 0.56);
  font-size: 0.74rem;
}


/* ============================================================
 * 03. PORTFOLIO CHART
 * ============================================================ */

#tab-overview .chart-panel {
  overflow: hidden;
}

#tab-overview #historyRange {
  min-height: 33px;
  padding:
    6px 30px
    6px 10px;
  border-color:
    rgba(106, 231, 187, 0.15);
  border-radius: 9px;
  background-color:
    rgba(3, 24, 16, 0.76);
  color:
    rgba(199, 229, 218, 0.78);
  font-size: 0.73rem;
}

#tab-overview .chart-wrap {
  position: relative;
  height: 310px;
  overflow: hidden;
  border:
    1px solid
    rgba(106, 231, 187, 0.10);
  border-radius: 12px;
  background:
    linear-gradient(
      rgba(83, 187, 150, 0.025)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(83, 187, 150, 0.021)
      1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      rgba(2, 19, 13, 0.62),
      rgba(1, 14, 10, 0.72)
    );
  background-size:
    100% 50px,
    72px 100%,
    100% 100%;
  box-shadow:
    inset 0 1px
      rgba(255, 255, 255, 0.012);
}

#tab-overview #portfolioChart {
  position: relative;
  z-index: 1;
}

#tab-overview .chart-crosshair {
  z-index: 3;
  border-left:
    1px dashed
    rgba(164, 245, 214, 0.36);
}

#tab-overview .chart-tooltip {
  min-width: 205px;
  padding:
    11px 12px;
  border-color:
    rgba(109, 234, 190, 0.22);
  border-radius: 11px;
  background:
    rgba(2, 19, 13, 0.97);
  box-shadow:
    0 14px 34px
      rgba(0, 0, 0, 0.42),
    inset 0 1px
      rgba(255, 255, 255, 0.025);
  color:
    rgba(224, 247, 238, 0.90);
  font-size: 0.75rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter:
    blur(12px);
}

#tab-overview .chart-tooltip-time {
  color:
    rgba(150, 190, 175, 0.64);
}

#tab-overview .chart-tooltip b {
  color:
    rgba(236, 255, 247, 0.94);
  font-variant-numeric:
    tabular-nums;
}

#tab-overview .chart-legend {
  gap: 16px;
  margin-top: 11px;
  color:
    rgba(151, 190, 176, 0.60);
  font-size: 0.72rem;
}

#tab-overview .chart-legend > span {
  display: inline-flex;
  align-items: center;
}

#tab-overview .chart-legend i {
  width: 15px;
  height: 2px;
  margin-right: 6px;
  border-radius: 99px;
}

#tab-overview .chart-legend small {
  color:
    rgba(140, 176, 163, 0.50);
  font-size: 0.68rem;
}


/* ============================================================
 * 04. PORTFOLIO STATUS
 * ============================================================ */

#tab-overview .status-ring-wrap {
  padding:
    7px 0
    18px;
}

#tab-overview .status-ring {
  width: 154px;
  box-shadow:
    0 0 0 1px
      rgba(106, 231, 187, 0.08),
    0 0 38px
      rgba(55, 213, 157, 0.055);
}

#tab-overview .status-ring::after {
  inset: 19px;
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(78, 225, 173, 0.055),
      transparent 40%
    ),
    rgba(3, 22, 15, 0.98);
  box-shadow:
    inset 0 0 0 1px
      rgba(106, 231, 187, 0.08);
}

#tab-overview .status-ring strong {
  color:
    rgba(239, 255, 248, 0.95);
  font-size: 1.58rem;
  font-weight: 770;
}

#tab-overview .status-ring span {
  margin-top: 2px;
  color:
    rgba(150, 188, 174, 0.58);
  font-size: 0.69rem;
  letter-spacing: 0.02em;
}

#tab-overview .status-list {
  gap: 7px;
}

#tab-overview .status-row {
  min-height: 34px;
  align-items: center;
  padding:
    7px 9px;
  border:
    1px solid
    rgba(106, 231, 187, 0.08);
  border-radius: 9px;
  background:
    rgba(4, 27, 18, 0.46);
  color:
    rgba(155, 191, 177, 0.62);
  font-size: 0.74rem;
}

#tab-overview .status-row b {
  color:
    rgba(222, 247, 237, 0.88);
  font-size: 0.76rem;
  font-variant-numeric:
    tabular-nums;
}

#tab-overview .status-row .dot {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  box-shadow:
    0 0 0 3px
      rgba(255, 255, 255, 0.018);
}


/* ============================================================
 * 05. PERFORMANCE LEADERS
 * ============================================================ */

#tab-overview .leader-list {
  gap: 8px;
}

#tab-overview .leader {
  min-height: 62px;
  padding:
    10px 11px;
  border:
    1px solid
    rgba(106, 231, 187, 0.09);
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      rgba(7, 32, 22, 0.64),
      rgba(3, 23, 15, 0.67)
    );
}

#tab-overview .leader:first-child {
  padding-top: 10px;
}

#tab-overview .leader:last-child {
  padding-bottom: 10px;
}

#tab-overview .leader:hover {
  border-color:
    rgba(106, 231, 187, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(10, 40, 28, 0.72),
      rgba(4, 28, 19, 0.74)
    );
}

#tab-overview .leader-name {
  color:
    rgba(229, 250, 242, 0.90);
  font-size: 0.80rem;
}

#tab-overview .leader-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  overflow: visible;
  color:
    rgba(148, 186, 172, 0.57);
  font-size: 0.69rem;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}

#tab-overview .leader-result {
  min-width: 86px;
}

#tab-overview .leader-result strong {
  font-size: 0.84rem;
}

#tab-overview .leader-result small {
  color:
    rgba(149, 186, 173, 0.58);
  font-size: 0.68rem;
}


/* ============================================================
 * 06. OVERVIEW MARKET SYMBOLS
 * ============================================================ */

#tab-overview .aurora-overview-market {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

#tab-overview
.aurora-overview-market-symbols {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin:
    0 1px
    0 3px;
}

#tab-overview
.aurora-overview-market-symbol-slot {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
}

#tab-overview
.aurora-overview-market-symbol-slot
.aurora-symbol {
  --aurora-symbol-size: 14px;
}


/* ============================================================
 * 07. ACTIVE INCIDENTS
 * ============================================================ */

#tab-overview
.dashboard-grid.equal
> .panel:last-child {
  border-color:
    rgba(225, 181, 96, 0.15);
  background:
    radial-gradient(
      circle at 93% -8%,
      rgba(225, 181, 96, 0.065),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(28, 26, 14, 0.54),
      rgba(4, 20, 14, 0.96)
    );
}

#tab-overview
.dashboard-grid.equal
> .panel:last-child
.panel-header {
  border-bottom-color:
    rgba(225, 181, 96, 0.10);
}

#tab-overview
.panel-header
[data-jump="alerts"] {
  min-width: 0;
  padding:
    5px 7px;
  border-radius: 7px;
  color:
    rgba(149, 221, 195, 0.72);
}

#tab-overview
.panel-header
[data-jump="alerts"]:hover {
  color:
    rgba(187, 250, 227, 0.94);
  background:
    rgba(61, 210, 157, 0.07);
}

#tab-overview #overviewAlerts {
  gap: 8px;
}

#tab-overview
#overviewAlerts
.event {
  grid-template-columns:
    8px
    minmax(0, 1fr)
    auto;
  gap: 10px;
  padding:
    10px 11px;
  border-color:
    rgba(225, 181, 96, 0.13);
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      rgba(39, 31, 13, 0.34),
      rgba(8, 25, 17, 0.58)
    );
}

#tab-overview
#overviewAlerts
.event:hover {
  border-color:
    rgba(225, 181, 96, 0.21);
}

#tab-overview
#overviewAlerts
.event-dot {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  background:
    var(--aurora-overview-amber);
  box-shadow:
    0 0 0 3px
      rgba(233, 189, 103, 0.07);
}

#tab-overview
#overviewAlerts
.event p {
  color:
    rgba(232, 245, 239, 0.87);
  font-size: 0.77rem;
  font-weight: 660;
}

#tab-overview
#overviewAlerts
.event small {
  display: flex;
  margin-top: 5px;
  align-items: center;
  flex-wrap: wrap;
  color:
    rgba(155, 188, 175, 0.56);
  font-size: 0.67rem;
  line-height: 1.5;
}

#tab-overview
#overviewAlerts
.status-badge {
  align-self: center;
  padding:
    4px 7px;
  border-color:
    rgba(225, 181, 96, 0.19);
  background:
    rgba(130, 91, 30, 0.06);
  color:
    rgba(229, 194, 123, 0.76);
  font-size: 0.67rem;
}

#tab-overview
#overviewAlerts
.ack-incident {
  align-self: center;
  min-width: 0;
  padding:
    5px 7px;
  border:
    1px solid
    rgba(233, 189, 103, 0.25);
  border-radius: 7px;
  background:
    rgba(137, 94, 26, 0.07);
  color:
    rgba(238, 199, 123, 0.88);
  font-size: 0.69rem;
}

#tab-overview
#overviewAlerts
.ack-incident:hover {
  border-color:
    rgba(233, 189, 103, 0.38);
  background:
    rgba(152, 104, 30, 0.12);
  color:
    rgba(255, 219, 148, 0.98);
}


/* ============================================================
 * 08. EMPTY STATES
 * ============================================================ */

#tab-overview .empty-state {
  padding:
    26px 12px;
  border:
    1px dashed
    rgba(106, 231, 187, 0.10);
  border-radius: 10px;
  background:
    rgba(2, 18, 12, 0.23);
  color:
    rgba(145, 180, 167, 0.50);
}


/* ============================================================
 * 09. RESPONSIVE
 * ============================================================ */

@media (max-width: 1100px) {
  #tab-overview
  .dashboard-grid.wide-left {
    grid-template-columns: 1fr;
  }

  #tab-overview
  .status-ring-wrap {
    padding-top: 2px;
  }
}

@media (max-width: 820px) {
  #tab-overview .chart-wrap {
    height: 285px;
  }

  #tab-overview .metric-card {
    min-height: 116px;
  }
}

@media (max-width: 560px) {
  #tab-overview .metric-card {
    min-height: 0;
  }

  #tab-overview .panel {
    padding: 14px;
  }

  #tab-overview .panel-header {
    align-items: flex-start;
  }

  #tab-overview .chart-wrap {
    height: 245px;
  }

  #tab-overview .chart-legend {
    gap: 8px 13px;
  }

  #tab-overview .leader {
    gap: 11px;
    padding:
      10px 9px;
  }

  #tab-overview .leader-result {
    min-width: 68px;
  }

  #tab-overview
  #overviewAlerts
  .event {
    grid-template-columns:
      8px
      minmax(0, 1fr);
  }

  #tab-overview
  #overviewAlerts
  .event > :last-child {
    grid-column: 2;
    justify-self: start;
  }
}

/* ============================================================
 * M4.12A — OVERVIEW CHART SERIES CONTRAST
 *
 * Keep Aurora's global palette untouched. The Overview chart
 * alone uses a true blue for Total PnL so it remains visually
 * distinct from the mint Current value series.
 * ============================================================ */

#tab-overview {
  --overview-current-value-color:
    #58f0bd;
  --overview-total-pnl-color:
    #63a6ff;
}

#tab-overview .legend-value,
#tab-overview .tooltip-dot.value {
  background:
    var(
      --overview-current-value-color,
      var(--accent)
    );
}

#tab-overview .legend-pnl,
#tab-overview .tooltip-dot.pnl {
  background:
    var(
      --overview-total-pnl-color,
      var(--blue)
    );
}

/* End M4.12A Overview chart series contrast */


/* ============================================================
 * M4.12G — PREMIUM OVERVIEW CHART
 * ============================================================ */

#tab-overview {
  --overview-premium-chart: 1;

  --overview-current-value-fill:
    rgba(88, 240, 189, 0.095);

  --overview-current-value-line-width:
    2.35;

  --overview-total-pnl-line-width:
    1.65;

  --overview-current-value-shadow:
    rgba(88, 240, 189, 0.09);

  --overview-chart-grid-color:
    rgba(132, 184, 165, 0.105);

  --overview-chart-axis-color:
    rgba(151, 188, 174, 0.62);

  --overview-chart-zero-color:
    rgba(99, 166, 255, 0.18);
}


/* Let the plot breathe inside the main panel rather than
 * presenting a second hard-edged card inside it. */
#tab-overview .chart-wrap {
  border: 0;
  border-radius: 14px;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(88, 240, 189, 0.038),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(2, 18, 12, 0.34),
      rgba(1, 13, 9, 0.16)
    );

  box-shadow:
    inset 0 1px
      rgba(255, 255, 255, 0.018),
    inset 0 -1px
      rgba(98, 201, 166, 0.035);
}


/* Crosshair should read as a precise trading-chart guide,
 * not as a strong dashed divider. */
#tab-overview .chart-crosshair {
  width: 1px;

  border-left:
    1px solid
    rgba(191, 237, 220, 0.24);

  box-shadow:
    0 0 10px
      rgba(88, 240, 189, 0.055);

  transform:
    translateX(-0.5px);
}


/* Hover anchors appear only at the exact sampled values. */
#tab-overview .chart-hover-point {
  position: absolute;
  z-index: 4;

  width: 9px;
  height: 9px;

  border:
    2px solid
    rgba(3, 20, 14, 0.94);

  border-radius: 50%;

  pointer-events: none;

  transform:
    translate(-50%, -50%);
}

#tab-overview .chart-hover-point.value {
  background:
    var(
      --overview-current-value-color,
      var(--accent)
    );

  box-shadow:
    0 0 0 2px
      rgba(88, 240, 189, 0.16),
    0 0 12px
      rgba(88, 240, 189, 0.30);
}

#tab-overview .chart-hover-point.pnl {
  background:
    var(
      --overview-total-pnl-color,
      var(--blue)
    );

  box-shadow:
    0 0 0 2px
      rgba(99, 166, 255, 0.13),
    0 0 11px
      rgba(99, 166, 255, 0.24);
}


/* Floating analytics tooltip. */
#tab-overview .chart-tooltip {
  min-width: 218px;

  padding:
    12px 13px;

  border:
    1px solid
    rgba(123, 230, 192, 0.17);

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(5, 27, 19, 0.965),
      rgba(2, 17, 12, 0.975)
    );

  box-shadow:
    0 18px 45px
      rgba(0, 0, 0, 0.46),
    0 0 0 1px
      rgba(255, 255, 255, 0.014)
      inset;

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}

#tab-overview .chart-tooltip-time {
  margin-bottom: 9px;

  color:
    rgba(176, 207, 196, 0.66);

  font-size: 0.69rem;

  font-weight: 680;

  letter-spacing:
    0.018em;
}

#tab-overview .chart-tooltip-row {
  grid-template-columns:
    10px minmax(0, 1fr) auto;

  min-height: 24px;

  margin-top: 2px;
}

#tab-overview
.chart-tooltip-row
b {
  margin-left: 14px;

  font-size: 0.78rem;

  font-weight: 720;
}

#tab-overview
.chart-tooltip-row.value
b {
  color:
    var(
      --overview-current-value-color,
      var(--accent)
    );
}

#tab-overview
.chart-tooltip-row.pnl
b {
  color:
    var(
      --overview-total-pnl-color,
      var(--blue)
    );
}


/* Compact series chips: visually associate each label with
 * its corresponding plotted series without dominating the
 * card footer. */
#tab-overview .chart-legend {
  gap: 8px;

  margin-top: 10px;
}

#tab-overview
.chart-legend
> span {
  min-height: 26px;

  padding:
    4px 8px;

  border:
    1px solid
    rgba(114, 210, 176, 0.075);

  border-radius: 999px;

  background:
    rgba(6, 29, 21, 0.32);

  color:
    rgba(174, 205, 193, 0.67);
}

#tab-overview
.chart-legend
> span:first-child {
  border-color:
    rgba(88, 240, 189, 0.10);
}

#tab-overview
.chart-legend
> span:nth-child(2) {
  border-color:
    rgba(99, 166, 255, 0.11);
}

#tab-overview
.chart-legend
i {
  width: 14px;

  height: 2px;
}

#tab-overview
.chart-legend
small {
  color:
    rgba(142, 177, 164, 0.42);

  font-size: 0.66rem;
}


/* The chart panel itself gets a very restrained premium lift.
 * No strong glow: the data remains the focus. */
#tab-overview .chart-panel {
  box-shadow:
    inset 0 1px
      rgba(255, 255, 255, 0.022),
    0 18px 46px
      rgba(0, 0, 0, 0.085);
}


/* End M4.12G Premium Overview chart */

/* M4.47B2C8A22 — Aurora Overview neutral presentation palette
 *
 * Palette presentation only.
 *
 * Deliberately excluded:
 * - Current value mint chart series
 * - Total PnL blue chart series
 * - incident / acknowledgement amber
 * - positive / negative / warning semantics
 * - chart data/rendering behavior
 */

#tab-overview .metric-card {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.14
    );
  background:
    radial-gradient(
      circle at 92% -15%,
      rgba(
        var(--aurora-accent-rgb),
        0.10
      ),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      var(--aurora-palette-surface-2),
      var(--aurora-palette-bg)
    );
}

#tab-overview .metric-card > span,
#tab-overview .metric-card small {
  color:
    rgba(
      var(--aurora-border-rgb),
      0.62
    );
}

#tab-overview .panel {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.14
    );
  background:
    radial-gradient(
      circle at 90% -10%,
      rgba(
        var(--aurora-accent-rgb),
        0.065
      ),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      var(--aurora-palette-surface-2),
      var(--aurora-palette-bg)
    );
}

#tab-overview .panel-header {
  border-bottom-color:
    rgba(
      var(--aurora-border-rgb),
      0.095
    );
}

#tab-overview .panel-header p {
  color:
    rgba(
      var(--aurora-border-rgb),
      0.56
    );
}

#tab-overview #historyRange {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.15
    );
  background-color:
    var(--aurora-palette-muted);
  color:
    rgba(
      var(--aurora-mint-rgb),
      0.78
    );
}

#tab-overview .chart-wrap {
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(
        var(--aurora-accent-rgb),
        0.038
      ),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      var(--aurora-palette-muted),
      var(--aurora-palette-bg)
    );
  box-shadow:
    inset 0 1px
      rgba(255, 255, 255, 0.018),
    inset 0 -1px
      rgba(
        var(--aurora-border-rgb),
        0.035
      );
}

#tab-overview .chart-crosshair {
  border-left-color:
    rgba(
      var(--aurora-border-rgb),
      0.24
    );
  box-shadow:
    0 0 10px
      rgba(
        var(--aurora-accent-rgb),
        0.055
      );
}

#tab-overview .chart-hover-point {
  border-color:
    var(--aurora-palette-bg);
}

#tab-overview .chart-tooltip {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.17
    );
  background:
    linear-gradient(
      145deg,
      var(--aurora-palette-surface-2),
      var(--aurora-palette-bg)
    );
}

#tab-overview .chart-tooltip-time {
  color:
    rgba(
      var(--aurora-border-rgb),
      0.66
    );
}

#tab-overview .chart-legend > span {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.075
    );
  background:
    var(--aurora-palette-muted);
  color:
    rgba(
      var(--aurora-border-rgb),
      0.67
    );
}

#tab-overview .chart-legend small {
  color:
    rgba(
      var(--aurora-border-rgb),
      0.42
    );
}

#tab-overview .status-ring {
  box-shadow:
    0 0 0 1px
      rgba(
        var(--aurora-border-rgb),
        0.08
      ),
    0 0 38px
      rgba(
        var(--aurora-accent-rgb),
        0.055
      );
}

#tab-overview .status-ring::after {
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(
        var(--aurora-accent-rgb),
        0.055
      ),
      transparent 40%
    ),
    var(--aurora-palette-surface);
  box-shadow:
    inset 0 0 0 1px
      rgba(
        var(--aurora-border-rgb),
        0.08
      );
}

#tab-overview .status-ring span {
  color:
    rgba(
      var(--aurora-border-rgb),
      0.58
    );
}

#tab-overview .status-row {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.08
    );
  background:
    rgba(
      var(--aurora-accent-rgb),
      0.045
    );
  color:
    rgba(
      var(--aurora-border-rgb),
      0.62
    );
}

#tab-overview .leader {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.09
    );
  background:
    linear-gradient(
      180deg,
      var(--aurora-palette-surface-2),
      var(--aurora-palette-surface)
    );
}

#tab-overview .leader:hover {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.18
    );
  background:
    linear-gradient(
      180deg,
      var(--aurora-palette-hover),
      var(--aurora-palette-surface-2)
    );
}

#tab-overview .leader-meta,
#tab-overview .leader-result small {
  color:
    rgba(
      var(--aurora-border-rgb),
      0.57
    );
}

#tab-overview
.panel-header
[data-jump="alerts"] {
  color:
    rgba(
      var(--aurora-bright-rgb),
      0.72
    );
}

#tab-overview
.panel-header
[data-jump="alerts"]:hover {
  color:
    var(--aurora-bright);
  background:
    rgba(
      var(--aurora-accent-rgb),
      0.07
    );
}

#tab-overview
.dashboard-grid.equal
> .panel:last-child {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.14
    );
  background:
    radial-gradient(
      circle at 90% -10%,
      rgba(
        var(--aurora-accent-rgb),
        0.065
      ),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      var(--aurora-palette-surface-2),
      var(--aurora-palette-bg)
    );
}

#tab-overview
.dashboard-grid.equal
> .panel:last-child
.panel-header {
  border-bottom-color:
    rgba(
      var(--aurora-border-rgb),
      0.095
    );
}

#tab-overview .empty-state {
  border-color:
    rgba(
      var(--aurora-border-rgb),
      0.10
    );
  background:
    var(--aurora-palette-muted);
  color:
    rgba(
      var(--aurora-border-rgb),
      0.50
    );
}

/* End M4.47B2C8A22 */