/* v79.23: make the modal dashboards part of Daraban's calm, light visual family. */
body[data-display-mode="day"] .health-hero {
  color: #17243a !important;
  border-color: #dce7f3 !important;
  background: radial-gradient(circle at 12% 45%, #50d99d20, transparent 36%), linear-gradient(135deg, #edf5ff, #f5fbf8) !important;
  box-shadow: 0 14px 32px #20385812;
}
body[data-display-mode="day"] .health-hero h3,
body[data-display-mode="day"] .health-metric h3,
body[data-display-mode="day"] .health-metric header b,
body[data-display-mode="day"] .forecast-month h3,
body[data-display-mode="day"] .forecast-month header b,
body[data-display-mode="day"] .forecast-flow b,
body[data-display-mode="day"] .calendar-event h4,
body[data-display-mode="day"] .calendar-event strong,
body[data-display-mode="day"] .health-tip b,
body[data-display-mode="day"] .health-ring b { color: #172b4d !important; }
body[data-display-mode="day"] .health-hero p,
body[data-display-mode="day"] .health-data span,
body[data-display-mode="day"] .health-metric p,
body[data-display-mode="day"] .health-ring small,
body[data-display-mode="day"] .forecast-flow small,
body[data-display-mode="day"] .forecast-month footer,
body[data-display-mode="day"] .health-tip p,
body[data-display-mode="day"] .calendar-event p { color: #64758d !important; }
body[data-display-mode="day"] .health-data span {
  background: #ffffffb8 !important;
  border-color: #dce7f3 !important;
}
body[data-display-mode="day"] .health-ring {
  box-shadow: 0 10px 25px #1c3d6418 !important;
}
body[data-display-mode="day"] .health-ring:after {
  background: #f7faff !important;
  border-color: #dce7f3 !important;
}
body[data-display-mode="day"] .health-metric,
body[data-display-mode="day"] .health-tip,
body[data-display-mode="day"] .forecast-month,
body[data-display-mode="day"] .calendar-event {
  color: #172b4d !important;
  background: linear-gradient(145deg, #ffffff, #f6f9fd) !important;
  border-color: #dce5f0 !important;
  box-shadow: 0 8px 22px #1e36530b;
}
body[data-display-mode="day"] .health-tip > i {
  background: #fff3d1 !important;
  color: #936b12 !important;
}
body[data-display-mode="day"] .forecast-flow span {
  background: #edf3fa !important;
  color: #64758d !important;
}
body[data-display-mode="day"] .forecast-bar { background: #e4ebf4 !important; }
body[data-display-mode="day"] .calendar-summary span {
  background: linear-gradient(145deg, #f3f7fc, #fff) !important;
  border-color: #dfe7f1 !important;
}
body[data-display-mode="day"] .calendar-day {
  background: #f2f6fb !important;
  color: #1a2c49 !important;
  border-color: #e0e7f0 !important;
  box-shadow: 0 2px 6px #17365b08;
}
body[data-display-mode="day"] .calendar-day.today {
  background: #eaf8f2 !important;
  border-color: #40bd91 !important;
  box-shadow: inset 0 0 0 1px #40bd91 !important;
}
body[data-display-mode="day"] .calendar-day.selected {
  background: #eaf1ff !important;
  border-color: #4776d5 !important;
}
body[data-display-mode="day"] .calendar-day.today > span { color: #16815f !important; }
body[data-display-mode="day"] .calendar-week span,
body[data-display-mode="day"] .calendar-summary small { color: #71829b !important; }
body[data-display-mode="day"] .calendar-event-actions button {
  color: #24466f !important;
  background: #edf3fa !important;
  border-color: #d7e2ef !important;
}
body[data-display-mode="day"] .calendar-detail { border-color: #e2e9f2 !important; }
body[data-display-mode="day"] .calendar-toolbar > button:not(.calendar-today):not(.calendar-add):not(.calendar-forecast):not(.calendar-plan),
body[data-display-mode="day"] .calendar-actions > button:not(.calendar-today):not(.calendar-add):not(.calendar-forecast):not(.calendar-plan) {
  color: #24466f !important;
  background: #f2f6fb !important;
  border-color: #dbe5f0 !important;
}
body[data-display-mode="day"] .calendar-forecast,
body[data-display-mode="day"] .calendar-plan {
  color: #16795f !important;
  background: #eaf8f2 !important;
  border-color: #bfe8d8 !important;
}

/* Keep the calendar title, navigation and quick actions on separate rows on phones. */
@media (max-width: 560px) {
  .calendar-dialog {
    width: min(100%, 660px) !important;
    padding: 18px 12px max(18px, env(safe-area-inset-bottom)) !important;
  }
  .calendar-toolbar {
    position: relative;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-rows: 42px auto;
    align-items: center;
    gap: 9px 6px !important;
    margin: 9px 0 14px !important;
    padding-inline: 0;
  }
  .calendar-toolbar > button:first-child {
    grid-column: 1;
    grid-row: 1;
    width: 38px !important;
    height: 38px !important;
  }
  .calendar-toolbar h2 {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
    font-size: clamp(14px, 4vw, 17px) !important;
    white-space: nowrap;
  }
  .calendar-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px !important;
    padding-inline: 0;
  }
  .calendar-actions button { min-height: 38px; font-size: 10px !important; }
  .calendar-actions > button[aria-label="ماه بعد"] {
    position: absolute;
    top: 2px;
    right: 0;
    width: 38px !important;
    height: 38px !important;
  }
  .calendar-actions { padding-right: 42px; }
  .calendar-summary { gap: 5px !important; }
  .calendar-summary span { min-width: 0; padding: 8px 5px !important; text-align: center; }
  .calendar-summary small { font-size: 8px !important; line-height: 1.6; }
  .calendar-summary b { font-size: 9px !important; overflow-wrap: anywhere; }
  .calendar-day { min-width: 0; min-height: 54px !important; }
}