/* ==========================================================================
   Charter Party Terms & Clauses (Clauses.aspx + terms_*.aspx → Terms.ascx)
   ----------------------------------------------------------------------------
   Scoped via `body.page-charter-clauses`. Shared card chrome (ModuleTemplateV2
   frame, title rail) comes from grid.css via the `body.page-grid` co-class
   set in Default.Master.cs.

   .ascx structure (DesktopModules/Q88/Terms.ascx):
     <uc:ModuleTemplateV2 id="pnlViewTerms">
       <Title>      → lblTitle ("Charter Party Terms & Clauses")
       <SubHeader>  → .cpClauses-toolbar
                       .cpClauses-field
                         .cpClauses-field__label   (sits LEFT of input)
                         .cpClauses-search        (input chrome: icon, input,
                                                   Title-only checkbox)
                       a.cpClauses-search__submit (teal pill, OUTSIDE chrome)
                       a.cpClauses-search__clear  (ghost, conditional)
                       a.cpClauses-search__addnew (admin only)
       <Main>
         <p.cpClauses-intro> Contact paragraph
         <asp:DataGrid id="dgTerms" CssClass="sTbl">

   Figma reference: file oM4wJDLxiHlaKMCy6GvTXs, node 28:13364 (Hover Card —
   the canonical CP Clauses panel). Variables: Inter, base/foreground #0f172a,
   base/muted #f1f5f9, base/border #e2e8f0, base/primary #0d9488, radius 8px,
   text-sm 14/20, text-lg 18/leading-none.
   ========================================================================== */

/* ==========================================================================
   1. Title — single-row title bar, no TitleRight strip.
      Terms.ascx puts <asp:Label id="lblTitle"/> directly inside <Title>.
      ModuleTemplateV2 binds that into pnlTitleLeft (class modV2Title), so
      there's no inner <td class="modV2Title"> for grid.css typography to
      key off. Target pnlTitleLeft.modV2Title directly with specificity
      0,3,1 to beat grid.css's `body.page-grid div.modV2Title` reset (0,2,2).

      Figma: Inter Semi Bold 18px, line-height: 1 (leading-none).
   ========================================================================== */
body.page-charter-clauses [id$='_pnlViewTerms_pnlTitle'] {
    flex-wrap: nowrap !important;
}

body.page-charter-clauses [id$='_pnlViewTerms_pnlTitleLeft'].modV2Title,
body.page-charter-clauses [id$='_pnlViewTerms_pnlTitleLeft'] [id$='_lblTitle'] {
    font-family: var(--q88-grid-font);
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #000 !important;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

/* TitleRight container is empty now (no A-Z strip). Hide whatever grid.css
   reserves for it so it doesn't push the title row taller. */
body.page-charter-clauses [id$='_pnlViewTerms_pnlTitleRight'] {
    display: none !important;
}

/* ==========================================================================
   2. SubHeader toolbar — label LEFT of input + Search button to the right,
      mirrors Figma 28:13364 "Field" composite (433px wide group + submit).
      The legacy `txtSearchInline` checkbox ("Title only") stays inside the
      input chrome per product direction (kept as-is).
   ========================================================================== */
body.page-charter-clauses [id$='_pnlViewTerms_pnlSubHeader'] {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 16px 0;
}

body.page-charter-clauses .cpClauses-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* inline search box removed — Search / Clear / Add New links sit right */
    gap: 16px;
    width: 100%;
}

/* Field: label + input. Width sits around 433px per Figma but allow it to
   flex up to 640px on wide viewports for breathing room. */
body.page-charter-clauses .cpClauses-field {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 640px;
    min-width: 0;
}

body.page-charter-clauses .cpClauses-field__label {
    flex-shrink: 0;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--q88-grid-fg);
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

/* Input chrome — 32px tall, 8px radius. Holds icon, input, and Title-only
   checkbox. Figma input is `bg=white, border=#e2e8f0, h=32, radius=8`. */
body.page-charter-clauses .cpClauses-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 4px 12px;
    background: var(--q88-grid-card);
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

body.page-charter-clauses .cpClauses-search:focus-within {
    border-color: var(--q88-grid-primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.15);
}

body.page-charter-clauses .cpClauses-search__icon {
    display: inline-flex;
    align-items: center;
    color: var(--q88-grid-muted-fg);
    flex-shrink: 0;
}

