/* ==========================================================================
   DateCalculator.aspx — Date Calculator re-skin (QEN-8704)
   ----------------------------------------------------------------------------
   Page renders DesktopModules/Q88/DateCalc.ascx inside <uc:ModuleTemplateV2>.
   Live structure (rendered DOM) at /DateCalculator.aspx?c=1:
     <table.modV2><tbody><tr><td>
       <div.modV2TitleContainer>
         <div.modV2Title>Date Calculator</div>
         <div.modV2TRight/> (empty)
       <div.modV2SubHeader>
         <center><table>"Calculate using:" + RBL table</table></center>
       <div.modV2Main>
         <table.sTbl> 4 rows: From/To Date+Time, Days/HrsMins (hidden), result
       <div.modPopFooter>
         <div><a.LinkButton.Secondary><ins> </ins>Clear</a> <a.LinkButton>Calculate</a></div>
     </td></tr></tbody></table>

   Scoped to body.page-datecalculator (set by Default.master.cs).
   Tokens come from Figma file oM4wJDLxiHlaKMCy6GvTXs, node 400:1237
   (see docs/figma/datecalculator/datecalculator-tokens.json):
     base/foreground      = var(--text-primary)
     base/muted-fg        = var(--text-muted)
     base/border / input  = var(--border-default)
     base/muted/secondary = var(--surface-muted)
     base/secondary-fg    = var(--accent-foreground)
     base/primary         = var(--brand-primary)
     base/primary-fg      = var(--text-on-brand)
   ========================================================================== */

/* ==========================================================================
   1. Page-level — replicate the .q88-card ContentPane release
   ----------------------------------------------------------------------------
   The DNN portal wraps every module in a `<table.ContentPane>` chain that
   shrink-wraps to its widest child and auto-centers via `margin: 0 auto`.
   That defeats fluid card gutters — the wrapping table sizes to the card's
   intrinsic width, leaving no horizontal breathing room.
   components.css releases the chain via `:has(.q88-card)`, but `.modV2`
   doesn't carry that class. Replicate the release here, scoped to this page,
   so the card's `margin: 24px 48px` gutters take effect.
   ========================================================================== */
