/* ==========================================================================
   Abbreviations page (Abbreviations.aspx) — page-specific overrides layered
   on top of grid.css.
   ----------------------------------------------------------------------------
   Scoped via `body.page-abbreviations`. Shared chrome (card, filters, search,
   grid, pager, primary CTA pill) comes from grid.css via the additional
   `body.page-grid` class.

   The CTA label is the only page-specific override required. The grid has
   just three columns (Abbreviation, Definition, Edit) and is NOT DB-driven
   (static DevExpress `<Columns>` markup), but per-column width locks are
   still omitted — the Definition column is free-flow text and benefits
   from letting the browser size it.

   Note — Abbreviations.ascx ships with an inline `<style>` block that adds
   `border-bottom:1px solid #003366` to the DX header (old navy). That rule
   is scoped to `#..._grdTerminology_DXHeaderTable` and is marked "keep
   until a permanent solution can be found". The markup is left in place;
   the colour is retuned to the border token at the bottom of this file
   (QEN-8801).

   PORTAL GATE TRAP — this file is added inside the PortalId 0/1 (Q88
   wet/dry) CSS block in Default.Master.cs, so it does NOT load on the
   Milbros portal even though /Abbreviations.aspx is served there too
   (Tools → Abbreviations & Definitions) with the same body classes.
   milbros-grid.css carries a mirrored copy of these rules for Milbros —
   keep both in sync, or move the AddCssFileToList call into the 0/1/2
   block and delete the mirror.
   ========================================================================== */

/* CTA label — the shared grid.css rule styles the teal pill AND hides any
   inner <img>; this `::before` renders the label text so the icon-only
   ASP.NET LinkButton (lbNewAbbreviation, ToolTip="New") shows readable text. */
