/* ----------------------------------------------------
   7-DAY CENTERED CALENDAR STRIP
---------------------------------------------------- */
.calendar-strip-container {
  padding: 20px 12px 2px 12px;
  background-color: #ffffff;
  margin-bottom: 30px;
  border-radius: 0px 0px 16px 16px;
  margin-top: -26px;
}

.calendar-strip-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  color: var(--text-3);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bg-color);
}

.strip-title {
  font-size: 12px;
  font-weight: 640;
  margin: 0;
}
.month-icon{
  display: flex;
  gap: 6px;
  flex-direction: row;
  align-items: center;
  height: 26px;
  border-radius: 11px;
}
.month-icon svg{
  height: 18px;
  width: auto;
  margin-bottom: 2px;
}

.strip-today-badge {
  margin-left: -1px;
  padding-right: 4px;
  border: none;
  color:var(--text-3);
  background: none;
  font-size: 12px;
  font-weight: 640;
  cursor: pointer;
}





.streak-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.streak-card-title {
  font-size: 15px;
  font-weight: 440;
  color: #334155;
}

.streak-card-stat {
  font-size: 14px;
  font-weight: 360;
  color: var(--text-2);
}

/* 30/31 Day Bar Container */
.pill-matrix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: 40px;
  margin: auto;
  width: 98%;
}

.pill-tick {
  flex: 1;
  height: 100%;
  max-width: 7px;
  background: var(--contrast-bg);
  border-radius: 2px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

/* Completed day styling */
.pill-tick.logged {
  background: var(--link-blue);
}

/* Faded placeholder for days not yet reached */
.pill-tick.future {
  opacity: 0.35;
}



.calendar-7day-row .pill-box {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}




/* Container clipping with soft edge fade */
.calendar-month-strip-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  /* Optional: subtle side-fade masks for visual depth */
  mask-image: linear-gradient(to right, transparent, black 0%, black 100%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 0%, black 100%, transparent);
}

.calendar-7day-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height:84px;
}

/* Container column rules */
.calendar-7day-row .day-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  padding: 13px 0;
  height: 70px;
  max-width: 54px;
}

.calendar-7day-row .day-pill .day-name {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
  line-height: 1;
}

.calendar-7day-row .day-pill .day-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}

/* Center Active Container */
.calendar-7day-row .day-pill.active {
  background: var(--link-blue) !important;
}

.calendar-7day-row .day-pill.active .day-name,
.calendar-7day-row .day-pill.active .day-num {
  color: #ffffff !important;
}

.calendar-7day-row .pill-slot {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-7day-row .day-completion-ring {
  display: block;
  width: 24px;
  height: 24px;
}

.calendar-7day-row .day-ring-track {
  stroke: var(--contrast-bg);
}

.calendar-7day-row .day-ring-progress {
  stroke: #02de8d;
  transition: stroke-dashoffset 0.35s ease;
}

.calendar-7day-row .day-pill.active .day-ring-track {
  stroke: rgba(255, 255, 255, 0.4);
}

.calendar-7day-row .day-pill.active .day-ring-progress {
  stroke: #ffffff !important;
}


/* ----------------------------------------------------
   EXPANDABLE MONTH POPOVER (opens from the 7-day strip)
---------------------------------------------------- */
.calendar-strip-container {
  position: relative;
}

/* Sits above later sibling cards while the popover is open, since
   the .card backdrop-filter creates its own stacking context. */
.calendar-strip-container.popover-active {
  z-index: 40;
}

.strip-expand-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.strip-expand-chevron {
  transition: transform 0.25s ease;
  margin-bottom: 2px;
}

.strip-expand-btn[aria-expanded="true"] .strip-expand-chevron {
  transform: rotate(180deg);
}

.calendar-strip-body {
  position: relative;
}

.month-popover {
  position: absolute;
  top: 0;
  /* .calendar-strip-container is now full-bleed (flush with the screen
     edge) but still has its own 12px side padding, so .calendar-strip-body
     -- this popover's positioning parent -- sits 12px in from the screen.
     The rest of the app's content (e.g. the Prescriptions section below)
     sits at body's normal 18px inset. Offsetting by the 6px difference
     lines this popover's edges up with THAT content instead of either
     going full-bleed itself or floating narrower than everything below it. */
  left: 6px;
  right: 6px;
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  z-index: 10;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top center;
  pointer-events: none;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.month-popover.open {
  max-height: 460px;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.month-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 6px 14px;
}

.month-popover-title {
  font-size: 14px;
  font-weight: 640;
  color: var(--text-main);
}

.month-popover-nav-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px 12px;
}

.month-popover-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.month-popover-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 8px 4px 8px;
}

.month-popover-day {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 0;
  cursor: pointer;
  font: inherit;
}

.month-popover-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
}

.month-popover-day.is-other-month .month-popover-day-num {
  color: var(--text-3);
  opacity: 0.4;
}

.month-popover-day.is-today .month-popover-day-num {
  border: 1.5px solid var(--link-blue);
}

.month-popover-day.is-selected .month-popover-day-num {
  background: var(--link-blue);
  color: #ffffff !important;
}

.month-popover-day-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--link-blue);
}

.month-popover-day-dot.is-placeholder {
  visibility: hidden;
}

.month-popover-grabber-zone {
  display: flex;
  justify-content: center;
  padding: 6px 0 14px 0;
  cursor: grab;
  touch-action: none;
}

.month-popover-grabber-bar {
  width: 44px;
  height: 5px;
  border-radius: 10px;
  background: rgba(151, 151, 151, 0.5);
  transition: background-color 0.2s ease, width 0.2s ease;
}

.month-popover-grabber-zone:hover .month-popover-grabber-bar {
  background: rgba(102, 102, 102, 0.6);
  width: 56px;
}