/* Input — transparent against the chrome, Inter 14/20. MainWhiteout.css ships
   `input { font-family: Tahoma }` which wins via cascade unless overridden
   with !important. */
body.page-charter-clauses [id$='_txtSearchInline'].cpClauses-search__input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    height: 22px;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--q88-grid-fg) !important;
    border: 0 !important;
    outline: 0 !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

body.page-charter-clauses [id$='_txtSearchInline'].cpClauses-search__input::placeholder {
    color: var(--q88-grid-muted-fg);
    opacity: 1;
}

/* "Title only" checkbox — small, muted, sits to the right of the input on a
   divider. asp:CheckBox renders as <span class="cpClauses-search__opt">
   wrapping <input type=checkbox> + <label>. */
body.page-charter-clauses .cpClauses-search__opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 0 0 8px;
    border-left: 1px solid var(--q88-grid-border);
    color: var(--q88-grid-muted-fg);
    font-family: var(--q88-grid-font);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

body.page-charter-clauses .cpClauses-search__opt input[type="checkbox"] {
    margin: 0;
    accent-color: var(--q88-grid-primary);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

body.page-charter-clauses .cpClauses-search__opt label {
    cursor: pointer;
    color: inherit;
}

/* Search submit — teal pill OUTSIDE the input chrome (Figma 28:14839).
   32px tall, 8px radius, padding 12/8, text-xs 12/16 Medium. */
body.page-charter-clauses .cpClauses-search__submit,
body.page-charter-clauses .cpClauses-search__submit:link,
body.page-charter-clauses .cpClauses-search__submit:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary-fg) !important;
    border: 1px solid var(--q88-grid-primary) !important;
    font-family: var(--q88-grid-font);
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-charter-clauses .cpClauses-search__submit:hover {
    background: var(--q88-grid-primary-hover) !important;
    border-color: var(--q88-grid-primary-hover) !important;
    color: var(--q88-grid-primary-fg) !important;
}

/* asp:LinkButton renders <ins>&nbsp;</ins> before the label (legacy spacer);
   inside a flex/inline-flex context it becomes a flex item and shifts the
   label off-center. Strip it. */
body.page-charter-clauses .cpClauses-search__submit > ins,
body.page-charter-clauses .cpClauses-search__clear > ins,
body.page-charter-clauses .cpClauses-search__addnew > ins {
    display: none !important;
}

/* Clear button — ghost outline, only shows when a filter is active. */
body.page-charter-clauses [id$='_btnSearchInlineClear'].cpClauses-search__clear,
body.page-charter-clauses [id$='_btnSearchInlineClear'].cpClauses-search__clear:link,
body.page-charter-clauses [id$='_btnSearchInlineClear'].cpClauses-search__clear:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--q88-grid-muted-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
    font-family: var(--q88-grid-font);
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

body.page-charter-clauses [id$='_btnSearchInlineClear'].cpClauses-search__clear:hover {
    background: var(--q88-grid-row-hover) !important;
    color: var(--q88-grid-fg) !important;
    border-color: var(--q88-grid-primary) !important;
}

/* Toolbar action buttons — Search / Clear / Add New. Identical outline pills,
   sitting next to each other at the right of the toolbar (the toolbar's
   justify-content:flex-end + gap handles alignment + spacing, so no
   margin-left:auto here). */
body.page-charter-clauses .cpClauses-search__addnew,
body.page-charter-clauses .cpClauses-search__addnew:link,
body.page-charter-clauses .cpClauses-search__addnew:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: var(--q88-grid-card) !important;
    background-image: none !important;
    color: var(--q88-grid-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
    font-family: var(--q88-grid-font);
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

body.page-charter-clauses .cpClauses-search__addnew:hover {
    background: var(--q88-grid-row-hover) !important;
    border-color: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary) !important;
}

/* ==========================================================================
   2b. Selection step — "By letter: A..Z 0-9" navigation (restored legacy
       landing). Renders below the search toolbar in the SubHeader; each link
       routes to ~/terms_<letter>.aspx. Built server-side by LetterNavigation().
   ========================================================================== */
body.page-charter-clauses .cpClauses-letters {
    margin-top: 12px;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--q88-grid-fg);
}