body.page-datecalculator .q88-content .ContentPane,
body.page-datecalculator .q88-content .ContentPaneBody,
body.page-datecalculator .ContentPane .MainTableContent > td,
body.page-datecalculator .ContentPane > tbody > tr > td.ContentPaneBody {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.page-datecalculator .ContentPane,
body.page-datecalculator .ContentPaneBody,
body.page-datecalculator #ctl00_cphMiddle,
body.page-datecalculator #cphMiddle_ctl00_divWrap,
body.page-datecalculator .MainTableContent {
    background: transparent !important;
    background-color: transparent !important;
}

/* ==========================================================================
   2. Outer card chrome — apply directly to .modV2 wrapper
   ----------------------------------------------------------------------------
   Card root: bg white, border 1px var(--border-default), radius 12, shadow/sm.
   Padding: px-3.5 (14) horizontal, py-6 (24) vertical at the root.
   Sections inside use their own px-6 (24) inner padding.
   ========================================================================== */
/* MainWhiteout.css sets `.modV2 { display: table; padding: 0 10px; text-align:
   center; min-width: 975px }`. We need to defeat all four so the card behaves
   like a normal block: white-bg, bordered, rounded chrome with our padding.
   Margin matches the .q88-card default (24px 48px) so the page-1 ContentPane
   release above gives the card visible 48px L/R gutters from the content area. */
body.page-datecalculator .modV2 {
    display: block !important;
    text-align: left !important;
    min-width: 0 !important;
    background-color: var(--surface-raised) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 12px !important;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
    margin: 24px 48px !important; /* matches .q88-card gutter */
    width: auto !important; /* let margin define the inset; block fills parent minus margins */
    padding: 24px 14px !important; /* root card px-3.5 py-6 */
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* The inner table rendered by ModuleTemplateV2 — one row per section.
   Keep it full-width; cells are transparent so our card bg shows through. */
body.page-datecalculator .modV2 > table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    table-layout: auto !important;
}
body.page-datecalculator .modV2 > table > tbody > tr > td {
    padding: 0 !important;
    background: transparent !important;
    vertical-align: top !important;
    border: 0 !important;
}

/* Section-level inner padding: px-6 (24) horizontal on each section block. */
body.page-datecalculator .modV2TitleContainer,
body.page-datecalculator .modV2SubHeader,
body.page-datecalculator .modV2Main,
body.page-datecalculator .modPopFooter {
    padding: 0 24px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

/* Title → Tabs gap is 10px (Figma: inside the "header" section, gap-10).
   Tabs → Main and Main → Footer gaps are 14px (Figma: root gap-3.5 between
   sections). The V2 chrome puts each in its own <tr><td> — we add top spacing
   via padding-top on the wrapping td so it applies even though section divs
   themselves are inside a td. */
body.page-datecalculator .modV2 > table > tbody > tr:nth-child(2) > td {
    padding-top: 10px !important; /* title → tabs */
}
body.page-datecalculator .modV2 > table > tbody > tr:nth-child(3) > td {
    padding-top: 14px !important; /* tabs → main */
}
body.page-datecalculator .modV2 > table > tbody > tr:nth-child(4) > td {
    padding-top: 14px !important; /* main → footer */
}

/* ==========================================================================
   3. Title bar — "Date Calculator" 18/28 semibold
   ========================================================================== */
body.page-datecalculator .modV2Title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    height: auto !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    border: 0 !important;
}
body.page-datecalculator .modV2TRight {
    display: none !important;
}

/* ==========================================================================
   4. SubHeader — RadioButtonList → tab pill (CSS-only)
   ----------------------------------------------------------------------------
   Rendered: <center><table><tr><td>"Calculate using:"</td><td><RBL table></td></tr></table></center>
   Strategy: hide the "Calculate using:" cell + center wrapper, restyle the RBL
   table itself as a flex tab pill. Each <label> becomes a tab button; raw
   radio <input> is visually hidden but still clickable via the label.
   Active tab styling uses :has(input:checked) for CSS-only state tracking.
   AutoPostBack is preserved — the radio's onclick handler still fires.
   ========================================================================== */
body.page-datecalculator .modV2SubHeader > center {
    text-align: left !important;
    display: block !important;
}
body.page-datecalculator .modV2SubHeader > center > table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    width: auto !important;
}
body.page-datecalculator .modV2SubHeader > center > table > tbody > tr > td {
    padding: 0 !important;
    vertical-align: middle !important;
}
/* Hide "Calculate using:" label (first cell of outer subheader table) */
body.page-datecalculator .modV2SubHeader > center > table > tbody > tr > td:first-child {
    display: none !important;
}

