/* ============================================================================
   mh-datepicker.css  -  the shared MhDatePicker, landed EXACTLY from
   _handoff/Date Pickers.html. Light tokens on .dp; dark tokens reproduced under
   body.dark .dp (same design values, wired to the app theme). Bricolage Grotesque
   is scoped to the month/year title (.dp-title) per the design; everything else
   uses the app body font. Plain hyphens only.
   ============================================================================ */
.dp {
  position: relative;
  --dp-bg: #FFFFFF; --dp-fg: #2E2E2E; --dp-muted: #9a958c;
  --dp-accent: #5E7A83; --dp-accent-fg: #fff;
  --dp-teal-700: #496670;
  --dp-line: #D9DFE7;
  --dp-field-bg: #fff;
  --dp-ring: 0 0 0 4px rgba(125,147,155,.20);
  --dp-sel-shadow: 0 6px 14px rgba(73,102,112,.40);
  --dp-hover: rgba(125,147,155,.14);
  --dp-shadow: 0 24px 60px rgba(33,50,58,.18), 0 6px 16px rgba(33,50,58,.08);
}
/* dark variant (design's .dp.dark tokens, applied via the app's body.dark) */
body.dark .dp {
  --dp-bg: linear-gradient(168deg,#243740,#1A282E); --dp-fg: #E8EEF0; --dp-muted: #7C939B;
  --dp-accent: #9CC6CF; --dp-accent-fg: #13201F;
  --dp-teal-700: #9CC6CF;
  --dp-line: rgba(255,255,255,.12);
  --dp-field-bg: rgba(255,255,255,.05);
  --dp-ring: 0 0 0 4px rgba(156,198,207,.22);
  --dp-sel-shadow: 0 0 20px rgba(156,198,207,.45);
  --dp-hover: rgba(156,198,207,.16);
  --dp-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
}

.dp-field {
  display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px; cursor: pointer;
  background: var(--dp-field-bg); border: 1.5px solid var(--dp-line); border-radius: 14px; color: var(--dp-fg);
  transition: border-color .18s, box-shadow .18s; user-select: none;
}
.dp-field:hover { border-color: var(--dp-accent); }
.dp.open .dp-field { border-color: var(--dp-accent); box-shadow: var(--dp-ring); }
.dp-field .dpf-ico { width: 22px; height: 22px; color: var(--dp-accent); flex: 0 0 auto; }
.dp-field .dpf-ico svg { width: 100%; height: 100%; display: block; }
.dp-field .dpf-val { font-size: 17px; font-weight: 600; flex: 1; }
.dp-field .dpf-val.empty { color: var(--dp-muted); font-weight: 500; }
.dp-field .dpf-chev { width: 18px; height: 18px; color: var(--dp-muted); flex: 0 0 auto; transition: transform .2s; display: grid; place-items: center; }
/* svg must be a BLOCK filling the box - an inline svg baseline-aligns and sits a few px
   below the true vertical center (the "arrow not centered" bug). */
.dp-field .dpf-chev svg { width: 100%; height: 100%; display: block; }
.dp.open .dp-field .dpf-chev { transform: rotate(180deg); }

/* disabled whole field */
.dp.dp-disabled .dp-field { opacity: .5; pointer-events: none; }

.dp-pop {
  position: absolute; top: calc(100% + 9px); left: 0; width: 276px; max-width: 100%; z-index: 40;
  background: var(--dp-bg); border: 1.5px solid var(--dp-line); border-radius: 15px;
  box-shadow: var(--dp-shadow); padding: 12px 12px 9px; color: var(--dp-fg);
  transform-origin: top left;
  opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.dp.open .dp-pop { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dp.flip .dp-pop { top: auto; bottom: calc(100% + 9px); transform-origin: bottom left; transform: translateY(6px) scale(.97); }
.dp.flip.open .dp-pop { transform: translateY(0) scale(1); }

/* top bar */
.dp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 3px; }
.dp-nav { display: flex; gap: 2px; }
.dp-nav button {
  width: 26px; height: 26px; border-radius: 8px; background: transparent; border: none; cursor: pointer;
  display: grid; place-items: center; color: var(--dp-fg); transition: background .15s, color .15s, transform .08s;
}
.dp-nav button:hover { background: var(--dp-hover); color: var(--dp-accent); }
.dp-nav button:active { transform: scale(.88); }
.dp-nav svg { width: 14px; height: 14px; }

.dp-title { display: flex; align-items: center; gap: 3px; font-family: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; }
.dp-title span {
  cursor: pointer; padding: 5px 7px; border-radius: 8px; font-size: 14px; font-weight: 700;
  color: var(--dp-fg); letter-spacing: -.01em; transition: background .15s, color .15s; line-height: 1; white-space: nowrap;
}
.dp-title span:hover { background: var(--dp-hover); color: var(--dp-accent); }
.dp-title .t-year { font-weight: 600; color: var(--dp-teal-700); }

/* views */
.dp-body { position: relative; }

/* days */
.dp-dow { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 2px; }
.dp-dow span { text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--dp-accent); text-transform: uppercase; padding: 5px 0; }
.dp-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.dp-day {
  aspect-ratio: 1; display: grid; place-items: center; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--dp-fg); border-radius: 50%;
  transition: background .14s, color .14s; position: relative;
}
.dp-day:hover { background: var(--dp-hover); }
/* weekend (Sun = col 1, Sat = col 7) numbers in brand color */
.dp-days .dp-day:nth-child(7n+1):not(.adj):not(.sel):not(.muted),
.dp-days .dp-day:nth-child(7n):not(.adj):not(.sel):not(.muted) { color: var(--dp-accent); }
.dp-day.adj { color: var(--dp-muted); opacity: .45; cursor: default; pointer-events: none; }
.dp-day.muted { color: var(--dp-muted); opacity: .45; cursor: default; pointer-events: none; }
.dp-day.today { color: var(--dp-accent); font-weight: 800; }
.dp-day.today::after { content: ""; position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--dp-accent); }
.dp-day.sel { background: var(--dp-accent); color: var(--dp-accent-fg) !important; font-weight: 800; opacity: 1; box-shadow: var(--dp-sel-shadow); }
.dp-day.sel::after { background: var(--dp-accent-fg); }

/* months + years */
.dp-mg { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 4px 0; }
.dp-mc {
  height: 42px; border: none; background: transparent; cursor: pointer; border-radius: 11px;
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--dp-fg);
  transition: background .14s, color .14s, transform .1s;
}
.dp-mc:hover { background: var(--dp-hover); color: var(--dp-accent); }
.dp-mc.cur { color: var(--dp-accent); box-shadow: inset 0 0 0 2px var(--dp-accent); }
.dp-mc.sel { background: var(--dp-accent); color: var(--dp-accent-fg); box-shadow: var(--dp-sel-shadow); }
.dp-mc.muted { color: var(--dp-muted); opacity: .45; }

/* footer */
.dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--dp-line); }
.dp-foot button {
  background: none; border: none; cursor: pointer; font-family: inherit; font-size: 10px; font-weight: 700;
  color: var(--dp-accent); padding: 5px 8px; border-radius: 7px; transition: background .15s;
}
.dp-foot button:hover { background: var(--dp-hover); }
.dp-foot .clear { color: var(--dp-muted); }

@media (max-width:520px) {
  .dp-pop { width: 240px; }
}