body.page-charter-clauses .cpClauses-letters__table {
    border-collapse: collapse;
}

body.page-charter-clauses .cpClauses-letters__table td {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--q88-grid-muted-fg, #64748b);
    white-space: nowrap;
}

body.page-charter-clauses a.cpClauses-letters__link,
body.page-charter-clauses a.cpClauses-letters__link:link,
body.page-charter-clauses a.cpClauses-letters__link:visited {
    color: var(--q88-grid-primary);
    text-decoration: none;
    font-weight: 500;
    padding: 0 2px;
}

body.page-charter-clauses a.cpClauses-letters__link:hover {
    text-decoration: underline;
}

/* Active letter (current terms_<X>.aspx) — slate + bold, replacing the legacy
   inline red/underline ForeColor that the code-behind used to set. */
body.page-charter-clauses a.cpClauses-letters__link--active,
body.page-charter-clauses a.cpClauses-letters__link--active:link,
body.page-charter-clauses a.cpClauses-letters__link--active:visited {
    color: var(--q88-grid-fg);
    font-weight: 700;
    text-decoration: underline;
}

/* ==========================================================================
   2c. Landing selection-step content — "Click a letter above..." prompt +
       Statistics box + Contact line, emitted by TermDB.GetTermStats() into
       litStats. Shown only on the no-letter / no-search landing. Centered,
       with the stats table repainted as a small refresh card (the raw HTML
       carries legacy class="GridHeader" + inline bgcolor=#C0C0C0).
   ========================================================================== */
body.page-charter-clauses .cpClauses-stats {
    margin-top: 16px;
    /* !important: the litStats markup is legacy (bare <br>/<p>/<table> + <td>
       classes) that MainWhiteout.css aligns left; force the centred layout the
       old view used. */
    text-align: center !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--q88-grid-fg);
}

/* Center the inline <p>/text nodes GetTermStats emits as well. */
body.page-charter-clauses .cpClauses-stats p,
body.page-charter-clauses .cpClauses-stats td {
    text-align: center !important;
}

body.page-charter-clauses .cpClauses-stats a,
body.page-charter-clauses .cpClauses-stats a:link,
body.page-charter-clauses .cpClauses-stats a:visited {
    color: var(--q88-grid-primary);
    font-weight: 500;
    text-decoration: underline;
}

/* The stats table (GetTermStats) — center it as a small bordered card and
   drop the legacy #C0C0C0 gray fill. */
body.page-charter-clauses .cpClauses-stats table {
    margin: 12px auto !important;
    border-collapse: collapse;
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--q88-grid-card) !important;
    min-width: 220px;
}

body.page-charter-clauses .cpClauses-stats table .GridHeader,
body.page-charter-clauses .cpClauses-stats table td.GridHeader {
    background: var(--q88-grid-muted) !important;
    background-image: none !important;
    color: var(--q88-grid-fg) !important;
    font-weight: 600;
    padding: 8px 16px;
    border-bottom: 1px solid var(--q88-grid-border);
}

body.page-charter-clauses .cpClauses-stats table td {
    padding: 6px 16px;
    border-bottom: 1px solid var(--q88-grid-border);
    color: var(--q88-grid-fg);
    background: var(--q88-grid-card) !important;
}

/* ==========================================================================
   3. Intro / Contact paragraph (Figma 28:13363)
      Body sentence with an inline "Contact" link. Semi Bold 14/20 black,
      Contact = underlined inline link. Renders ABOVE the table (Figma order).
   ========================================================================== */
body.page-charter-clauses .cpClauses-intro {
    margin: 0 0 16px 0;
    padding: 0;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
}

body.page-charter-clauses .cpClauses-intro__link,
body.page-charter-clauses .cpClauses-intro__link:link,
body.page-charter-clauses .cpClauses-intro__link:visited {
    color: #000 !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-shadow: none !important;
    background: transparent !important;
}

body.page-charter-clauses .cpClauses-intro__link:hover {
    color: var(--q88-grid-primary) !important;
    text-decoration: underline;
}

