/* ==========================================================================
   Manage Users page (Users.aspx → DesktopModules/Q88/UserManagement.ascx)
   full page skin.
   ----------------------------------------------------------------------------
   Scoped via `body.page-usermanagement`. Like vessel.aspx, this page still
   uses the LEGACY <uc:ModuleTemplate> wrapper (.modContainerStd /
   .modInnerContainer / .modTLeft / .modTRight) and the body grid is an
   <asp:Repeater> rendering <table class="StdTable">, NOT the
   <uc:ModuleTemplateV2> + ASPxGridView combo grid.css was built for.

   So we re-implement the same visual language (white card, soft shadow,
   12px radius, 18px page title, 32px filter pills, teal #0d9488 primary
   CTA, light grid header, hover rows) directly against the legacy class
   names. Tokens mirror grid.css so this page looks identical to
   Inspections / Manage Vessels at a glance.

   Differences from vessel-management.css:
     - Wrapper class is `.modContainerStd` (not `Large`).
     - Title bar host: `lnkAddNew` (primary), `lnkReminderList` (secondary).
     - Filter table id is `tblCompany` (not `tblAdmin`); inside `.modSub1`.
     - Data rows render with `class="Alt"` (NOT `GridData`/`GridDataAlt`).
     - "Group header" rows for company sections use `class="modTitleHeader"`
       or `class="GridHeaderLightDull blackText"` — given a soft band so the
       hierarchy reads.
     - Secondary repeater (rptUserManagement) uses `tr.SubHeader2` /
       `tr.GridData` — both styled here too.
     - Alphabet pager links (`A.SiteLink` / `A.Warning`) re-skinned as
       small chips so the A-Z filter feels first-class.
   ========================================================================== */

body.page-usermanagement {
    --q88-grid-fg: #0a0a0a;
    --q88-grid-muted: #f5f5f5;
    --q88-grid-muted-fg: var(--text-muted);
    --q88-grid-placeholder: #737373;
    --q88-grid-border: #e5e5e5;
    --q88-grid-card: #ffffff;
    --q88-grid-primary: var(--primary);
    --q88-grid-primary-hover: var(--button-primary-hover);
    --q88-grid-primary-fg: #ffffff;
    --q88-grid-row-hover: var(--surface-card);
    --q88-grid-group-bg: var(--surface-muted);
    --q88-grid-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   1. Module wrapper — flatten legacy ModuleTemplate chrome into a clean card.
      .modContainerStd is the <table>, .modInnerContainer is the <div> inside.
   ========================================================================== */

body.page-usermanagement .modContainerStd,
body.page-usermanagement .modContainerLarge {
    background: var(--q88-grid-card);
    border: 1px solid var(--q88-grid-border);
    border-radius: 12px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.06),
        0 1px 2px -1px rgba(0, 0, 0, 0.05);
    font-family: var(--q88-grid-font);
    color: var(--q88-grid-fg);
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    min-width: 0;
    margin: 16px 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

body.page-usermanagement .modInnerContainer,
body.page-usermanagement .modInnerContainerIsAlert {
    border: 0 !important;
    background: transparent;
    padding: 16px 20px 20px;
}

body.page-usermanagement .modAboveLeft,
body.page-usermanagement .modAboveRight,
body.page-usermanagement .modBelowLeft,
body.page-usermanagement .modBelowRight {
    display: none;
}

/* ==========================================================================
   2. Title bar — "Manage Users" label (left) + action pills (right).
      Convert the legacy float layout to flex on a single 40px row.
   ========================================================================== */

body.page-usermanagement .modTitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    width: 100%;
    background: transparent;
    overflow: visible;
    margin: 0 0 16px 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}

body.page-usermanagement .modTLeft,
body.page-usermanagement .modTRight {
    float: none !important;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: transparent;
}

body.page-usermanagement .modTLeft {
    font-family: var(--q88-grid-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--q88-grid-fg);
    line-height: 28px;
    letter-spacing: 0;
    text-transform: none;
}

/* Onboard counter label — render as a muted tag next to the title. */
body.page-usermanagement .modTLeft span[id$='_lblOnboardCount'] {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--q88-grid-muted);
    color: var(--q88-grid-muted-fg);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

