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

Purpose:
- Standardise Morning, Lunchtime, Teatime, Bedtime, and PRN schedule pages.
- Make medication name, dose, safety status, and actions easier to scan.
- Reduce unnecessary scrolling on mobile and desktop.
- 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: 0.9rem;
  padding: clamp(0.85rem, 2vw, 1.15rem);
  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.45rem;
  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.45rem;
  margin: 0.3rem 0 0;
  color: var(--color-muted, #5f6f82);
  line-height: 1.4;
}

.page--schedule .badge,
.page--schedule .badge--window,
.page--schedule .page__viewonly .badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.22rem 0.65rem;
  color: var(--color-primary, #0a2d6f);
  background: #eaf4ff;
  border: 1px solid #bcd7f5;
  border-radius: 999px;
  font-size: 0.86rem;
  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(0.85rem, 2vw, 1.05rem);
}

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

.med-card,
.page--schedule .med-card {
  padding: 0.8rem;
  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 4px 12px rgba(15, 23, 42, 0.05);
}

.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.65rem;
}

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

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

.med__name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: baseline;
  color: var(--color-text, #18212f);
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  font-weight: 800;
  line-height: 1.22;
}

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

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

.med-status,
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.15;
}

.med-status {
  width: fit-content;
  margin-bottom: 0.25rem;
  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.55rem;
  margin-top: 0.65rem;
}

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

.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.65rem;
  padding: 0.7rem;
  border-radius: var(--radius-md, 0.75rem);
  line-height: 1.45;
}

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

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

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

.med__msg-meta {
  margin-bottom: 0;
  font-size: 0.9rem;
  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.3rem;
  font-weight: 800;
}

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

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

#dc-banner,
.dc-banner {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.9rem;
  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: 0.85rem;
  }

  .med__top {
    gap: 0.6rem;
  }

  .med__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 1.05rem;
  }

  .med__btnrow {
    flex-direction: column;
  }

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

/*
====================================================
DoseClock visibility utility
Keeps confirmation/refusal panels hidden until opened
====================================================
*/

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

/*
====================================================
DoseClock iPhone SE / Small Phone Compression
Mobile-first safety pass for schedule and PRN cards
====================================================
*/

@media (max-width: 480px) {
  .page--schedule {
    padding-bottom: 1.25rem;
  }

  .page--schedule .page__header {
    margin-bottom: 0.65rem;
    padding: 0.7rem;
    border-radius: 0.9rem;
  }

  .page--schedule .page__title {
    margin-bottom: 0.3rem;
    font-size: 1.28rem;
    line-height: 1.15;
  }

  .page--schedule .page__subtitle,
  .page--schedule .page__viewonly {
    gap: 0.3rem;
    margin-top: 0.22rem;
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .page--schedule .badge,
  .page--schedule .badge--window,
  .page--schedule .page__viewonly .badge {
    min-height: 1.4rem;
    padding: 0.13rem 0.45rem;
    font-size: 0.74rem;
  }

  .page--schedule .card {
    border-radius: 0.9rem;
  }

  .page--schedule .card__body {
    padding: 0.55rem;
  }

  .med-list {
    gap: 0.55rem;
  }

  .med-card,
  .page--schedule .med-card {
    padding: 0.65rem !important;
    border-left-width: 4px;
    border-radius: 0.8rem;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045);
  }

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

  .med__icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 0.6rem;
    font-size: 0.95rem;
  }

  .med__name {
    gap: 0.18rem;
    font-size: 0.98rem;
    line-height: 1.18;
  }

  .med__dose {
    font-size: 0.93rem;
  }

  .med__meta {
    gap: 0.25rem;
    margin-top: 0.3rem;
  }

  .med-status,
  .pill {
    min-height: 1.25rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.1;
  }

  .med-status {
    margin-bottom: 0.18rem;
  }

  .med__actions {
    gap: 0.45rem;
    margin-top: 0.55rem;
  }

  .med__btnrow {
    gap: 0.45rem;
  }

  .med__btnrow .btn,
  .med__btnrow button,
  .med__done,
  .administer-btn.med__done,
  button.administer-btn.med__done {
    min-height: 44px;
    padding: 0.6rem 0.7rem;
    font-size: 0.96rem;
    line-height: 1.2;
  }

  .med__tick {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.8rem;
  }

  .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.5rem;
    padding: 0.6rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.32;
  }

  .med__msg-title {
    margin-bottom: 0.16rem;
    font-size: 0.94rem;
  }

  .med__msg-meta {
    font-size: 0.82rem;
  }

  .refuse-box__label,
  .refuse-box__detail-label {
    margin-bottom: 0.22rem;
    font-size: 0.9rem;
  }

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

  .refuse-box select,
  .refuse-box textarea,
  .confirm-box textarea,
  .page--schedule .confirm-box textarea {
    min-height: 44px;
    font-size: 1rem;
  }

  .refuse-box__actions {
    gap: 0.45rem;
    margin-top: 0.5rem;
  }

  .refuse-box__actions .btn,
  .refuse-box__actions button {
    width: 100%;
  }

  #dc-banner,
  .dc-banner {
    margin-bottom: 0.6rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.32;
  }
}

