/* ============================================================================ 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; } /* ============================================================================= THE MASKED INPUT IS THE FIELD'S OWN TEXT, NOT A FIELD OF ITS OWN. 3 September 2026 - the "double border" on Add a follow-up. `.dpf-mask` is an with NO type attribute, so the browser treats it as type=text - and mh-theme.css paints EVERY text input as a standalone control: .mh-app :is(input[type="text"], input[type="search"], ...) { background: var(--mh-ctrl-fill); border: ...; border-radius: ...; padding: ... } Dropped inside .dp-field - which already has its own background, 1.5px border and 14px radius - that is a box drawn inside a box. Measured on the follow-up sheet: the mask carried padding 12px 14px and radius 12px, identical to the shell around it. WHY IT LOOKED FINE EVERYWHERE ELSE. It did not - it was corrected FIVE separate times, once per host, in detail-view.css (#mhDetail), enroll-wizard.css (#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete), mh-clientwizard.css (#clWiz,#clMbr), mh-household.css (#hhDetail .hh-form) and mh-subsidy.css (.wzx). The case-note DETAIL renders under `.mh-app .cnx` rather than `#mhDetail`, so it matched none of them and was the SIXTH scope nobody had written yet. The control is used in 28 places across 15 files; every one of them was relying on its host to undo a global rule. So the reset belongs HERE, in the control's own stylesheet, where it is true by default and no host has to remember. The five host copies stay - they are the same declarations and simply restate this - and each may still tune the typography. !important, and every box property listed, because the global rule is more specific than `.dp-field .dpf-mask` and this must win wherever the control is dropped. ============================================================================= */ .dp-field .dpf-mask, .dp-field .dpf-mask:hover, .dp-field .dpf-mask:focus, .dp-field .dpf-mask:focus-visible { flex: 1; min-width: 0; width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; outline: none !important; text-align: left !important; cursor: text; user-select: text; } /* TYPOGRAPHY ON THE BASE SELECTOR ONLY - never on :hover / :focus. 3 Sep 2026: the first version of this block set font-size in the SAME rule as the hover and focus states. Hosts set their own size on the plain selector, so at rest the field showed 14px, and the moment the pointer touched it this rule won and the text jumped to 17px. `.mh-app .dp-field` sets `height:auto`, so the field grew with its text - 44px to 48px, shifting 2px as it went. That is what read as the field "zooming" on hover. `font: inherit` takes the field's own type, so a masked field and a plain one match, a host can still override it, and NOTHING changes between states. */ .dp-field .dpf-mask { font: inherit; font-variant-numeric: tabular-nums; } .dp-field .dpf-mask::placeholder { color: var(--dp-muted); } .dp-field .dpf-mask.partial { letter-spacing: .01em; } .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; } } /* ============================================================================= QUICKRANGE18 (21 September 2026) - THE "QUICK RANGES" RAIL, AND THE RANGE FIELD'S POPOVER. Owner: "deploy exactly our own date picker but with a little bit improvement - add the Quick Ranges there." And, on the designer's two-month mock: "design made it not good, he added 2 months there - you only add 1 month." So: OUR picker, one month, with his rail beside it. THE RAIL IS A SIBLING, NOT A WRAPPER. MhDatePicker renders `.dp-quick` as one more child of `.dp-pop`, alongside .dp-top / .dp-body / .dp-foot, and this rule turns the popover into a two-column grid ONLY when that child exists. A picker that passes no ranges - which is every date field in the app except the five ranges - renders and lays out exactly as it did before. ============================================================================= */ .dp-pop:has(.dp-quick){ width:auto; display:grid; grid-template-columns:132px 276px; grid-template-rows:auto 1fr auto; column-gap:12px; } .dp-pop:has(.dp-quick) > .dp-quick{grid-column:1;grid-row:1 / 4} .dp-pop:has(.dp-quick) > .dp-top{grid-column:2;grid-row:1} .dp-pop:has(.dp-quick) > .dp-body{grid-column:2;grid-row:2} .dp-pop:has(.dp-quick) > .dp-foot{grid-column:2;grid-row:3} .dp-quick{ display:flex;flex-direction:column;gap:2px; padding-right:12px;border-right:1px solid var(--dp-line); } .dpq-lbl{ font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--dp-muted);padding:2px 10px 7px; } .dp-quick button{ font:inherit;font-size:13px;font-weight:600; /* MudBlazor's base makes every button `display:flex; justify-content:center`, so `text-align` is inert here - the flex container decides, not the text. The labels were computing text-align:left and still rendering hard right. This is the known "MudBlazor centres buttons" trap; the fix is justify-content, every time. */ display:flex;justify-content:flex-start;align-items:center;text-align:left; padding:8px 10px;border:0;border-radius:9px;background:none;color:var(--dp-fg); cursor:pointer;transition:background .13s ease,color .13s ease; } .dp-quick button:hover{background:var(--dp-hover)} /* the range currently in force reads as chosen, the same way a selected day does */ .dp-quick button.on{background:var(--dp-hover);color:var(--dp-teal-700);font-weight:800} /* ============================================================================= THE RANGE FIELD'S POPOVER MUST NOT BE CAPPED BY ITS HALF. `.dp-pop` carries `max-width:100%`, and its containing block is `.dp` (position:relative). In a normal form that is the whole field, so 100% is generous. Inside the joined range (RANGEKIT18) each `.dp` was given `flex:1`, which makes it about 130px wide - so the calendar was being squashed to 130px. THAT is the cramped calendar in his screenshot, and it was my doing: the popover had been fine until the halves were made flexible. ============================================================================= */ .mh-app .ad-daterange .dp .dp-pop{max-width:none} /* the To half sits at the right of a ~340px shell, so its popover would hang off the edge - it opens leftwards instead, anchored to the shell's right rather than the half's left */ .mh-app .ad-daterange .dp:last-of-type .dp-pop{left:auto;right:0;transform-origin:top right} .mh-app .ad-daterange .dp:last-of-type.flip .dp-pop{transform-origin:bottom right} /* ============================================================================= THE TYPED HALF. The range now uses the app's MASKED date entry (MM/DD/YYYY), which is the date-typing standard - it was always available on MhDatePicker and the filters had simply never opted in. Inside the joined shell the input has to look like text in a field, not like a field inside a field: no box of its own, centred on its half, and tabular figures so the two ends line up with each other. ============================================================================= */ .mh-app .ad-daterange .dp-field .dpf-mask{ flex:1;min-width:0;width:100%; text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap; background:none;border:0;box-shadow:none;padding:0; } /* VOLBUILD01d (2 Oct 2026) - AN OPEN CALENDAR IS ON TOP OF EVERYTHING AROUND IT. Owner's screenshot, New Term > Start Date: the "Choose days per week" buttons and the time tiles painted OVER the calendar. The calendar is position:fixed, but it still paints inside its tile's stacking order - and the tiles after it (later in the page, the chosen day buttons lifted on their own layers) won. While a calendar is open, the tile, its group and its section are raised above their neighbours; nothing else changes and it all drops back when the calendar closes. */ :is(.mint-w, .field, .icf, .sw-cell, .fgrid, .mint-grid, .ecs-sec, .fsec, .pd-card):has(.dp.open){position:relative;z-index:131}