/* Shared date picker (desktop only). Replaces the browser's built-in calendar popup, whose month arrows point the wrong way for us (native: ↑ = next month). Here ↓ always moves FORWARD in time and ↑ BACKWARD, for both months and years. Touch devices never load this widget — they keep the OS picker. */ .mzdp { position: relative; display: inline-flex; align-items: stretch; vertical-align: middle; } .mzdp > input.mzdp-field { flex: 1 1 auto; min-width: 8.6em; width: 100%; padding-inline-end: 30px; } /* the calendar button sits on the field's end edge (left side in RTL) */ .mzdp > .mzdp-open { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 2px 4px; cursor: pointer; font-size: 15px; line-height: 1; opacity: .65; } .mzdp > .mzdp-open:hover { opacity: 1; } .mzdp > input.mzdp-field:disabled ~ .mzdp-open { display: none; } /* top/left start at 0 so the popup never lands in the page flow (at the very bottom of ) between being created and being positioned — that would briefly grow the page and shift the field we are measuring against */ .mzdp-pop { position: absolute; display: none; top: 0; left: 0; z-index: 9999; width: 258px; background: #fff; color: #1f2430; border: 1px solid #d5dae1; border-radius: 10px; box-shadow: 0 8px 26px rgba(15, 23, 42, .18); padding: 8px; font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; user-select: none; } .mzdp-pop * { box-sizing: border-box; } .mzdp-pop button { font-family: inherit; } /* the grids set display:grid, which would beat the [hidden] attribute */ .mzdp-pop [hidden] { display: none !important; } .mzdp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .mzdp-title { flex: 1 1 auto; text-align: start; background: none; border: 0; font-size: 14px; font-weight: 700; color: inherit; padding: 5px 6px; border-radius: 6px; cursor: pointer; } .mzdp-title:hover { background: #eef2f7; } .mzdp-title .caret { font-size: 10px; opacity: .6; margin-inline-start: 4px; } /* the arrow pair keeps a fixed ↑ ↓ order in RTL and LTR alike */ .mzdp-arrows { display: flex; direction: ltr; gap: 2px; } .mzdp-nav { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: #334155; font-size: 15px; line-height: 1; cursor: pointer; } .mzdp-nav:hover { background: #eef2f7; } .mzdp-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; } .mzdp-dow span { text-align: center; font-size: 11px; color: #6b7280; padding: 3px 0; } .mzdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .mzdp-day { height: 30px; border: 0; border-radius: 6px; background: none; color: #1f2430; font-size: 13px; cursor: pointer; padding: 0; } .mzdp-day:hover:not(:disabled) { background: #e8eef7; } .mzdp-day.out { color: #b6bcc6; } .mzdp-day.today { box-shadow: inset 0 0 0 1px #1565c0; font-weight: 700; } .mzdp-day.sel { background: #1565c0; color: #fff; font-weight: 700; } .mzdp-day.sel:hover { background: #0d47a1; } .mzdp-day:disabled { color: #cfd4da; cursor: default; } .mzdp-day.focus:not(.sel) { background: #dbe6f3; } .mzdp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .mzdp-month { height: 38px; border: 0; border-radius: 6px; background: #f4f5f7; color: #1f2430; font-size: 13px; cursor: pointer; } .mzdp-month:hover { background: #e8eef7; } .mzdp-month.sel { background: #1565c0; color: #fff; font-weight: 700; } /* year page: 20 years, decade-aligned (1970-1989 ...); ↑/↓ jump 20 years */ .mzdp-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; direction: ltr; } .mzdp-year { height: 32px; border: 0; border-radius: 6px; background: #f4f5f7; color: #1f2430; font-size: 13px; cursor: pointer; } .mzdp-year:hover { background: #e8eef7; } .mzdp-year.cur { box-shadow: inset 0 0 0 1px #1565c0; font-weight: 700; } .mzdp-year.sel { background: #1565c0; color: #fff; font-weight: 700; } .mzdp-foot { display: flex; gap: 6px; margin-top: 7px; padding-top: 6px; border-top: 1px solid #eceff3; } .mzdp-foot button { flex: 1 1 0; border: 0; border-radius: 6px; background: #f4f5f7; color: #1565c0; font-size: 12.5px; padding: 6px 0; cursor: pointer; } .mzdp-foot button:hover { background: #e8eef7; } @media (prefers-reduced-motion: no-preference) { .mzdp-pop { animation: mzdp-in .09s ease-out; } @keyframes mzdp-in { from { opacity: 0; transform: translateY(-3px); } } }