@media (max-width: 380px) {
  .page--schedule .page__title {
    font-size: 1.2rem;
  }

  .page--schedule .page__subtitle,
  .page--schedule .page__viewonly {
    font-size: 0.86rem;
  }

  .med-card,
  .page--schedule .med-card {
    padding: 0.6rem !important;
  }

  .med__top {
    gap: 0.4rem;
  }

  .med__icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .med__name {
    font-size: 0.94rem;
  }

  .med__dose {
    font-size: 0.88rem;
  }

  .med__btnrow .btn,
  .med__btnrow button,
  .med__done,
  .administer-btn.med__done,
  button.administer-btn.med__done {
    min-height: 44px;
    padding: 0.58rem 0.6rem;
    font-size: 0.94rem;
  }
}

/*
====================================================
DoseClock progressive disclosure
Desktop and mobile: keep schedule cards tidy until action is needed
====================================================
*/

.med-safety {
  margin-top: 0.55rem;
}

.med-safety__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  color: #7a4a00;
  background: #fff8e8;
  border: 1px solid #f1d18a;
  border-radius: var(--radius-md, 0.75rem);
  cursor: pointer;
  font-weight: 800;
  line-height: 1.28;
  list-style-position: inside;
}

.med-safety__summary::-webkit-details-marker {
  margin-right: 0.3rem;
}

.med-safety__summary-main {
  min-width: 0;
}

.med-safety__summary-action {
  flex: 0 0 auto;
  color: var(--color-primary, #0a2d6f);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.med-safety[open] .med-safety__summary {
  border-bottom-right-radius: 0.45rem;
  border-bottom-left-radius: 0.45rem;
}

.med-safety[open] .med-safety__summary-action {
  font-size: 0;
}

.med-safety[open] .med-safety__summary-action::after {
  content: "Hide details";
  font-size: 0.82rem;
}

.med-safety__body {
  margin-top: 0.2rem;
}

.med-safety__body .med-note:first-child {
  margin-top: 0.45rem;
}

.refuse-box.is-hidden,
.confirm-box.is-hidden,
.page--schedule .confirm-box.is-hidden {
  display: none !important;
}

@media (max-width: 480px) {
  .med-safety {
    margin-top: 0.45rem;
  }

  .med-safety__summary {
    gap: 0.45rem;
    padding: 0.48rem 0.55rem;
    border-radius: 0.6rem;
    font-size: 0.88rem;
  }

  .med-safety__summary-action,
  .med-safety[open] .med-safety__summary-action::after {
    font-size: 0.76rem;
  }
}

/*
====================================================
Schedule selector page refinements
====================================================
*/

.schedule-prn-section {
  margin-top: 1.5rem;
}

.schedule-home-link .dc-button {
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
}

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

Purpose:
- Standardise Morning, Lunchtime, Teatime, Bedtime, and PRN schedule pages.
- Make medication name, dose, safety status, and actions easier to scan.
- Reduce unnecessary scrolling on mobile and desktop.
- 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: 0.9rem;
  padding: clamp(0.85rem, 2vw, 1.15rem);
  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.45rem;
  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.45rem;
  margin: 0.3rem 0 0;
  color: var(--color-muted, #5f6f82);
  line-height: 1.4;
}

.page--schedule .badge,
.page--schedule .badge--window,
.page--schedule .page__viewonly .badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.22rem 0.65rem;
  color: var(--color-primary, #0a2d6f);
  background: #eaf4ff;
  border: 1px solid #bcd7f5;
  border-radius: 999px;
  font-size: 0.86rem;
  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(0.85rem, 2vw, 1.05rem);
}

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

.med-card,
.page--schedule .med-card {
  padding: 0.8rem;
  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 4px 12px rgba(15, 23, 42, 0.05);
}

.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.65rem;
}

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

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