body.page-usermanagement .modTRight {
    margin-left: auto;
    /* Same `&nbsp;` flex-inflation trick as vessel-management.css —
       the .ascx separates LinkButtons with literal `&nbsp;` runs, so we
       collapse whitespace items to 0 and use a 4px container gap (×2 gap
       boundaries between siblings → 8px effective spacing). */
    font-size: 0;
    gap: 4px;
}

/* The `<img src="/images/clearpixel.gif">` 1px spacers in TitleRight render
   as flex items inside .modTRight — collapse them so the pill row is clean. */
body.page-usermanagement .modTRight > span > img,
body.page-usermanagement .modTRight img[src$='clearpixel.gif'] {
    display: none !important;
}

/* ==========================================================================
   3. Action buttons in the title bar.
      lnkAddNew → primary teal pill (matches Inspections "Create New").
      lnkReminderList ("Map" link) → hidden in the refreshed skin.
      ddlCompany (when visible) → 32px filter-pill style.
   ========================================================================== */

body.page-usermanagement .modTRight a,
body.page-usermanagement .modTRight a:link,
body.page-usermanagement .modTRight a:visited,
body.page-usermanagement .modTRight a:hover {
    color: var(--q88-grid-fg);
    text-decoration: none;
}

/* Primary CTA — "Add New User" */
body.page-usermanagement .modTRight a[id$='_lnkAddNew'] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px !important;
    border-radius: 9999px;
    background: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
    border: 1px solid var(--q88-grid-primary) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-usermanagement .modTRight a[id$='_lnkAddNew']:hover,
body.page-usermanagement .modTRight a[id$='_lnkAddNew']:focus {
    background: var(--q88-grid-primary-hover) !important;
    border-color: var(--q88-grid-primary-hover) !important;
    color: var(--q88-grid-primary-fg) !important;
}

/* "Map" reminder-list link (lnkReminderList, wrapped in spanReminderList) —
   removed from the refreshed Manage Users title bar. The code-behind force-
   sets `spanReminderList.Visible = true` (UserManagement.ascx.cs ~L285), so
   we hide it here rather than touching compiled code. Scoped to the refresh
   body class, so the legacy (non-refresh) page is unaffected. */
body.page-usermanagement .modTRight span[id$='_spanReminderList'],
body.page-usermanagement .modTRight a[id$='_lnkReminderList'] {
    display: none !important;
}

/* Optional company dropdown in the title bar (admin/Q88 staff only). */
body.page-usermanagement .modTRight select[id$='_ddlCompany'] {
    height: 32px;
    min-width: 200px;
    padding: 6px 32px 6px 12px;
    background-color: var(--q88-grid-card);
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    color: var(--q88-grid-fg);
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) 50%;
    background-size: 12px 12px;
    cursor: pointer;
    box-sizing: border-box;
}

/* ==========================================================================
   4. Filter / search row — table#tblCompany inside .modSub1.
      Houses: Status:[show] [list] Go | Search:[textbox] [Search] [chk Allportals]
      [chk Deleted] [chk Address/Phone] [chk Comments] [chk Onboard only]
      [Delete] [Restore]
   ========================================================================== */

body.page-usermanagement .modSub1 {
    background: transparent;
    padding: 0;
    margin: 0 0 12px 0;
}

