:root { --latest-compatibility-marker: "styles.v3.css"; }

/* Završeni reset: pun luk dobija mirnu pastelno zelenu boju. */
.premium-dashboard-gauge-card.premium-reset-gauge.severity-satisfied,
[data-panel="upcoming"] .upcoming-gauge-card.upcoming-reset-card.severity-satisfied {
  --gauge-start: #72c99c;
  --gauge-end: #b6ead0;
  --gauge-highlight: #dcf7e8;
  border-color: color-mix(in srgb, #72c99c 48%, var(--border));
}

/* Dozvoljeno vreme pri poslednjih približno 10% limita. */
.premium-dashboard-gauge-card.severity-warning:not(.premium-reset-gauge),
[data-panel="upcoming"] .upcoming-gauge-card.severity-warning:not(.upcoming-reset-card) {
  --gauge-start: #d6b94f;
  --gauge-end: #f0dc86;
  --gauge-highlight: #fff1ae;
  border-color: color-mix(in srgb, #d6b94f 54%, var(--border));
}

/* Isteklo dozvoljeno vreme. */
.premium-dashboard-gauge-card.severity-danger:not(.premium-reset-gauge),
.premium-dashboard-gauge-card.severity-overdue:not(.premium-reset-gauge),
[data-panel="upcoming"] .upcoming-gauge-card.severity-danger:not(.upcoming-reset-card),
[data-panel="upcoming"] .upcoming-gauge-card.severity-overdue:not(.upcoming-reset-card) {
  --gauge-start: #dc7478;
  --gauge-end: #f0a4a7;
  --gauge-highlight: #ffd0d2;
  border-color: color-mix(in srgb, #dc7478 56%, var(--border));
}

.critical-alert-settings {
  align-items: center;
  background: var(--theme-field, var(--panel));
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 14px;
  display: flex;
  gap: 12px;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 12px;
}

.critical-alert-settings > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.critical-alert-settings strong {
  color: var(--theme-text, var(--ink));
  font-size: .92rem;
}

.critical-alert-settings small {
  color: var(--theme-muted, var(--muted));
  font-size: .78rem;
  line-height: 1.3;
}

#criticalAlertsToggle {
  background: linear-gradient(145deg, #159ddd, #087fc4);
  border: 1px solid #087fc4;
  border-radius: 11px;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font: 800 .8rem/1 system-ui, sans-serif;
  min-height: 39px;
  padding: 9px 12px;
}

#criticalAlertsToggle[aria-pressed="true"] {
  background: linear-gradient(145deg, #4fb886, #238d61);
  border-color: #238d61;
}

.critical-time-alert {
  background: color-mix(in srgb, #f0dc86 20%, var(--panel));
  border: 1px solid color-mix(in srgb, #d6b94f 60%, var(--border));
  border-radius: 16px;
  box-shadow: 0 10px 28px color-mix(in srgb, #7c681b 13%, transparent);
  margin: 12px 0;
  overflow: hidden;
  padding: 12px 14px;
}

.critical-time-alert.has-expired-time {
  background: color-mix(in srgb, #f0a4a7 18%, var(--panel));
  border-color: color-mix(in srgb, #dc7478 62%, var(--border));
}

.critical-time-alert-heading,
.critical-time-alert-heading > div,
.critical-time-alert li {
  align-items: center;
  display: flex;
}

.critical-time-alert-heading {
  justify-content: space-between;
}

.critical-time-alert-heading > div {
  gap: 8px;
}

.critical-time-alert-heading > div > span {
  align-items: center;
  background: #d6b94f;
  border-radius: 50%;
  color: #24313a;
  display: inline-flex;
  font-weight: 950;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.has-expired-time .critical-time-alert-heading > div > span {
  background: #dc7478;
  color: #fff;
}

.critical-time-alert-heading button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  min-height: 34px;
  min-width: 34px;
}

.critical-time-alert ul {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.critical-time-alert li {
  background: color-mix(in srgb, var(--panel-strong) 82%, transparent);
  border-radius: 10px;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 10px;
}

.critical-time-alert li strong {
  color: var(--ink);
  font-size: .88rem;
}

.critical-time-alert li span {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: .82rem;
  font-weight: 800;
}

.critical-time-alert .critical-time-danger span {
  color: #c94f56;
}

@media (max-width: 430px) {
  .critical-alert-settings {
    align-items: stretch;
    flex-direction: column;
  }

  #criticalAlertsToggle {
    width: 100%;
  }

  .critical-time-alert li {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}