/* ==========================================================================
   4. DataGrid (dgTerms) — table.sTbl
      Mirrors the Figma table component (28:16406): muted #f1f5f9 header bg,
      14px Semi Bold header cells (NOT uppercase), 48px header row height,
      42px body rows, 14px Regular body text, 1px bottom border #e2e8f0.
      The DataGrid sets HeaderStyle-CssClass to "darkBlueBackground
      GridHeaderColumn" — both classes paint navy bg via MainWhiteout; we
      override.
   ========================================================================== */
body.page-charter-clauses table.sTbl {
    width: 100% !important;
    border-collapse: collapse;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--q88-grid-fg);
    background: var(--q88-grid-card);
}

body.page-charter-clauses table.sTbl tr.darkBlueBackground td,
body.page-charter-clauses table.sTbl tr.GridHeaderColumn td,
body.page-charter-clauses table.sTbl tr.darkBlueBackground.GridHeaderColumn td,
body.page-charter-clauses table.sTbl .darkBlueBackground td,
body.page-charter-clauses table.sTbl .GridHeaderColumn td {
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    text-transform: none;
    color: var(--q88-grid-fg) !important;
    background: var(--q88-grid-muted) !important;
    background-image: none !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q88-grid-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    text-align: left;
    vertical-align: middle;
}

/* Header anchors (sortable column links) — keep neutral text colour. */
body.page-charter-clauses table.sTbl tr.darkBlueBackground a,
body.page-charter-clauses table.sTbl tr.GridHeaderColumn a {
    color: var(--q88-grid-fg) !important;
    text-decoration: none !important;
    font-weight: 600;
}

/* Data rows — exclude pager + header. No explicit `height` (cells are
   content-box; height plus padding double-counts and renders at ~65px).
   Padding 11px + line-height 20px + 1px border = 43px row ≈ Figma 42px. */
body.page-charter-clauses table.sTbl > tbody > tr:not(.darkBlueBackground):not(.GridHeaderColumn):not(.cpClauses-pager) > td {
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--q88-grid-fg) !important;
    background: var(--q88-grid-card) !important;
    padding: 11px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q88-grid-border) !important;
    vertical-align: middle;
    text-align: left !important;
}

body.page-charter-clauses table.sTbl > tbody > tr:not(.darkBlueBackground):not(.GridHeaderColumn):not(.cpClauses-pager):hover > td {
    background: var(--q88-grid-row-hover) !important;
}

body.page-charter-clauses table.sTbl > tbody > tr:not(.darkBlueBackground):not(.GridHeaderColumn):not(.cpClauses-pager):last-of-type > td {
    border-bottom: 0 !important;
}

/* Cell anchors — Figma 28:13364 renders Charterer / Terms as plain
   black text (no hyperlink colour), with the pen icon as the affordance.
   Match: black foreground in rest state, teal on hover. */
