/* ==========================================================================
   Invoicing page (admin/Invoicing.aspx → admin/Invoice.ascx) — page-specific
   overrides layered on top of grid.css.
   ----------------------------------------------------------------------------
   Scoped via `body.page-invoicing`. Shared chrome (card, title bar, grid,
   pager) comes from grid.css via the additional `body.page-grid` class.

   Markup notes (Invoice.ascx):
   - List view = ModuleTemplateV2 #pnlInvoiceList → ASPxGridView #gridInvoices
   - TitleRight: txtSearch + btnSearchGo icon + lbExportToExcel text link
   - SubHeader: "View:" + dpdView status dropdown (New/Invoiced/Paid/Void)
   - Footer: "Top" anchor that scrolls the grid back to row 0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TitleRight — search input + search-icon button + Export-to-Excel link.
      grid.css scopes its search styling to `.searchBoxDiv` which this ascx
      doesn't render, so style the raw `#txtSearch` directly. Mirror the
      Figma search-input look: 36h, slate border, 8px radius, 14/20 Inter.
   -------------------------------------------------------------------------- */
body.page-invoicing #txtSearch {
    height: 36px;
    box-sizing: border-box;
    padding: 0 12px;
    background-color: var(--surface-raised, #ffffff);
    border: 1px solid var(--border-input, #cbd5e1);
    border-radius: 8px;
    color: var(--text-primary, #0f172a);
    font-family: var(--q88-grid-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14px;
    line-height: 20px;
    width: 220px;
    outline: none;
}

body.page-invoicing #txtSearch::placeholder,
body.page-invoicing #txtSearch.WaterMarkText {
    color: var(--text-muted, #64748b);
    font-style: normal;
}

body.page-invoicing #txtSearch:focus,
body.page-invoicing #txtSearch:focus-within {
    border-color: var(--q88-grid-primary, #0d9488);
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.18);
}

/* Inline search-icon button. asp:LinkButton renders <a class="linkWHover">
   wrapping an <img> magnifier sprite. Repaint as a Lucide-style stroke icon
   via mask so it picks up text-muted colour. */
body.page-invoicing a#ctl00_cphMiddle_ctl00_pnlInvoiceList_btnSearchGo,
body.page-invoicing a[id$='_btnSearchGo'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    margin-left: 4px;
    color: var(--text-muted, #64748b);
    text-decoration: none;
}

body.page-invoicing a[id$='_btnSearchGo']:hover {
    background-color: var(--surface-hover, #f1f5f9);
    color: var(--text-primary, #0f172a);
}

body.page-invoicing a[id$='_btnSearchGo'] > img {
    width: 16px;
    height: 16px;
    /* Lucide "search" glyph */
    -webkit-mask: var(--icon-search) center/16px 16px no-repeat;
            mask: var(--icon-search) center/16px 16px no-repeat;
    background-color: currentColor;
    /* Wipe the original sprite */
    background-image: none !important;
}

/* Export to Excel — text LinkButton, render as secondary action with leading
   Lucide-style download icon. Sits to the right of the search controls. */
body.page-invoicing a[id$='_lbExportToExcel'] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    margin-left: 8px;
    border: 1px solid var(--border-input, #cbd5e1);
    border-radius: 8px;
    background-color: var(--surface-raised, #ffffff);
    color: var(--text-primary, #0f172a);
    font-family: var(--q88-grid-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}

body.page-invoicing a[id$='_lbExportToExcel']:hover {
    background-color: var(--surface-hover, #f1f5f9);
    border-color: var(--q88-grid-primary, #0d9488);
    color: var(--q88-grid-primary, #0d9488);
}

body.page-invoicing a[id$='_lbExportToExcel']::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    /* Lucide "download" glyph */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") center/16px 16px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") center/16px 16px no-repeat;
    background-color: currentColor;
    flex: 0 0 16px;
}

/* LinkButton renders <ins>&nbsp;</ins> before its label — kill it inside the
   flex pill so the icon + text stay tight (same pattern as integration-partners.css). */
body.page-invoicing a[id$='_lbExportToExcel'] > ins {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2. SubHeader — "View:" + status dropdown. Sits between the title bar and
      the grid header. Convert the legacy <table> filler into a clean filter
      row with the label + select shim rendering.
   -------------------------------------------------------------------------- */
body.page-invoicing .modV2 .modV2SubHeader,
body.page-invoicing .modV2SubHeader {
    background-color: transparent;
    border: 0;
    padding: 12px 24px;
}

body.page-invoicing .modV2SubHeader table,
body.page-invoicing .modV2SubHeader tbody,
body.page-invoicing .modV2SubHeader tr,
body.page-invoicing .modV2SubHeader td {
    display: inline-flex;
    align-items: center;
    border: 0;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

body.page-invoicing .modV2SubHeader td {
    gap: 8px;
}

body.page-invoicing .modV2SubHeader b {
    font-family: var(--q88-grid-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
}

/* The native <select> chrome is already standardised under body.sidebar-nav
   by components.css. Just lock the width so the dropdown matches the search
   input's vertical rhythm. */
body.page-invoicing select[id$='_dpdView'] {
    min-width: 140px;
    height: 32px;
}

/* --------------------------------------------------------------------------
   3. Action column — Type/Action icons. The Action column hosts ImageButtons
      (imgAction + imgEmail) painting legacy sprite. Centre-align like the
      shared action column pattern in grid.css.
   -------------------------------------------------------------------------- */
body.page-invoicing td.dxgvDataRow[align='center'] img,
body.page-invoicing td.dxgvDataRow img[id*='_imgAction'],
body.page-invoicing td.dxgvDataRow img[id*='_imgEmail'] {
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   4. Footer "Top" link — ModuleTemplateV2 renders the <Footer> slot inside
      div.modPopFooter (NOT .modV2Footer — that selector matches nothing).
      Strip legacy LinkButton chrome (slate-blue fill + white text) and
      render as a muted right-aligned text-button. Stronger specificity is
      needed to beat MainWhiteout's a.LinkButton{background:#4f72a4;color:#fff}.
   -------------------------------------------------------------------------- */
body.page-invoicing .modPopFooter {
    background-color: transparent;
    border: 0;
    padding: 8px 0 0 0;
    text-align: right;
}

body.page-invoicing .modPopFooter a.LinkButton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--text-muted, #64748b) !important;
    font-family: var(--q88-grid-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 8px;
    text-decoration: none;
}

body.page-invoicing .modPopFooter a.LinkButton:hover {
    color: var(--q88-grid-primary, #0d9488) !important;
    background-color: var(--surface-hover, #f1f5f9) !important;
    border-radius: 6px;
}

body.page-invoicing .modPopFooter a.LinkButton > ins {
    display: none !important;
}

/* The ImageManager inside the Top anchor renders an icon + label span pair.
   Repaint the icon as a Lucide-style arrow-up via mask. */
body.page-invoicing .modPopFooter a.LinkButton img {
    width: 14px;
    height: 14px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5'/><path d='m5 12 7-7 7 7'/></svg>") center/14px 14px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5'/><path d='m5 12 7-7 7 7'/></svg>") center/14px 14px no-repeat;
    background-color: currentColor;
    background-image: none !important;
}

/* ==========================================================================
   5. modInvoiceDetails — Invoice Details FORM section (QEN-8704)
   ----------------------------------------------------------------------------
   Below the list grid, server-conditionally rendered when an invoice row is
   activated. Hosted in a legacy <uc:ModuleTemplate> (NOT V2) so grid.css's
   .modV2 chrome doesn't apply. The form uses <table class="StdTable BorderV2Bottom">
   as label/value layout (td.Label + value cell) plus an embedded
   <asp:DataList CssClass="StdTable"> for line items.

   Render flow: page-grid handles the OUTER list-view card (modV2 + ASPxGridView).
   page-invoicing layers on top to re-skin the detail-form section + the
   pnlImportantNotes red box. The modInvoiceDetails section never carries
   page-grid chrome (modContainerStd, not .modV2), so we paint it here.

   Footer2 buttons (5): Cancel · Manual Edit · Print · Save · Email
     Save = primary commit (teal pill) — keep existing LinkButton teal styling.
     Cancel = secondary ghost (already has CssClass="LinkButton Secondary").
     Manual Edit / Print / Email = ghost secondaries (override default teal pill).
   ========================================================================== */

/* 5a. modContainerStd → q88-card chrome (mirrors admin-list.css §2). */
body.page-invoicing table.modContainerStd {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    background-color: var(--card-raised, var(--surface-raised, #ffffff)) !important;
    border: 1px solid var(--border-default, var(--input, #e2e8f0)) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 24px 48px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
body.page-invoicing table.modContainerStd > tbody,
body.page-invoicing table.modContainerStd > tbody > tr,
body.page-invoicing table.modContainerStd > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    vertical-align: top !important;
}
body.page-invoicing table.modContainerStd .modInnerContainer {
    padding: 24px 28px !important;
    background: transparent !important;
}

/* 5b. Title bar — Inter 18/28 600 slate-900 (mirror of admin-form.css §3). */
body.page-invoicing table.modContainerStd .modTitle {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0) !important;
    padding: 0 0 16px 0 !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    height: auto !important;
    min-height: auto !important;
    line-height: normal !important;
}
body.page-invoicing table.modContainerStd .modTLeft {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    color: var(--text-strong, #0f172a) !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
}
body.page-invoicing table.modContainerStd .modTRight {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    color: var(--text-muted, #64748b) !important;
}

/* 5c. Main body. */
body.page-invoicing table.modContainerStd .modMain {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--text-primary, #0f172a) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* 5d. StdTable BorderV2Bottom — form layout (label/value). Different shape
   from admin-form.css §5: rows here are HORIZONTAL (label-td + value-td +
   label-td + value-td across the row), so we use a 4-column tactic rather
   than the 2-column treatment used by Bulk Auth0 / Officer Matrix Offline. */
body.page-invoicing table.modContainerStd table.StdTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    background: transparent !important;
    margin: 0 !important;
    border: 0 !important;
    table-layout: auto !important;
}
body.page-invoicing table.modContainerStd table.StdTable > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
    padding: 4px 8px 4px 0 !important;
    vertical-align: middle !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
}
/* tr.Header (top "Company:" row) — render as bold caption with slate-50 band. */
body.page-invoicing table.modContainerStd table.StdTable > tbody > tr.Header,
body.page-invoicing table.modContainerStd table.StdTable > tbody > tr.Header > td {
    background: var(--surface-muted, #f8fafc) !important;
    background-color: var(--surface-muted, #f8fafc) !important;
    background-image: none !important;
    color: var(--text-strong, #0f172a) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-shadow: none !important;
    height: 40px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 6px !important;
    text-align: left !important;
}
/* Label cells (td.Label) — bold slate-900, fixed 160px width. */
body.page-invoicing table.modContainerStd table.StdTable > tbody > tr > td.Label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--text-strong, #0f172a) !important;
    width: 160px !important;
    min-width: 140px !important;
    padding: 4px 12px 4px 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
/* SubHeader1 cells (Invoice amount / Balance due totals) — emphasized right
   side of total rows. Keep bold + slightly larger. */
body.page-invoicing table.modContainerStd table.StdTable .SubHeader1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-strong, #0f172a) !important;
}

/* 5e. Form controls — inputs (NormalTextBox / NormalNumberBox), textareas,
   selects. Legacy renders 15px-tall inputs without rounded corners. */
body.page-invoicing table.modContainerStd .modMain input[type="text"],
body.page-invoicing table.modContainerStd .modMain input[type="password"],
body.page-invoicing table.modContainerStd .modMain input[type="number"],
body.page-invoicing table.modContainerStd .modMain input[type="email"],
body.page-invoicing table.modContainerStd .modMain input.NormalTextBox,
body.page-invoicing table.modContainerStd .modMain input.NormalNumberBox,
body.page-invoicing table.modContainerStd .modMain select {
    box-sizing: border-box !important;
    height: 32px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--border-default, var(--input, #cbd5e1)) !important;
    border-radius: 6px !important;
    background-color: var(--card-raised, var(--surface-raised, #ffffff)) !important;
    color: var(--text-strong, #0f172a) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
body.page-invoicing table.modContainerStd .modMain textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 60px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--border-default, var(--input, #cbd5e1)) !important;
    border-radius: 6px !important;
    background-color: var(--card-raised, var(--surface-raised, #ffffff)) !important;
    color: var(--text-strong, #0f172a) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    resize: vertical !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
body.page-invoicing table.modContainerStd .modMain input[type="text"]:focus,
body.page-invoicing table.modContainerStd .modMain input[type="password"]:focus,
body.page-invoicing table.modContainerStd .modMain input.NormalTextBox:focus,
body.page-invoicing table.modContainerStd .modMain input.NormalNumberBox:focus,
body.page-invoicing table.modContainerStd .modMain select:focus,
body.page-invoicing table.modContainerStd .modMain textarea:focus {
    border-color: var(--border-focus, #0d9488) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.16) !important;
}
/* asp:Label rendering as Width="72" (Invoice amount + Balance due totals) — let
   the label hug content rather than legacy fixed-width "input" look. */
body.page-invoicing table.modContainerStd table.StdTable .NormalNumberBox:not(input) {
    display: inline-block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    color: var(--text-strong, #0f172a) !important;
    font-weight: 600 !important;
}

/* 5f. Embedded DataList line items (asp:DataList CssClass="StdTable") — Header /
   Item / EditItem / Footer templates. Renders inside <td colspan="4"
   style="padding:0px"> at the bottom of the form. Treat as a sub-grid: slate-50
   header band, alternating row striping comes from <HeaderStyle CssClass="ColHeader">
   + <FooterStyle CssClass="SubHeader1">. Note: each ItemTemplate wraps a NESTED
   <table> inside the DataList cell, so we scope row chrome to the inner tables. */
body.page-invoicing table.modContainerStd table.StdTable > tbody > tr > td > table.StdTable {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: var(--surface-raised, #ffffff) !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 16px 0 0 0 !important;
}
body.page-invoicing table.modContainerStd table.StdTable > tbody > tr > td > table.StdTable > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9) !important;
    padding: 12px 16px !important;
    color: var(--text-primary, #0f172a) !important;
}
/* DataList HeaderStyle CssClass="ColHeader" — slate-50 band with bold labels. */
body.page-invoicing .modMain .ColHeader,
body.page-invoicing .modMain .ColHeader td,
body.page-invoicing .modMain tr.ColHeader,
body.page-invoicing .modMain tr.ColHeader > td {
    background: var(--surface-muted, #f8fafc) !important;
    background-color: var(--surface-muted, #f8fafc) !important;
    background-image: none !important;
    color: var(--text-muted, #475569) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    height: 40px !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default, #e2e8f0) !important;
}
/* DataList FooterStyle CssClass="SubHeader1" — bottom band with Total. */
body.page-invoicing .modMain .SubHeader1 {
    background-color: var(--surface-muted, #f8fafc) !important;
    color: var(--text-strong, #0f172a) !important;
    font-weight: 600 !important;
    border-top: 1px solid var(--border-default, #e2e8f0) !important;
}
/* QuickBooks Item label + inline notes inside DataList ItemTemplate — small italic. */
body.page-invoicing table.modContainerStd table.StdTable > tbody > tr > td > table.StdTable em,
body.page-invoicing table.modContainerStd table.StdTable > tbody > tr > td > table.StdTable [id*="lblNotes"] {
    color: var(--text-muted, #64748b) !important;
    font-size: 13px !important;
}

/* 5g. Footer2 — 5 LinkButtons. Save (lnkSave) is primary teal — already
   styled by global .LinkButton rules. Cancel has CssClass="LinkButton Secondary"
   already painting as teal-border ghost. Override Manual Edit / Print / Email
   to plain ghost (slate border, slate text). */
body.page-invoicing table.modContainerStd .modFooter2 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--border-subtle, #e2e8f0) !important;
    padding: 16px 0 0 0 !important;
    margin: 24px 0 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
body.page-invoicing table.modContainerStd .modFooter2:empty {
    display: none !important;
}
/* All Footer2 anchors get the same 36h pill geometry. */
body.page-invoicing table.modContainerStd .modFooter2 a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}
/* Manual Edit / Print / Email — plain ghost (slate border, slate text). */
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkEdit'],
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkPrint'],
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkEmail'] {
    background-color: var(--card-raised, var(--surface-raised, #ffffff)) !important;
    color: var(--text-strong, #0f172a) !important;
    border: 1px solid var(--border-default, var(--input, #cbd5e1)) !important;
}
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkEdit']:hover,
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkPrint']:hover,
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkEmail']:hover {
    background-color: var(--surface-muted, #f8fafc) !important;
    border-color: var(--border-input-hover, #94a3b8) !important;
    color: var(--text-strong, #0f172a) !important;
}
/* Save (primary commit) — solid teal pill. Pin against existing LinkButton
   chrome with explicit token + border to keep the pill flat (no border ring). */
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkSave'] {
    background-color: var(--button-primary-bg, #0d9488) !important;
    color: var(--button-primary-text, #ffffff) !important;
    border: 1px solid var(--button-primary-bg, #0d9488) !important;
}
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkSave']:hover {
    background-color: var(--button-primary-hover, #0f766e) !important;
    border-color: var(--button-primary-hover, #0f766e) !important;
    color: var(--button-primary-text, #ffffff) !important;
}
/* Cancel — LinkButton.Secondary is rendered slightly differently across portals.
   Force ghost-pill (teal-border, transparent bg). */
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkCancel'] {
    background-color: transparent !important;
    color: var(--text-muted, #64748b) !important;
    border: 1px solid var(--border-default, var(--input, #cbd5e1)) !important;
}
body.page-invoicing table.modContainerStd .modFooter2 a[id$='_lnkCancel']:hover {
    background-color: var(--surface-muted, #f8fafc) !important;
    border-color: var(--border-input-hover, #94a3b8) !important;
    color: var(--text-strong, #0f172a) !important;
}
/* <ins>&nbsp;</ins> spacer + legacy ImageManager icon sprite suppression. */
body.page-invoicing table.modContainerStd .modFooter2 a > ins {
    display: none !important;
}
body.page-invoicing table.modContainerStd .modFooter2 a img {
    display: none !important;
}

/* 5h. pnlImportantNotes — red admin notes banner. The ascx hardcodes
   `background-color: Red; border: 1px solid #cccccf; padding: 15px;
    width: 95%`. Soften to a slate-yellow notice card so it doesn't scream
   while still being attention-grabbing. The inner Q88:GridView gets the
   standard grid.css chrome from page-grid; we only re-skin the wrapper. */
body.page-invoicing .importNotesContainer {
    background-color: #fef3c7 !important;
    border: 1px solid #fbbf24 !important;
    border-radius: 8px !important;
    margin: 24px 48px !important;
    padding: 16px 20px !important;
    width: auto !important;
    text-align: left !important;
}
body.page-invoicing .importNotesContainer .PageTitle {
    color: #92400e !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    text-shadow: none !important;
}

/* 5i. divFirstishInvoiceWarning — fixed-position bottom red strip. The
   ascx hardcodes solid red `#ff6f6f`. Soften to amber-on-white so it stays
   visible without dominating the page. */
body.page-invoicing div[id$='_divFirstishInvoiceWarning'] {
    background-color: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    border-radius: 8px !important;
    color: #92400e !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    text-shadow: none !important;
}