.med__name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: baseline;
  color: var(--color-text, #18212f);
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  font-weight: 800;
  line-height: 1.22;
}

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

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

.med-status,
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.15;
}

.med-status {
  width: fit-content;
  margin-bottom: 0.25rem;
  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.55rem;
  margin-top: 0.65rem;
}

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

.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.65rem;
  padding: 0.7rem;
  border-radius: var(--radius-md, 0.75rem);
  line-height: 1.45;
}

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

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

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

.med__msg-meta {
  margin-bottom: 0;
  font-size: 0.9rem;
  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.3rem;
  font-weight: 800;
}

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

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

#dc-banner,
.dc-banner {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.9rem;
  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: 0.85rem;
  }

  .med__top {
    gap: 0.6rem;
  }

  .med__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 1.05rem;
  }

  .med__btnrow {
    flex-direction: column;
  }

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

/*
====================================================
DoseClock visibility utility
Keeps confirmation/refusal panels hidden until opened
====================================================
*/

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

/*
====================================================
DoseClock iPhone SE / Small Phone Compression
Mobile-first safety pass for schedule and PRN cards
====================================================
*/

@media (max-width: 480px) {
  .page--schedule {
    padding-bottom: 1.25rem;
  }

  .page--schedule .page__header {
    margin-bottom: 0.65rem;
    padding: 0.7rem;
    border-radius: 0.9rem;
  }

  .page--schedule .page__title {
    margin-bottom: 0.3rem;
    font-size: 1.28rem;
    line-height: 1.15;
  }

  .page--schedule .page__subtitle,
  .page--schedule .page__viewonly {
    gap: 0.3rem;
    margin-top: 0.22rem;
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .page--schedule .badge,
  .page--schedule .badge--window,
  .page--schedule .page__viewonly .badge {
    min-height: 1.4rem;
    padding: 0.13rem 0.45rem;
    font-size: 0.74rem;
  }

  .page--schedule .card {
    border-radius: 0.9rem;
  }

  .page--schedule .card__body {
    padding: 0.55rem;
  }

  .med-list {
    gap: 0.55rem;
  }

  .med-card,
  .page--schedule .med-card {
    padding: 0.65rem !important;
    border-left-width: 4px;
    border-radius: 0.8rem;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045);
  }

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

  .med__icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 0.6rem;
    font-size: 0.95rem;
  }

  .med__name {
    gap: 0.18rem;
    font-size: 0.98rem;
    line-height: 1.18;
  }

  .med__dose {
    font-size: 0.93rem;
  }

  .med__meta {
    gap: 0.25rem;
    margin-top: 0.3rem;
  }

  .med-status,
  .pill {
    min-height: 1.25rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.1;
  }

  .med-status {
    margin-bottom: 0.18rem;
  }

  .med__actions {
    gap: 0.45rem;
    margin-top: 0.55rem;
  }

  .med__btnrow {
    gap: 0.45rem;
  }

  .med__btnrow .btn,
  .med__btnrow button,
  .med__done,
  .administer-btn.med__done,
  button.administer-btn.med__done {
    min-height: 44px;
    padding: 0.6rem 0.7rem;
    font-size: 0.96rem;
    line-height: 1.2;
  }

  .med__tick {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.8rem;
  }

  .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.5rem;
    padding: 0.6rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.32;
  }

  .med__msg-title {
    margin-bottom: 0.16rem;
    font-size: 0.94rem;
  }

  .med__msg-meta {
    font-size: 0.82rem;
  }

  .refuse-box__label,
  .refuse-box__detail-label {
    margin-bottom: 0.22rem;
    font-size: 0.9rem;
  }

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

  .refuse-box select,
  .refuse-box textarea,
  .confirm-box textarea,
  .page--schedule .confirm-box textarea {
    min-height: 44px;
    font-size: 1rem;
  }

  .refuse-box__actions {
    gap: 0.45rem;
    margin-top: 0.5rem;
  }

  .refuse-box__actions .btn,
  .refuse-box__actions button {
    width: 100%;
  }

  #dc-banner,
  .dc-banner {
    margin-bottom: 0.6rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.32;
  }
}