body.page-charter-clauses table.sTbl > tbody > tr:not(.darkBlueBackground):not(.GridHeaderColumn):not(.cpClauses-pager) a,
body.page-charter-clauses table.sTbl > tbody > tr:not(.darkBlueBackground):not(.GridHeaderColumn):not(.cpClauses-pager) a:link,
body.page-charter-clauses table.sTbl > tbody > tr:not(.darkBlueBackground):not(.GridHeaderColumn):not(.cpClauses-pager) a:visited {
    color: var(--q88-grid-fg) !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

body.page-charter-clauses table.sTbl > tbody > tr:not(.darkBlueBackground):not(.GridHeaderColumn):not(.cpClauses-pager) a:hover {
    color: var(--q88-grid-primary) !important;
    text-decoration: underline;
}

/* DataGrid width — the .ascx sets Width="975px" which renders as inline
   `style="width: 975px"`. Override so the table fills the card. */
body.page-charter-clauses table.sTbl[style*="975px"] {
    width: 100% !important;
}

/* SearchResult clause cells wrap long words so a single multi-thousand-
   character clause body (Highlight-injected HTML, no break opportunities
   inside encoded `&lt;br/&gt;` runs) does not expand the table past the
   viewport. `overflow-wrap: break-word` only breaks a long word AT its
   end when it overflows — leaves natural word-wrapping for normal text. */
body.page-charter-clauses table.sTbl > tbody > tr:not(.darkBlueBackground):not(.GridHeaderColumn):not(.cpClauses-pager) > td {
    overflow-wrap: break-word;
}

/* Pen edit icon — NO per-page rule. The earlier approach overlaid the Lucide
   pen on the parent <td>::after (pointer-events:none) while the real <input
   type="image"> was opacity:0 at its own position, so the visible icon and the
   clickable element were misaligned — the icon wasn't clickable and clicks fell
   through to the row (navigating to the term content). The global components.css
   swap (`body.sidebar-nav input[type='image'].Img-Std-EditV2`, §16.6) already
   paints the Lucide pen *on* the clickable input itself (24×24, masked,
   currentColor + teal hover), so the icon IS the button. Letting that global
   rule apply makes the edit pen both correctly skinned and clickable. */

/* ==========================================================================
   5. Pagination (Figma 28:16659) — shadcn-style pager footer.
      DataGrid emits PagerStyle-CssClass="cpClauses-pager" on a <tr>; in
      NumericPages mode the cells inside that row are <a> for page numbers
      and <span> for the current page. PageButtonCount=5 keeps the visible
      range to "1 2 3 4 5" plus ... when there are more pages.

      Match: muted-bg footer strip (#f1f5f9), 36px tall pills, current page
      rendered as a white card with 1px border + xs shadow.
   ========================================================================== */
body.page-charter-clauses table.sTbl tr.cpClauses-pager > td {
    background: var(--q88-grid-muted) !important;
    background-color: var(--q88-grid-muted) !important;
    background-image: none !important;
    border: 0 !important;
    padding: 6px 16px !important;
    text-align: right !important;
    font-family: var(--q88-grid-font);
}

/* Numeric pages — anchors. Ghost pill, 36×36, gap controlled by an inline
   text-node " " between siblings; collapse with font-size: 0 on the parent
   td and reset on the children. */
body.page-charter-clauses table.sTbl tr.cpClauses-pager > td {
    font-size: 0 !important;
}

body.page-charter-clauses table.sTbl tr.cpClauses-pager a,
body.page-charter-clauses table.sTbl tr.cpClauses-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    margin: 0 2px;
    background: transparent;
    color: var(--q88-grid-fg);
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

body.page-charter-clauses table.sTbl tr.cpClauses-pager a:link,
body.page-charter-clauses table.sTbl tr.cpClauses-pager a:visited {
    color: var(--q88-grid-fg);
    text-decoration: none;
}

body.page-charter-clauses table.sTbl tr.cpClauses-pager a:hover {
    background: var(--q88-grid-card);
    border-color: var(--q88-grid-border);
    color: var(--q88-grid-primary);
}

/* Current page = <span>, painted as a white card with subtle border + xs
   shadow to lift it above the muted strip. Mirrors Figma "active" item
   208:1687 (white bg, border #e2e8f0, drop-shadow xs). */
body.page-charter-clauses table.sTbl tr.cpClauses-pager span {
    background: var(--q88-grid-card);
    border-color: var(--q88-grid-border);
    color: var(--q88-grid-fg);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: default;
}

/* Hide single-page pager (only one <span>, no <a> siblings). */
body.page-charter-clauses table.sTbl tr.cpClauses-pager:not(:has(a)) {
    display: none !important;
}

/* ==========================================================================
   6. No-terms-found warning label — lblNoTermsFound is set when search
      returns empty.
   ========================================================================== */
body.page-charter-clauses [id$='_lblNoTermsFound']:empty {
    display: none !important;
}

body.page-charter-clauses [id$='_lblNoTermsFound']:not(:empty) {
    display: inline-block;
    margin: 16px 0;
    padding: 12px 20px;
    background: #fef3c7;
    color: #92400e !important;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   7. pnlSearch popup view — kept in markup for legacy/external linkers but
      no longer reachable from the new toolbar. Style minimally so if it
      does render it doesn't look broken.
   ========================================================================== */
body.page-charter-clauses [id$='_pnlSearch_pnlMain'] table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

body.page-charter-clauses [id$='_pnlSearch_pnlMain'] table td {
    padding: 8px 12px !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--q88-grid-fg);
    background: transparent;
    border: 0;
    vertical-align: middle;
}

body.page-charter-clauses [id$='_pnlSearch_pnlMain'] input[type="text"] {
    height: 36px !important;
    min-width: 280px;
    padding: 0 12px !important;
    border: 1px solid var(--q88-grid-border) !important;
    border-radius: 8px !important;
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

body.page-charter-clauses [id$='_pnlSearch_pnlFooter'] a.LinkButton,
body.page-charter-clauses [id$='_pnlSearch_pnlFooter'] a.LinkButton:link,
body.page-charter-clauses [id$='_pnlSearch_pnlFooter'] a.LinkButton:visited,
body.page-charter-clauses [id$='_pnlTermDetails_pnlFooter'] a.LinkButton,
body.page-charter-clauses [id$='_pnlTermDetails_pnlFooter'] a.LinkButton:link,
body.page-charter-clauses [id$='_pnlTermDetails_pnlFooter'] a.LinkButton:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 36px !important;
    min-width: 88px;
    padding: 0 16px !important;
    margin: 0 4px;
    background: var(--q88-grid-card) !important;
    background-image: none !important;
    color: var(--q88-grid-fg) !important;
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

body.page-charter-clauses [id$='_btnSearchTerms'],
body.page-charter-clauses [id$='_btnSearchTerms']:link,
body.page-charter-clauses [id$='_btnSearchTerms']:visited {
    background: var(--q88-grid-primary) !important;
    border-color: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary-fg) !important;
}

body.page-charter-clauses [id$='_pnlSearch_pnlFooter'] a.LinkButton > ins,
body.page-charter-clauses [id$='_pnlSearch_pnlFooter'] a.LinkButton img,
body.page-charter-clauses [id$='_pnlTermDetails_pnlFooter'] a.LinkButton > ins,
body.page-charter-clauses [id$='_pnlTermDetails_pnlFooter'] a.LinkButton img {
    display: none !important;
}

/* ==========================================================================
   8. Term Details view (pnlTermDetails)
      SubHeader actions (Admin / Back / Email) — same pill rhythm as the
      toolbar. Article-style content table with trHdr heading and Repeater
      rows.
   ========================================================================== */
body.page-charter-clauses [id$='_pnlTermDetails_pnlSubHeader'] {
    padding: 8px 0;
}

body.page-charter-clauses [id$='_pnlTermDetails_pnlSubHeader'] > div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    font-size: 0;
}

