/* Shared hormone month calendar — identical on staff and patient pages (Balance night-garden palette). */
.hc { --hc-night: #000; --hc-bark: #0d140e; --hc-frond: #24402a; --hc-lime: #bfe63a; --hc-hib: #e5421e; --hc-gold: #f7b928; --hc-plum: #f6c3a2; --hc-pink: #ff8fb1; --hc-cream: #f2efe4; --hc-mist: #b3c0af;
  background: var(--hc-night); color: var(--hc-cream); border-radius: 22px; padding: 14px 10px 12px; border: 1.5px solid var(--hc-frond); }
.hc-head { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 10px; }
.hc-head b { font-family: 'Script', 'Dancing Script', cursive; color: var(--hc-lime); font-size: 1.8rem; font-weight: 700; }
.hc-head button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hc-frond); background: transparent; color: var(--hc-cream); font-size: 1.3rem; cursor: pointer; }
.hc-head button:disabled { opacity: .25; cursor: default; }
.hc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hc-dow { text-align: center; font-size: .72rem; letter-spacing: .04em; color: var(--hc-lime); font-weight: 600; padding: 2px 0 4px; }
.hc-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; min-width: 0; min-height: 96px; padding: 6px 2px 4px;
  background: var(--hc-bark); border: 1.5px solid var(--hc-frond); border-radius: 12px; color: var(--hc-cream); font: 500 .72rem/1.25 'Jost', system-ui, sans-serif; cursor: pointer; overflow: hidden; text-align: center; }
.hc-day > div { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; }
.hc-empty { cursor: default; opacity: .5; }
.hc-num { font-size: 1.05rem; font-weight: 600; color: var(--hc-cream); }
.hc-cd { color: var(--hc-mist); font-weight: 600; margin-bottom: 1px; }
.hc-e { color: var(--hc-lime); font-weight: 600; }
.hc-p { color: var(--hc-pink); font-weight: 600; }
.hc-t { color: var(--hc-gold); font-weight: 600; }
.hc-marks { margin-top: auto; font-size: .78rem; display: flex; gap: 3px; }
.hc-ok { color: var(--hc-lime); font-weight: 700; } .hc-half { color: var(--hc-gold); font-weight: 700; }
.hc-day { position: relative; }
.hc-drop { position: absolute; top: 3px; right: 4px; font-size: .8rem; line-height: 1; pointer-events: none; display: flex; gap: 2px; align-items: center; }
.hc-dutch img { width: 15px; height: auto; display: block; }
.hc-nu.hc-lab img { width: 13px; }
.hc-legnu img.hc-legdutch { background: transparent; padding: 0; }
.hc-nu { background: #fff; border-radius: 4px; padding: 1px 2px; display: flex; }
.hc-nu img { width: 18px; height: auto; display: block; }
.hc-legnu { display: inline-flex; align-items: center; gap: 4px; }
.hc-legnu img { width: 18px; background: #fff; border-radius: 3px; padding: 1px; }
.hc-today { box-shadow: 0 0 0 2px var(--hc-night), 0 0 0 4px var(--hc-lime); }
.hc-sel { border-color: var(--hc-gold); border-width: 2.5px; }
.hc-day:focus-visible { outline: 3px solid var(--hc-gold); outline-offset: 2px; }
.hc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 6px 0; font-size: .82rem; color: var(--hc-mist); }
.hc-key-bleed { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: rgba(229, 66, 30, .5); border: 1px solid var(--hc-hib); vertical-align: -1px; margin-right: 5px; }
.hc-totals { margin: 10px 6px 0; font-size: .85rem; color: var(--hc-cream); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hc-totals b { color: var(--hc-lime); font-weight: 600; width: 100%; }

/* day panel (staff edit / patient detail) */
.hc-panel { background: var(--hc-bark, #0d140e); color: #f2efe4; border: 1.5px solid #24402a; border-radius: 18px; padding: 14px 16px; margin-top: 12px; }
.hc-panel h3 { margin: 0 0 8px; font-size: 1.05rem; color: #f2efe4; }
.hc-panel .hc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #24402a; font-size: 1rem; }
.hc-panel .hc-row:last-of-type { border-bottom: 0; }
.hc-step { display: inline-flex; align-items: center; gap: 6px; }
.hc-step button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #24402a; background: #000; color: #f2efe4; font-size: 1.2rem; cursor: pointer; }
.hc-step .hc-delta { min-width: 34px; text-align: center; color: #b3c0af; }
.hc-val { font-weight: 600; min-width: 80px; text-align: right; }
.hc-panel .hc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hc-panel .hc-btns button { border-radius: 999px; padding: 9px 16px; font: 500 .95rem 'Jost', system-ui, sans-serif; cursor: pointer; border: 1px solid #24402a; background: transparent; color: #f2efe4; }
.hc-panel .hc-btns .hc-save { background: #bfe63a; border-color: #bfe63a; color: #000; }
.hc-panel .small { color: #b3c0af; font-size: .85rem; }

.hc-compact, .hc-compact-note { display: none; }
@media (max-width: 480px) {
  .hc-full { display: none; }
  .hc-compact { display: block; font-size: .72rem; font-weight: 700; line-height: 1.3; letter-spacing: -.03em; }
  .hc-day > div.hc-compact { overflow: visible; }
  .hc-compact-note { display: inline; }
  .hc-cd { font-size: .62rem; }
  .hc { padding: 10px 2px; border-radius: 16px; margin: 0 -6px; }
  .hc-grid { gap: 2px; }
  .hc-day { min-height: 76px; font-size: .62rem; padding: 4px 1px; border-radius: 8px; }
  .hc-num { font-size: .9rem; }
  .hc-drop { top: 2px; right: 2px; font-size: .62rem; }
  .hc-nu img { width: 13px; }
  .hc-dutch img { width: 11px; }
  .hc-nu.hc-lab img { width: 10px; }
  .hc-dow { font-size: .6rem; }
}

.hc-nouterus { display: flex; align-items: center; justify-content: center; gap: 12px; background: #fff; color: #111; border-radius: 14px; padding: 8px 14px; margin: 0 4px 12px; font-weight: 600; }
.hc-nouterus img { width: 64px; height: auto; }

/* bleeding drops: faded = predicted window; full color = logged (count = amount, small = spotting) */
.hc-maybe { opacity: .38; filter: saturate(.6); font-style: normal; }
.hc-bl { font-style: normal; letter-spacing: -2px; white-space: nowrap; }
.hc-bl-spotting { font-size: .62em; }
.hc-legend .hc-bl, .hc-legend .hc-maybe { margin-right: 3px; }
@media (max-width: 480px) { .hc-drop .hc-bl { letter-spacing: -3px; font-size: .9em; } .hc-drop .hc-bl-spotting { font-size: .6em; } }

.hc-done { position: relative; }
.hc-done b { position: absolute; right: -4px; bottom: -5px; background: #bfe63a; color: #000; border-radius: 50%; font-size: 9px; line-height: 12px; width: 12px; height: 12px; text-align: center; font-weight: 800; }