/*
====================================================
DoseClock Schedule Styles
Phase 4 Package 1
Option C: clinical structure with modern polish
====================================================

Purpose:
- Standardise Morning, Lunchtime, Teatime, Bedtime, and PRN schedule pages.
- Make medication name, dose, safety status, and actions easier to scan.
- Keep the existing schedule template and JavaScript behaviour intact.
*/

.page--schedule {
  width: min(100%, 980px);
  margin-inline: auto;
  padding-bottom: 2rem;
}

.page--schedule .page__header {
  margin-bottom: 1.1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
  border: 1px solid var(--color-border, #d7e0eb);
  border-radius: var(--radius-xl, 1.25rem);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.06));
}

.page--schedule .page__title {
  margin-bottom: 0.55rem;
  color: var(--color-heading, #0a2d6f);
  text-wrap: balance;
}

.page--schedule .page__subtitle,
.page--schedule .page__viewonly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
  color: var(--color-muted, #5f6f82);
  line-height: 1.5;
}

.page--schedule .badge,
.page--schedule .badge--window,
.page--schedule .page__viewonly .badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.25rem 0.7rem;
  color: var(--color-primary, #0a2d6f);
  background: #eaf4ff;
  border: 1px solid #bcd7f5;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}

.page--schedule .page__now {
  color: var(--color-muted, #5f6f82);
}

.page--schedule .card {
  border: 1px solid var(--color-border, #d7e0eb);
  border-radius: var(--radius-xl, 1.25rem);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.06));
  overflow: hidden;
}

.page--schedule .card__body {
  padding: clamp(1rem, 2vw, 1.25rem);
}

.med-list {
  display: grid;
  gap: 0.9rem;
}

.med-card,
.page--schedule .med-card {
  padding: clamp(0.95rem, 2vw, 1.15rem);
  background: #ffffff;
  border: 1px solid var(--color-border, #d7e0eb);
  border-left: 5px solid var(--color-primary, #0a2d6f);
  border-radius: var(--radius-lg, 1rem);
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.055);
}

.slot--morning .med-card {
  border-left-color: #0a7fb1;
}

.slot--lunchtime .med-card {
  border-left-color: #1a8f4f;
}

.slot--teatime .med-card {
  border-left-color: #b15a0a;
}

.slot--bedtime .med-card {
  border-left-color: #5c3db3;
}

.slot--prn .med-card {
  border-left-color: var(--color-primary, #0a2d6f);
}

.med-card.is-done {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
  border-color: rgba(23, 114, 69, 0.28);
  border-left-color: #177245;
}

.med-card.is-blocked {
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
  border-color: rgba(154, 103, 0, 0.32);
  border-left-color: #9a6700;
}

.med__top {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.med__icon {
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--color-primary, #0a2d6f);
  background: rgba(10, 45, 111, 0.08);
  border: 1px solid rgba(10, 45, 111, 0.08);
  border-radius: 0.9rem;
  font-size: 1.35rem;
  line-height: 1;
}

.med__info {
  flex: 1 1 auto;
  min-width: 0;
}

.med__name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  color: var(--color-text, #18212f);
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  font-weight: 800;
  line-height: 1.25;
}

.med__dose {
  color: var(--color-muted, #5f6f82);
  font-weight: 800;
}

.med__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.med-status,
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.2;
}

.med-status {
  width: fit-content;
  margin-bottom: 0.35rem;
  color: var(--color-primary, #0a2d6f);
  background: #eaf4ff;
  border: 1px solid #bcd7f5;
}

.med-status--due_now,
.med-status--due {
  color: #125d38;
  background: #e8f6ee;
  border-color: #b7e0c7;
}

.med-status--already_given,
.med-status--taken,
.med-status--complete {
  color: #125d38;
  background: #e8f6ee;
  border-color: #b7e0c7;
}

.med-status--not_due,
.med-status--wait_next {
  color: #915f16;
  background: #fff4db;
  border-color: #f1d18a;
}

.med-status--blocked,
.med-status--alert,
.med-status--clinical_review {
  color: #8f231b;
  background: #fde8e8;
  border-color: #f4b4ae;
}

.pill {
  color: var(--color-primary, #0a2d6f);
  background: #eef4fb;
  border: 1px solid var(--color-border, #d7e0eb);
}

.med__actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.med__btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.med__btnrow .btn,
.med__btnrow button {
  flex: 1 1 170px;
  min-height: 46px;
}

.med__done,
.administer-btn.med__done,
button.administer-btn.med__done {
  width: 100%;
}

.med__tick {
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  color: #ffffff;
  background: #177245;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.med-card.is-done .med__tick {
  display: inline-flex;
}

.med__msg,
.med__msg--error,
.med__msg--info,
.warning-red,
.warning-yellow,
.med-note,
.refuse-box,
.confirm-box,
.page--schedule .confirm-box {
  margin-top: 0.85rem;
  padding: 0.85rem;
  border-radius: var(--radius-md, 0.75rem);
  line-height: 1.5;
}

.med__msg-title,
.med__msg-text,
.med__msg-meta {
  margin-top: 0;
}

.med__msg-title {
  margin-bottom: 0.25rem;
  font-weight: 800;
}

.med__msg-text {
  margin-bottom: 0;
}

.med__msg-meta {
  margin-bottom: 0;
  font-size: 0.92rem;
  opacity: 0.9;
}

.med__msg--error,
.warning-red {
  color: #ffffff;
  background: #b42318;
  border: 1px solid #8f231b;
}

.med__msg--info,
.med-note {
  color: #1e40af;
  background: #e8f1ff;
  border: 1px solid #b9d1ff;
}

.warning-yellow,
.confirm-box,
.page--schedule .confirm-box {
  color: #7a4a00;
  background: #fff4db;
  border: 1px solid #f1d18a;
}

.refuse-box {
  background: #f8fafc;
  border: 1px solid var(--color-border, #d7e0eb);
}

.refuse-box__label,
.refuse-box__detail-label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 800;
}

.refuse-box__detail-label {
  margin-top: 0.75rem;
}

.refuse-box__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

#dc-banner,
.dc-banner {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: #e8f1ff;
  border: 1px solid #b9d1ff;
  border-radius: var(--radius-md, 0.75rem);
  color: #1e40af;
  font-weight: 700;
}

.dc-banner.is-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .page--schedule .page__header,
  .page--schedule .card__body,
  .med-card,
  .page--schedule .med-card {
    padding: 1rem;
  }

  .med__top {
    gap: 0.7rem;
  }

  .med__icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 1.15rem;
  }

  .med__btnrow {
    flex-direction: column;
  }

  .med__btnrow .btn,
  .med__btnrow button {
    width: 100%;
    flex-basis: auto;
  }
}