body.page-charter-clauses [id$='_pnlTermDetails_pnlSubHeader'] a.linkWHover,
body.page-charter-clauses [id$='_pnlTermDetails_pnlSubHeader'] a.linkWHover:link,
body.page-charter-clauses [id$='_pnlTermDetails_pnlSubHeader'] a.linkWHover:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 32px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-fg) !important;
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.page-charter-clauses [id$='_pnlTermDetails_pnlSubHeader'] a.linkWHover:hover {
    background: var(--q88-grid-row-hover) !important;
    border-color: var(--q88-grid-primary);
    color: var(--q88-grid-primary) !important;
}

body.page-charter-clauses [id$='_pnlTermDetails_pnlSubHeader'] a.linkWHover > ins {
    display: none !important;
}

body.page-charter-clauses [id$='_pnlTermDetails_pnlMain'] table.sTbl tr.trHdr td {
    font-family: var(--q88-grid-font);
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    color: var(--q88-grid-fg) !important;
    background: var(--q88-grid-muted) !important;
    background-image: none !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q88-grid-border) !important;
    text-align: center !important;
}

body.page-charter-clauses [id$='_pnlTermDetails_pnlMain'] table.sTbl > tbody > tr:not(.trHdr) > td {
    padding: 12px 18px !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 22px !important;
    color: var(--q88-grid-fg) !important;
    background: var(--q88-grid-card) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q88-grid-border) !important;
    vertical-align: top !important;
}

body.page-charter-clauses [id$='_pnlTermDetails_pnlMain'] table.sTbl > tbody > tr:not(.trHdr) > td:first-child {
    width: 80px;
    color: var(--q88-grid-muted-fg) !important;
    font-weight: 600;
    white-space: nowrap;
}

/* ==========================================================================
   9. Beta footer notice — fixed red bar at bottom (Visible="false" by
      default; on if support enables it).
   ========================================================================== */
body.page-charter-clauses #footer.footerNote {
    background-color: #b91c1c;
    font-family: var(--q88-grid-font);
    font-size: 13px;
    line-height: 20px;
    padding: 8px 16px;
}

body.page-charter-clauses #footer.footerNote a {
    color: #ffffff !important;
    text-decoration: underline;
}