/* Predstojeći isteci prate isti kompaktni, upareni sistem kao ostali grafikoni. */
/* Osnovne kartice postoje samo do prvog animation frame-a. Njihove napomene
   ne smeju da bljesnu pre nego što budu premeštene u objedinjeni prikaz. */
#results [data-panel="upcoming"] .upcoming-gauge-card > .gauge-note {
  display: none !important;
}

#results [data-panel="upcoming"] .upcoming-modern-segment {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--theme-surface, var(--panel, #fff)) 94%, #dcecf6 6%),
    var(--theme-surface, var(--panel, #fff)));
  border: 1px solid var(--theme-border, var(--border, #c8d7e1));
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 7px 22px rgba(53, 91, 117, .08);
  box-sizing: border-box;
  padding: 12px;
}

#results [data-panel="upcoming"] .upcoming-modern-segment > h2 {
  align-items: center;
  display: flex;
  margin: 0 0 10px;
  min-height: 38px;
  padding: 0 8px;
}

#results [data-panel="upcoming"] .upcoming-modern-segment > h2::before {
  background: var(--accent, #278fca);
  border-radius: 999px;
  content: "";
  flex: 0 0 6px;
  height: 24px;
  margin-right: 9px;
  opacity: .72;
}

#results [data-panel="upcoming"] .upcoming-modern-segment > .dashboard-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#results [data-panel="upcoming"] .upcoming-gauge-pair-card {
  --upcoming-soft: #e2f1ff;
  --upcoming-card: #f0f8ff;
  --upcoming-border: #a8cde8;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--upcoming-card) 96%, white),
    color-mix(in srgb, var(--upcoming-soft) 78%, white)) !important;
  border-color: var(--upcoming-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78),
    0 5px 15px color-mix(in srgb, var(--upcoming-border) 18%, transparent) !important;
  grid-column: auto !important;
}

#results [data-panel="upcoming"] .upcoming-gauge-pair-card[data-upcoming-category="driving"] {
  --upcoming-soft: #fce8ea;
  --upcoming-card: #fff3f4;
  --upcoming-border: #eeb7bd;
}

#results [data-panel="upcoming"] .upcoming-gauge-pair-card[data-upcoming-category="work"] {
  --upcoming-soft: #fff2c9;
  --upcoming-card: #fff9df;
  --upcoming-border: #e5cb72;
}

#results [data-panel="upcoming"] .upcoming-gauge-pair-card[data-upcoming-category="daily-rest"] {
  --upcoming-soft: #e2f1ff;
  --upcoming-card: #f0f8ff;
  --upcoming-border: #a8cde8;
}

#results [data-panel="upcoming"] .upcoming-gauge-pair-card[data-upcoming-category="weekly-rest"] {
  --upcoming-soft: #eee5fb;
  --upcoming-card: #f7f1ff;
  --upcoming-border: #c5abe7;
}

#results [data-panel="upcoming"] .upcoming-gauge-pair-card.severity-warning {
  border-color: var(--warning, #d6a41e) !important;
}

#results [data-panel="upcoming"] .upcoming-gauge-pair-card:is(.severity-danger, .severity-overdue) {
  border-color: var(--danger, #d94b55) !important;
}

#results [data-panel="upcoming"] .upcoming-gauge-pair-card .upcoming-gauge-shell {
  margin: 0 !important;
}

html[data-theme="dark"] #results [data-panel="upcoming"] .upcoming-modern-segment {
  background: linear-gradient(145deg, #1d2a33, #152029);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 7px 22px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] #results [data-panel="upcoming"] .upcoming-gauge-pair-card[data-upcoming-category="driving"] {
  --upcoming-soft: #40272b;
  --upcoming-card: #352327;
  --upcoming-border: #82505a;
}

html[data-theme="dark"] #results [data-panel="upcoming"] .upcoming-gauge-pair-card[data-upcoming-category="work"] {
  --upcoming-soft: #42391f;
  --upcoming-card: #37311f;
  --upcoming-border: #806b35;
}

html[data-theme="dark"] #results [data-panel="upcoming"] .upcoming-gauge-pair-card[data-upcoming-category="daily-rest"] {
  --upcoming-soft: #20394b;
  --upcoming-card: #20313f;
  --upcoming-border: #416c8a;
}

html[data-theme="dark"] #results [data-panel="upcoming"] .upcoming-gauge-pair-card[data-upcoming-category="weekly-rest"] {
  --upcoming-soft: #372b49;
  --upcoming-card: #30273d;
  --upcoming-border: #6a538a;
}

html[data-theme="dark"] #results [data-panel="upcoming"] .upcoming-gauge-pair-card {
  background: linear-gradient(155deg,
    var(--upcoming-card),
    color-mix(in srgb, var(--upcoming-soft) 72%, #11191f)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 5px 15px rgba(0, 0, 0, .13) !important;
}

@media (max-width: 900px) {
  #results [data-panel="upcoming"] .upcoming-modern-segment > .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  #results [data-panel="upcoming"] .upcoming-modern-segment {
    border-radius: 17px;
    margin-block: 12px 20px;
    padding: 7px;
  }

  #results [data-panel="upcoming"] .upcoming-modern-segment > h2 {
    font-size: clamp(18px, 5.2vw, 22px);
    min-height: 34px;
    padding-inline: 5px;
  }

  #results [data-panel="upcoming"] .upcoming-modern-segment > h2::before {
    flex-basis: 5px;
    height: 21px;
    margin-right: 7px;
  }
}