/* Kategorijska paleta: svaki segment i njegova polja dele istu pastelnu boju. */
#results .segment[data-section="driving"] {
  --category-soft: #fce8ea;
  --category-card: #fff3f4;
  --category-border: #eeb7bd;
  --category-ink: #a83c49;
}

#results .segment[data-section="work"] {
  --category-soft: #fff2c9;
  --category-card: #fff9df;
  --category-border: #e5cb72;
  --category-ink: #816010;
}

#results .segment[data-section="daily_rest"] {
  --category-soft: #e2f1ff;
  --category-card: #f0f8ff;
  --category-border: #a8cde8;
  --category-ink: #286e9a;
}

#results .segment[data-section="weekly_rest"] {
  --category-soft: #eee5fb;
  --category-card: #f7f1ff;
  --category-border: #c5abe7;
  --category-ink: #68459d;
}

#results .segment[data-section] {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--category-soft) 86%, white),
    color-mix(in srgb, var(--category-soft) 62%, white));
  border: 1px solid var(--category-border);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 7px 22px color-mix(in srgb, var(--category-border) 18%, transparent);
  box-sizing: border-box;
  padding: 12px;
}

#results .segment[data-section] > h2 {
  align-items: center;
  color: var(--category-ink);
  display: flex;
  margin: 0 0 10px;
  min-height: 38px;
  padding: 0 8px;
}

#results .segment[data-section] > h2::before {
  background: var(--category-ink);
  border-radius: 999px;
  content: "";
  flex: 0 0 6px;
  height: 24px;
  margin-right: 9px;
  opacity: .7;
}

#results .segment[data-section] > .dashboard-grid > .dashboard-card:not(.severity-warning):not(.severity-danger):not(.severity-overdue) {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--category-card) 96%, white),
    color-mix(in srgb, var(--category-soft) 78%, white)) !important;
  border-color: var(--category-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 5px 15px color-mix(in srgb, var(--category-border) 18%, transparent) !important;
}

/* Unutrašnja informativna polja prate boju svog segmenta. */
#results .segment[data-section] :is(
  .night-work-info,
  .next-daily-rest-info,
  .cumulative-rest-rules
) {
  background: color-mix(in srgb, var(--category-card) 86%, var(--category-soft) 14%) !important;
  border-color: var(--category-border) !important;
}

/* Statusna upozorenja ostaju vizuelno jača od kategorijske pozadine. */
#results .segment[data-section] > .dashboard-grid > .dashboard-card.severity-warning {
  border-color: var(--warning) !important;
}

#results .segment[data-section] > .dashboard-grid > .dashboard-card:is(.severity-danger, .severity-overdue) {
  border-color: var(--danger) !important;
}

html[data-theme="dark"] #results .segment[data-section="driving"] {
  --category-soft: #40272b;
  --category-card: #352327;
  --category-border: #82505a;
  --category-ink: #ffadb7;
}

html[data-theme="dark"] #results .segment[data-section="work"] {
  --category-soft: #42391f;
  --category-card: #37311f;
  --category-border: #806b35;
  --category-ink: #f5d77a;
}

html[data-theme="dark"] #results .segment[data-section="daily_rest"] {
  --category-soft: #20394b;
  --category-card: #20313f;
  --category-border: #416c8a;
  --category-ink: #9bd4fa;
}

html[data-theme="dark"] #results .segment[data-section="weekly_rest"] {
  --category-soft: #372b49;
  --category-card: #30273d;
  --category-border: #6a538a;
  --category-ink: #d6b9fa;
}

html[data-theme="dark"] #results .segment[data-section] {
  background: linear-gradient(145deg, var(--category-soft), color-mix(in srgb, var(--category-card) 80%, #121a20));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 7px 22px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] #results .segment[data-section] > .dashboard-grid > .dashboard-card:not(.severity-warning):not(.severity-danger):not(.severity-overdue) {
  background: linear-gradient(155deg, var(--category-card), color-mix(in srgb, var(--category-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: 720px) {
  #results .segment[data-section] {
    border-radius: 17px;
    margin-block: 12px 20px;
    padding: 7px;
  }

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

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