/* ========================================================================== Scheduled Reports page — page-specific overrides layered on top of grid.css ---------------------------------------------------------------------------- Scoped via `body.page-scheduledreports`. Shared chrome (card, filters, search, grid, pager, +Add CTA pill) comes from grid.css via the additional `body.page-grid` class. This file holds the page-specific overrides: 1. Hide the stray FleetVessel / GridViewSelector wrappers — markup sets inline `style="display:none"` on them, but a refresh-era !important rule on `.modV2TitleContainer > *` unhides them. Force them back off. 2. Flatten the inner title `` chain to `display: contents` so its
s become direct flex children of `.modV2TitleContainer`. The `#tdAdmin` cell (Company combo + Go) then sits as a flex sibling of `#pnlTitleRight` and can be pushed to the right just before the CTA cluster via `margin-left: auto`. 3. Re-skin the admin "Go" LinkButton as a teal pill matching the +Add CTA so the title-bar elements are all aligned at 32-36px height. 4. CTA label (carries over from initial scaffold). trSubHdrNotice (the red admin notice row) is intentionally excluded from the flatten so it preserves table-row layout when it becomes visible. ========================================================================== */ /* §1 — Force-hide the FleetVessel and GridViewSelector wrappers. The markup sets inline display:none; refresh CSS overrides it with !important on `.modV2TitleContainer > *`. Hide page-scoped to stay narrow. */ body.page-scheduledreports .modV2TRight-FleetVessel, body.page-scheduledreports [id$="_GridViewSelectorControls"] > tbody > tr > td:has(> div[style*="display:none"]), body.page-scheduledreports [id$="_GridViewSelectorControls"] > tbody > tr > td:has(> div.modV2TRight-FleetVessel) { display: none !important; } /* §2 — Flatten the title-row table so its s become direct flex children of `.modV2TitleContainer`. Excludes trSubHdrNotice so the admin alert row keeps table-row layout when shown. */ body.page-scheduledreports [id$="_GridViewSelectorControls"], body.page-scheduledreports [id$="_GridViewSelectorControls"] > tbody, body.page-scheduledreports [id$="_GridViewSelectorControls"] > tbody > tr:not(.SubHeaderAdmin) { display: contents; } /* §3 — Title container flex alignment: title left, admin cluster + actions right, all vertically centered, 12px gap between flex children. */ body.page-scheduledreports .modV2TitleContainer { align-items: center; gap: 12px; } /* Title text claims the spare horizontal space, pushing everything else right. */ body.page-scheduledreports .modV2Title { margin-right: auto; } /* §4 — Admin cluster (Company label + combo + Go). Renders flex-aligned right next to the CTA pill. */ body.page-scheduledreports [id$="_tdAdmin"] { display: inline-flex; align-items: center; gap: 8px; padding: 0 !important; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; color: rgb(71, 85, 105); /* slate-600 — matches form label convention */ } /* §5 — Re-skin the admin "Go" LinkButton as a small teal pill matching the +Add CTA height (32px, slightly smaller than the 36px CTA but harmonised). `!important` is required on bg/color/padding because MainWhiteout.css's `.LinkButton` rule uses `!important` (legacy navy CTA convention). Font declared longhand to avoid the shorthand+!important parser trap that silently drops sibling declarations. */ body.page-scheduledreports a[id$="_btnGo"].LinkButton { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; height: 32px; padding: 0 16px !important; background-color: var(--primary) !important; /* teal-600 — matches grid.css §5 CTA */ color: #ffffff !important; border-width: 0.8px; border-style: solid; border-color: var(--primary); border-radius: 8px; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 500 !important; /* MainWhiteout.css `.LinkButton` has `font-weight: bold !important` */ line-height: 20px; text-decoration: none; box-shadow: 0 1px 2px 0 rgba(var(--primary-tint), 0.25); cursor: pointer; } body.page-scheduledreports a[id$="_btnGo"].LinkButton:hover { background-color: var(--button-primary-hover) !important; /* teal-700 */ border-color: var(--button-primary-hover); color: #ffffff !important; } body.page-scheduledreports a[id$="_btnGo"].LinkButton:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Kill the LinkButton ` ` spacer trap — invisible in legacy block layout, but in `display: inline-flex` + `gap` it becomes a flex item and shifts "Go" off-centre. */ body.page-scheduledreports a[id$="_btnGo"].LinkButton > ins { display: none; } /* §6 — Company combobox: ensure it matches the 32px-height baseline established by select-shim/components.css for `body.sidebar-nav select`, then constrain max-width so it doesn't dominate the row. */ body.page-scheduledreports [id$="_tdAdmin"] select, body.page-scheduledreports [id$="_tdAdmin"] [id$="_cbxCompany"] { max-width: 280px; height: 32px; } /* §7 — CTA label (carry-over from initial scaffold). */ body.page-scheduledreports a[id$='_lnkAddSchedule']::before { content: 'New Schedule'; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* ========================================================================== §8 — ScheduleDetailModal popups ("Create Report Schedule" + "Report Schedule") -------------------------------------------------------------------------- Two popups wrapped in ajaxToolkit:ModalPopupExtender (pnlSelectDatasource, pnlScheduleDetail). They do NOT use Modal.ascx, so the global components.css §9.10 `.modPopPnl` chrome never reaches them (that block only re-skins — see its own comment at components.css ~L2161). Replicate the §9.10 dialog chrome here, mapped onto the ModuleTemplate class names: .modContainerStd / .modInnerContainer / .modTitle (.modTLeft/.modTRight) / .modMain / .modFooter2. Scope: `.modContainerStd` is the only ModuleTemplate carrier on this page (the grid is ModuleTemplateV2 → .modV2*; the sibling warning dialogs are → .modPopPnl). Hardcoded hex (not var()) on border/background/button colours: these fight legacy MainWhiteout `!important` shorthands, and per MEMORY [css-var-cascade-loss-vs-shorthand] + [css-shorthand-var-important-parser-trap] a var() inside a shorthand+!important either drops the next declaration or loses the cascade. Literal hex sidesteps both; values mirror the §9.10 resolved tokens (slate-200 #e2e8f0, text #0f172a, teal #0d9488 / #0f766e). Legacy chrome overridden: .modInnerContainer navy #003366 border; .modTitle navy #2D3663 ribbon; .modMain slate-50 bg; .modFooter2 #ddd band. ========================================================================== */ /* §8.1 — Release the transparent table/cell wrappers; the painted card is .modInnerContainer. */ body.page-scheduledreports .modContainerStd, body.page-scheduledreports .modContainerStd > tbody > tr > td { width: auto !important; background: transparent !important; border: 0 !important; padding: 0 !important; } /* §8.2 — Outer card: white surface, slate-200 border, 12px radius, soft shadow, Inter. min-width keeps the 18px title + close X on one line; the wider detail popup (#scheduleDetailModalContent ~463px) drives its own. */ body.page-scheduledreports .modContainerStd .modInnerContainer { box-sizing: border-box; min-width: 340px; background: #ffffff !important; border: 1px solid var(--border-default) !important; border-radius: 12px !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; overflow: hidden; padding: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); } /* The three sections are legacy content-box at width:100% — their 16px side padding then overflows the card by 32px and overflow:hidden clips the right-seated close X. Force border-box so padding stays inside the card. */ body.page-scheduledreports .modContainerStd .modTitle, body.page-scheduledreports .modContainerStd .modMain, body.page-scheduledreports .modContainerStd .modFooter2 { box-sizing: border-box !important; width: 100% !important; } /* Collapse the empty ModuleTemplate header/sub panels between title and body (modTitleHeader ×2 + modSub1) so they add no gap. */ body.page-scheduledreports .modContainerStd .modTitleHeader:empty, body.page-scheduledreports .modContainerStd .modSub1:empty { display: none !important; } /* §8.3 — Header: strip the navy ribbon, flex row (title left, close X right), 16/16/12 padding cadence. */ body.page-scheduledreports .modContainerStd .modTitle { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; background: transparent !important; border: 0 !important; padding: 16px 16px 12px 16px !important; height: auto !important; } /* §8.4 — Title text. */ body.page-scheduledreports .modContainerStd .modTLeft { flex: 1 1 auto; min-width: 0; background: transparent !important; color: var(--text-primary) !important; font-size: 18px !important; line-height: 28px !important; font-weight: 600 !important; padding: 0 !important; text-align: left; } /* §8.5 — Close X: paint a Lucide X via currentColor mask on the (otherwise empty) TitleRight anchor; ImageManager emits no glyph on Q88 portals, so the markup adds a working onclick (mpeSelectDatasource) / id="lnkClose" binding (mpeScheduleDetail). */ body.page-scheduledreports .modContainerStd .modTRight { flex: 0 0 auto; width: auto !important; background: transparent !important; padding: 0 !important; } body.page-scheduledreports .modContainerStd .modTRight a { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--text-primary); background: transparent; border-radius: 4px; text-decoration: none; cursor: pointer; } body.page-scheduledreports .modContainerStd .modTRight a img { display: none !important; } body.page-scheduledreports .modContainerStd .modTRight a::before { content: ""; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px; mask: url("data:image/svg+xml;utf8,") no-repeat center / 16px; } body.page-scheduledreports .modContainerStd .modTRight a:hover { color: var(--text-muted); background: var(--surface-muted); } /* §8.6 — Body: drop the slate-50 fill, 16px side gutter (header already pads 12 below). */ body.page-scheduledreports .modContainerStd .modMain { background: transparent !important; border: 0 !important; padding: 0 16px !important; color: var(--text-primary); font-size: 14px; line-height: 20px; } /* Select-datasource popup: the module/report selects carry inline width:250px — release to fill the card. Scoped to their static ids so the detail popup's narrow inline selects (130px) are untouched. */ body.page-scheduledreports .modContainerStd #ddlDatasource, body.page-scheduledreports .modContainerStd #ddlReportList { width: 100% !important; box-sizing: border-box; } body.page-scheduledreports .modContainerStd #tblSelectDatasource, body.page-scheduledreports .modContainerStd #tblSelectDatasource > tbody, body.page-scheduledreports .modContainerStd #tblSelectDatasource td { width: 100% !important; padding: 0 !important; } /* Detail popup body: neutralise the legacy inner #cccccc box border + 5px margin around #scheduleDetailModalContent so the card edge is the only frame. Its inner tblScheduleDetail keeps its own 463px intrinsic width. */ body.page-scheduledreports .modContainerStd #scheduleDetailModalContent { border: 0 !important; margin: 0 !important; width: auto !important; } /* §8.7 — Footer: strip the gray band, flex-end pill cluster, 12px gap, 12px above + 16px below. Flatten the detail popup's nested footer wrappers so its three LinkButtons become direct flex items. */ body.page-scheduledreports .modContainerStd .modFooter2 { background: transparent !important; border: 0 !important; padding: 12px 16px 16px 16px !important; display: flex !important; justify-content: flex-end; align-items: center; gap: 12px; text-align: right; } body.page-scheduledreports .modContainerStd .modFooter2 #scheduleDetailModalFooter, body.page-scheduledreports .modContainerStd .modFooter2 #btnContainer { display: contents; } /* §8.8 — Footer buttons → §9.10 dialog pills: primary teal, secondary neutral ghost, 36h / 8px radius / 14px-500. !important beats MainWhiteout .LinkButton. Drop the inline `position:relative; left:2px` on Okay; hide any . */ body.page-scheduledreports .modContainerStd .modFooter2 a.LinkButton { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; height: 36px; min-width: 64px; padding: 0 16px !important; border-radius: 8px !important; background: var(--primary) !important; color: #ffffff !important; border: 1px solid var(--primary) !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; position: static !important; cursor: pointer; } body.page-scheduledreports .modContainerStd .modFooter2 a.LinkButton:hover { background: var(--button-primary-hover) !important; border-color: var(--button-primary-hover) !important; color: #ffffff !important; } body.page-scheduledreports .modContainerStd .modFooter2 a.LinkButton.Secondary { background: #ffffff !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; } body.page-scheduledreports .modContainerStd .modFooter2 a.LinkButton.Secondary:hover { background: var(--surface-muted) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; } body.page-scheduledreports .modContainerStd .modFooter2 a.LinkButton > ins { display: none !important; } /* Detail popup footer has Cancel (ghost) + Delete + Save. Delete is a destructive action — make it a red pill per DESIGN.md §16.7 so it reads distinct from the teal primary Save instead of two identical teal buttons. */ body.page-scheduledreports .modContainerStd .modFooter2 a#lnkDelete.LinkButton { background: var(--red-600) !important; border-color: var(--red-600) !important; color: #ffffff !important; } body.page-scheduledreports .modContainerStd .modFooter2 a#lnkDelete.LinkButton:hover { background: #b91c1c !important; border-color: #b91c1c !important; color: #ffffff !important; } /* ========================================================================== §8.9 — Detail popup ("Report Schedule") FORM BODY -------------------------------------------------------------------------- Body is built by ScheduleDetailModal.ascx JS into #scheduleDetailModalContent > #tblScheduleDetail (2-col label/value table). §9.10 chrome (§8.1–§8.8) only covers the dialog shell; the form rows render legacy: 12px labels, zero row spacing, 130px selects, an un-skinned 2px time input. Apply DESIGN.md form conventions (§16.8 inputs + slate-600/500 labels). Scoped to #scheduleDetailModalContent so the select-datasource popup body is untouched. ========================================================================== */ /* Drop the legacy 5px content margin/padding; let the modMain gutter frame it. */ body.page-scheduledreports #scheduleDetailModalContent { margin: 0 !important; padding: 0 !important; } /* Row rhythm: 12px vertical gap between rows (border-spacing needs separate). Keep a comfortable fixed width so the card stays roomy (the JS sets 463px inline; pin it here so dropdowns at value-column width read genuinely wide). */ body.page-scheduledreports #tblScheduleDetail { border-collapse: separate !important; border-spacing: 0 12px !important; margin-top: 0 !important; width: 460px !important; } body.page-scheduledreports #tblScheduleDetail > tbody > tr > td { vertical-align: middle; padding: 0 !important; } /* Label column: fixed width, right gap to the value, slate-600/500 Inter 14. */ body.page-scheduledreports #tblScheduleDetail > tbody > tr > td:first-child { width: 100px; padding-right: 12px !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; color: var(--text-muted) !important; white-space: nowrap; } body.page-scheduledreports #tblScheduleDetail > tbody > tr > td:first-child span, body.page-scheduledreports #tblScheduleDetail > tbody > tr > td:first-child > div { font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; color: var(--text-muted) !important; padding-left: 0 !important; min-width: 0 !important; } /* Value column: Inter 14 slate-900. */ body.page-scheduledreports #tblScheduleDetail > tbody > tr > td:last-child { font-size: 14px !important; line-height: 20px !important; color: var(--text-primary) !important; } /* Recipients + Days-of-Week rows hold tall controls — top-align the label. */ body.page-scheduledreports #tblScheduleDetail > tbody > tr:has(.tagsinput) > td, body.page-scheduledreports #tblScheduleDetail > tbody > tr:has(textarea) > td, body.page-scheduledreports #tblScheduleDetail #trWeeklyFrequencyMarkup > td { vertical-align: top; padding-top: 6px !important; } /* Dropdowns: widen to fill the value column (was 130px inline). Already select-shim styled (8px radius / slate border); lift to 36px refresh height. */ body.page-scheduledreports #tblScheduleDetail select#ddlFleet, body.page-scheduledreports #tblScheduleDetail select#ddlFrequency, body.page-scheduledreports #tblScheduleDetail select#ddlDayOfMonth { width: 100% !important; height: 36px !important; box-sizing: border-box; } /* "When" time input → §16.8 refresh input (was 2px #767676 / radius 0 / 21h). */ body.page-scheduledreports #tblScheduleDetail input#txtTimeToRun { width: 140px !important; height: 36px !important; box-sizing: border-box; background: #ffffff !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; padding: 0 12px !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; font-weight: 400 !important; color: var(--text-primary) !important; } body.page-scheduledreports #tblScheduleDetail input#txtTimeToRun:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary) !important; } /* "UTC" suffix next to the time field. */ body.page-scheduledreports #tblScheduleDetail input#txtTimeToRun + span { font-size: 12px !important; color: var(--text-muted) !important; margin-left: 8px; } /* Recipients tag input → round corners + 14px text; teal tag chips. */ body.page-scheduledreports #scheduleDetailModalContent .tagsinput { border: 1px solid var(--border-default) !important; border-radius: 8px !important; box-sizing: border-box; padding: 6px !important; } body.page-scheduledreports #scheduleDetailModalContent .tagsinput input { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; color: var(--text-primary) !important; } body.page-scheduledreports #scheduleDetailModalContent .tagsinput .tag { background: var(--primary) !important; border: 0 !important; border-radius: 6px !important; color: #ffffff !important; font-size: 13px !important; padding: 2px 6px !important; } body.page-scheduledreports #scheduleDetailModalContent .tagsinput .tag a, body.page-scheduledreports #scheduleDetailModalContent .tagsinput .tag span { color: #ffffff !important; } /* "Send as" radios + weekly checkboxes: teal accent + spacing between the two inline options (labels are bare text nodes, so space via the second input). */ body.page-scheduledreports #tblScheduleDetail input[type="radio"], body.page-scheduledreports #tblScheduleDetail input[type="checkbox"] { accent-color: var(--primary); vertical-align: middle; margin: 0 6px 0 0; } body.page-scheduledreports #tblScheduleDetail input#inputReportHtmlText { margin-left: 18px; } body.page-scheduledreports #tblScheduleDetail #divWeeklyOptions label { margin-right: 10px; color: var(--text-primary); } /* §8.10 — "Send as:" help affordance. The legacy Img-Std-Help sprite is now swapped to the tokenised Lucide CircleHelp glyph GLOBALLY in components.css (Help/info global swap → var(--icon-circle-help), slate-500). Keep only the page-specific layout: a small left gap from the "Send as:" label. */ body.page-scheduledreports #tblScheduleDetail img.Img-Std-Help { margin-left: 4px !important; }