body.page-usermanagement .modSub1 table[id$='tblCompany'],
body.page-usermanagement table[id$='tblCompany'] {
    width: 100%;
    margin: 0 0 8px 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

body.page-usermanagement table[id$='tblCompany'] tr,
body.page-usermanagement table[id$='tblCompany'] tr.SubHeaderAdmin {
    background: transparent !important;
    background-image: none !important;
}

body.page-usermanagement table[id$='tblCompany'] td {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 4px;
    /* MainWhiteout forces tahoma onto every <td> via !important — escape it. */
    font-family: var(--q88-grid-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--q88-grid-muted-fg);
    vertical-align: middle;
    /* 32px line-height on the filter td gives every inline child (text labels,
       form controls, link buttons, checkboxes) the same line box, so they
       sit on a single y-axis. */
    line-height: 32px;
}

/* Bold text labels rendered as raw `<b>Status:</b>` / `<b>Search:</b>` —
   convert to the lighter all-caps tag treatment we use across the new skin. */
body.page-usermanagement table[id$='tblCompany'] td b {
    font-family: var(--q88-grid-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--q88-grid-muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

body.page-usermanagement table[id$='tblCompany'] select,
body.page-usermanagement table[id$='tblCompany'] input[type='text'],
body.page-usermanagement table[id$='tblCompany'] input[type='checkbox'],
body.page-usermanagement table[id$='tblCompany'] input[type='submit'],
body.page-usermanagement table[id$='tblCompany'] a.LinkButton,
body.page-usermanagement table[id$='tblCompany'] label {
    vertical-align: middle;
}

/* Native <select> + <input type=text> → 32px filter pills. */
body.page-usermanagement table[id$='tblCompany'] select,
body.page-usermanagement table[id$='tblCompany'] input[type='text'] {
    height: 32px;
    min-width: 200px;
    padding: 6px 12px;
    background-color: var(--q88-grid-card);
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    color: var(--q88-grid-fg);
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
}

body.page-usermanagement table[id$='tblCompany'] select {
    padding-right: 32px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) 50%;
    background-size: 12px 12px;
    cursor: pointer;
}

body.page-usermanagement table[id$='tblCompany'] input[type='text'] {
    min-width: 220px;
}

body.page-usermanagement table[id$='tblCompany'] select:focus,
body.page-usermanagement table[id$='tblCompany'] input[type='text']:focus {
    border-color: var(--q88-grid-primary);
    outline: 2px solid var(--q88-grid-primary);
    outline-offset: -1px;
}

/* Inline LinkButtons + asp:Buttons in the filter row (Go / Search / Delete /
   Restore) — clean ghost-outline pills, overriding MainWhiteout's `.LinkButton`
   solid-pill !important rules. */
body.page-usermanagement table[id$='tblCompany'] a.LinkButton,
body.page-usermanagement table[id$='tblCompany'] input[type='submit'].LinkButton,
body.page-usermanagement table[id$='tblCompany'] input[type='submit'].CommandButton,
body.page-usermanagement table[id$='tblCompany'] a.CommandButton {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    height: 32px;
    padding: 0 14px !important;
    border-radius: 8px;
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-usermanagement table[id$='tblCompany'] a.LinkButton:hover,
body.page-usermanagement table[id$='tblCompany'] input[type='submit'].LinkButton:hover,
body.page-usermanagement table[id$='tblCompany'] input[type='submit'].CommandButton:hover,
body.page-usermanagement table[id$='tblCompany'] a.CommandButton:hover {
    background: var(--q88-grid-row-hover) !important;
    border-color: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary) !important;
}

/* The "Search" LinkButton wraps an ImageManager — strip the icon since the
   button text already reads "Search". The label is rendered as a direct text
   node inside the anchor, so we just hide child elements. */
body.page-usermanagement table[id$='tblCompany'] a[id$='_btnSearchGo'] img,
body.page-usermanagement table[id$='tblCompany'] a[id$='_btnSearchGo'] ins {
    display: none !important;
}

/* Validators — reflow muted-red so they don't blow out the filter row line. */
body.page-usermanagement table[id$='tblCompany'] span[id*='cvSearch'] {
    color: var(--red-600);
    font-family: var(--q88-grid-font);
    font-size: 12px;
    margin-left: 4px;
}

/* Checkbox + label cluster — pull native checkbox onto the 32px y-axis. */
body.page-usermanagement table[id$='tblCompany'] input[type='checkbox'] {
    margin: 0 4px 0 8px;
}

body.page-usermanagement table[id$='tblCompany'] input[type='checkbox'] + label,
body.page-usermanagement table[id$='tblCompany'] label {
    color: var(--q88-grid-muted-fg);
    font-family: var(--q88-grid-font);
    font-size: 13px;
    font-weight: 500;
    /* Multi-word labels like "Q88 Onboard only" must stay glued together —
       without this they wrap mid-text after "Q88" and the trailing words
       drop to a new line with no checkbox in front of them. */
    white-space: nowrap;
}

/* ==========================================================================
   5. Alphabet pager (rendered into dgCompanies pager cell).
      Anchors carry .SiteLink (default), .Warning (active letter), and the
      separator <span class="Accent">|</span>.
   ========================================================================== */

body.page-usermanagement .modMain a.SiteLink,
body.page-usermanagement .modMain a.Warning {
    display: inline-block;
    min-width: 24px;
    padding: 2px 6px;
    margin: 2px 1px;
    border-radius: 6px;
    font-family: var(--q88-grid-font);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    text-decoration: none !important;
    transition: background-color 120ms ease, color 120ms ease;
}

body.page-usermanagement .modMain a.SiteLink {
    color: var(--q88-grid-primary);
    background: transparent;
}

body.page-usermanagement .modMain a.SiteLink:hover {
    background: rgba(var(--primary-tint), 0.08);
    color: var(--q88-grid-primary-hover);
}

body.page-usermanagement .modMain a.Warning {
    background: var(--q88-grid-primary);
    color: var(--q88-grid-primary-fg) !important;
}

/* The separator "|" between letters — hide so the chips form a clean row.
   Don't disturb other .Accent usage outside .modMain. */
body.page-usermanagement .modMain span.Accent {
    display: none;
}

/* ==========================================================================
   6. User list grid — rptResults Repeater rendering <table class="StdTable">.
      Row shapes:
        - tr.Header               → column-label row (the "Name / Email / ..." line)
        - tr.modTitleHeader       → company group-divider row
        - tr.GridHeaderLightDull  → same group-divider, partner portal variant
        - tr.Alt                  → user data row
      The .ascx inline <style> ships:
        .tableHeader { position: sticky; top: 0 }
        .modTitleHeader { background-image: none !important }   (milbros override)
      We layer on top.
   ========================================================================== */

body.page-usermanagement .modMain {
    padding: 0;
    background: transparent;
}

body.page-usermanagement .modMain table.StdTable {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    color: var(--q88-grid-fg);
}

/* --- Column header row ---------------------------------------------------- */
body.page-usermanagement .modMain table.StdTable tr.Header {
    background: transparent !important;
}

/* Per DESIGN.md §5.3 + grid.css convention: header label is `text-sm /
   leading-none / medium` (14 / 1 / 500) in `--base/foreground` (dark), NOT
   uppercase muted-fg. Background is the same `--q88-grid-muted` band the V2
   grid uses (matches grid.css `body.page-grid .dxgvHeader` so this legacy
   page reads identical to Inspections).

   `color: !important` is required: Q88Whiteout.css ships
   `.StdTable .Header td { color: var(--text-on-brand) !important; font-weight: bold }`
   which paints the header cells WHITE — that white wins against any
   non-important rule regardless of specificity (CSS Cascading L4 §6.4.1).
   So we mark color/font-weight !important to force the dark-on-light
   treatment the spec calls for. */
body.page-usermanagement .modMain table.StdTable td.tableHeader {
    background-color: var(--q88-grid-muted);
    color: var(--q88-grid-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    padding: 14px 16px !important;
    border: 0;
    border-bottom: 1px solid var(--q88-grid-border);
}

body.page-usermanagement .modMain table.StdTable td.tableHeader:first-child {
    padding-left: 20px !important;
    border-top-left-radius: 8px;
}
body.page-usermanagement .modMain table.StdTable td.tableHeader:last-child {
    padding-right: 20px !important;
    border-top-right-radius: 8px;
    text-align: center;
}

body.page-usermanagement .modMain table.StdTable td.tableHeader[align='right'] {
    text-align: right;
}
body.page-usermanagement .modMain table.StdTable td.tableHeader[align='center'] {
    text-align: center;
}

/* --- Company group-divider row ------------------------------------------- */
/* Renders for every company section header inside the user list. Two class
   variants depending on portal: `.modTitleHeader` (Q88) and
   `.GridHeaderLightDull.blackText` (partner). Treat both as a single soft
   grouping band. */
body.page-usermanagement .modMain table.StdTable tr.modTitleHeader,
body.page-usermanagement .modMain table.StdTable tr.GridHeaderLightDull {
    background: var(--q88-grid-group-bg) !important;
    background-image: none !important;
}

body.page-usermanagement .modMain table.StdTable tr.modTitleHeader > td,
body.page-usermanagement .modMain table.StdTable tr.GridHeaderLightDull > td {
    background: transparent;
    color: var(--q88-grid-fg) !important;
    border: 0;
    border-top: 1px solid var(--q88-grid-border);
    border-bottom: 1px solid var(--q88-grid-border);
    padding: 10px 16px !important;
    font-family: var(--q88-grid-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    vertical-align: middle;
}

body.page-usermanagement .modMain table.StdTable tr.modTitleHeader > td:first-child,
body.page-usermanagement .modMain table.StdTable tr.GridHeaderLightDull > td:first-child {
    padding-left: 20px !important;
}
body.page-usermanagement .modMain table.StdTable tr.modTitleHeader > td:last-child,
body.page-usermanagement .modMain table.StdTable tr.GridHeaderLightDull > td:last-child {
    padding-right: 20px !important;
}

/* The 1×1 status icon next to the company name — make it a real dot. */
body.page-usermanagement .modMain table.StdTable tr.modTitleHeader img.statusIcon,
body.page-usermanagement .modMain table.StdTable tr.GridHeaderLightDull img.statusIcon {
    width: 8px !important;
    height: 8px !important;
    border-radius: 9999px;
    background-color: #16a34a;
    margin-right: 8px;
    vertical-align: middle;
}

/* --- User data rows -------------------------------------------------------
   The .ascx markup hard-codes `class="Alt"` on every `trUser`, but the
   code-behind (UserManagement.ascx.cs ~L752) then ALTERNATES the class:
   every second data row is rewritten to `class="Alt2"` (deleted rows also
   get `DeletedCell` appended). So we MUST style `tr.Alt` AND `tr.Alt2`
   identically — otherwise the Alt2 rows fall back to the cramped legacy
   StdTable cell padding and render visibly "shrunk", which is exactly the
   every-other-row-is-thinner artifact this skin originally shipped with.
   We keep uniform white rows + soft hover (no zebra striping); the company
   group-divider band already carries the visual hierarchy.

   Inline `onmouseover="HighLight(this,'')"` from /scripts/Script.js sets
   `el.style.backgroundColor = '#DFDFDF'` directly; author `!important` beats
   inline styles in the cascade so our hover bg sticks. */
body.page-usermanagement .modMain table.StdTable tr.Alt,
body.page-usermanagement .modMain table.StdTable tr.Alt2 {
    background: var(--q88-grid-card) !important;
    transition: background-color 120ms ease;
}

body.page-usermanagement .modMain table.StdTable tr.Alt:hover,
body.page-usermanagement .modMain table.StdTable tr.Alt2:hover {
    background: var(--q88-grid-row-hover) !important;
}

body.page-usermanagement .modMain table.StdTable tr.Alt > td,
body.page-usermanagement .modMain table.StdTable tr.Alt2 > td {
    background: transparent;
    color: var(--q88-grid-fg);
    border: 0;
    border-bottom: 1px solid var(--q88-grid-border);
    padding: 12px 16px !important;
    /* Top-align every data cell. The .ascx hard-codes inline `vertical-align:top`
       on the checkbox + Name cells only (UserManagement.ascx ~L134-135); the rest
       fall to this rule. Without `!important` here the inline-top Name sat at the
       top while Login Name / Phone / Email centered — so in any row tall enough to
       wrap (e.g. a multi-line Roles cell) Name and Login Name landed on different
       levels. Forcing top !important puts every value's first line on one baseline. */
    vertical-align: top !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
}

body.page-usermanagement .modMain table.StdTable tr.Alt > td:first-child,
body.page-usermanagement .modMain table.StdTable tr.Alt2 > td:first-child {
    padding-left: 20px !important;
}

body.page-usermanagement .modMain table.StdTable tr.Alt > td:last-child,
body.page-usermanagement .modMain table.StdTable tr.Alt2 > td:last-child {
    padding-right: 20px !important;
    text-align: center;
    width: 64px;
}

/* "Last login" + "Logins" cells use right-align via inline `style="text-align:right"` —
   keep that. "Auth0" uses center. Both ride on the inline style, no override needed. */

/* The right-aligned "Last Login" cell renders dates wrapped in `<span>` with
   inline color (#BFBFBF for stale dates). Let those win — they convey state. */

/* Edit cell — center the icon link (rendered as Literal HTML markup). */
body.page-usermanagement .modMain table.StdTable tr.Alt > td:last-child a,
body.page-usermanagement .modMain table.StdTable tr.Alt > td:last-child img,
body.page-usermanagement .modMain table.StdTable tr.Alt2 > td:last-child a,
body.page-usermanagement .modMain table.StdTable tr.Alt2 > td:last-child img {
    vertical-align: middle;
}

/* Highlight match runs (utility outputs `<font color='red'>...</font>`) —
   tone down to brand teal underline so it reads as a query echo, not error. */
body.page-usermanagement .modMain table.StdTable font[color='red'],
body.page-usermanagement .modMain table.StdTable tr.Alt font[color='red'],
body.page-usermanagement .modMain table.StdTable tr.Alt2 font[color='red'],
body.page-usermanagement .modMain table.StdTable tr.modTitleHeader font[color='red'] {
    color: var(--q88-grid-primary) !important;
    background: rgba(var(--primary-tint), 0.08);
    padding: 0 2px;
    border-radius: 3px;
}

/* ==========================================================================
   7. Secondary repeater — rptUserManagement (used in some Q88 staff views).
      Header: tr.SubHeader2.   Body: tr.GridData.
   ========================================================================== */

body.page-usermanagement .modMain table.BorderV2Bottom {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    margin-top: 12px;
}

body.page-usermanagement .modMain table.BorderV2Bottom tr.SubHeader2 {
    background: transparent !important;
}

body.page-usermanagement .modMain table.BorderV2Bottom tr.SubHeader2 > td {
    background-color: var(--q88-grid-muted);
    color: var(--q88-grid-fg);
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    padding: 14px 16px !important;
    border: 0;
    border-bottom: 1px solid var(--q88-grid-border);
}

body.page-usermanagement .modMain table.BorderV2Bottom tr.SubHeader2 > td:first-child {
    padding-left: 20px !important;
}
body.page-usermanagement .modMain table.BorderV2Bottom tr.SubHeader2 > td:last-child {
    padding-right: 20px !important;
}

body.page-usermanagement .modMain table.BorderV2Bottom tr.GridData,
body.page-usermanagement .modMain table.BorderV2Bottom tr.GridDataAlt {
    background: var(--q88-grid-card) !important;
}

body.page-usermanagement .modMain table.BorderV2Bottom tr.GridData:hover,
body.page-usermanagement .modMain table.BorderV2Bottom tr.GridDataAlt:hover {
    background: var(--q88-grid-row-hover) !important;
}

body.page-usermanagement .modMain table.BorderV2Bottom tr.GridData > td,
body.page-usermanagement .modMain table.BorderV2Bottom tr.GridDataAlt > td {
    background: transparent;
    color: var(--q88-grid-fg);
    border: 0;
    border-bottom: 1px solid var(--q88-grid-border);
    padding: 12px 16px !important;
    vertical-align: middle;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
}

body.page-usermanagement .modMain table.BorderV2Bottom tr.GridData > td:first-child,
body.page-usermanagement .modMain table.BorderV2Bottom tr.GridDataAlt > td:first-child {
    padding-left: 20px !important;
}
body.page-usermanagement .modMain table.BorderV2Bottom tr.GridData > td:last-child,
body.page-usermanagement .modMain table.BorderV2Bottom tr.GridDataAlt > td:last-child {
    padding-right: 20px !important;
    text-align: center;
}

/* "NOT SPECIFIED" warning span inside Roles cell — keep red but tone down. */
body.page-usermanagement .modMain table.BorderV2Bottom span.warning {
    color: var(--red-600);
    font-weight: 500;
    font-size: 12px;
}

/* ==========================================================================
   8. Footer (.modFooter2) — "Top" link.
   ========================================================================== */

body.page-usermanagement .modFooter2 {
    background: transparent;
    border-top: 1px solid var(--q88-grid-border);
    margin-top: 8px;
    padding: 12px 4px 0;
    color: var(--q88-grid-muted-fg);
    font-family: var(--q88-grid-font);
    font-size: 13px;
}

body.page-usermanagement .modFooter2 a.LinkButton {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px !important;
    border-radius: 8px;
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-muted-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
    font-family: var(--q88-grid-font);
    font-size: 13px;
    font-weight: 500 !important;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.page-usermanagement .modFooter2 a.LinkButton:hover {
    background: var(--q88-grid-row-hover) !important;
    color: var(--q88-grid-primary) !important;
    border-color: var(--q88-grid-primary) !important;
}