/* ========================================================================== manageEmailPackage.aspx — Manage Email Packages re-skin ---------------------------------------------------------------------------- Live page renders DesktopModules/Q88/ManageEmailPackage.ascx inside . Two panels: • pnlPackages (default visible) — list mode. asp:DataGrid renders one row per package; each row contains a Label (package name), an ImageButton (edit pencil), and an inner asp:DataList of attachments rendered as a with one
per attachment. • pnlShowPackageDocuments (hidden) — edit mode. asp:TextBox + 3 LinkButtons (Cancel / Delete / Save) + DropDownList (Show package for) + dxx:ASPxGridView (gridPackagesDocuments) with 1 select- checkbox column + 3 data columns. Scoped to body.page-manage-email-package (set by Default.master.cs on /manageEmailPackage.aspx). Card chrome is applied directly to the .modV2 wrapper. Tokens come from Figma file oM4wJDLxiHlaKMCy6GvTXs, nodes 220:4707 (list) and 247:7439 (edit) via get_variable_defs: base/foreground = var(--text-primary) base/muted-fg = var(--text-muted) base/border = var(--border-default) base/muted = var(--surface-muted) (chip + badge bg) base/secondary = var(--surface-muted) (badge bg) base/secondary-fg = var(--accent-foreground) (badge text) base/primary = var(--brand-primary) (New Package teal) base/primary-fg = var(--text-on-brand) Patterns inherited from email-compose.css + fleet-management.css. ========================================================================== */ /* ========================================================================== 1. Page-level — kill DNN/ContentPane caps so the card fills the area ========================================================================== */ body.page-manage-email-package .ContentPane, body.page-manage-email-package .ContentPaneBody, body.page-manage-email-package #ctl00_cphMiddle, body.page-manage-email-package #cphMiddle_ctl00_divWrap, body.page-manage-email-package .MainTableContent { background: transparent !important; background-color: transparent !important; } body.page-manage-email-package .q88-content { position: relative; isolation: isolate; } /* ========================================================================== 2. Outer card chrome — wrap the whole ModuleTemplateV2 module ---------------------------------------------------------------------------- The user asked: "the center element should have q88-card so it has proper margins and paddings." The Phase 2 `.q88-card` rule in components.css provides the canonical surface (white bg, 1px slate-200 border, 8px radius, shadow-xs, 24/48 fluid margins) plus an auto chain release via `:has(.q88-card)`. The legacy ModuleTemplateV2 wrapper renders as `` with no `q88-card` class; rather than touch markup/code-behind we replicate the same chrome + release on `.modV2` scoped to this page. Figma 220:4707 (list) and 247:7439 (edit) both render the page as a single white card with 24px content inset; the inner ModuleTemplateV2 chrome carries its own row-by-row padding so card padding stays 0 here. ========================================================================== */ /* Chain release — DNN wraps every module in + nested ContentPaneBody/MainTableContent which shrink-wrap to their widest child. The `.q88-card` rule in components.css fires release via `:has(.q88-card)`; we replicate for `.modV2` on this page. */ body.page-manage-email-package .q88-content .ContentPane:has([id$='_modMain_pnlMod'].modV2), body.page-manage-email-package .q88-content .ContentPaneBody:has([id$='_modMain_pnlMod'].modV2), body.page-manage-email-package .ContentPane:has([id$='_modMain_pnlMod'].modV2) .MainTableContent > td, body.page-manage-email-package .ContentPane > tbody > tr > td.ContentPaneBody:has([id$='_modMain_pnlMod'].modV2) { width: 100% !important; max-width: none !important; margin: 0 !important; } /* Card chrome — values mirror `.q88-card` in components.css (line 1258). Kept page-scoped so legacy pages still rendering through ModuleTemplateV2 are unaffected. `width` is explicit (not `auto`) because the modV2 sits inside `` (a table-cell). `width: auto` inside a cell stretches to fill the cell and ignores margin in width computation — resulting in margin-right overflow. The `calc(100% - 96px)` keeps the card inside the cell while preserving the 48px left/right gutters. */ body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); margin: 24px auto; width: calc(100% - 96px); padding: 0 !important; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); overflow: hidden; /* clip rounded corners against inner DataGrid edges */ } /* The inner ModuleTemplateV2 chrome ships its own
with width=100% and inline cellpadding/cellspacing. Force layout neutralisation so the card paints clean. */ body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 > table, body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 > table > tbody, body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 > table > tbody > tr { width: 100%; border: 0; border-collapse: separate; border-spacing: 0; background: transparent; } body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 > table > tbody > tr > td { padding: 0; border: 0; background: transparent; vertical-align: top; } /* ========================================================================== 3. Title bar — flex row "Packages" (left) + admin/actions (right) ---------------------------------------------------------------------------- Figma list header (247:8972): justify-between, 24px inset top + 24px below (the inner page-container has p-6 24). Left: title "Packages" (text/lg 18 semibold) + subtitle "Packages / Certificates & Documents" (text/sm 14/20 muted-fg). Right: search input (preserved markup only has Company dropdown + Go for admins) + "New Package" teal pill. The .ascx renders the title bar inside a ModuleTemplateV2 structure as pnlTitleLeft (#dvTopBar) and pnlTitleRight (#dvTopBar2). The V2 template produces a
chrome around them; we flex it. ========================================================================== */ /* The V2 template wraps the title row in a table. Find that row and turn it into a flex bar with padding (24px top, 24px sides). */ body.page-manage-email-package [id$='_modMain_pnlTitleLeft'], body.page-manage-email-package [id$='_modMain_pnlTitleRight'] { display: block; } /* The .modV2 chrome typically wraps title+title-right cells in a row. Find that wrapping row by location and flex-row it. */ body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 > table > tbody > tr:first-child > td { padding: 24px 24px 0 24px !important; } body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 > table > tbody > tr:first-child > td > table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; } body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 > table > tbody > tr:first-child > td > table > tbody { display: contents; } body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 > table > tbody > tr:first-child > td > table > tbody > tr { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; } body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 > table > tbody > tr:first-child > td > table > tbody > tr > td { padding: 0 !important; border: 0; background: transparent; vertical-align: middle; width: auto !important; } /* Left cell holds dvTopBar which itself contains a nested
with the "Packages" td.modV2Title + Company dropdown + Go LinkButton */ body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] { flex: 0 1 auto; } body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] > #ctl00_cphMiddle_ctl00_modMain_dvTopBar, body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] > div[id$='_dvTopBar'] { display: block; } body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] > div[id$='_dvTopBar'] > table { width: auto !important; border-collapse: separate; border-spacing: 0; } body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] > div[id$='_dvTopBar'] > table > tbody { display: contents; } body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] > div[id$='_dvTopBar'] > table > tbody > tr { display: flex; align-items: center; gap: 12px; } body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] > div[id$='_dvTopBar'] > table > tbody > tr > td { padding: 0 !important; background: transparent !important; border: 0; vertical-align: middle; } /* "Packages" title — kill the legacy modV2Title chrome (which paints navy uppercase) and re-paint to Figma. */ body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] td.modV2Title { background: transparent !important; background-image: none !important; color: var(--text-primary) !important; font-family: 'Inter', sans-serif; font-size: 18px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; height: auto !important; text-shadow: none !important; } /* Also kill the outer wrapping #pnlTitleLeft that ALSO carries .modV2Title class (because the V2 template paints both wrapper + inner cell). */ body.page-manage-email-package div[id$='_modMain_pnlTitleLeft'].modV2Title { background: transparent !important; background-image: none !important; color: var(--text-primary) !important; font-weight: 400; padding: 0 !important; border: 0 !important; height: auto !important; } /* Subtitle "Packages / Certificates & Documents" — Figma puts this UNDER the title. The current markup doesn't have a subtitle element, so we inject one via ::after on the title cell. */ body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] td.modV2Title::after { content: 'Packages / Certificates & Documents'; display: block; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-muted); margin-top: 6px; letter-spacing: 0; } /* Title's nested table layout — the "Packages" title cell stacks above the Company filter cell (subtitle is injected on the title cell) by switching the flex direction to column for the inner table when admin Company dropdown is visible. Default keeps it as a row. */ body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] > div[id$='_dvTopBar'] > table > tbody > tr { flex-wrap: wrap; align-items: flex-start; } /* Company filter cell (#tdCompany) — admin-only; restyle the inline select to look like a clean filter pill matching Figma's search input. */ body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] td[id$='_tdCompany'] { margin-top: 4px; } body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] td[id$='_tdCompany'] select[id$='_ddlCompany'] { height: 34px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-raised); color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; max-width: 280px; } /* "Go" LinkButton — small ghost-outline pill */ body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] a[id$='_btnGo'].LinkButton, body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] a[id$='_btnGo'] { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; height: 32px; padding: 0 14px !important; border-radius: 8px; background: var(--surface-raised) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; text-decoration: none !important; background-image: none !important; box-shadow: none !important; cursor: pointer; text-shadow: none; vertical-align: middle; } body.page-manage-email-package [id$='_modMain_pnlTitleLeft'] a[id$='_btnGo']:hover { background: var(--surface-card) !important; border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; } /* ========================================================================== 4. "New Package" CTA — render the Img-Std-Add anchor as a teal pill ---------------------------------------------------------------------------- The .ascx renders which produces with no inner text. We inject "New Package" label via ::before and paint the pill teal. The Phase 2 grid.css §5 already paints a.Img-Std-Add as a teal pill globally for body.sidebar-nav, but only when also page-grid. We replicate the same look scoped to this page. ========================================================================== */ body.page-manage-email-package [id$='_modMain_pnlTitleRight'] { flex: 0 0 auto; text-align: right; } /* Collapse the inner table chrome of pnlTitleRight so the CTA sits inline. */ body.page-manage-email-package [id$='_modMain_pnlTitleRight'] > div[id$='_dvTopBar2'], body.page-manage-email-package [id$='_modMain_pnlTitleRight'] > div[id$='_dvTopBar2'] > table, body.page-manage-email-package [id$='_modMain_pnlTitleRight'] > div[id$='_dvTopBar2'] > table > tbody, body.page-manage-email-package [id$='_modMain_pnlTitleRight'] > div[id$='_dvTopBar2'] > table > tbody > tr, body.page-manage-email-package [id$='_modMain_pnlTitleRight'] > div[id$='_dvTopBar2'] > table > tbody > tr > td { display: revert; } body.page-manage-email-package [id$='_modMain_pnlTitleRight'] > div[id$='_dvTopBar2'] > table { width: auto !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; } body.page-manage-email-package [id$='_modMain_pnlTitleRight'] > div[id$='_dvTopBar2'] > table td { padding: 0 !important; background: transparent !important; border: 0; vertical-align: middle !important; text-align: right; } body.page-manage-email-package a[id$='_btnAddNew'].Img-Std-Add { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; height: 36px; min-width: 124px; padding: 8px 16px !important; gap: 8px; background: var(--brand-primary) !important; background-image: none !important; color: var(--text-on-brand) !important; border: 0 !important; border-radius: 8px !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer; vertical-align: middle !important; margin: 0 !important; width: auto !important; text-shadow: none !important; } body.page-manage-email-package a[id$='_btnAddNew'].Img-Std-Add::before { content: 'New Package'; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } body.page-manage-email-package a[id$='_btnAddNew'].Img-Std-Add:hover { background: var(--brand-primary-hover) !important; /* teal-700 */ color: var(--text-on-brand) !important; } /* Hide the sprite icon background (legacy StdIcons.png) — we paint the pill solid with the label. */ body.page-manage-email-package a[id$='_btnAddNew'].Img-Std-Add, body.page-manage-email-package a[id$='_btnAddNew'].Img-Std-Add:link, body.page-manage-email-package a[id$='_btnAddNew'].Img-Std-Add:visited { background-image: none !important; } /* ========================================================================== 5. List body — pnlPackages → nested package "row cards" ---------------------------------------------------------------------------- The DataGrid `dgPackageManagement` emits one per package, each with a single
containing: literal "Package:" text + (name + (Shared|Personal)) + + a nested of → block card (border, rounded-lg, bg)
chips (one per attachment). Figma renders each package as a card with header strip (title + edit/ chevron icon buttons) + body strip (chip wrap) separated by a border-b. Structural mapping (CSS-only — no markup change):
→ flex-column, font-size:0 to hide "Package:" text "Package:" → collapsed (font-size:0 on td, restored on *) → header title text (16/leading-none semibold) → ghost icon button (32×32 pencil) → card body strip with border-top + chip flow → chip (bg muted, rounded-md, 14/20) The Main slot wraps the DataGrid in → → becomes a block-level card */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr { display: block; width: 100%; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; /* clip rounded corners + border-b strip */ box-sizing: border-box; } /* Strip legacy alternating row styling */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr.Alt, body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr.NoBorder { background: var(--surface-raised) !important; border: 1px solid var(--border-default) !important; } /* The single in position:relative so the absolutely-positioned edit btn anchors to the row card. */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr { position: relative; } /* Position the edit button at the top-right of the header strip. Figma shows edit + chevron-down side-by-side; chevron expand/collapse is deferred (not in current backend) per user choice "CSS-only re-skin: preserve, restyle" — no chevron pseudo-element. Edit btn sits flush to the right edge with 16px inset. */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > input[type='image'][id$='_btnEdit'].Img-Std-EditV2 { top: 16px; right: 16px; } /* BODY strip — the inner dlAttachments
; neutralise that chrome too. ========================================================================== */ /* Module main padding — Figma has 24px inset around the inner area, but the page-header at the top already has 24px-on-each-side via the title row. The DataGrid sits flush against the title bar; the title's 24px bottom padding is provided by the row spacing below. */ body.page-manage-email-package [id$='_modMain_pnlMain'], body.page-manage-email-package .modV2Main { padding: 0 !important; background: transparent !important; } /* Pnl wrappers — collapse the legacy table chrome */ body.page-manage-email-package [id$='_modMain_pnlPackages'] > table, body.page-manage-email-package [id$='_modMain_pnlPackages'] > table > tbody, body.page-manage-email-package [id$='_modMain_pnlPackages'] > table > tbody > tr { display: contents !important; } body.page-manage-email-package [id$='_modMain_pnlPackages'] { display: block; padding: 24px; /* inset of the inner area inside the outer card */ padding-top: 24px; background: transparent; } /* DataGrid table — release the legacy chrome and let our row rules paint */ body.page-manage-email-package table[id$='_dgPackageManagement'].StdTable { width: 100% !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0 0 !important; background: transparent !important; table-layout: auto !important; } body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody { display: flex; flex-direction: column; gap: 24px; /* root frame gap-6 (24) between row cards (matches inner page-container gap) */ width: 100%; } /* Hide the legacy "Packages/Certificates & Documents" header row — the page subtitle already conveys this; Figma's list view does not repeat it. */ body.page-manage-email-package table[id$='_dgPackageManagement'] tr.ColHeader { display: none !important; } /* Each
within each row card */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td { display: flex !important; flex-direction: column !important; padding: 0 !important; border: 0 !important; background: transparent !important; width: 100% !important; box-sizing: border-box; /* Collapse the "Package:" literal text node + raw whitespace. Children restore font-size below. */ font-size: 0 !important; line-height: 0 !important; } /* Restore font on the title span + nested table; keep "Package:" text node collapsed since it would duplicate the title. */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > * { font-size: 14px; line-height: 20px; } /* HEADER strip = the part of the ABOVE the dlAttachments table. We treat all direct children before the table as the header. The visible content there is: span.NormalBold (title) + input.Img-Std-EditV2 (edit btn). The hidden inputs (PackageNameDetail, PackageTypeDetail) are direct children too — keep them display: none. */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > input[type='hidden'] { display: none !important; } /* Title span (.NormalBold) — Figma: 16/leading-none Inter semibold var(--text-primary). Wrap it in a 64h flex header strip with the edit button aligned right; since the is flex-column, the span flows as the FIRST visible item and the edit input as the SECOND. We hack the strip into existence by giving the span margin-right: auto and using flex-basis: 100%. */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > span.NormalBold { display: block; box-sizing: border-box; width: 100%; /* Reserve right space for the absolutely-positioned edit btn (right:16, 32w) + 16px gap = 64px. */ padding: 22px 64px 22px 20px; margin: 0; background: transparent; border: 0; border-bottom: 1px solid var(--border-default); font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; line-height: 20px; color: var(--text-primary); text-shadow: none; letter-spacing: 0; } /* Hover state for the edit button — DO NOT change background-color (Phase 2 mask uses it as the icon paint). Darken the icon by changing `color` so currentColor moves to a more saturated value. */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > input[type='image'][id$='_btnEdit']:hover { color: var(--brand-primary) !important; /* teal-600 — moves the mask paint */ } /* Edit button (input type="image" with clearpixel.gif src + Img-Std-EditV2 class). The Phase 2 global swap (components.css §Img-Std-EditV2) paints a Lucide pencil mask under body.sidebar-nav via background-color: currentColor; -webkit-mask: url(...pencil.svg); We MUST NOT override background-color here (transparent kills the icon). Only override position + size + border. Figma 220:4707 spec: each row's top-right cluster (Frame 38) is 68×32 with TWO 32×32 buttons (edit + chevron-down). User scope-decision is to ship Edit only; we size it to 32×32 to match Figma's button box. The glyph inside stays 16×16 from the Phase 2 mask (Figma "Icon / 24px / SquarePen" renders the Lucide pencil at ~16px stroke). */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > input[type='image'][id$='_btnEdit'].Img-Std-EditV2 { position: absolute; width: 32px !important; height: 32px !important; padding: 8px !important; /* (32 - 16 glyph) / 2 */ box-sizing: border-box; border: 0 !important; border-radius: 6px; cursor: pointer; /* Do not set background/background-color here — Phase 2 paints the Lucide pencil glyph via background-color: currentColor + mask. */ } /* Wrap each
. Make it a flex-wrap container and turn its per attachment row × . Collapse the so chips flow inline-wrap. */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > table[id$='_dlAttachments'] > tbody > tr { display: contents; } /* Each
into chips. */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > table[id$='_dlAttachments'] { display: block; width: 100% !important; box-sizing: border-box; padding: 16px 20px 20px 20px; /* Figma: pt-16 pb-20 px-20 */ margin: 0 !important; background: transparent; border: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; } body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > table[id$='_dlAttachments'] > tbody { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; /* Figma cert-chip gap-2 */ width: 100%; } /* The DataList renders ONE
column. Since RepeatColumns="1" the structure is one per
→ a chip */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > table[id$='_dlAttachments'] > tbody > tr > td { display: inline-flex !important; align-items: center; box-sizing: border-box; height: 40px; padding: 10px 12px !important; /* Figma: px-12 py-10 */ margin: 0 !important; background: var(--surface-muted) !important; /* base/muted resolved value */ border: 0 !important; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: var(--text-primary) !important; white-space: nowrap !important; width: auto !important; /* override inline width:25% */ vertical-align: middle !important; } /* Empty-state label "This Packages does not content any attachments..." (.Info) — restyle as a neutral helper line. */ body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > span.Info, body.page-manage-email-package table[id$='_dgPackageManagement'] > tbody > tr > td > span[id$='_lblAddNew'] { display: block; width: 100%; padding: 16px 20px 20px 20px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-muted); background: transparent; text-shadow: none; letter-spacing: 0; } /* ========================================================================== 6. Footer — "Top" disable button anchor (legacy a.disableButton) ---------------------------------------------------------------------------- The Footer slot renders .... Style as a small ghost ghost-pill matching the fleet-management pattern. ========================================================================== */ body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 .modPopFooter, body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 [id$='_modMain_pnlFooter'] { background: transparent !important; border-top: 1px solid var(--border-default); padding: 12px 24px !important; margin-top: 0; text-align: right; } body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 a.disableButton { display: inline-flex !important; align-items: center; gap: 6px; box-sizing: border-box; height: 32px; padding: 0 12px !important; background: var(--surface-raised) !important; background-image: none !important; color: var(--text-muted) !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none !important; box-shadow: none !important; cursor: pointer; text-shadow: none !important; } body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 a.disableButton:hover { background: var(--surface-card) !important; border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; } /* Hide the legacy   + sprite img inside the disable button; paint a Lucide arrow-up via ::before. */ body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 a.disableButton ins, body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 a.disableButton img { display: none !important; } body.page-manage-email-package [id$='_modMain_pnlMod'].modV2 a.disableButton::before { content: ''; display: inline-block; width: 12px; height: 12px; background-color: currentColor; -webkit-mask: var(--icon-chevron-up) no-repeat center / contain; mask: var(--icon-chevron-up) no-repeat center / contain; } /* ========================================================================== 7. EDIT MODE — pnlShowPackageDocuments ---------------------------------------------------------------------------- When the user clicks New Package or Edit, pnlPackages hides and pnlShowPackageDocuments shows. Structure:
Packages/Certs & Docs
...
text "Package name:" 3× (Cancel / Delete / Save)

"Show package for:" wrapper that holds the form + grid */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table, body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody, body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr, body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td { display: block; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; } /* Hide the legacy
that sits at the top of the form td */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td > br:first-child { display: none; } /* Form td — flex row: [injected "Package name:" label] + input + validator + Cancel + Delete + Save. The legacy markup has bare text nodes between buttons (` `) and as the label ("Package name:") — these become anonymous flex items and bloat the inter-button gap with arbitrary widths. We kill them via `font-size: 0` on the td (collapses all text content to zero width) and re-inject the label as `td::before` so it reads as a real, predictable flex item. */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; /* ` ` text nodes between buttons */ row-gap: 16px; /* are anonymous flex items even when */ font-size: 0 !important; /* width=0; column-gap would still apply */ line-height: 0; /* on BOTH sides, doubling spacing. */ } /* Use per-button margin-left instead. */ /* Injected "Package name:" label — appears as a real flex item BEFORE the text node + input. Matches Figma Frame 40 / Field Content / Label. */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td::before { content: 'Package Name'; flex: 0 0 auto; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); } /* Restore font on element children (anchors, inputs, span, p) — text inside them renders normally. Text NODES at td-level stay at 0. */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td > * { vertical-align: middle; font-size: 14px; line-height: 20px; font-family: 'Inter', sans-serif; } /* Hide the
spacer + hidden field that precede the label text */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td > br { display: none !important; } body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td > input[type='hidden'] { display: none !important; } /* Cancel + Delete + Save buttons share the shape rule below. Per-button colour painting (teal primary, outline ghost, red outline) follows. */ /* Input chrome — Figma 247:7439 / Frame 40 / InputGroup is 187×32 */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] input[id$='_txtPackageNameDetail'] { box-sizing: border-box; height: 32px; padding: 6px 12px; background: var(--surface-raised) !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; font-family: 'Inter', sans-serif; font-size: 14px !important; line-height: 20px !important; color: var(--text-primary) !important; width: 187px; margin: 0 0 0 12px !important; /* Figma: gap 12 between label and input */ outline: none; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04); vertical-align: middle; } body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] input[id$='_txtPackageNameDetail']:focus { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.18); } /* Validator span — small red text below/after the input */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] span[id$='_rfvPackageNameDetail'] { display: inline-block; margin-right: 8px; font-family: 'Inter', sans-serif; font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; color: var(--red-600) !important; background: transparent !important; } /* The 3 LinkButtons — Cancel / Delete / Save. Save (primary teal), Cancel (outline), Delete (red outline ghost — kept by user request though Figma 247:7439 shows Cancel + Save only). */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] a[id$='_lnkSaveDetail'].LinkButton, body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] a[id$='_lnkCancelDetail'].LinkButton, body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] a[id$='_lnkDeleteDetail'].LinkButton { display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; height: 32px; padding: 0 14px !important; margin: 0 0 0 12px !important; /* 12px gap before each button */ border-radius: 8px !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; text-decoration: none !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer; vertical-align: middle; } /* Save → teal primary */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] a[id$='_lnkSaveDetail'].LinkButton { background: var(--brand-primary) !important; color: var(--text-on-brand) !important; border: 0 !important; } body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] a[id$='_lnkSaveDetail'].LinkButton:hover { background: var(--brand-primary-hover) !important; } /* Cancel → outline ghost */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] a[id$='_lnkCancelDetail'].LinkButton { background: var(--surface-raised) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; } body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] a[id$='_lnkCancelDetail'].LinkButton:hover { border-color: var(--text-tertiary) !important; background: var(--surface-card) !important; } /* Delete → outline ghost with red tint */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] a[id$='_lnkDeleteDetail'].LinkButton { background: var(--surface-raised) !important; color: var(--red-600) !important; border: 1px solid var(--border-default) !important; } body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] a[id$='_lnkDeleteDetail'].LinkButton:hover { border-color: var(--red-600) !important; background: var(--surface-error) !important; } /* "Show package for"

wrapper — Figma puts this on its own line. The parent td is `display: flex; flex-wrap: wrap` so we force-break by making the

take 100% width (flex-basis: 100%). */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td > p { display: flex; flex: 0 0 100%; align-items: center; gap: 8px; margin: 8px 0 4px 0 !important; padding: 0; background: transparent; font-size: 14px; line-height: 20px; color: var(--text-primary); font-family: 'Inter', sans-serif; } /* ddlShowPackage dropdown */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] select[id$='_ddlShowPackage'] { height: 32px; padding: 6px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-raised); color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; width: 167px; } /* Grid + ASPxCallback + GridFilterMenu — force onto their own row inside the flex td so they sit BELOW the filter row, not inline beside the Save button. */ body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td > table[id$='_gridPackagesDocuments'], body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td > div[id$='_gridPackagesDocuments'], body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td > div[id*='_dxxMainGridCallBack'], body.page-manage-email-package [id$='_modMain_pnlShowPackageDocuments'] > table > tbody > tr > td > div[id*='_gridFilter'] { flex: 0 0 100%; margin-top: 8px; } /* ========================================================================== 7b. ASPxGridView (gridPackagesDocuments, SkinID="Version3") ---------------------------------------------------------------------------- DevExpress emits a deep DOM tree with `dxgvHeader`, `dxgvDataRow`, `dxgvCommandColumn` classes. Phase 2 components.css §12.6 paints the shared `.q88-refresh .dxgvHeader` chrome but only under the `q88-refresh` ancestor — we need page-scoped overrides here. ========================================================================== */ body.page-manage-email-package table[id$='_gridPackagesDocuments'] { width: 100% !important; margin-top: 0; background: var(--surface-raised) !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; overflow: hidden; border-collapse: separate !important; border-spacing: 0 !important; font-family: 'Inter', sans-serif; } /* Header row — Figma 247:10050 column-header style: 14/20 medium slate-700, title-case (NOT uppercase). Header row 48h. */ body.page-manage-email-package table[id$='_gridPackagesDocuments'] td.dxgvHeader, body.page-manage-email-package table[id$='_gridPackagesDocuments'] td[class*='dxgvHeader'] { background: var(--surface-card) !important; background-image: none !important; color: var(--text-muted) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; text-transform: none !important; letter-spacing: 0 !important; padding: 14px 16px !important; border: 0 !important; border-bottom: 1px solid var(--border-default) !important; height: 48px; box-sizing: border-box; vertical-align: middle; text-shadow: none !important; } /* Header inner (sortable link) — the deepest text-bearing element wins the cascade, so we must force the same values here too. */ body.page-manage-email-package table[id$='_gridPackagesDocuments'] td.dxgvHeader a, body.page-manage-email-package table[id$='_gridPackagesDocuments'] td[class*='dxgvHeader'] a, body.page-manage-email-package table[id$='_gridPackagesDocuments'] td.dxgvHeader a:link, body.page-manage-email-package table[id$='_gridPackagesDocuments'] td.dxgvHeader a:visited { color: var(--text-muted) !important; font-weight: 500 !important; font-size: 14px !important; line-height: 20px !important; font-family: 'Inter', sans-serif; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; text-shadow: none !important; } /* Data rows */ body.page-manage-email-package table[id$='_gridPackagesDocuments'] td.dxgv, body.page-manage-email-package table[id$='_gridPackagesDocuments'] td[class*='dxgvDataCell'], body.page-manage-email-package table[id$='_gridPackagesDocuments'] td[class*='dxgvDataRow'] { background: transparent !important; color: var(--text-primary) !important; font-family: 'Inter', sans-serif; font-size: 14px !important; line-height: 20px !important; padding: 11px 16px !important; border: 0 !important; border-bottom: 1px solid var(--border-default) !important; height: 42px; box-sizing: border-box; vertical-align: middle; } /* Inner

(custom Veson pager, not the DX-default dxgvPager). Inside: nested
with chevron sprite buttons, a "Page X of N" text + for page-number entry, and on the right a
wrapping the page-size