@media (max-width: 380px) {
  .page--schedule .page__title {
    font-size: 1.2rem;
  }

  .page--schedule .page__subtitle,
  .page--schedule .page__viewonly {
    font-size: 0.86rem;
  }

  .med-card,
  .page--schedule .med-card {
    padding: 0.6rem !important;
  }

  .med__top {
    gap: 0.4rem;
  }

  .med__icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .med__name {
    font-size: 0.94rem;
  }

  .med__dose {
    font-size: 0.88rem;
  }

  .med__btnrow .btn,
  .med__btnrow button,
  .med__done,
  .administer-btn.med__done,
  button.administer-btn.med__done {
    min-height: 44px;
    padding: 0.58rem 0.6rem;
    font-size: 0.94rem;
  }
}

/*
====================================================
DoseClock progressive disclosure
Desktop and mobile: keep schedule cards tidy until action is needed
====================================================
*/

.med-safety {
  margin-top: 0.55rem;
}

.med-safety__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  color: #7a4a00;
  background: #fff8e8;
  border: 1px solid #f1d18a;
  border-radius: var(--radius-md, 0.75rem);
  cursor: pointer;
  font-weight: 800;
  line-height: 1.28;
  list-style-position: inside;
}

.med-safety__summary::-webkit-details-marker {
  margin-right: 0.3rem;
}

.med-safety__summary-main {
  min-width: 0;
}

.med-safety__summary-action {
  flex: 0 0 auto;
  color: var(--color-primary, #0a2d6f);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.med-safety[open] .med-safety__summary {
  border-bottom-right-radius: 0.45rem;
  border-bottom-left-radius: 0.45rem;
}

.med-safety[open] .med-safety__summary-action {
  font-size: 0;
}

.med-safety[open] .med-safety__summary-action::after {
  content: "Hide details";
  font-size: 0.82rem;
}

.med-safety__body {
  margin-top: 0.2rem;
}

.med-safety__body .med-note:first-child {
  margin-top: 0.45rem;
}

.refuse-box.is-hidden,
.confirm-box.is-hidden,
.page--schedule .confirm-box.is-hidden {
  display: none !important;
}

@media (max-width: 480px) {
  .med-safety {
    margin-top: 0.45rem;
  }

  .med-safety__summary {
    gap: 0.45rem;
    padding: 0.48rem 0.55rem;
    border-radius: 0.6rem;
    font-size: 0.88rem;
  }

  .med-safety__summary-action,
  .med-safety[open] .med-safety__summary-action::after {
    font-size: 0.76rem;
  }
}

/*
====================================================
Schedule selector page refinements
====================================================
*/

.schedule-prn-section {
  margin-top: 1.5rem;
}

.schedule-home-link .dc-button {
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
}

/*
====================================================
DoseClock compact clinical cards - Step 3
Make safety details less visually dominant
====================================================
*/

.page--schedule .med-safety__summary {
  width: fit-content;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  gap: 0.35rem;
}

.page--schedule .med-safety__summary-action {
  display: none;
}

.page--schedule .med-safety__summary-main {
  font-size: 0.86rem;
}

@media (max-width: 480px) {
  .page--schedule .med-safety__summary {
    min-height: 1.85rem;
    padding: 0.3rem 0.5rem;
  }

  .page--schedule .med-safety__summary-main {
    font-size: 0.82rem;
  }
}