/* The RBL table itself becomes the tab pill */
body.page-datecalculator [id$="_rblDateCalc"] {
    display: flex !important;
    background-color: var(--surface-muted) !important;
    height: 36px !important;
    width: 400px !important;
    max-width: 100% !important;
    padding: 3px !important;
    border-radius: 10px !important;
    border: 0 !important;
    box-sizing: border-box !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
body.page-datecalculator [id$="_rblDateCalc"] > tbody {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
}
body.page-datecalculator [id$="_rblDateCalc"] > tbody > tr {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
}
body.page-datecalculator [id$="_rblDateCalc"] > tbody > tr > td {
    flex: 1 1 0 !important;
    padding: 0 !important;
    display: flex !important;
    vertical-align: middle !important;
    background: transparent !important;
}

/* Hide raw radio inputs but keep clickable (label still triggers them) */
body.page-datecalculator [id$="_rblDateCalc"] input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Each label becomes a tab button */
body.page-datecalculator [id$="_rblDateCalc"] label {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    user-select: none !important;
    transition: background-color 0.12s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
body.page-datecalculator [id$="_rblDateCalc"] label:hover {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
/* Active tab — the <td> wrapping a checked radio gets active styling on its label */
body.page-datecalculator [id$="_rblDateCalc"] td:has(> input[type="radio"]:checked) label {
    background-color: var(--surface-raised) !important;
    box-shadow:
        0 1px 1.5px 0 rgba(0, 0, 0, 0.1),
        0 1px 1px -1px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   5. Main form area — sTbl rows → field grid
   ----------------------------------------------------------------------------
   The legacy table renders 4 rows (cellpadding=3, width=100%):
     trFromDate     — visible
     trDuration     — hidden by default (only visible when rbl=1)
     trToDate       — visible (hidden when rbl=1)
     trResult       — always visible, shows lblResult chip when populated

   Skin keeps the table layout but restyles each cell. Width override on
   inputs (txtFromDate has inline style="width:80px" — defeat with !important
   on the longhand width prop).
   ========================================================================== */
body.page-datecalculator .modV2Main {
    background-color: var(--surface-raised) !important;
}
body.page-datecalculator .modV2Main > .sTbl {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important; /* QEN-8831: full-width so the Duration band spans the card */
    margin: 0 !important;
}
body.page-datecalculator .modV2Main .sTbl > tbody > tr > td {
    padding: 0 !important;
    vertical-align: middle !important;
    border: 0 !important;
    background: transparent !important;
}
/* QEN-8831: keep the From/To/Duration inputs left-aligned at their natural widths
   by letting the 4th column (the right-hand Time / Hrs-Mins input cell) absorb the
   slack the 100%-wide table creates. Without this, table-layout:auto would spread
   the inputs across the full width. The result row has only 2 cells (label +
   colspan=3), so nth-child(4) never matches it and the band is unaffected. */
body.page-datecalculator .modV2Main .sTbl > tbody > tr > td:nth-child(4) {
    width: 100% !important;
}

/* Inter-row spacing (gap-11 / 11px between rows in Figma).
   Apply via padding-top on subsequent rows' cells. */
body.page-datecalculator .modV2Main .sTbl > tbody > tr + tr > td {
    padding-top: 11px !important;
}

/* Labels (legacy class="Label") → Figma: 14/20 medium var(--text-primary), left-aligned,
   self-stretch with 12px gap to input. */
body.page-datecalculator .modV2Main .sTbl td.Label {
    text-align: left !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    padding-right: 12px !important;
    width: auto !important;
    min-width: 70px !important;
    white-space: nowrap !important;
}

/* Cell that wraps an input — give some right-padding so adjacent column has
   breathing room. Figma column gap is 36px between fields, but our cells
   are interleaved label/input/label/input — so the cell after an input
   needs left-padding to match. */
body.page-datecalculator .modV2Main .sTbl td:has(> input.NormalTextBox) {
    padding-right: 36px !important;
}
body.page-datecalculator .modV2Main .sTbl td:has(> input.NormalTextBox):last-child {
    padding-right: 0 !important;
}

/* Inputs (NormalTextBox) — Figma input chrome: h-32 (32), border 1 var(--border-default),
   radius 8, padding 4v × 12h, 14/20 normal text var(--text-primary).
   Overriding inline width via !important — works because !important on a
   longhand property beats inline non-!important. */
body.page-datecalculator .modV2Main input.NormalTextBox,
body.page-datecalculator .modV2Main input[type="text"].NormalTextBox {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    height: 32px !important;
    padding: 4px 12px !important;
    background-color: var(--surface-raised) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
}
body.page-datecalculator .modV2Main input.NormalTextBox:focus,
body.page-datecalculator .modV2Main input[type="text"].NormalTextBox:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.12) !important;
}
body.page-datecalculator .modV2Main input.NormalTextBox::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Per-field input widths — Figma Field totals 300px or 298px;
   subtract label width + 12 gap to get the input portion. We give the inputs
   generous widths to match Figma feel; the table cellpadding=3 still adds
   tiny insets but cosmetically OK. */
body.page-datecalculator .modV2Main input.NormalTextBox[id$="_txtFromDate"],
body.page-datecalculator .modV2Main input.NormalTextBox[id$="_txtToDate"] {
    width: 218px !important;
    /* Calendar icon on the right (Figma: 16×16, stroke var(--text-primary), 12px from right edge).
       Painted via background-image so the legacy CalendarExtender focus-to-open
       behavior is unchanged. SVG is Lucide Calendar (matches Figma instance
       `Icon / 24px / Calendar`). Specificity (0,3,2) bumps the earlier
       `input.NormalTextBox` rule's `padding: 4px 12px`. */
    padding: 4px 36px 4px 12px !important; /* T R B L — extra right pad for icon */
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230f172a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
}
body.page-datecalculator .modV2Main [id$="_txtFromTime"],
body.page-datecalculator .modV2Main [id$="_txtToTime"],
body.page-datecalculator .modV2Main [id$="_txtDuration"] {
    width: 252px !important;
}
/* Days field (second tab, row 2 col 2) must align with From Date (row 1 col 2)
   to keep the visual grid intact. From Date is 218 because it reserves 36px
   on the right for the calendar icon — Days has no icon, but matching the
   visible width preserves column alignment. */
body.page-datecalculator .modV2Main [id$="_txtDays"] {
    width: 218px !important;
}

/* Validators (.Val) — keep them but style as small red error text */
body.page-datecalculator .modV2Main span[id*="Validator"],
body.page-datecalculator .modV2Main .Val {
    color: var(--red-600) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px !important;
    line-height: 16px !important;
}

/* ==========================================================================
   6. Result row — Duration band (slate-50 bg, square, full-width, h-44)
   ----------------------------------------------------------------------------
   Last row of .sTbl: `<td align="right"><b><span#lblSummary>Duration:</span></b></td>
                       <td colspan="3"><span#lblResult.highlight></span></td>`
   Figma node 400:1237 (FormArea 763:12124): a full-width muted band — square
   corners, slate-50 (--base/muted #f8fafc), with a 12px gap above it separating
   it from the inputs. Full-width comes from the .sTbl width:100% + col-4 slack
   rule in §5; the band's colspan=3 cell then stretches to the card content edge.
   When lblResult is empty (first render, before Calculate), hide the band.
   ========================================================================== */
/* QEN-8831: 12px gap between the form inputs and the Duration band. The band must
   NOT carry this gap as padding (its slate-50 bg would fill it), so the transparent
   space lives on the row that immediately precedes the band: trToDate in From/To
   mode, trDuration in Duration mode (the other is not rendered — asp Visible=false
   omits the <tr> entirely, so only the live preceding row picks up the padding). */
body.page-datecalculator .modV2Main .sTbl [id$="_trToDate"] > td,
body.page-datecalculator .modV2Main .sTbl [id$="_trDuration"] > td {
    padding-bottom: 12px !important;
}

body.page-datecalculator .modV2Main .sTbl > tbody > tr:has([id$="_lblSummary"]) > td {
    background-color: var(--card-subtle) !important; /* QEN-8831: slate-50 (#f8fafc) per Figma base/muted */
    height: 44px !important;
    padding: 12px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    border-radius: 0 !important; /* QEN-8831: Figma band is a square full-width bar (no radius) */
}
body.page-datecalculator .modV2Main .sTbl > tbody > tr:has([id$="_lblSummary"]) > td:first-child {
    padding-left: 0 !important; /* QEN-8831: align "Duration" flush-left with the From/To labels (x=content edge) */
    padding-right: 0 !important;
    text-align: left !important;
    width: auto !important;
    min-width: 60px !important;
}
body.page-datecalculator .modV2Main .sTbl > tbody > tr:has([id$="_lblSummary"]) > td + td {
    padding-top: 12px !important; /* override the +11 row gap rule */
    padding-left: 12px !important;
    text-align: left !important;
}

body.page-datecalculator [id$="_lblSummary"] {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}
/* The legacy <b> wraps lblSummary — neutralize bold so the inner span's
   weight (500) wins. */
body.page-datecalculator .modV2Main b:has(> [id$="_lblSummary"]) {
    font-weight: 500 !important;
}
body.page-datecalculator [id$="_lblResult"],
body.page-datecalculator [id$="_lblResult"].highlight {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Hide the Duration result row by default. ASP.NET <asp:Label ID="lblResult">
   with empty Text does NOT render the <span> at all — so we can't use
   :has([id$="_lblResult"]:empty). Instead, hide every row that contains
   lblSummary, and re-show only when lblResult span appears with content. */
body.page-datecalculator .modV2Main .sTbl > tbody > tr:has([id$="_lblSummary"]) {
    display: none !important;
}
body.page-datecalculator .modV2Main .sTbl > tbody > tr:has([id$="_lblResult"]) {
    display: table-row !important;
}

/* ==========================================================================
   7. Footer — buttons
   ----------------------------------------------------------------------------
   modPopFooter wraps a `<div style="padding:3px;">` containing two
   <asp:LinkButton>s with ImageManager icons. Figma footer has NO icons —
   plain text buttons. Restyle the LinkButtons + hide images + hide <ins>
   spacer LinkButton injects.
   ========================================================================== */
body.page-datecalculator .modPopFooter {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    border: 0 !important;
    background: transparent !important;
}
body.page-datecalculator .modPopFooter > div {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    /* `gap` doesn't work here because the markup is `<a>Clear</a>&nbsp;&nbsp;<a>Calculate</a>`
       — flex makes the &nbsp; text node an anonymous flex item, so gap would apply
       twice (Clear→text→Calc) and yield 2× the intended 14px. Use margin instead. */
    gap: 0 !important;
    font-size: 0;
}
/* 14px gap between adjacent footer buttons. */
body.page-datecalculator .modPopFooter > div > .LinkButton + .LinkButton {
    margin-left: 14px !important;
}
body.page-datecalculator .modPopFooter .LinkButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 0 !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background-color: var(--brand-primary) !important;
    color: var(--text-on-brand) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}
body.page-datecalculator .modPopFooter .LinkButton.Secondary {
    background-color: var(--surface-muted) !important;
    color: var(--accent-foreground) !important;
}
body.page-datecalculator .modPopFooter .LinkButton:hover,
body.page-datecalculator .modPopFooter .LinkButton:focus {
    filter: brightness(0.95);
    text-decoration: none !important;
}
/* Hide the <ins>&nbsp;</ins> spacer + the ImageManager icon (img/inputs).
   Figma footer buttons have no icons. */
body.page-datecalculator .modPopFooter .LinkButton > ins {
    display: none !important;
}
body.page-datecalculator .modPopFooter .LinkButton img,
body.page-datecalculator .modPopFooter .LinkButton input[type="image"] {
    display: none !important;
}

/* ==========================================================================
   8. Calendar popup — modernize AjaxControlToolkit CalendarExtender
   ----------------------------------------------------------------------------
   Legacy Main.css renders `.ajax__calendar_*` in Verdana 11px with `#c9e2fc`
   light-blue chrome and GIF arrow buttons. We replace all of that with the
   Phase 2 token language (Inter, teal accent, soft borders, rounded cells,
   SVG chevron arrows) scoped to body.page-datecalculator so other pages
   using CalendarExtender keep their legacy look until they opt in.

   Builds on the components.css `.q88-refresh .CalendarDisplay .ajax__calendar_*`
   pattern (5 rules covering container/header/hover/active/today) and extends
   it to override every legacy Main.css rule so the popup actually looks new.
   ========================================================================== */

/* Popup container — fixed width so the inner grid fits without overflow.
   Main.css legacy sets `.ajax__calendar_days/months/years { width: 170px }` and
   container width is determined by content. We override both: explicit
   container width 280, and inner panes flex to fill it. */
body.page-datecalculator .CalendarDisplay .ajax__calendar_container {
    background-color: var(--surface-raised) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 10px !important;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    padding: 12px !important;
    width: 280px !important;
    box-sizing: border-box !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    z-index: 9999 !important;
}

/* Container table — kill cell borders/padding from Main.css */
body.page-datecalculator .CalendarDisplay .ajax__calendar_container table {
    border-collapse: separate !important;
    border-spacing: 2px !important;
    font-size: 13px !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_container td {
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    background-color: transparent !important;
}

/* Header (month/year nav row) */
body.page-datecalculator .CalendarDisplay .ajax__calendar_header {
    background-color: transparent !important;
    height: auto !important;
    padding: 0 0 8px 0 !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--border-default) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_title:hover {
    background-color: var(--surface-muted) !important;
}

/* Prev/Next arrow buttons — replace GIF with SVG chevrons.
   DOM order is prev/next/title; use flex `order` to lay out as
   `prev | title | next` (the conventional date-picker arrangement). */
body.page-datecalculator .CalendarDisplay .ajax__calendar_prev,
body.page-datecalculator .CalendarDisplay .ajax__calendar_next {
    width: 28px !important;
    height: 28px !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    float: none !important;
    flex: 0 0 28px !important;
    transition: background-color 0.12s ease !important;
}
/* The CalendarExtender wraps prev/next/title in anonymous `<div>`s before
   adding them to `.ajax__calendar_header`. DOM order is: wrapper(prev),
   wrapper(next), wrapper(title). Use flex `order` on those wrappers to
   lay out as `prev | title | next`. */
body.page-datecalculator .CalendarDisplay .ajax__calendar_header > *:nth-child(1) {
    order: 1 !important;
    flex: 0 0 auto !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_header > *:nth-child(2) {
    order: 3 !important;
    flex: 0 0 auto !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_header > *:nth-child(3) {
    order: 2 !important;
    flex: 1 1 auto !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_prev:hover,
body.page-datecalculator .CalendarDisplay .ajax__calendar_next:hover {
    background-color: var(--surface-muted) !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_prev {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230f172a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E") !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_next {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230f172a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* Body grid — fills the container's content area (280 - 24 padding = 256) */
body.page-datecalculator .CalendarDisplay .ajax__calendar_body {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    position: relative !important;
    overflow: visible !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_days,
body.page-datecalculator .CalendarDisplay .ajax__calendar_months,
body.page-datecalculator .CalendarDisplay .ajax__calendar_years {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}
/* Inner table fills the pane so cells distribute evenly */
body.page-datecalculator .CalendarDisplay .ajax__calendar_days table,
body.page-datecalculator .CalendarDisplay .ajax__calendar_months table,
body.page-datecalculator .CalendarDisplay .ajax__calendar_years table {
    width: 100% !important;
    table-layout: fixed !important;
}

/* Day-name row */
body.page-datecalculator .CalendarDisplay .ajax__calendar_dayname {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 6px 0 !important;
    border: 0 !important;
    background-color: transparent !important;
}

/* Day / Month / Year cells — fixed-size square chips centered in each td.
   The chip is a flex centering box (32×32) so the visible click target,
   hover bg, today border, and active fill all paint the exact same shape.
   `border: 1px solid transparent` reserves the 1px for today's teal outline
   so adding the outline doesn't shift the digit. */
body.page-datecalculator .CalendarDisplay .ajax__calendar_day,
body.page-datecalculator .CalendarDisplay .ajax__calendar_month,
body.page-datecalculator .CalendarDisplay .ajax__calendar_year {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 2px auto !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--text-primary) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_day:hover,
body.page-datecalculator .CalendarDisplay .ajax__calendar_month:hover,
body.page-datecalculator .CalendarDisplay .ajax__calendar_year:hover {
    background-color: var(--surface-muted) !important;
}

/* Other-month days — dimmed */
body.page-datecalculator .CalendarDisplay .ajax__calendar_other {
    color: var(--text-tertiary) !important;
}

/* The CalendarExtender's `.ajax__calendar_today` appears in TWO places:
   - The "13" day cell in the grid (just `.ajax__calendar_today`)
   - The "Today: May 13, 2026" footer button (`.ajax__calendar_footer.ajax__calendar_today`
     — both classes on one element)
   We need two different looks: subtle outline on the in-grid cell,
   proper pill button for the footer. */

/* In-grid today is rendered as a `<td.ajax__calendar_today>` directly (no
   inner div) — different from `.ajax__calendar_day` which is a div inside
   a td. Apply the same 32×32 chip dims AND swap border color to teal. */
body.page-datecalculator .CalendarDisplay .ajax__calendar_today:not(.ajax__calendar_footer) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin: 2px auto !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--brand-primary) !important;
    background-color: transparent !important;
    border: 1px solid var(--brand-primary) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

/* Today on hover — keep the teal border + add the slate-100 hover fill */
body.page-datecalculator .CalendarDisplay .ajax__calendar_today:not(.ajax__calendar_footer):hover {
    background-color: var(--surface-muted) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

/* Selected / active day — filled teal, same 32×32 chip dims */
body.page-datecalculator .CalendarDisplay .ajax__calendar_active,
body.page-datecalculator .CalendarDisplay .ajax__calendar_active:hover {
    background-color: var(--brand-primary) !important;
    color: var(--text-on-brand) !important;
    font-weight: 500 !important;
    border-color: var(--brand-primary) !important;
}

/* "Today: ..." footer button — proper pill button, centered, teal accent.
   Reset every legacy Main.css declaration that conflicts (`border-top`,
   `background-color: #c9e2fc`, `height: 15px`). The element holds both
   `.ajax__calendar_footer` and `.ajax__calendar_today` classes. */
body.page-datecalculator .CalendarDisplay .ajax__calendar_footer.ajax__calendar_today,
body.page-datecalculator .CalendarDisplay .ajax__calendar_footer {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 8px 12px !important;
    margin: 8px 0 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--border-default) !important; /* hairline separator above */
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--brand-primary) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
    box-sizing: border-box !important;
}
body.page-datecalculator .CalendarDisplay .ajax__calendar_footer.ajax__calendar_today:hover,
body.page-datecalculator .CalendarDisplay .ajax__calendar_footer:hover {
    background-color: var(--surface-hover-brand) !important; /* teal-50 — subtle highlight on hover */
    color: var(--brand-primary-hover) !important;             /* teal-700 — darker on hover */
}