body.page-abbreviations a[id$='_lbNewAbbreviation']::before {
    content: 'New Abbreviation';
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Definition is always the 2nd column (Abbreviation 1st, Edit 3rd/admin-only).
   grid.css + milbros-grid.css blank+centre the LAST column (the Edit icon column)
   via :last-of-type / :last-child, which also hits Definition when Edit is hidden
   (non-admin, Columns[2].Visible=false). Pin the 2nd column by position to a
   visible, left-aligned text column — overrides those last-column rules and never
   touches the Edit column (3rd), which keeps its blank+centre. */
body.page-abbreviations.page-grid td.dxgvHeader:nth-of-type(2),
body.page-abbreviations.page-grid td.dxgvHeader:nth-of-type(2) .tblColHeader td > div,
body.page-abbreviations.page-grid td.dxgvHeader:nth-of-type(2) .tblColHeader td > a {
    font-size: 14px !important;
    color: var(--q88-grid-fg, #0f172a) !important;
    text-align: left !important;
}
body.page-abbreviations.page-grid .dxgvDataRow > td:nth-of-type(2),
body.page-abbreviations.page-grid .dxgvDataRowAlt > td:nth-of-type(2) {
    text-align: left !important;
}

/* Card title — ModuleTemplateV2 on this page renders the Title label
   directly inside div.modV2Title (NO inner <td class="modV2Title">), so
   grid.css's 16px/600 title spec (`[id$='_pnlTitleLeft'] td.modV2Title`)
   never matches: the title fell back to the 12px/400 ambient text and
   wrapped to two lines (QEN-8801 "layout looks slightly off"). Restate the
   page-grid title spec on the div. !important + the extra .page-grid class
   are both required: grid.css resets div.modV2Title to font inherit
   !important at (0,2,2) and loads AFTER this file. */
body.page-abbreviations.page-grid div.modV2Title {
    font-family: var(--q88-grid-font, Inter, "Helvetica Neue", Arial, sans-serif);
    /* Figma node 666:11143 — title is text/lg (18px) semibold, not grid.css's 16px. */
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: var(--q88-grid-fg, #0f172a) !important;
    white-space: nowrap;
    /* The title row also hosts the relocated New Abbreviation CTA (§F9): make
       the title cell a full-width flex row so the button sits far-right while
       the letters strip (TitleRight, flex:0 0 100%) still wraps to its own row. */
    display: flex;
    align-items: center;
    flex: 1 1 100%;
}

/* Legacy navy header underline — the inline <style> in Abbreviations.ascx
   pins `border-bottom: 1px solid #003366` on the fixed DX header table by
   full ID (1,0,0). Per design, drop the underline entirely (the muted header
   fill already separates it from the rows); !important beats the inline
   <style>'s ID specificity. The header cell + SubHeader borders are killed in
   §F7/§F8 below. */
body.page-abbreviations [id$="_grdTerminology_DXHeaderTable"] {
    border-bottom: 0 !important;
}

/* Letters nav (TitleRight, phLetters) — the legacy render separates the 27
   letter links with `&nbsp;|&nbsp;` text-only cells (~1000px total); with
   the title restored to 16px/nowrap the strip no longer fit the title row
   and hung past the card edge. Hide the pipe cells (the only tds with no
   element children) and space the letters with padding instead. The active
   letter keeps its q88-text-error red + underline from the code-behind. */
body.page-abbreviations .modV2TRight td:not(:has(*)) {
    display: none;
}
/* Letter buttons — Figma node 666:11146.. : Inter 14px medium (500), teal
   (base/primary #0d9488), padded px16/h20, with a 1px right divider
   (base/border #e2e8f0) between letters. The pipe text-cells stay hidden
   (rule above); the divider is the button's own border-right. */
body.page-abbreviations .modV2TRight td a {
    display: inline-block;
    box-sizing: border-box;
    height: 20px;
    padding: 0 16px !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--border-default, #e2e8f0) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: var(--primary, #0d9488) !important;
}
/* Last letter (0-9) carries no trailing divider. */
body.page-abbreviations .modV2TRight td:last-child a {
    border-right: 0 !important;
}

/* ==========================================================================
   QEN-8801 — Figma re-skin (Account / Tools › Abbreviations, node 666:11134).
   Aligns this page to the supplied design: card chrome, "By Letter" on its
   own row below the title, the search row controls, and the grid header.
   Color truth from get_variable_defs: primary #0d9488, border #e2e8f0,
   muted #f1f5f9, foreground #0f172a, primary-foreground #eff6ff.
   ========================================================================== */

/* §F1 Card chrome — Figma "Card" uses rounded-xl (12px) corners and 24px
   interior padding (the global modV2 renders 8px / 16px). Scoped to this
   page to match the provided design. */
body.page-abbreviations [id$='_pnlMod'].modV2 {
    padding: 24px !important;
    border-radius: 12px !important;
}

/* §F2 "By Letter" on its own row — the ModuleTemplateV2 title bar is a flex
   row (title-left + the letters strip in TitleRight). Figma stacks them:
   title on row 1, the "By Letter" + A–Z strip on row 2, 24px below. Wrap the
   flex container and force the letters strip full-width so it drops down. */
/* !important throughout — grid.css loads AFTER this file (see title rule above)
   and sets the title bar to flex/nowrap, so plain declarations lose the tie. */
body.page-abbreviations .modV2TitleContainer {
    flex-wrap: wrap !important;
    row-gap: 24px !important;
    column-gap: 0 !important;
    align-items: center !important;
}
body.page-abbreviations .modV2TRight {
    flex: 0 0 100% !important;
    width: 100% !important;
    /* graceful degradation on narrow viewports: the letters table can't wrap
       (it is server-rendered as a single <tr>), so scroll rather than burst
       the card. At the design width (~1536px content) no scrollbar appears. */
    overflow-x: auto;
}
body.page-abbreviations .modV2TRight table {
    width: auto !important;   /* content width, left-aligned (Figma 1155px strip) */
}

/* §F3 "By Letter" label — Figma node 666:11145: Inter 14px semibold,
   foreground, no colon. The legacy render is bold "By letter:"; zero its font
   and repaint the exact label via ::before (same pattern as the CTA buttons). */
body.page-abbreviations .modV2TRight b {
    font-size: 0 !important;
    padding-right: 8px;
    white-space: nowrap;   /* keep "By Letter" on one line at narrow widths */
}
body.page-abbreviations .modV2TRight b::before {
    content: 'By Letter';
    font-size: 14px;
    font-weight: 600;
    color: var(--q88-grid-fg, #0f172a);
}

/* §F4 Search row — flatten the legacy &nbsp;-delimited inline cluster to a
   clean 12px rhythm. font-size:0 on the cell zeroes the stray &nbsp; text
   nodes (so they add no width); real controls restore 14px and own their
   12px left gap. */
body.page-abbreviations .dropDownContainer {
    font-size: 0;
    white-space: nowrap;
}
body.page-abbreviations .dropDownContainer > b,
body.page-abbreviations .dropDownContainer > select,
body.page-abbreviations .dropDownContainer > input,
body.page-abbreviations .dropDownContainer > a {
    font-size: 14px !important;
    vertical-align: middle;
}
/* Label — Figma node I685:1197;..728: 14px medium, foreground (not bold). */
body.page-abbreviations .dropDownContainer > b {
    font-weight: 500 !important;
    color: var(--q88-grid-fg, #0f172a) !important;
}
body.page-abbreviations .dropDownContainer > select,
body.page-abbreviations .dropDownContainer > input,
body.page-abbreviations .dropDownContainer > a[id$='_lbSearch'] {
    margin-left: 12px !important;
}

/* §F5 Search input — Figma node 0:34: h32, 1px border #e2e8f0, rounded-md
   (8px), 14px text, with a 16px magnifier (lucide search, muted #475569)
   inset on the left. The legacy markup pins height:18px / border #a6a7aa /
   radius 0 inline, so !important is required. */
body.page-abbreviations [id$='_txtKeyword'] {
    box-sizing: border-box !important;
    height: 32px !important;
    width: 260px !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 0 12px 0 34px !important;
    font-size: 14px;
    color: var(--q88-grid-fg, #0f172a);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 16px 16px;
    vertical-align: middle;
}
body.page-abbreviations [id$='_txtKeyword']::placeholder {
    color: var(--muted-foreground, #475569);
}

/* §F6 Search button — Figma node 685:1199: teal primary CTA. The legacy
   lbSearch LinkButton renders only a navy magnifier <img>; repaint it as the
   "Search" pill (hide the img, label via ::before). */
body.page-abbreviations a[id$='_lbSearch'] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    background: var(--primary, #0d9488) !important;
    color: var(--primary-foreground, #eff6ff) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
}
body.page-abbreviations a[id$='_lbSearch']:hover {
    background: var(--primary-hover, #0f766e);
    color: var(--primary-foreground, #eff6ff) !important;
}
body.page-abbreviations a[id$='_lbSearch'] img {
    display: none;
}
body.page-abbreviations a[id$='_lbSearch']::before {
    content: 'Search';
}

/* §F7 Grid header — Figma node 666:11169: header row h48, muted #f1f5f9 fill,
   14px semibold foreground. (grid.css renders #f5f5f5 / 500.) No bottom border
   — the muted fill is the only separator (per design feedback). */
body.page-abbreviations td.dxgvHeader {
    background-color: #f1f5f9 !important;
    font-weight: 600 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 0 !important;
}
/* Data rows — Figma rows are 42px tall (legacy ~37). Bump cell padding-y.
   The tr.dxgvDataRow descendant selector outweighs grid.css's td.dxgv rule. */
body.page-abbreviations tr.dxgvDataRow td.dxgv {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* §F8 Letters row → search row gap — Figma spaces the by-letter block 24px
   above the search row (grid.css leaves 16px between the title-bar row and the
   SubHeader). Add the remaining 8px above the SubHeader content. Also drop the
   legacy navy (#2d3663) underline grid.css paints below the search row. */
body.page-abbreviations .modV2SubHeader {
    margin-top: 8px !important;
    border-bottom: 0 !important;
}

/* §F9 New Abbreviation CTA — relocated from the search row (where it floated
   alone at the far right) into the card header, right-aligned with the title.
   Markup moved into <Title> (Abbreviations.ascx); push it to the row's right
   edge and keep its text at 14px (not the 18px title size). The teal pill +
   "New Abbreviation" ::before label still come from grid.css / top of file. */
body.page-abbreviations div.modV2Title > a[id$='_lbNewAbbreviation'] {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* §F10 New / Edit Abbreviation popup body — the uc:Modal chrome (card, header,
   X close, Cancel/Create footer) is painted globally by components.css §9.10;
   this section only re-skins the PopupContent form. The legacy markup
   (AbbreviationNew.ascx / AbbreviationEdit.ascx) renders raw native fields
   (2px inset border, 12px text, radius 0) inside a right-aligned label table.
   Restate the refresh field chrome to match the page search input (§F5): 1px
   #e2e8f0 border, rounded-md 8px, 14px text, teal focus ring. Scoped to
   .modPopContent under the page body so it covers BOTH the New and Edit popups
   (identical field structure) but not the text-only Delete-confirm modal. */

/* Label table — 96px right-aligned label column, top-aligned to the field's
   first text line, with 16px between the two field rows. */
body.page-abbreviations .modPopContent td {
    vertical-align: top;
    padding-bottom: 16px;
}
body.page-abbreviations .modPopContent tr:last-child td {
    padding-bottom: 0;
}
body.page-abbreviations .modPopContent td:first-child {
    width: 104px;
    text-align: left;
    padding-top: 9px;
    padding-right: 12px;
    white-space: nowrap;
}
/* Labels — Inter 14px medium slate-900 (legacy renders them 12px/700). */
body.page-abbreviations .modPopContent td b {
    font-size: 14px;
    font-weight: 500;
    color: var(--q88-grid-fg, #0f172a);
}

/* Fields — match §F5 chrome. width:100% fills the value cell; !important
   defeats the inline width / native border the ASP.NET TextBox emits. */
body.page-abbreviations .modPopContent input,
body.page-abbreviations .modPopContent textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: inherit;
    color: var(--q88-grid-fg, #0f172a) !important;
    background-color: #ffffff !important;
}
body.page-abbreviations .modPopContent input {
    height: 36px !important;
    padding: 0 12px !important;
    line-height: 34px !important;
}
body.page-abbreviations .modPopContent textarea {
    min-height: 92px !important;
    padding: 8px 12px !important;
    line-height: 20px !important;
    resize: vertical;
}
body.page-abbreviations .modPopContent input:focus,
body.page-abbreviations .modPopContent textarea:focus {
    outline: none !important;
    border-color: var(--primary, #0d9488) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15) !important;
}
body.page-abbreviations .modPopContent input::placeholder,
body.page-abbreviations .modPopContent textarea::placeholder {
    color: var(--muted-foreground, #475569);
}