/* The Calendar (Month, Next 7 days, Day) and appointment reminders.
   The base .cal-* rules are in styles.css; this sheet adds to them and
   overrides the one that marked today. */

/* ---- Header ---- */
.cal-head { flex-wrap: wrap; row-gap: 8px; }
.cal-views { display: flex; gap: 6px; }
.cal-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-nav h3 { min-width: 0; text-align: left; }

/* ---- The month grid at a narrow width ----
   styles.css gives the grid repeat(7, 1fr), and a bare 1fr column will not
   shrink below its content. Every appointment label is white-space: nowrap, so
   one long title stretched its column, the other columns kept their share, and
   the grid grew wider than the pane: Thursday to Saturday ran off the right edge
   with no scrollbar for the grid itself. minmax(0, 1fr) lets all seven shrink
   equally and the labels clip with an ellipsis, as they were always meant to. */
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { min-width: 0; }

/* ---- Today in the month: a small outline on the cell, not a filled circle.
   The circle read as "selected" and vanished on a dimmed cell. Inset so the
   grid's rounded, overflow-hidden frame does not clip it. */
.cal-grid .cal-cell.today { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 3px; }
.cal-grid .cal-cell.today .dnum {
  color: var(--blue); background: none; border-radius: 0; width: auto; height: auto; display: block;
}
.cal-cell .dnum[data-calday] { cursor: pointer; display: inline-block; }
.cal-cell .dnum[data-calday]:hover { text-decoration: underline; }

/* ---- Day and Next 7 days ---- */
.cal-list { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.cal-daybox {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px;
}
.cal-daybox.today { outline: 2px solid var(--blue); outline-offset: -2px; }
.cal-daybox h4 { font-size: 13px; margin-bottom: 6px; }
.cal-empty { color: var(--muted); font-size: 13px; padding: 4px 0 2px; }
.cal-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 6px;
  border-top: 1px solid var(--border); cursor: pointer; border-radius: 6px;
}
.cal-row:first-of-type { border-top: 0; }
.cal-row:hover { background: #f8fafc; }
.cal-row-time { flex: 0 0 74px; font-weight: 700; font-size: 13px; color: var(--blue-dark); }
.cal-row.task .cal-row-time { color: #92400e; }
.cal-row-main { flex: 1; min-width: 0; }
.cal-row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-row-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-seller { flex: 0 0 auto; text-decoration: none; }

/* A narrow pane: seven month columns get cramped, so the appointment labels
   shrink and the rows keep the Seller button on the line. */
@media (max-width: 720px) {
  .cal-cell { min-height: 64px; padding: 3px; }
  .cal-ev { font-size: 10.5px; padding: 1px 3px; }
  .cal-row-time { flex-basis: 62px; }
}

/* ---- Appointment reminders: green, and shaped like the acting banner ---- */

/* Fixed to the top and above the page; BELOW the acting banner (z-index 900,
   37px tall) when that is showing. */
#appt-rem-bars {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 890;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
body.is-acting #appt-rem-bars { top: 37px; }

.arem-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #166534;
  color: #fff;
  font-size: 13px;
}
#appt-rem-bars .arem-bar + .arem-bar { border-top: 1px solid rgba(255, 255, 255, .22); }
.arem-bar .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #bbf7d0; flex: 0 0 auto;
  animation: arem-pulse 2s ease-in-out infinite;
}
@keyframes arem-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.arem-bar .txt { flex: 1; min-width: 0; }
.arem-bar .arem-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.arem-bar .arem-sub { margin-left: 8px; opacity: .85; }
.arem-bar .btn {
  background: #fff; color: #166534; border-color: #fff; font-weight: 600; flex: 0 0 auto;
}

/* The Today page's copy of the same thing: in the page, not fixed. */
.arem-strip { margin-bottom: 12px; }
.arem-strip:empty { display: none; }
.arem-strip .arem-bar { border-radius: 8px; margin-bottom: 6px; }

/* Push the app down by the bars' height, and by the acting banner's as well
   when both show, rather than letting them cover the top of the rail. */
body.has-appt-rem { padding-top: var(--arem-h, 0px); }
body.is-acting.has-appt-rem { padding-top: calc(37px + var(--arem-h, 0px)); }
body.has-appt-rem .shell { min-height: calc(100vh - var(--arem-h, 0px)); }
body.is-acting.has-appt-rem .shell { min-height: calc(100vh - 37px - var(--arem-h, 0px)); }

@media (max-width: 720px) {
  .arem-bar { padding: 8px 12px; gap: 8px; }
  .arem-bar .arem-sub { display: block; margin-left: 0; }
}