/*
 * Edit Profile — refresh skin (Figma file oM4wJDLxiHlaKMCy6GvTXs)
 *
 * Activated by body.page-edit-profile.sidebar-nav (set by Default.master.cs
 * for /EditProfile.aspx on PortalIds 0/1/2 when Config.EnableRefreshedFrontend = true).
 *
 * Pure CSS overlay over the legacy ManageAccount.ascx markup. No .ascx changes
 * in this MR. See DESIGN.md §14 for the visual contract and
 * docs/superpowers/specs/2026-05-06-edit-profile-refresh-design.md for scope.
 *
 * Token-name correction (per discovery 0.4): the project's tokens.css uses
 * the bare prefix (--foreground, --card, --primary, …), NOT the --base-*
 * names mentioned in the original plan. All var(--…) calls below use the
 * actual token names. The literal hex fallbacks are the canonical
 * Q88-Specs values per DESIGN.md §1.
 *
 * Class-name correction (per discovery): the legacy <uc:ModuleTemplate>
 * <TitleLeft>/<TitleRight>/<SubHeader1>/<Main>/<Footer2> elements render as
 * .modTLeft / .modTRight / .modSub1 / .modMain / .modFooter2 — there is
 * NO .ModuleTemplate class on the rendered DOM. (.modContainerStd /
 * .modInnerContainer wrap everything.)
 */

body.page-edit-profile.sidebar-nav {
    /* Rebind --font-family to Inter for this page. The :root binding in
       tokens.css resolves --font-family to --raw-font-family-legacy (Tahoma);
       this scope opts the Edit Profile page into the modern face so the
       18 var(--font-family, "Inter", ...) declarations below resolve to
       Inter on Q88/Baltic99. Milbros already binds the milbros face globally
       (see tokens.css), so this rebind is a no-op there. */
    --font-family: var(--raw-font-family-modern);
}

/* ---------------------------------------------------------------------------
   §14.2 — Card chrome (the outer wrapper around the entire ModuleTemplate).
   The DNN ModuleTemplate renders an outer <table class="modContainerStd"> +
   <table class="tableBorder"> on legacy admin pages. Restyle the tableBorder
   as a rounded card with shadow.
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav table.tableBorder {
    /* Card chrome (bg / border / radius / shadow / margin) is provided by
       the shared `.q88-card` class on the markup. We retain only the
       table-specific declarations the inner layout depends on:
       `border-collapse: separate` keeps spacing predictable, and
       `table-layout: fixed` plus `width: calc(100% - 96px)` clamp the
       intrinsic min-width so a wide descendant can't auto-grow the
       card past its 48 px gutters. Horizontal padding bumped from 14 to 24
       so the inner content (form + locations + comments) gets breathing
       room from the card edges; pnlCompany itself has no horizontal padding
       (would trigger a width-auto collapse upstream). */
    border-collapse: separate;
    width: calc(100% - 96px);
    box-sizing: border-box;
    table-layout: fixed;
    padding: 24px 24px;
}

body.page-edit-profile.sidebar-nav table.tableBorder > tbody > tr > td {
    /* the legacy <td> cell needs to behave as a flex column so the inner
       ModuleTemplate stretches edge to edge */
    padding: 0;
    border: 0;
}

/* Strip the ModuleTemplate's legacy borders inside the card. The rendered
   outer container is .modContainerStd / .modInnerContainer (see discovery
   §0 — there is NO .ModuleTemplate class in the DOM).

   Width override: MainWhiteout.css sets `.modContainerStd { width: 800px }`
   globally for legacy DNN module wrappers. Per DESIGN.md §14.2 the card
   width should follow the page container (fluid). Without this override the
   Company Info tab is clamped to 800px while User Info auto-expands via
   intrinsic grid min-width — inconsistent across tabs and 384px shy of the
   available 1184px content area, leaving an oversized right gutter. */
body.page-edit-profile.sidebar-nav .modContainerStd,
body.page-edit-profile.sidebar-nav .modInnerContainer {
    border: 0;
    background: transparent;
    /* `!important` is needed to beat the inline `style="width:800px;"` that
       the DNN ModuleTemplate writes onto this <table>. `table-layout: fixed`
       caps the intrinsic min-width so the table can't auto-grow past 100%
       to accommodate wide grid descendants. */
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    table-layout: fixed;
}

body.page-edit-profile.sidebar-nav .modContainerStd > tbody > tr > td {
    border: 0;
    background: transparent;
}

/* §14.3 — Header band (TitleLeft + TitleRight slots from <uc:ModuleTemplate>
   render as .modTLeft / .modTRight). */
body.page-edit-profile.sidebar-nav .modTLeft {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    color: var(--foreground, #0f172a);
    /* Left padding is supplied by the parent .modTitle (24px) so the title
       text aligns with the form labels in .modMain. Zero it here to avoid
       double-indenting (which previously pushed the title ~24px right of
       'Default fleet list:' and 'Email Signature:' below). */
    /* Right padding zeroed too — the .modTitle flex gap now owns the spacing
       to the admin "More Info" link, so the title hugs it instead of floating
       ~24px away. */
    padding: 0 0 20px 0;
    background: transparent;
    border: 0;
}

/* Hide the company-heading literal that sometimes gets appended after
   "Edit Profile" */
body.page-edit-profile.sidebar-nav .modTLeft span:empty {
    display: none;
}

/* TitleRight (.modTRight) styling now lives in §14.2 — it surfaces the
   admin-only "More Info" link instead of hiding the whole slot. */

/* ---------------------------------------------------------------------------
   §14.3 — Tab pill (legacy SubHeader1 nav row → .modSub1)
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav .modSub1 {
    padding: 0 24px 14px 24px;
    background: transparent;
    border: 0;
    /* Hoist tab strip onto the .modTitle row so page title + tabs share a
       single horizontal row per Figma. modSub1 is a sibling of modTitle, not
       a child; pull it up by ~its own height. The original margin-bottom
       matched the negative margin-top (48/48) to preserve legacy form
       position — but that left ~50px of empty space between title and the
       first form panel. Tightened to 16px for a modern title-to-content gap. */
    margin-top: -48px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    /* The hoist makes this full-width, z-indexed div overlap the .modTitle
       row — its transparent left half would otherwise swallow clicks meant
       for the "More Info" link (§14.2). Let clicks pass through everywhere
       except the actual pill (the > table below re-enables them). */
    pointer-events: none;
}

body.page-edit-profile.sidebar-nav .modSub1 > table {
    background: var(--muted, #f1f5f9);
    border-radius: 10px;
    padding: 3px;
    border-collapse: separate;
    border-spacing: 0;
    /* let the row size to its content so the pill width follows visible tabs */
    width: auto;
    margin-left: auto; /* right-align like Figma */
    pointer-events: auto;
}

body.page-edit-profile.sidebar-nav .modSub1 > table > tbody > tr > td {
    padding: 0;
    border: 0;
    background: transparent;
}

/* §14.3 — Each tab trigger (legacy <asp:LinkButton CssClass="FunctionLink">) */
body.page-edit-profile.sidebar-nav .modSub1 a.FunctionLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--foreground, #0f172a);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

/* legacy LinkButtons render <ins>&nbsp;</ins> before the label; suppress it
   inside the inline-flex container or it acts as a flex item. */
body.page-edit-profile.sidebar-nav .modSub1 a.FunctionLink > ins {
    display: none !important;
}

body.page-edit-profile.sidebar-nav .modSub1 a.FunctionLink:hover {
    color: var(--foreground, #0f172a);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.5);
}

/* Hide the legacy icon images — Figma is text-only triggers. */
body.page-edit-profile.sidebar-nav .modSub1 a.FunctionLink img {
    display: none;
}

/* The legacy <div> wrapper inside each LinkButton sets vertical-align tweaks
   that we don't want — flatten it. */
body.page-edit-profile.sidebar-nav .modSub1 a.FunctionLink > div {
    display: contents;
}

/* §14.3 — Active tab. Codebehind sets class="ActiveSection" on the parent
   <td> (ManageAccount.ascx.cs:608-612). Pure CSS, no JS shim.
   Teal-filled segment + white text per the SIRE 2.0 segmented-control
   precedent (was a white pill; the gray track now reads as the selected
   state via the teal fill). */
body.page-edit-profile.sidebar-nav .modSub1 td.ActiveSection a.FunctionLink {
    background: var(--primary, #0d9488);
    color: var(--primary-foreground, #ffffff);
    border-color: transparent;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
}

/* Keep the active segment teal on hover (beat the .FunctionLink:hover rule). */
body.page-edit-profile.sidebar-nav .modSub1 td.ActiveSection a.FunctionLink:hover {
    background: var(--primary, #0d9488);
    color: var(--primary-foreground, #ffffff);
}

/* ---------------------------------------------------------------------------
   §14.8 — Canonical Input control (text, email, password, search, number, tel)
   --------------------------------------------------------------------------- */
/* `:not(.q88-header__search-input)` — the top-nav Quick Search box is global
   chrome (Default.Master, styled by navigation.css). Without the exclusion this
   form-input rule (more specific than navigation.css's `.sidebar-nav
   .q88-header__search-input`) overrode its left padding, so the search icon
   overlapped the placeholder on this page only. */
body.page-edit-profile.sidebar-nav input[type="text"]:not(.q88-header__search-input),
body.page-edit-profile.sidebar-nav input[type="email"],
body.page-edit-profile.sidebar-nav input[type="password"],
body.page-edit-profile.sidebar-nav input[type="search"],
body.page-edit-profile.sidebar-nav input[type="number"],
body.page-edit-profile.sidebar-nav input[type="tel"],
body.page-edit-profile.sidebar-nav input[type="url"],
body.page-edit-profile.sidebar-nav textarea {
    height: 36px;
    padding: 4px 12px;
    border: 1px solid var(--input, #e2e8f0);
    border-radius: 8px;
    background: var(--card, #ffffff);
    color: var(--foreground, #0f172a);
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

body.page-edit-profile.sidebar-nav textarea {
    height: auto;
    min-height: 36px;
}

body.page-edit-profile.sidebar-nav input::placeholder,
body.page-edit-profile.sidebar-nav textarea::placeholder {
    color: var(--muted-foreground, #475569);
}

body.page-edit-profile.sidebar-nav input:not(.q88-header__search-input):focus,
body.page-edit-profile.sidebar-nav textarea:focus {
    outline: 2px solid var(--primary, #0d9488);
    outline-offset: 2px;
    border-color: var(--input, #e2e8f0);
}

/* Disabled / read-only */
body.page-edit-profile.sidebar-nav input:disabled,
body.page-edit-profile.sidebar-nav input[readonly] {
    background: var(--muted, #f1f5f9);
    color: var(--muted-foreground, #475569);
    cursor: not-allowed;
}

/* §14.4 — Required-field asterisk (legacy <span class="warning">) */
body.page-edit-profile.sidebar-nav .StdTable .warning,
body.page-edit-profile.sidebar-nav td.Label .warning,
body.page-edit-profile.sidebar-nav span.warning {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--destructive, #dc2626);
}

/* §14.4 — Radio buttons (Date Entry Format and any other RadioButtonList) */
body.page-edit-profile.sidebar-nav input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 9999px;
    background: var(--card, #ffffff);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin: 0 8px 0 0;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
}

body.page-edit-profile.sidebar-nav input[type="radio"]:checked {
    border-color: var(--primary, #0d9488);
}

body.page-edit-profile.sidebar-nav input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--primary, #0d9488);
    transform: translate(-50%, -50%);
}

body.page-edit-profile.sidebar-nav input[type="radio"]:focus {
    outline: 2px solid var(--primary, #0d9488);
    outline-offset: 2px;
}

body.page-edit-profile.sidebar-nav input[type="radio"] + label {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: var(--foreground, #0f172a);
    margin-right: 16px;
}

/* §14.4 — Native checkbox */
body.page-edit-profile.sidebar-nav input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 2px;
    background: var(--card, #ffffff);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin: 0 6px 0 0;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
}

body.page-edit-profile.sidebar-nav input[type="checkbox"]:checked {
    background: var(--primary, #0d9488);
    border-color: var(--primary, #0d9488);
}

body.page-edit-profile.sidebar-nav input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid var(--primary-foreground, #eff6ff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

body.page-edit-profile.sidebar-nav input[type="checkbox"]:focus {
    outline: 2px solid var(--primary, #0d9488);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   §14.7 — Primary button (legacy <asp:LinkButton CssClass="LinkButton">)
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav a.LinkButton:not(.Secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--primary, #0d9488);
    color: var(--primary-foreground, #eff6ff);
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    border: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    box-sizing: border-box;
    transition: background 120ms ease;
}

body.page-edit-profile.sidebar-nav a.LinkButton:not(.Secondary):hover {
    background: var(--primary, #0d9488);
    filter: brightness(0.95);
    color: var(--primary-foreground, #eff6ff);
    text-decoration: none;
}

/* Universal <ins> flex break — see MEMORY.md "ASP.NET LinkButton <ins> spacer trap" */
body.page-edit-profile.sidebar-nav a.LinkButton > ins {
    display: none !important;
}

/* §14.7 — Secondary button */
body.page-edit-profile.sidebar-nav a.LinkButton.Secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--secondary, #f1f5f9);
    color: var(--secondary-foreground, #1e293b);
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    border: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    box-sizing: border-box;
    transition: background 120ms ease;
}

body.page-edit-profile.sidebar-nav a.LinkButton.Secondary:hover {
    background: var(--muted, #f1f5f9);
    filter: brightness(0.97);
    color: var(--secondary-foreground, #1e293b);
    text-decoration: none;
}

/* §14.7 — Strip <uc:ImageManager>'s rendered <img> from buttons; keep the label.
   Figma is text-only. If a button has ONLY an icon (no label), revisit. */
body.page-edit-profile.sidebar-nav a.LinkButton img {
    display: none;
}

/* ---------------------------------------------------------------------------
   §14.4 — User Info body 3-column layout. Targets the rendered table inside
   pnlContacts (NOT pnlContactDetails — see discovery override). Each <tr>
   becomes a flex row positioned via grid-column.

   Risk: display: contents removes <tr> from the layout tree but also drops
   it from the accessibility tree on some browser/AX combos. Phase G QA
   should verify keyboard navigation. If it fails, switch to display: flex
   and accept visual quirk.
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 36px;
    row-gap: 12px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    padding: 0 24px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > table > tbody {
    display: contents;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > table > tbody > tr {
    display: contents;
}

/* Each <td> becomes a grid item. Pair label+input into one cell via col-span. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > table > tbody > tr > td {
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Label cells (.Label class) are 130px wide */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] td.Label {
    width: 130px;
    flex-shrink: 0;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: var(--foreground, #0f172a);
}

/* §14.5 — Section header row from <Main> table. The active section name
   already shows on the tab pill, so hide the GridHeader row chrome but
   leave it in the DOM for any role-conditional content. */
body.page-edit-profile.sidebar-nav .modMain .GridHeader {
    background: transparent;
    border: 0;
    padding: 0 24px 12px 24px;
}

body.page-edit-profile.sidebar-nav .modMain .GridHeader [id$="_lblSection"] {
    /* hide visually but keep accessible (avoid layout collapse) */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ---------------------------------------------------------------------------
   §14.5 — Logo block. The container is <div id="divLogo" runat="server"
   ClientIDMode="Static"> (NOT a pnlLogo Panel — see discovery override).
   The "Logo image file not found." text is injected by jQuery at
   ManageAccount.ascx:1700 with inline style color:Red, so it's already red.
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav #divLogo,
body.page-edit-profile.sidebar-nav [id$="_divLogo"] {
    padding: 0 24px 16px 24px;
}

/* §14.5 — Generic helper-text class — write tools may apply it for any new
   helper messages. The lblLogoStatus selector mentioned in the plan has no
   matching control in the .ascx (per discovery), so only the utility class
   selector is kept. */
body.page-edit-profile.sidebar-nav .ep-helper-error {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: var(--destructive, #dc2626);
    font-style: italic;
}

/* §14.5 — 2FA Delay Time helper text. lblMFAInfo already carries
   class="q88-text-error" from the .ascx — the global utility class gives
   it red color. Add italic + smaller size scoped to Edit Profile so the
   admin-only helper hint matches Figma's spec. */
body.page-edit-profile.sidebar-nav .modMain .q88-text-error,
body.page-edit-profile.sidebar-nav [id$="_lblMFAInfo"] {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   §14.6 — Reset Password (Change-your-password floating panel).
   Rendered by the embedded <uc:UpdateUserPassword> at ManageAccount.ascx:3084.
   The control's ModuleTemplate emits a wrapper <div class="setNewPassClass">
   that an inline <style> in UpdateUserPassword.ascx:4-10 pins to
   `position: fixed; left:50%; margin-left:-320px; top:100px; width:640px;
   z-index:110000` — that's the actual floating box. The legacy markup never
   set a background on it; in the legacy skin the inner ModuleTemplate chrome
   (.modTitle dark-navy band + .modMain grey body) painted enough fill that
   nothing bled through, but the refresh skin flattens .modTitle/.modMain to
   transparent, so the underlying Edit Profile form shows through the
   floating panel.

   Paint the card chrome on .setNewPassClass directly (NOT on the outer
   pnlUserSetNewP wrapper — that's just a sibling at the bottom of the DOM,
   the fixed-positioned class is what the user sees). The
   `[id$="_updateUserPassword_pnlUserSetNewP"]` qualifier scopes the rule to
   this specific control instance so we don't accidentally style other
   `.setNewPassClass` usages (e.g. the first-time login iframe).
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav [id$="_updateUserPassword_pnlUserSetNewP"] .setNewPassClass {
    background: var(--card, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--raw-radius-md, 8px);
    box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.18), 0 4px 8px -2px rgba(15, 23, 42, 0.10);
    padding: var(--raw-space-8) var(--raw-space-12) var(--raw-space-12) var(--raw-space-12);
    box-sizing: border-box;
}

/* Flatten the inner ModuleTemplate band — the dark-navy .modTitle / grey
   .modMain chrome from the legacy skin would otherwise stack a second
   card-in-a-card inside our floating box. */
body.page-edit-profile.sidebar-nav [id$="_updateUserPassword_pnlUserSetNewP"] .setNewPassClass .modTitle,
body.page-edit-profile.sidebar-nav [id$="_updateUserPassword_pnlUserSetNewP"] .setNewPassClass .modMain {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

body.page-edit-profile.sidebar-nav [id$="_updateUserPassword_pnlUserSetNewP"] .setNewPassClass .modTLeft {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--foreground, #0f172a);
    padding: 0 0 var(--raw-space-4) 0;
}

body.page-edit-profile.sidebar-nav [id$="_updateUserPassword_pnlUserSetNewP"] .setNewPassClass .mainContainer,
body.page-edit-profile.sidebar-nav [id$="_updateUserPassword_pnlUserSetNewP"] .setNewPassClass .tblSetNewP,
body.page-edit-profile.sidebar-nav [id$="_updateUserPassword_pnlUserSetNewP"] .setNewPassClass .tblSetNewP > tbody > tr > td {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--foreground, #0f172a);
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
}

body.page-edit-profile.sidebar-nav [id$="_updateUserPassword_pnlUserSetNewP"] .setNewPassClass .tblSetNewP table td {
    padding: var(--raw-space-2) var(--raw-space-4) var(--raw-space-2) 0;
    vertical-align: middle;
}

body.page-edit-profile.sidebar-nav [id$="_updateUserPassword_pnlUserSetNewP"] .setNewPassClass .sectionContainer {
    background: var(--muted, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--raw-radius-sm, 4px);
    padding: var(--raw-space-4) var(--raw-space-8);
}

/* ---------------------------------------------------------------------------
   §14.6 — Other Settings: Default fleet list (pnlSettings)
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav [id$="_pnlSettings"] {
    padding: 12px 24px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlSettings"] > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--foreground, #0f172a);
}

body.page-edit-profile.sidebar-nav [id$="_pnlSettings"] select {
    height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--input, #e2e8f0);
    border-radius: 8px;
    background: var(--card, #ffffff);
    color: var(--muted-foreground, #475569);
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   §14.6 — Email Signature (pnlSignature) — DevExpress ASPxHtmlEditor wrapper.
   The actual control in ManageAccount.ascx is <dx:ASPxHtmlEditor ID="hteSignature">,
   not Karamasoft UltimateEditor (the original §14.6 draft was based on a
   stale assumption). We target [id$="_hteSignature"] for the outer wrapper
   and rely on DX's own .dxhe* classes for the inner toolbar/content chrome.
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav [id$="_pnlSignature"] > table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    padding: 12px 24px 24px 24px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlSignature"] tr.GridHeader {
    background: transparent;
    border: 0;
}

body.page-edit-profile.sidebar-nav [id$="_pnlSignature"] tr.GridHeader td {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--foreground, #0f172a);
    background: transparent;
    border: 0;
    padding: 0 0 12px 0;
}

/* The editor row sits between header and helper text — add a bottom border
   to match Figma's section separator. */
body.page-edit-profile.sidebar-nav [id$="_pnlSignature"] tr:has(> td > [id$="_hteSignature"]) td {
    padding: 0 0 24px 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

/* Helper text under the editor */
body.page-edit-profile.sidebar-nav [id$="_pnlSignature"] tr:last-child td {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--foreground, #0f172a);
    padding: 12px 0 0 0;
    border: 0;
}

/* DX editor outer wrapper — width only. Do NOT touch the inner DX chrome
   (dxhe* classes, nested tables, iframe). DX 18.1 lays out the editor with
   its own table structure and explicit dimensions; overriding inner widths,
   backgrounds, or paddings collapses the iframe and breaks input.
   Border + radius matched to the Questionnaire Disclaimer textarea below
   so the two read as a paired set. overflow:hidden so the gray toolbar bg
   gets clipped by the rounded corners (otherwise it bleeds past the radius). */
body.page-edit-profile.sidebar-nav [id$="_pnlSignature"] [id$="_hteSignature"] {
    max-width: 100%;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* DX 18.1 toolbar dropdown alignment.
   ToolbarFontNameEdit and ToolbarFontSizeEdit render as <input> + <img> arrow
   inside <li class="dxm-spacing" style="height:55px">. The inline 55px is set
   programmatically by DX to match the tallest item; with the bigger dropdowns
   in the mix, the entire toolbar dock balloons to 84px tall (vs ~28px for a
   button-only toolbar). Compress the dropdown input to 18px and override the
   inline LI height so the toolbar collapses to a single ~26px row aligned
   with B/I/U/etc. (Probed empirically — see Playwright session 2026-05-07.) */
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxeButtonEdit {
    height: 22px !important;
}

body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxeButtonEdit input.dxeEditAreaSys {
    height: 18px !important;
    line-height: 18px !important;
    padding: 1px 4px !important;
    font-size: 12px !important;
}

/* Arrow IMG renders the sprite at DXR.axd via background-image. Forcing
   height: 20px exposes the next sprite tile below the arrow icon as a
   horizontal strip under each dropdown. The sprite arrow itself is ~9px
   tall, so clip the IMG box to match. The negative margins compensate
   for half-pixel rounding (DX's 10x20 button TD with 1px top padding
   leaves the 9px arrow visually 1px low and 1px right of true center). */
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxeButtonEdit img.dxEditors_edtDropDown {
    height: 9px !important;
    width: 9px !important;
    vertical-align: middle !important;
    margin-top: -1px !important;
    margin-left: -1px !important;
}

body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxeButtonEdit td {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

/* DX writes inline style="height: 55px" on each <li class="dxm-spacing"> in
   the toolbar UL. The inline beats every CSS rule without !important. */
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxm-main li.dxm-spacing,
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxm-main li.dxm-separator {
    height: 26px !important;
}

/* Group separators (li.dxm-separator) default to padding: 6px 2px which
   inflates their outer box to ~38px tall, forcing the entire toolbar UL
   row to that height. The result: vertical separator lines render taller
   than the button glyphs next to them. Zero the vertical padding so the
   separator matches the button row exactly. Same fix for li.dxm-spacing
   (some skins also pad these). */
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock li.dxm-separator,
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxm-main li.dxm-spacing {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Toolbar background: dxhe-bardock defaults to a dark gray (#9d9d9d) which
   shows through to the right of the toolbar items (the UL is ~822px wide
   while the dock spans the full ~1526px wrapper). Use a pure neutral gray
   (#ececec) — NOT var(--muted, #f1f5f9) which is slate-100 with a blue
   tint that makes the toolbar look bluish next to the dropdown inputs.
   Same color flows through dropdown inputs + arrow buttons below so the
   whole toolbar reads as a single unified gray surface. */
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock {
    background: #ececec !important;
    border-bottom: 1px solid #d4d4d4 !important;
}

body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock > tbody > tr > td {
    padding: 0 6px !important;
}

/* DX wraps the menu UL in another <table> inside the dock TD; that inner
   TD ships with paddingTop: 12px (DX default toolbar header padding) which
   pushes everything down ~12px from the top of the gray dock. Zero it. */
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock > tbody > tr > td > table > tbody > tr > td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* dxm-main has 2px padding by default — kill it so the toolbar items
   align flush with the top/bottom of the gray dock background. Combined
   with the 0-vertical-padding rule on the dockTd above, this drops the
   total dock height ~12px (54 -> 42) without clipping anything. */
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxm-main {
    padding: 0 !important;
}

/* Unify Font/Size dropdown chrome with the toolbar: the dropdown widget
   (TABLE.dxeButtonEdit) defaults to white bg + a 1px medium-gray border,
   and the inner input has slate-100 bg (the "light blue" the user saw).
   Match all three (widget + input + arrow button cell) to the toolbar
   gray so the dropdowns blend in instead of reading as separate boxes. */
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxeButtonEdit {
    background: transparent !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 4px !important;
}

body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxeButtonEdit input.dxeEditAreaSys {
    background: #ececec !important;
    color: #1f2937 !important;
}

body.page-edit-profile.sidebar-nav [id$="_hteSignature"] .dxhe-bardock .dxeButtonEditButton {
    background: #ececec !important;
    border-left: 1px solid #d4d4d4 !important;
}

/* Remove the 12px DX wrapper paddings that produce a white strip above
   the toolbar AND a light-gray strip between toolbar and iframe.
   - Outer <td class="dx"> has padding-top: 12px       → 12px white above
   - Inner toolbar/content row <td>s have padding-top: 12px each
     (content row also has bg #cecece by default)     → 12px gray between
   - dxheDesignViewArea has padding-top: 12px         → 12px white above iframe
   Zero them all so the toolbar abuts the editor's top edge and the iframe
   abuts the toolbar bottom. Force the content row TD background white so
   no DX default gray peeks through if a future DX upgrade re-adds padding. */
body.page-edit-profile.sidebar-nav [id$="_hteSignature"] > tbody > tr > td.dx {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.page-edit-profile.sidebar-nav [id$="_hteSignature"] > tbody > tr > td.dx > table > tbody > tr > td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #ffffff !important;
}

body.page-edit-profile.sidebar-nav [id$="_hteSignature"] td.dxheDesignViewArea {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Character counter (plain <span> directly after the editor). Bottom-right,
   muted. Turns red when the soft 500-char limit is exceeded. */
body.page-edit-profile.sidebar-nav .q88-signature-counter {
    display: block;
    text-align: right;
    margin-top: 6px;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: var(--muted-foreground, #475569);
}

body.page-edit-profile.sidebar-nav .q88-signature-counter--over {
    color: var(--destructive, #dc2626);
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   §14.6 — Questionnaire Disclaimer (pnlDisclaimer)
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav [id$="_pnlDisclaimer"] > table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    padding: 12px 24px 12px 24px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlDisclaimer"] tr.GridHeader td {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--foreground, #0f172a);
    background: transparent;
    border: 0;
    padding: 0 0 12px 0;
}

/* Body row of the Disclaimer panel. Discovery (DOM probe): the second <tr>
   wraps BOTH the editable <textarea> AND the helper-text <div class="warning">
   in a single <td>. The previous rule put a box around the whole td (treating
   it as a "read-only block"), which framed the helper text inside the box and
   set `white-space: pre` so the helper's <br><br> rendered as 5 visual lines.
   Reset the td to a transparent shell; let the canonical textarea rules
   from §14.8 paint the input box, and style the helper div separately. */
body.page-edit-profile.sidebar-nav [id$="_pnlDisclaimer"] tr:nth-child(2) > td {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    white-space: normal;
}

/* The editable disclaimer textarea uses inline `style="width:95%"` from the
   server tag. Stretch to full row + min-height ~80 so it reads as a block. */
body.page-edit-profile.sidebar-nav [id$="_pnlDisclaimer"] [id$="_txtDisclaimer"] {
    width: 100% !important;
    min-height: 80px;
    margin: 0;
    display: block;
}

/* Drop the literal <br> the legacy markup emits between the textarea and
   the helper-div so the spacing matches Figma's tight 2-line italic block. */
body.page-edit-profile.sidebar-nav [id$="_pnlDisclaimer"] tr:nth-child(2) > td > br {
    display: none;
}

/* Helper text — italic 12 destructive, two-line. The legacy markup wraps the
   text in <div id="...divDisclaimer" class="warning"> with embedded
   `<br><br>` between the two sentences (creating the 5-line render seen
   pre-fix). Tighten by collapsing those redundant <br>s. */
body.page-edit-profile.sidebar-nav [id$="_pnlDisclaimer"] [id$="_divDisclaimer"].warning {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    font-style: italic;
    color: var(--destructive, #dc2626);
    background: transparent;
    border: 0;
    padding: 8px 0 0 0;
    display: block;
}

/* The helper div embeds `<br><br>` between sentences. Hide every other
   <br> (the second one in each pair) so we get a single line break instead
   of a blank line between sentences. */
body.page-edit-profile.sidebar-nav [id$="_pnlDisclaimer"] [id$="_divDisclaimer"].warning br + br {
    display: none;
}

/* Helper text fallback for any 3rd row (legacy variants of pnlDisclaimer
   markup that put the helper in its own <tr>) */
body.page-edit-profile.sidebar-nav [id$="_pnlDisclaimer"] tr:nth-child(3) td,
body.page-edit-profile.sidebar-nav [id$="_pnlDisclaimer"] tr:last-child:not(:nth-child(2)) td {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    font-style: italic;
    color: var(--destructive, #dc2626);
    background: transparent;
    border: 0;
    padding: 8px 0 0 0;
}

/* ---------------------------------------------------------------------------
   §14.7 — Footer alignment. Save/Cancel buttons render inside <Footer2> →
   .modFooter2 (a <div>, NOT a <table> cell — discovery override). Footer2
   contains an inner <table> with two <td>s (left = Delete admin button,
   right = Cancel/Save). Right-align the right cell.
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav .modFooter2 {
    padding: 14px 24px 0 24px;
}

body.page-edit-profile.sidebar-nav .modFooter2 a.LinkButton {
    margin-left: 6px;
}

/* If Footer2 holds an inner <table>, right-align the trailing cell so
   Cancel + Save stay flush right. */
body.page-edit-profile.sidebar-nav .modFooter2 > table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

body.page-edit-profile.sidebar-nav .modFooter2 > table > tbody > tr > td:last-child {
    text-align: right;
}

/* ---------------------------------------------------------------------------
   §14.9 — Extrapolated panels (Permissions, Notifications, Subscription, Roles).
   Most legacy <asp:Panel>s render <table class="StdTable"> with .Label cells.
   Apply the canonical label/input/row vocabulary.
   --------------------------------------------------------------------------- */
body.page-edit-profile.sidebar-nav .modMain table.StdTable,
body.page-edit-profile.sidebar-nav .modMain table.StdTable.NoBorder {
    border-collapse: separate;
    border-spacing: 0 12px;
    width: 100%;
    /* Horizontal padding was 24px — dropped so locations + comments inside StdTable
       can span the full pnlCompany content width per the user's "tables span the
       whole card width" requirement. Vertical 12px buffer kept. */
    padding: 12px 0;
}

body.page-edit-profile.sidebar-nav .modMain table.StdTable td {
    border: 0;
    padding: 0 8px 0 0;
    vertical-align: middle;
}

body.page-edit-profile.sidebar-nav .modMain table.StdTable td.Label {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: var(--foreground, #0f172a);
    width: 130px;
}

/* --- §14.9a — Notifications table column-header row ------------------------
   The notifications repeater (dlNotifications, ManageAccount.ascx:2839) emits
   its column header as <tr class="modTitle"> inside <table class="StdTable
   BorderV2Bottom"> — reusing the ModuleTemplate title class as a plain table
   header row. The §14.1 page rule targets *every* .modTitle (it exists to
   style the page-title band that holds .modTLeft/.modTRight) and does two
   damaging things to this header row:

     1) `background: transparent !important` strips the brand band, leaving the
        base .modTitle color (--text-on-brand → white on Q88, blue-50 on
        Milbros) as near-white text on the white card — the labels
        (Notification / Email Address / Fleet / Active) become invisible.
     2) `display: flex; width: 100%; padding: 24px…` rips the row out of the
        table grid, so the four header cells pack to the left as flex items
        instead of sitting in their column tracks — the headers no longer line
        up with the data columns (email input, fleet select, active checkbox).

   Fix both: restore the row to normal table-row layout so its cells share the
   exact column tracks as the data rows, and give the cells a readable
   data-table column-header treatment (dark, semibold, divider). Scoped to
   `table.StdTable` so the page-title band (a ModuleTemplate tr.modTitle that is
   NOT inside a StdTable) is untouched. Higher specificity than the bare
   .modTitle rule, so it wins without !important. Fires on both portals. */
body.page-edit-profile.sidebar-nav .modMain table.StdTable tr.modTitle {
    display: table-row;
    width: auto;
    padding: 0;
}

body.page-edit-profile.sidebar-nav .modMain table.StdTable tr.modTitle > td {
    color: var(--foreground, #0f172a);
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    padding: 0 8px 8px 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

/* --- §14.9b — Permissions tab (pnlRoles) ----------------------------------
   The Permissions panel renders a *class-less* <table> (no `.StdTable`), so the
   vocabulary above never reaches it: the boolean-toggle rows (Q88 Pro / Tester /
   q88 User / Account admin) stack with legacy 0-gap rhythm while the taller
   control rows below breathe, and the 96px label column forces "Vessel Account:"
   and "Copy roles from:" to wrap onto two lines. Bring the panel into the same
   row/label rhythm as the StdTable panels (12px row gap, 130px Inter-14 label
   column). The controls themselves — 14x14 checkboxes, 16x16 radios, h-32
   selects (§14.8) — are already skinned by the global page rules, so only the
   table chrome needs setting here. */
/* Inset the whole panel 24px so its labels sit on the same content axis as the
   "Edit Profile" title glyph (x = card-content-edge + 24) and match the User Info
   / Other Settings tab bodies, which already carry this inset. */
body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] {
    padding-left: 24px;
    box-sizing: border-box;
}

body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] > table {
    border-collapse: separate;
    border-spacing: 0 16px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] > table td {
    border: 0;
    padding: 0 8px 0 0;
    vertical-align: middle;
}

/* The first cell of every row is the label column — these <td>s carry no
   `.Label` class, so target them structurally. Uniform 130px + nowrap keeps
   each label on one line and starts every control on the same vertical axis;
   the empty leader cell of the User/Vessel Admin sub-row also inherits 130px so
   that sub-row's controls align under the input column above them. */
body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] > table > tbody > tr > td:first-child {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: var(--foreground, #0f172a);
    width: 130px;
    white-space: nowrap;
}

/* Align the control column. Each control cell renders a leading whitespace text
   node before its <input>, which — unlike the <select> cells, whose leading
   whitespace collapses — paints as a ~7px space that pushed every checkbox right
   of the selects and radios ("checkboxes weirdly shifted"). Collapse it with
   font-size:0 on the control cell, then restore 14px on the descendants that
   carry text (inline labels, the "With Access To Vessel" note inside the vessel
   div, the Copy-roles button). Also zero the checkboxes'/radios' UA margin so
   they land exactly on the selects' left edge. */
body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] > table > tbody > tr > td:nth-child(2) {
    font-size: 0;
}

body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] > table > tbody > tr > td:nth-child(2) * {
    font-size: 14px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] input[type="checkbox"],
body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] input[type="radio"] {
    margin: 0;
    vertical-align: middle;
}

/* Every checkbox / radio and its label must share one vertical centre line.
   Native inputs default to vertical-align:baseline, which dropped the box a few
   px below its label text (worst on "All modules", ~5px); pin both to middle. */
body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] label {
    vertical-align: middle;
}

/* Restore the gap the collapsed whitespace used to provide: box → inline label
   (q88 Editor, All modules, User/Vessel Admin, Reviewer/Editor) and between the
   twin q88 User / q88 Editor checkbox groups. */
body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] input[type="checkbox"] + label,
body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] input[type="radio"] + label {
    margin-left: 6px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] > table > tbody > tr > td:nth-child(2) > span + span {
    margin-left: 16px;
}

/* Vessel Account row: the checkbox lives in #divChkVesselAccount preceded by
   legacy &nbsp; spacers (non-breaking, so they don't collapse and flex won't
   strip them — they pushed the checkbox ~12px right of the control axis). A
   negative text-indent cancels the leading nbsp run so the checkbox lands on the
   same left edge as the other controls; the "With Access To Vessel" note + Select
   Vessel dropdown shift with it, preserving their spacing. */
body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] #divChkVesselAccount {
    text-indent: -12px;
}

/* Copy-roles action button was hugging the dropdown on its left (whitespace
   collapsed to ~3px by the control cell's font-size:0). Give it a clear gap. */
body.page-edit-profile.sidebar-nav [id$="_pnlRoles"] > table > tbody > tr > td:nth-child(2) a.LinkButton {
    margin-left: 12px;
}

/* Footer "Delete User" alignment. The footer table sets border-collapse:collapse,
   which makes its own padding-left inert, so the button sat ~15px right of the
   card-content edge instead of on the 24px title/form axis. Inset the first cell
   directly — font-size:0 collapses the leading whitespace text node (the
   LinkButton keeps its own 14px via §14.3's !important) — and drop the first
   button's left margin so "Delete User" lines up under the form labels. The
   right cell (Cancel / Save) is untouched: it stays flush to the content edge. */
body.page-edit-profile.sidebar-nav .modFooter2 > table > tbody > tr > td:first-child {
    padding-left: 24px;
    font-size: 0;
}

body.page-edit-profile.sidebar-nav .modFooter2 > table > tbody > tr > td:first-child a.LinkButton {
    margin-left: 0;
}

/* Note: Task 10.2 destructive-button variant SKIPPED — no Destructive class
   exists today on ManageAccount.ascx (the lnkDelete LinkButton has just
   CssClass="LinkButton"). Flagged as MR2 follow-up. */

/* ===========================================================================
   PHASE 14 — Chrome resets + structural alignment to Figma (QEN-8656)

   Earlier phases skinned individual components but missed the surrounding
   ModuleTemplate chrome (the dark-navy `.modTitle` band, the grey `.modMain`
   bg, the grey `.modFooter2` bg, the inner `.GridHeader` admin band) AND
   lost specificity to MainWhiteout.css's `!important` rules on `.LinkButton`.

   This block:
   1) Hides legacy chrome bands so the .tableBorder card shows through.
   2) Beats MainWhiteout button rules with `!important`.
   3) Restructures the User Info section into Figma's 3-column form
      (Personal / Contact / Preferences) by gridding the existing
      <table class="StdTable NoBorder"> and placing rows by :nth-of-type.
   4) Un-floats the original right-column (Logo + 2FA) so it stacks below
      the form as Figma shows it (full-width band below the 3 columns).
   =========================================================================== */

/* --- 14.1 Reset ModuleTemplate chrome ------------------------------------ */

/* The dark navy band that holds .modTLeft + .modTRight. Flex so the
   admin-only "More Info" link (surfaced from .modTRight in §14.2) sits
   inline to the right of the page title. */
body.page-edit-profile.sidebar-nav .modTitle {
    background: transparent !important;
    /* Horizontal padding matches the .modMain form panels (24px) so the
       title text and form labels align on the same vertical line. */
    padding: 24px 24px 0 24px;
    min-height: 0;
    height: auto;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Grey content bg behind the form table */
body.page-edit-profile.sidebar-nav .modMain {
    background: transparent;
    padding: 0;
}

/* Grey footer band behind Save/Cancel — drop the legacy 1px grey divider
   above the band (MainWhiteout sets `.modFooter2 { border-top: 1px solid }`
   which we don't want — Figma shows the buttons sitting directly on the
   card without a separator). Pad the right + bottom so Save doesn't hug
   the card edge. */
body.page-edit-profile.sidebar-nav .modFooter2 {
    background: transparent;
    padding: 0 24px 16px 0 !important;
    border: 0 !important;
}

/* Card outer table — let the inner panels own their own padding */
/* Card outer padding is set in the §14.2 card chrome block (L40-54 above).
   td inside the card stays at 0 to let the ModuleTemplate stretch edge to edge. */
body.page-edit-profile.sidebar-nav table.tableBorder > tbody > tr > td {
    padding: 0;
}

/* --- 14.2 Hide redundant utility chrome --------------------------------- */

/* TitleRight holds Map / Add New / More Info. Map + Add New stay hidden
   (off-Figma), but the admin-only "More Info" link (hlkCompanyPopup, gated on
   user.IsAdministrator in code-behind) must stay reachable — surface it inline
   next to the page title, since the header-right slot is now the tab pill. */
body.page-edit-profile.sidebar-nav .modTRight {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0;
    background: transparent;
    border: 0;
    /* .modTitle is a flex row with align-items:center, but the sibling title
       slot (.modTLeft) carries a 20px BOTTOM padding — so its text is anchored
       to the TOP of its box while this slot centres in the full line height,
       dropping "More Info" ~10px below the title text. Anchor this slot to the
       top of the line too so the link sits on the title's text baseline. */
    align-self: flex-start;
}

body.page-edit-profile.sidebar-nav .modTRight a[id*="lnkMap"],
body.page-edit-profile.sidebar-nav .modTRight a[id*="lnkAddNew"] {
    display: none !important;
}

/* "More Info" → teal inline text link, matching the header's other links. */
body.page-edit-profile.sidebar-nav .modTRight a[id*="hlkCompanyPopup"] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary, #0d9488);
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

body.page-edit-profile.sidebar-nav .modTRight a[id*="hlkCompanyPopup"]:hover {
    text-decoration: underline;
}

/* Text-only link — suppress the legacy History icon img. */
body.page-edit-profile.sidebar-nav .modTRight a[id*="hlkCompanyPopup"] img {
    display: none;
}

/* Lead the link with a Lucide external-link glyph (it opens a popup window).
   Painted via mask so it inherits the link's teal `color`. */
body.page-edit-profile.sidebar-nav .modTRight a[id*="hlkCompanyPopup"]::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6'/><path d='M10 14 21 3'/><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6'/><path d='M10 14 21 3'/><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/></svg>") no-repeat center / contain;
}

/* --- 14.2b Legacy content links + icons -------------------------------------
   The admin subscription column (Ships count, Downloads/Subscription "Edit",
   "Create") and the Login-name link render legacy navy #4F72A4. Recolor every
   form-body link to teal (--primary). Excludes:
     - .LinkButton pills (Save / Go) — own button chrome in §14.3
     - the website globe (#hlkUrl) — intentionally slate in §13.6
   "Add Comment" (slate, §13.5 !important) and "Add New" (already teal) are
   unaffected. */
body.page-edit-profile.sidebar-nav .modMain a:not(.LinkButton):not([id$="_hlkUrl"]) {
    color: var(--primary, #0d9488);
}

body.page-edit-profile.sidebar-nav .modMain a:not(.LinkButton):not([id$="_hlkUrl"]):hover {
    text-decoration: underline;
}

/* Legacy email.gif (the click-to-copy affordance beside each Locations-grid
   contact email) → Lucide mail glyph, slate. Opaque raster, so replace with
   content:url rather than mask (mask leaks the pixmap — §16.13). */
body.page-edit-profile.sidebar-nav .modMain img[src*="email.gif" i] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

/* The "More Info  Created: ...  Location: WSERROR" admin band that legacy
   markup renders as the very first row of `.modMain > table` */
body.page-edit-profile.sidebar-nav .modMain > table > tbody > tr.NormalBold:first-child {
    display: none;
}

/* The .modMain root table itself — strip residual padding/borders. Use
   `table-layout: fixed` so this table can't auto-grow past 100% to fit
   wide grid content nested inside (the User Info 3-col grid otherwise
   forces this table out to its max-content width and the page scrolls
   horizontally). */
body.page-edit-profile.sidebar-nav .modMain > table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
    box-sizing: border-box;
}

body.page-edit-profile.sidebar-nav .modMain > table > tbody > tr > td {
    padding: 0;
    border: 0;
}

/* --- 14.3 Buttons — beat MainWhiteout's `!important` rules -------------- */

body.page-edit-profile.sidebar-nav a.LinkButton:not(.Secondary):not(.LinkButtonClicked) {
    background: var(--primary, #0d9488) !important;
    color: var(--primary-foreground, #ffffff) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 0 !important;
    height: 36px;
    line-height: 20px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

body.page-edit-profile.sidebar-nav a.LinkButton.Secondary {
    background: var(--secondary, #f1f5f9) !important;
    color: var(--secondary-foreground, #1e293b) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 0 !important;
    height: 36px;
    line-height: 20px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* MainWhiteout.css forces `<ins>` to height:0 / padding:0 with `!important`,
   but inside our inline-flex buttons it still occupies a flex slot before
   the label (creating off-center text). Force it out entirely. */
body.page-edit-profile.sidebar-nav a.LinkButton > ins {
    display: none !important;
}

/* The Q88 brand Footer button row also wraps in <table> with two <td>s; we
   already aligned them in Phase 9. Now make Save/Cancel sit cleanly with
   no surrounding card-bg. */
body.page-edit-profile.sidebar-nav .modFooter2 > table {
    width: 100%;
    border-collapse: collapse;
    padding: 14px 24px 24px 24px;
}

body.page-edit-profile.sidebar-nav .modFooter2 > table > tbody > tr > td {
    padding: 0;
    border: 0;
}

body.page-edit-profile.sidebar-nav .modFooter2 > table > tbody > tr > td:last-child {
    text-align: right;
}

body.page-edit-profile.sidebar-nav .modFooter2 a.LinkButton {
    margin-left: 8px;
}

/* --- 14.4 User Info — restructure into Figma 3-column grid -------------- */

/* The pnlContacts wrapper renders TWO floated child <div>s (left = form,
   right = Logo + 2FA). Un-float so they stack as Figma shows (form first,
   Logo + 2FA as a band below). */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}

/* The form table → CSS Grid with 3 named columns.
   `grid-auto-flow: column` + `grid-template-rows: repeat(6, auto)` makes
   row 7 (Telephone) flow into column 2 row 1 instead of column 2 row 7
   (which is what default row-flow auto-placement does and is the bug
   that was misaligning the columns vs Figma 5:28694). */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable {
    display: grid !important;
    /* `minmax(0, 1fr)` lets columns shrink below their content's min-width
       so the grid never grows past 100%. Plain `1fr` resolves to
       `minmax(auto, 1fr)` and a long column (Contact: telephone with help
       icon) can push the column out, pushing total width past the card and
       triggering a horizontal scrollbar. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: 36px;
    row-gap: 14px;
    width: 100% !important;
    padding: 24px;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    align-items: start;
    box-sizing: border-box;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody {
    display: contents;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr {
    display: flex;
    /* `flex-start` (not `center`) so multi-line input cells (Email + Check
       Gatekeeper, Auto-CC + Lock Auto-CC checkbox) don't push the label down
       to the row's vertical centre. Each cell handles its own internal
       centring (label cell: `min-height:36px` + flex-center; input cell:
       input is at top of cell, secondary content stacks below). */
    align-items: flex-start;
    gap: 12px;
    min-height: 36px;
}

/* Each row has 3 <td>s: empty spacer / Label / Input. Hide the empty leader. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr > td:first-child:not([colspan]) {
    display: none;
}

/* Label cell: uniform 130px width so every input in every column starts at
   the same offset within its column. The 130px floor accommodates the
   widest label in any column ("Date Entry Format:" at ~123px content) plus
   a small buffer; shorter labels are clamped up to 130 by min-width.
   `padding-bottom: 6px` baseline-aligns the flex-centred label text with
   the input's text baseline (see comment on td.Label below for math).
   `width: auto !important` overrides the legacy inline `style="width:120px"`
   on the Company row so the min-width cap can take effect. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr > td.Label {
    flex: 0 0 auto;
    min-width: 130px;
    white-space: nowrap;
    width: auto !important;
    padding: 0 0 6px 0;
}

/* Input cell: take remaining flex space */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr > td:last-child:not([colspan]) {
    flex: 1 1 0;
    padding: 0;
    min-width: 0;
}

/* Inputs inside the row — take full available width */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] input[type="text"],
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] input[type="email"],
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] input[type="tel"],
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] input[type="number"],
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* With grid-auto-flow: column + grid-template-rows: repeat(6, auto):
   rows 1-6 auto-flow into column 1, rows 7-12 into column 2, rows 13-14
   into column 3 (rows 1-2). No explicit grid-column needed. The admin-only
   row 15 ("Login as This User") gets explicit placement on a new row 7
   spanning all columns. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr:nth-of-type(15) {
    grid-column: 1 / -1;
    grid-row: 7;
    margin-top: 8px;
}

/* §14.4b.1 — Display-only rows (no 36px input).
   Three rows have a short read-only control that sits at the row's top
   while the 36px-tall label TD self-centres → visual offset:
     - Company:   <span id$=_lblCompany>      (h≈15)
     - Date fmt:  <table id$=_rblDateFormat>  (h≈20, radios)
     - Login:     <a id$=_txtUserName>        (h≈15, TextBox in display mode)
   The default `align-items: flex-start` on the row protects multi-line input
   cells (Email + Gatekeeper notice, Auto-CC + Lock checkbox) — those must
   stay top-aligned. For these short display-only cells, switch the row to
   centre and drop the input-baseline nudge on the label. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr:has(> td:last-child > span[id$="_lblCompany"]),
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr:has(> td:last-child > a[id$="_txtUserName"]),
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr:has(> td:last-child > table[id$="_rblDateFormat"]) {
    align-items: center;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr:has(> td:last-child > span[id$="_lblCompany"]) > td.Label,
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr:has(> td:last-child > a[id$="_txtUserName"]) > td.Label,
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr:has(> td:last-child > table[id$="_rblDateFormat"]) > td.Label {
    padding-bottom: 0;
}

/* §14.4b — Telephone / Fax / Mobile rows -----------------------------------
   Markup pattern (legacy, can't change):
     <td class="Label">
       <div style="float:left;padding-top:2px;">Telephone: <span class="warning">*</span></div>
       <div style="float:right;font-size:12pt; font-weight:bold;">+</div>
     </td>
     <td>
       <input id="...txtPhoneCountryCode" style="width:25px;" />     ← too narrow
       <input id="...txtTelephone" style="width:173px;" />           ← fixed, no flex
       <span><img class="Img-Std Img-Std-Help"></span>
       <CustomValidator>...</CustomValidator>
     </td>

   Goals (Figma 5:29153):
     [ Telephone:* ][ + ][ 1 ][ 203 413 2030             ][ ? ]
     - Label cell flexes; "+" hangs right inside the label cell next to CC
     - "+" is 14 regular muted, not 12pt bold
     - CC input ~56px (room for 3-digit codes + 12px padding)
     - Main number flex-grows, help icon trails, 8px gap throughout
     - Inline `style="width:Npx;"` from `cc1:TextBox Width="N"` requires `!important` */

/* Label cell becomes flex so the two child divs (label / "+") align cleanly
   and "+" can be pushed to the cell's right edge. Flex blockifies the inner
   `display:inline` we used previously to neutralise float — same end result.
   `min-height:36px` matches the canonical input height; combined with
   `tr { align-items: flex-start }` above, the label vertically centres
   against the FIRST line of its input (not the row's geometric centre,
   which drifts down on multi-line rows like Email or Auto-CC + Lock).

   Baseline alignment: `line-height: 20px` matches the canonical input's
   line-height; `padding-bottom: 6px` nudges the flex-centred text UP within
   the 36px box so its baseline (≈y20) lines up with the input's text
   baseline (≈y20). Without this nudge, the label baseline sits ~3px below
   the input baseline — the residual drift the user sees as "labels not
   aligned with their textboxes" even after box-centres match. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] td.Label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    line-height: 20px;
    padding-bottom: 6px;
    box-sizing: border-box;
}

/* Override the legacy inline `font-size:12pt; font-weight:bold` on the "+" div
   so it visually matches the row baseline (Figma: 14 regular, muted). The
   selector is structural (last of multiple children) so it only fires on the
   Telephone/Fax/Mobile rows. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] td.Label > div + div {
    margin-left: auto;
    padding-top: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--muted-foreground, #64748b) !important;
}

/* The first label-cell div had inline `padding-top:2px` to baseline-align the
   text with the country-code box. With flex `align-items:center` that nudge
   misaligns the label, so zero it. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] td.Label > div:first-child {
    padding-top: 0 !important;
}

/* Input cell on ALL form rows — flex row, 8px gaps, with the help icon
   absolute-positioned at the right edge (see rule below). No padding-right
   on the cell; instead the main input uses `flex-basis: calc(100% - <X>px)`
   to leave a fixed reserve at the right so all main inputs end at the same
   x position regardless of how many trailing flex items (`&nbsp;`,
   validators) sit beside them. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr > td:last-child:not([colspan]) {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Drop the legacy inline `style="width:430px;"` on Telephone/Email/Auto-CC
   cells — the grid column already constrains row width and the inline value
   forces the row past the column edge in narrow viewports. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr > td[style*="width:430px"] {
    width: auto !important;
    max-width: 100%;
}

/* Country-code input — beat the inline `style="width:25px;"` and give it a
   fixed footprint that fits 1-3 digit codes plus 12px horizontal padding. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] input[id$="CountryCode"] {
    flex: 0 0 56px;
    width: 56px !important;
    min-width: 56px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}

/* Every non-CC text input in the form (First/Middle/Last/Job, main phone,
   Email, Auto-CC, IM/Chat) — beat the inline `style="width:Npx;"` from
   `Width="200"` / `Width="173"`.

   Non-phone rows: basis = `calc(100% - 24px)` reserves 24px (16 help icon
   + 8 gap) at the right of the cell. Trailing `&nbsp;` and validators
   wrap or sit in that reserve without subtracting from main width.

   Phone rows: see the more-specific rule below — basis = `calc(100% - 72px)`
   reserves additional 40 (CC width) + 8 (CC-to-main gap). */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] input[type="text"]:not([id$="CountryCode"]),
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] input[type="email"]:not([id$="CountryCode"]),
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] input[type="tel"]:not([id$="CountryCode"]) {
    flex: 0 0 calc(100% - 24px);
    width: auto !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Phone-row main input: subtract additional 48px for the inline CC + gap
   so the row fits without wrapping (cell width 224 - 48 - 24 = 152px main). */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr:has(input[id$="CountryCode"]) input[type="text"]:not([id$="CountryCode"]),
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr:has(input[id$="CountryCode"]) input[type="tel"]:not([id$="CountryCode"]) {
    flex: 0 0 calc(100% - 72px);
}

/* Stacked secondary content inside the input cell (Lock Auto-CC checkbox
   wrapper, Check Gatekeeper panel) — force each to its own line below the
   input. With `td:last-child { display: flex; flex-wrap: wrap }` above, a
   short wrapper like Lock Auto-CC stays inline next to the input and shrinks
   it to ~73px. `flex: 0 0 100%` makes the wrapper claim a full row, pushing
   it onto the next flex line — matching Figma 1:12256 (vertical stack). */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id$="_chkAutoCCLockedWrapper"],
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id$="_pnlGatekeeperCheck"] {
    flex: 0 0 100%;
    margin-top: 4px;
}

/* Help-icon wrapper span — pull it OUT of the flex flow with absolute
   positioning, anchored 16px from the input cell's right edge. This:
     1) Stops it from wrapping to a second line on tall rows (e.g. Auto-CC,
        where input + nbsp + validators + help previously overflowed the
        cell width and pushed help to row 2, growing the row to 92px).
     2) Keeps the visual gap-after-input consistent at 8px on every row
        (input basis = cell - 24, help anchored at right = 0 width 16,
        leaves cell.right-16 minus input.right = 8px gap).
     3) Reserves no flex space, so the main input's `flex: 0 0 calc(100% - 24px)`
        always evaluates the same regardless of help-icon presence.

   Vertical centring against the input first-line (input top=0, height=36):
   `top: 10px` puts help center at y=18, matching the input center. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr > td:last-child {
    position: relative;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:first-child > table.StdTable > tbody > tr > td:last-child > span:has(> img.Img-Std-Help) {
    position: absolute;
    right: 0;
    top: 10px;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex;
    align-items: center;
    z-index: 1;
}

/* The legacy Img-Std-Help sprite is swapped to Lucide CircleHelp globally in
   components.css (Help/info global swap → var(--icon-circle-help), slate-500).
   The absolute-positioning rule above is the only page-specific layout the
   contacts-panel help icon needs; the glyph itself is no longer painted here. */

/* §14.4c — Phone-row layout per Figma 5:29153:
     [Label "Telephone: *"]  +  [CC 38-50]  [main flex-1]  [help 16]

   Three SEPARATE visible elements: a "+" glyph, a small standalone CC
   textbox, and a wider main number textbox, plus the help icon at the
   right. The "+" sits in the label cell at its right edge (legacy markup
   parks `<div>+</div>` after the label text with float:right; the §14.4b
   `td.Label > div + div { margin-left: auto }` rule pins it to the right).

   We restyle the "+" so it reads as a regular muted glyph (not the legacy
   12pt bold), keep CC and main inline as flex siblings, and let main
   flex-grow to fill the remaining input-cell width after CC + help.

   Width trade-off: with three separate boxes occupying space, the phone
   main can't equal Email's 200px width inside a 224px cell. Phone main
   fits in (cell - CC[40] - gap[8] - help[16] - gap[8]) = ~152px. This
   matches Figma's intent of distinct boxes; outer right-edges still align
   at the cell's right edge so visually the rows are "in column". */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] input[id$="CountryCode"] {
    flex: 0 0 40px;
    width: 40px !important;
    min-width: 40px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
}

/* §14.4d — Date Entry Format radios: ASP.NET RadioButtonList with no
   RepeatDirection defaults to Vertical, rendering one <tr> per option
   (`<table><tr><td>radio+label</td></tr><tr>...</tr></table>`). Figma
   shows them stacked horizontally. Flatten the table tree to a single
   inline-flex row using `display: contents` on tbody/tr (the cells then
   become direct flex children of the table). */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id$="_rblDateFormat"] {
    display: inline-flex !important;
    align-items: center;
    gap: 24px;
    border: 0 !important;
    width: auto !important;
    margin: 0;
    padding: 0;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id$="_rblDateFormat"] > tbody {
    display: contents;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id$="_rblDateFormat"] > tbody > tr {
    display: contents;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id$="_rblDateFormat"] > tbody > tr > td {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
}

/* RadioButtonList renders the label AFTER the radio without wrapping. The
   global `input[type="radio"] + label` rule already handles font + color;
   here we just tighten margin-right to 0 so the parent `gap: 24px` controls
   inter-option spacing instead of the legacy 16px right-margin. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id$="_rblDateFormat"] input[type="radio"] {
    margin: 0 6px 0 0;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id$="_rblDateFormat"] input[type="radio"] + label {
    margin-right: 0;
    line-height: 20px;
}

/* --- 14.5 Logo + 2FA band (un-floated full-width section below form) ---- */

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) {
    padding: 0 24px 24px 24px !important;
    margin-top: 0;
    /* width:100% inherited from the >div>div rule above + 48px horizontal
       padding overflows content-box. Switch to border-box so the band sits
       inside the wrapper instead of bleeding 48px past its right edge. */
    box-sizing: border-box;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) > table.StdTable {
    width: 100% !important;
    padding-top: 16px;
}

/* "Logo image file not found." red helper text — Figma 5:29184 is regular
   (NOT italic). Only the "Using 0..." caption (5:29190) is italic. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id*="divLogo"] span[style*="color:Red"],
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id*="divLogo"] span[style*="color: Red"],
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id*="divLogo"] span[style*="color:red"] {
    color: var(--destructive, #dc2626) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

/* §14.5b.1 — Flatten Logo-section wrappers so every element shares the
   same left edge (matching Figma 5:29186 "items-start"):
     - divLogo carries inline `padding: 0 24px 16px` + `text-align: center`
       which pushes "Logo image file not found." 24px right of the section
       content edge.
     - qq-uploader (MainWhiteout legacy) sets `margin-left: 3px` and the
       parent text-align:center centres the upload button — both push the
       button ~5px right.
   Reset both. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id*="divLogo"] {
    padding: 0 !important;
    text-align: left !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] #file-uploader,
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] .qq-uploader {
    margin-left: 0 !important;
    text-align: left !important;
}

/* --- 14.5b Logo block polish ------------------------------------------- */

/* The "Change Company Logo" upload trigger renders as
   `<div id="qq-upload-button" class="qq-upload-logo-button">` (Fine Uploader
   plugin) — not an <a.LinkButton>. Style it as a secondary button per Figma
   5:29185 (button-secondary). Notes:
     - bg `#f1f5f9` matches Figma's --base/secondary; we map it through our
       `--muted` token (the project's `--secondary` resolves to legacy #f5f5f5).
     - text `#1e293b` is Figma literal; our `--secondary-foreground` token
       resolves to legacy #666 so we use the literal here.
     - `box-sizing: border-box` is required: MainWhiteout's
       `.qq-upload-logo-button { height: 15px; padding: 5px ... !important }`
       loses on specificity, BUT the default `content-box` made height + 8+8
       padding + 1+1 border = 54px. Border-box keeps it at 36 total.
     - `font-weight: 500 !important` overrides MainWhiteout's
       `.qq-upload-logo-button { font-weight: normal !important }`. */
body.page-edit-profile.sidebar-nav #qq-upload-button.qq-upload-logo-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    padding: 8px 16px !important;
    border-radius: 8px;
    background: var(--muted, #f1f5f9) !important;
    color: #1e293b !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
    white-space: nowrap !important;
    cursor: pointer;
    text-decoration: none;
    margin: 0;
}

body.page-edit-profile.sidebar-nav #qq-upload-button.qq-upload-logo-button:hover {
    background: var(--muted, #f1f5f9) !important;
    filter: brightness(0.95);
}

/* Logo "image file not found" inline span — Red inline-style is set via
   jQuery $.html(). Figma 5:29184 is regular (NOT italic). */
body.page-edit-profile.sidebar-nav #divLogo span[style*="color:Red"],
body.page-edit-profile.sidebar-nav #divLogo span[style*="color: Red"],
body.page-edit-profile.sidebar-nav #divLogo span[style*="color:red"] {
    color: var(--destructive, #dc2626) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 12px !important;
}

/* Left-align the Logo block + 2FA section instead of centered table chrome,
   and give it a "Logo" caption above so it matches Figma's section header. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) {
    text-align: left !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) > table.StdTable,
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) > table.StdTable.NoBorder {
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Force every <td> in the Logo/2FA right-block table to left-align (the
   legacy markup uses inline align="center" on td) */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) > table.StdTable > tbody > tr > td,
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) > table.StdTable.NoBorder > tbody > tr > td {
    text-align: left !important;
    padding: 4px 24px 4px 24px !important;
}

/* Section caption "Logo" rendered via pseudo-element. The block has no
   semantic header in markup, so we synthesise one for visual parity with
   Figma without touching the .ascx. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2)::before {
    content: "Logo";
    display: block;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--foreground, #0f172a);
    padding: 16px 24px 0 24px;
}

/* The legacy <td> inside the right block uses `align="center"` HTML attr
   and inline padding. Convert each <tr> into a left-aligned flex row so
   labels and controls sit side-by-side as Figma shows. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) > table.StdTable > tbody > tr,
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) > table.StdTable.NoBorder > tbody > tr {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 4px 24px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) > table.StdTable > tbody {
    display: block;
}

/* §14.5e — "Delay time on 2FA" row.
   Legacy markup is one TD wrapping a centred DIV with a bold span and a
   30px-wide input:
     <td style="padding:10px 60px 0 0">
       <div style="text-align:center">
         <span id$=_lblMFADelay style="font-weight:bold"><b>Delay time on 2FA:</b></span>
         <input id$=_txtMFADelayinDays style="width:30px" />
       </div>
     </td>
   Figma 5:29186 wants left-aligned label (14px regular, not bold) inline
   with a flex-filling 36px input inside a 432px container. Convert the DIV
   wrapper to flex with 8px gap, neutralise the inline `font-weight:bold`
   on both the span and the inner <b>, and let the input flex-grow. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) > table.StdTable > tbody > tr > td > div:has(> span[id$="_lblMFADelay"]) {
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-align: left !important;
    max-width: 432px;
    width: 100%;
}

body.page-edit-profile.sidebar-nav [id$="_lblMFADelay"],
body.page-edit-profile.sidebar-nav [id$="_lblMFADelay"] > b {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--foreground, #1a1a1a) !important;
    white-space: nowrap;
}

body.page-edit-profile.sidebar-nav input[id$="_txtMFADelayinDays"] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Lock the helper text below the 2FA input to its own line, italic 12 destructive */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] > div > div:nth-child(2) span.q88-text-error,
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] [id$="_lblMFAInfo"] {
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-style: italic !important;
    color: var(--destructive, #dc2626) !important;
    font-weight: 400 !important;
    background: transparent !important;
    display: block;
    padding: 4px 0 0 0;
}

/* --- 14.6 Hide the redundant subheader area inside .modMain ------------- */

/* Some layouts inject a per-section "GridHeader" row inside the form area
   ("Contact Details" etc.) — already visually hidden via Phase 6, but make
   sure the band area itself doesn't show navy bg. */
body.page-edit-profile.sidebar-nav .modMain td.GridHeader,
body.page-edit-profile.sidebar-nav .modMain tr.GridHeader > td {
    background: transparent !important;
    color: var(--muted-foreground, #475569);
}

/* ---------------------------------------------------------------------------
   §14.x — Admin utility buttons (NOT in Figma, but rendered server-side for
   admin roles). The default LinkButton skin is primary teal — too prominent
   for these utility actions. Demote to secondary (muted bg, foreground text)
   and shrink so they read as inline admin tools.

   - lnkGatekeeperLookup ("Check Gatekeeper") sits inside pnlGatekeeperCheck
     under the Email field. Demote to secondary; render compact next to the
     verify-text helper.
   - lnkImpersonate ("Login as This User") sits in row 15 of pnlContacts in
     a `.ButtonsRow` div that spans all 3 columns. Demote to secondary so it
     stops competing with the actual Save action.
   --------------------------------------------------------------------------- */
/* Specificity bump (0,5,2): the earlier rule §14.3
   `a.LinkButton:not(.Secondary):not(.LinkButtonClicked)` is (0,5,2) and
   wins ties via source order — so we match it: `a.LinkButton[id$=...]
   :not(.Secondary):not(.LinkButtonClicked)` is also (0,5,2) and is later
   in the file. Plus, source order tie-breaks in our favor. */
body.page-edit-profile.sidebar-nav a.LinkButton[id$="_lnkGatekeeperLookup"]:not(.Secondary):not(.LinkButtonClicked),
body.page-edit-profile.sidebar-nav a.LinkButton[id$="_lnkImpersonate"]:not(.Secondary):not(.LinkButtonClicked) {
    background: var(--secondary, #f1f5f9) !important;
    color: var(--secondary-foreground, #1e293b) !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    height: 28px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

body.page-edit-profile.sidebar-nav a.LinkButton[id$="_lnkGatekeeperLookup"]:not(.Secondary):not(.LinkButtonClicked):hover,
body.page-edit-profile.sidebar-nav a.LinkButton[id$="_lnkImpersonate"]:not(.Secondary):not(.LinkButtonClicked):hover {
    background: var(--muted, #f1f5f9) !important;
    filter: brightness(0.97);
}

/* The Gatekeeper panel renders as a flex line under the Email input — pull
   it tighter so it doesn't bloat the row height (which used to drag the
   middle-initial row to 76px before column-flow alignment fix). */
body.page-edit-profile.sidebar-nav [id$="_pnlGatekeeperCheck"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlGatekeeperCheck"] [id$="_lblVerifyEmail"],
body.page-edit-profile.sidebar-nav [id$="_pnlGatekeeperCheck"] span {
    font-size: 12px;
    color: var(--muted-foreground, #475569);
    line-height: 1.4;
}

/* The Login-as-This-User row spans all 3 columns. Left-align the button
   so it sits as a small admin action, not a centered hero button. */
body.page-edit-profile.sidebar-nav [id$="_pnlContacts"] .ButtonsRow {
    text-align: left;
    padding: 4px 0 0 0;
}

/* §14.5 — 2FA Delay input. The legacy server tag emits `width="30"` as an
   HTML attribute, which forces the styled input down to 30px — too narrow
   to hold a 2-digit number, so the field appears clipped. Per Figma the
   row is `width 432` with label `130` + input `flex-1`. Override the HTML
   attribute width and give the field a usable min-width. */
body.page-edit-profile.sidebar-nav [id$="_txtMFADelayinDays"] {
    width: 96px !important;
    min-width: 96px;
}

/* ===========================================================================
   §14.12 — Company Info panel (pnlCompany) — Figma node 70:7325
   ---------------------------------------------------------------------------
   pnlCompany is the admin-only Q88 LLC company-details view, surfaced via
   the existing FunctionLink tab pill (lnkCompanyDetails -> "Company Info").
   It renders only when ?c=1 and the operator has Company Details role.

   Markup (ManageAccount.ascx:1818-2181):
     pnlCompany
       table.StdTable.NoBorder            <- 4-col legacy table
         tr  (Company / Ships)
         tr  (Status / [rowspan=4 Downloads + Cargo + Concurrent block])
         tr  (Category)
         tr  (Email + ddlTemplates + btnEmail)
         tr  (Website)
         tr  (blank spacer)
         tr  (Trial Date) — admin-only
         tr.LocationAddressHeader + Repeater rptLocations + "Add New" footer
         tr.EditProfileCommentHeader  (Comments History title + filter)
       UpdatePanel updComments
         #divComments
           Repeater rptComments -> ltCommentItem (raw HTML span.jqCompanyComment)

   We keep the legacy <table> rowspan intact (the right-side Downloads
   block is naturally a tall column via rowspan=4). Just constrain widths,
   pad cells, and restyle the inputs / locations / comments. The 4-col
   table renders visually as 2 columns: label+input on the left, the big
   rowspan'd Downloads/Subscription block on the right.
   =========================================================================== */

/* --- 12.1 Outer panel structure ----------------------------------------- */
/* Reset DotNetNuke's default cell padding, spread the form across the card.
   Add Figma's card chrome: 1px border, 12px radius, soft shadow, white bg. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] {
    /* The outer table.tableBorder.q88-card already provides bg/border/radius/shadow per Figma.
       pnlCompany is the inner pane. Horizontal inset is provided by the outer card's
       `padding: 24px 24px` (see body.page-edit-profile.sidebar-nav table.tableBorder rule)
       rather than here, because adding horizontal padding ON pnlCompany triggers a
       width-auto collapse in the modContainerStd table-cell ancestor chain (card shrinks
       from full viewport to ~800px). max-width removed (was 1280) + width:100% so wide
       viewports aren't artificially clamped — pnlCompany grows with the card. */
    display: block;
    width: 100%;
    padding: 24px 0;
    /* Parent TD has HTML `align="center"` which renders `text-align: -webkit-center`
       that ALSO centers block children. Force margin-right: auto with margin-left: 0
       so the pane hugs the left edge of the content area per Figma. */
    margin: 0 auto 24px 0 !important;
    box-sizing: border-box;
    text-align: left;
}

/* table-layout: fixed with percentage column widths set on the FIRST
   row's cells. Cols sum to 100%:
     Col 1 = 12% (≈130px on 1130 card) — left label
     Col 2 = 38% (≈430px) — left input
     Col 3 = 12% (≈130px) — Ships label / right inner col 1
     Col 4 = 38% (≈430px) — hlkFullName slot / right inner col 2
   The rowspan=4 colspan=2 Downloads block in row 2 spans cols 3+4 = ~50%
   of the panel, matching Figma's right visual column.

   `!important` for col 1 because the legacy markup writes inline
   `style="width:90px;"` on the Company-label <td>. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    margin: 0;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td {
    padding: 6px 8px;
    border: 0;
    background: transparent;
    /* Vertically center labels with their dropdowns/inputs. The right-column rowspan=4
       cell (Downloads/Subscription block) overrides back to `top` via its own rule below. */
    vertical-align: middle;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    color: var(--foreground, #0f172a);
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:first-child > td:nth-child(1) {
    width: 12% !important;
    min-width: 110px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:first-child > td:nth-child(2) {
    width: 38%;
    padding-right: 36px !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:first-child > td:nth-child(3) {
    width: 12%;
    min-width: 110px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:first-child > td:nth-child(4) {
    width: 38%;
}

/* --- 12.2 Label cells in pnlCompany ------------------------------------- */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.Label {
    color: var(--foreground, #0f172a);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    /* Figma labels are left-aligned next to the input. */
    text-align: left;
    padding-top: 14px;
}

/* The required-field star is a <span class="warning"> next to the label
   text. §14.4 already styles .warning -> destructive bold. Just nudge it
   into a tighter inline cluster. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.Label > span.warning {
    margin-left: 2px;
}

/* --- 12.3 Inputs / dropdowns inside pnlCompany --------------------------
   `<asp:TextBox Width="200">` emits an INLINE `style="width:200px"` — must
   beat with `!important` to fill the cell up to a Figma-aligned ~280px. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] input[type="text"],
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] input[type="email"],
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] select {
    width: 100% !important;
    max-width: 280px;
    box-sizing: border-box;
}

/* The Ships textbox is a 60px admin scalar — keep it small. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] input[id$="_txtShips"] {
    width: 60px !important;
    max-width: 60px;
    height: 28px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
}

/* The disabled Company input renders muted text; differentiate from
   editable fields. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] input[id$="_txtCompany"][disabled],
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] input[id$="_txtCompany"]:disabled {
    background: var(--muted, #f8fafc);
    color: var(--muted-foreground, #475569);
    cursor: not-allowed;
}

/* --- 12.4 The Email row's Templates dropdown + Go button ----------------
   The row inline-flows: hlkEmail link + ddlTemplates select + btnEmail
   LinkButton. Wrap them as a single inline-flex row. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] [id$="_ddlTemplates"] {
    width: auto !important;
    max-width: 220px;
    margin-right: 6px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a.LinkButton[id$="_btnEmail"] {
    height: 28px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}

/* The Email-row checkbox label `<asp:CheckBox Text="Email:">` renders as
   `<input type=checkbox> + <label>Email:</label>`. The label text is the
   row label (col 1) and the checkbox is a small lock toggle. Stack them
   neatly. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.Label > [id$="_chkRedirect"] + label,
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.Label > input[type="checkbox"] + label {
    margin-left: 6px;
    vertical-align: middle;
}

/* --- 12.5 Website "external link" image -------------------------------- */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a[id$="_hlkUrl"] img {
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0.7;
}

/* --- 12.6 Right-side Subscription column (rowspan=4 cell) ---------------
   REWRITTEN 2026-05-21: prior version had two competing rules that broke
   the layout — §12.6 set `table-layout: fixed` then a later override flipped
   it to `auto !important` so the `min-width: 360px` on the colspan=2 checkbox
   rows ("Enable Cargo History Feed", "Allow concurrent logins") propagated
   into the FIRST column under auto-layout, blowing labels out to 360px wide
   and squeezing values to 115px wide. The "Current" value then wrapped onto
   5 lines and the whole right column read as disordered.

   New approach: turn the inner subscription <table> into a CSS Grid via
   `display: grid` + `display: contents` on tbody/tr. That gives us a clean
   `[label 130px] [value 1fr]` template that ignores intrinsic min-widths
   from colspan="2" rows. The colspan="2" rows get `grid-column: 1 / -1`
   to span both grid tracks.

   Markup recap (lines 1818-2032 of ManageAccount.ascx):
     <td rowspan="4" colspan="2">  (the right column container)
       <table>
         <tr id="trDownloads" hidden>           ← admin-only, skip
         <tr id="trCurrentSubscription">         label "Current:" + value
         <tr id="trSubscripNext">                label "Next:" + value
         <tr id="trNextInvoice">                 label "Next Invoice:" + value
         <tr><td colspan="2">"Enable Cargo History Feed" checkbox</td></tr>
         <tr><td colspan="2">"Allow concurrent logins" checkbox</td></tr> */

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] {
    /* Right column container — top-aligned, indented 36px from the form
       column. Ships row is moved into this cell at page load by the
       inline script at the end of pnlCompany (ManageAccount.ascx ~L2180),
       so the visual stack reads Ships → Current → Next → Next Invoice →
       Cargo History checkbox → Concurrent logins checkbox.

       `padding-top: 12px` gives a slight breathing space at the top of
       the column so it doesn't hug the Status row label on the left. */
    padding-top: 12px;
    padding-left: 36px;
    vertical-align: top;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] > table {
    /* Grid layout: 130px label column + flex value column, 12px row gap.
       `display: grid` on <table> + `display: contents` on tbody/tr lifts
       the <td> cells directly into the grid, bypassing all table-layout
       intrinsic-min-width behaviour. */
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 12px;
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] > table > tbody,
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] > table > tbody > tr {
    display: contents;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] > table > tbody > tr > td {
    /* Each <td> is now a grid cell — flex it so label/value text vertically
       centers on the 32px row baseline. `column-gap: 6px` gives a small
       breathing space between the value Literal and the inline action
       LinkButton (e.g. "N/A" + "Create" in the Next row) — they're sibling
       flex items so otherwise they sit flush. */
    display: flex;
    align-items: center;
    column-gap: 6px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    color: var(--foreground, #0f172a);
    min-width: 0;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] > table > tbody > tr > td.Label {
    /* Subscription labels match form-side label colour (muted-fg per Figma
       Frame 19 "Current"/"Next"/"New Invoice" text style). */
    color: var(--muted-foreground, #475569);
    font-weight: 400;
}

/* trCurrentSubscription value can wrap (the legacy markup interleaves
   <Literal>Premium (Booking List) ...</Literal> with calendar dates and
   an Edit linkbutton — too long for one line). Allow the value cell to
   grow vertically up to 2-3 lines, but keep alignment crisp. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] [id$="_trCurrentSubscription"] > td:not(.Label) {
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 2px;
    line-height: 1.4;
    padding: 6px 0;
    min-height: 32px;
}

/* The "Edit"/"Create" inline LinkButtons next to subscription rows are
   secondary admin tools — demote to small muted buttons. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a.LinkButton[id$="_lbChangeDownloads"]:not(.Secondary):not(.LinkButtonClicked),
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a.LinkButton[id$="_lbChangeCurrentSubscription"]:not(.Secondary):not(.LinkButtonClicked),
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a.LinkButton[id$="_lbNextSubscription"]:not(.Secondary):not(.LinkButtonClicked) {
    background: var(--secondary, #f1f5f9) !important;
    color: var(--secondary-foreground, #1e293b) !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    height: 24px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    margin-left: 4px;
}

/* The Cargo History / Concurrent rows render as <tr><td colspan="2">
   <b>Label:</b> <checkbox></td></tr>. Span both grid columns; layout
   inside the cell is a flex row with the checkbox first, label after.
   Matches Figma Frame 19 checkbox rows (Enable Cargo History Feed,
   Allow concurrent logins). */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] > table > tbody > tr > td[colspan="2"] {
    grid-column: 1 / -1;
    gap: 8px;
    padding: 0;
    min-height: 24px;
    white-space: nowrap;
    color: var(--foreground, #0f172a);
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] > table > tbody > tr > td[colspan="2"] > b {
    order: 2;
    font-weight: 400;
    margin: 0;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] > table > tbody > tr > td[colspan="2"] > input[type="checkbox"],
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[rowspan] > table > tbody > tr > td[colspan="2"] > span > input[type="checkbox"] {
    order: 1;
    margin: 0;
}

/* --- 12.6.b "Ships:" row (relocated into right column at page load) ----
   The inline script at the end of pnlCompany (ManageAccount.ascx ~L2180)
   moves the legacy Ships cell from Row 1 of the Company form into the
   inner subscription table as a new <tr id="trShipsMoved">. After the
   move, the row is styled by the §12.6 grid rules above (130 label + 1fr
   value, 32px min-height, 12px row-gap).

   The original Ships cell in Row 1 is kept in the layout with
   `visibility: hidden` (set by the script, not CSS) so it preserves its
   132px column width — `display: none` would have let the outer
   auto-layout form table reflow columns wider and crush the right
   column's value cells. */

/* The relocated Ships row's value cell may contain a leading whitespace
   text node (legacy markup had &nbsp; before the txtShips input) — tighten
   the inline gap so the input doesn't drift. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr#trShipsMoved > td:not(.Label) input[type="text"] {
    margin: 0 4px;
}

/* --- 12.7 Trial Date row (admin-only, kept visible) -------------------- */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] [id$="_lblTrialDate"] {
    color: var(--foreground, #0f172a);
    font-weight: 400;
}

/* The colspan=6 td that wraps the locations sub-table inherits the 6px/8px
   form-cell padding by default — strip it so the locations + comments tables
   actually reach the pnlCompany edges. Per the user's "tables span the whole
   card width" requirement; pnlCompany + StdTable horizontal padding already
   dropped to 0 above. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr > td[colspan="6"] {
    padding: 0 !important;
}

/* --- 12.8 rptLocations table — office locations ------------------------
   Header is `<tr class="Header LocationAddressHeader">`, items are
   `<tr id="trAddress">` (with optional .AssignedToHighlight on owner
   match). Footer is "Add New" link. The whole repeater renders inside
   a colspan=6 cell, so we get a full-width nested <table>. */

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.LocationAddressHeader,
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader {
    background: transparent !important;
    color: var(--foreground, #0f172a) !important;
}

/* `!important` required: legacy inline <style> sets
   `.LocationAddressHeader td { background-color: rgb(79, 114, 164) !important }`. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.LocationAddressHeader > td {
    /* Column-header chrome per Figma file oM4wJDLxiHlaKMCy6GvTXs node 70:10304:
       14/500 medium Inter, slate-600 on slate-100 muted bg, mixed-case (no
       text-transform), no letter-spacing tracking. Previously rendered as
       12/600 uppercase per an earlier Phase 12 pass — those values don't
       trace to the Figma Column Header instance's text token, which uses
       text-sm/leading-normal/medium = 14/500. */
    background: var(--muted, #f1f5f9) !important;
    color: var(--muted-foreground, #475569) !important;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 16px !important;
    border-top: 1px solid var(--border, #e2e8f0);
    border-bottom: 1px solid var(--border, #e2e8f0);
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.LocationAddressHeader > td:first-child {
    border-top-left-radius: 8px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.LocationAddressHeader > td:last-child {
    border-top-right-radius: 8px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr#trAddress,
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr[id$="_trAddress"] {
    background: var(--card, #ffffff);
    transition: background 120ms ease;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr#trAddress > td,
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr[id$="_trAddress"] > td {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--border, #e2e8f0);
    font-size: 14px;
    line-height: 20px;
    color: var(--foreground, #0f172a);
    vertical-align: middle;
    background: transparent;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr#trAddress:hover,
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr[id$="_trAddress"]:hover {
    background: var(--muted, #f8fafc);
}

/* The owner-match highlight already renders as .AssignedToHighlight —
   give it a teal accent strip via left border. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr#trAddress.AssignedToHighlight,
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr[id$="_trAddress"].AssignedToHighlight {
    background: rgba(var(--primary-tint), 0.05);
    box-shadow: inset 3px 0 0 0 var(--primary, #0d9488);
}

/* The first <td> in trAddress contains an `AddressType-N` colored dot
   indicator + the location string. Tighten the dot. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr#trAddress > td:first-child > div[class*="AddressType-"] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* ===========================================================================
   Reminder-date picker — Figma node 70:10310 ("Pick a date" field).
   Figma shows a SINGLE pill-shaped field with the calendar glyph INSIDE the
   input on the left, not a separate icon button beside it. The DOM emits
       <div style="display:inline-block"> (wrapper)
         <input type="text" .._txt>    (date text)
         <input type="image" .._imgCal>(calendar trigger)
         <span .._cvDate>              (validator)
       </div>
   We style the wrapper as the bordered field, flex-row the children with
   the icon ordered first, and make the text input borderless so the field
   reads as one unit. The icon still uses the global Lucide mask from
   components.css (currentColor + 16×16 mask centered).
   =========================================================================== */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.tdLocationReminderDate > div {
    /* Figma 70:10310 (State=Default, Type=Icon Left): 32h, rounded-md(8),
       1px slate-200, px-3(12) py-2(8), gap-2(8) between icon and text.
       Inline style on the div is `display:inline-block;` — beat with !important.
       position: relative needed so the legacy <input type="image"> can absolute-
       overlay the ::before pseudo as an invisible click target. */
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid var(--border-input, #e2e8f0);
    border-radius: 8px;
    background: var(--card, #ffffff);
    padding: 8px 12px;
    position: relative;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Lucide calendar icon drawn via ::before pseudo (NOT the legacy <input type="image">).
   The pseudo is the visible glyph; the input is hidden via opacity:0 and absolute-
   positioned on top for click handling. The SVG is the exact Lucide calendar (rect 18×18
   with rx=2 + two top "hangers" at x=8,16 + header divider at y=10), stroke baked in as
   slate-900 (#0f172a) per Figma node 70:10310 color-pick.

   Why this approach: `content: url(...)` on <input type="image"> does NOT replace the
   rendered SRC bitmap in this browser engine — Playwright element-screenshot proved the
   legacy /images/icons/calendar.gif (gray frame + green header + red highlight cell) was
   still rendering through. The CSS `mask` approach also fails because mask only cuts the
   composite — the GIF's non-stroke pixels still paint where the mask is opaque, causing
   green/gray bleed. Only solution: hide the legacy element entirely, draw the glyph from
   a pseudo on a different node. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.tdLocationReminderDate > div::before {
    content: "";
    order: -1;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.tdLocationReminderDate > div:focus-within {
    border-color: var(--primary, #0d9488);
    box-shadow: 0 0 0 1px var(--primary, #0d9488);
}

/* The legacy <input type="image" src="calendar.gif"> is HIDDEN entirely (opacity:0)
   but kept in the DOM so its postback handler still wires to the click. The visible
   glyph is the ::before pseudo on the wrapper. The input is absolute-positioned over
   the pseudo so a click on the visible icon hits the input. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.tdLocationReminderDate input[type="image"] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: transparent !important;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Text input fills the rest. Inter Medium 14/20 per Figma. Borderless,
   transparent so the wrapper chrome shows through. ExpiredReminder rule
   below repaints the field when overdue. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.tdLocationReminderDate input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    height: 20px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0;
    padding: 0 !important;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px !important;
    font-weight: 500;
    line-height: 20px;
    color: var(--foreground, #0f172a);
}

/* Expired (overdue reminder) — red tint on the field, not just the input. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.tdLocationReminderDate > div:has(input.ExpiredReminder) {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--destructive, #dc2626);
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.tdLocationReminderDate input.ExpiredReminder {
    color: var(--destructive, #dc2626) !important;
}

/* The "copy email" tiny icon link inside the Email column — strip the
   underline and shrink the icon. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr#trAddress td[id$="_tdContactEmail"] a {
    text-decoration: none;
    margin-right: 4px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr#trAddress td[id$="_tdContactEmail"] a img {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    opacity: 0.7;
}

/* "Add New" location button — primary CTA matching Save / Go (§14.7). */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a[id$="_lbNewAddress"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 8px 16px;
    margin: 8px 0 12px 0;
    background: var(--primary, #0d9488);
    color: var(--primary-foreground, #eff6ff) !important;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 120ms ease;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a[id$="_lbNewAddress"]:hover {
    background: var(--primary, #0d9488);
    filter: brightness(0.95);
    color: var(--primary-foreground, #eff6ff) !important;
    text-decoration: none !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a[id$="_lbNewAddress"]::before {
    content: "+";
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
}

/* --- 12.9 Comments History header ------------------------------------- */
/* `!important` on color: legacy `tr.Header td { color: #fff }` rule wins
   on cascade specificity tie. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td {
    /* Section-title chrome per Figma node 71:8140 "Title" — text-lg/leading-none/semibold
       (18/600 Inter, slate-900). Prior pass shipped 16/700 which is a different
       token (text-base/leading-normal/semibold). The 24×36 cell height in Figma
       comes from the parent row being h-9 (36); the 24h text is the line-box of
       18px text rendered at line-height: 1.33. */
    background: transparent !important;
    padding: 20px 0 8px 0 !important;
    border: 0;
    border-top: 1px solid var(--border, #e2e8f0);
    margin-top: 16px;
    color: var(--foreground, #0f172a) !important;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td > div {
    /* Legacy markup wraps the filter as bare text nodes: `(View: <select> )`.
       Figma (node 71:8140/71:8222) shows just the title + a clean `Comments ▾`
       dropdown — no "(View:" label, no parens. font-size:0 swallows both text
       nodes; the <select> below keeps its own `font-size:13px !important` so it
       stays visible. (Same swallow-the-text pattern as the right cell, §13.5.) */
    font-size: 0;
    font-weight: 400;
    color: var(--muted-foreground, #475569);
    margin-left: 12px;
}

/* The View dropdown in the comment header — small, inline. min-width keeps
   it from shrink-wrapping to the selected value (~85px), which clipped the
   value against the native chevron and crowded the closing ")". */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] [id$="_ddlCompanyCommentFilter"] {
    height: 28px !important;
    padding: 2px 8px !important;
    font-size: 13px !important;
    margin-left: 4px;
    width: auto !important;
    min-width: 160px;
    max-width: 220px;
    box-sizing: border-box;
}

/* Refresh / Add Comment links in the right cell — small, muted. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td:last-child {
    text-align: right;
    font-size: 13px !important;
    font-weight: 400;
    color: var(--muted-foreground, #475569);
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td:last-child a {
    color: var(--primary, #0d9488);
    text-decoration: none;
    font-weight: 500;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td:last-child a:hover {
    text-decoration: underline;
}

/* --- 12.10 divComments + jqCompanyComment items -----------------------
   The comments are emitted as raw HTML in ltCommentItem.Text — see
   ManageAccount.ascx.cs:1870. Each item is:
     <span class="jqCompanyComment[ InActive][ highlight]"
           style="width:100%; display:inline-block; padding-left:3px;
                  background-color:#fff; border-bottom:1px solid #DFDFDF;">
       <table class="noBorders" ...>...</table>
     </span>
   We need !important to beat the inline styles. */

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments {
    /* Per-comment bottom borders (below) carry the visual separation. No outer chrome — Figma
       shows the comments list as flow content inside the card, not as a framed sub-card. */
    padding: 4px 8px;
    height: 270px;
    overflow-y: auto;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment {
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    background-color: var(--card, #ffffff) !important;
    padding: 8px 6px !important;
    font-family: var(--font-family, "Inter", system-ui, sans-serif);
    font-size: 13px;
    line-height: 20px;
    color: var(--foreground, #0f172a);
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment:last-child {
    border-bottom: 0 !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment.highlight {
    background-color: rgba(220, 38, 38, 0.06) !important;
    box-shadow: inset 3px 0 0 0 var(--destructive, #dc2626);
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment.InActive {
    opacity: 0.55;
    text-decoration: line-through;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment.RedBorder {
    box-shadow: inset 3px 0 0 0 var(--destructive, #dc2626);
}

/* Comment author name renders as <font color="blue"> — the inline color
   wins on `color` but we can wrap it via the wrapping <td> to neutralize. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment font {
    color: var(--primary, #0d9488) !important;
    font-weight: 500;
}

/* Inline action links (Edit | Del | Alert) in the comment row — keep tight
   and muted. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment a {
    color: var(--muted-foreground, #475569);
    font-size: 12px;
    text-decoration: none;
    margin: 0 2px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment a:hover {
    color: var(--primary, #0d9488);
    text-decoration: underline;
}

/* The optional category tag on a comment renders as <span class="smallTag">. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment .smallTag {
    display: inline-block;
    padding: 1px 6px !important;
    background: var(--muted, #f1f5f9);
    color: var(--muted-foreground, #475569);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* The inner <table class="noBorders"> spaces the comment body, links, and
   author/date row. Tighten the cell padding so the comment item doesn't
   stretch tall. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment table.noBorders > tbody > tr > td {
    padding: 2px 0 !important;
    font-size: 13px;
    color: var(--foreground, #0f172a);
}

/* System comments get a muted look (the codebehind sets class='System'
   on the comment cell). */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment td.System,
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] #divComments .jqCompanyComment td#tdComment.System {
    color: var(--muted-foreground, #475569);
    font-style: italic;
}

/* --- 12.11 Header band: surface "Company Info" label when active -------
   When pnlCompany is the active section, the existing tab pill (modSub1
   FunctionLink) will already show "Company Info" highlighted. Nothing
   extra needed here — the tab pill rule from §14.3 covers it. The
   ltlCompanyHeading literal that may emit "Q88 LLC" next to "Edit
   Profile" in the title is already hidden via §14.3 `:empty` rule.
   --------------------------------------------------------------------- */

/* ===========================================================================
   §14.13 — Company Info: gap-closure pass (Figma 70:7325 alignment)
   ---------------------------------------------------------------------------
   After visual probe of the live page vs the Figma design, the following
   issues remain after §14.12 and need targeted fixes:

   1. Empty spacer rows 6-11 (1-indexed) between Website and Locations
      create ~80px of dead vertical gap. They render the Trial Date stub,
      hidden Intertanko cells, hidden trSubscripHeader, hidden ContractedValues.
      All but Trial are empty in admin mode; Trial only renders if codebehind
      sets lblTrialDate.Text. Hide the empty ones.
   2. Row 1 col 3 holds "Ships: 55 / 5" admin block — Figma shows nothing
      to the right of Company. Demote to muted small-text so it sits
      unobtrusively in the right column.
   3. Status row col 2 has dpdCompanyStatus + " Retention: " text +
      chkIncludeInRetentionStats checkbox appended INLINE. The DD is at
      max-width 280px so the checkbox/label wrap below, blowing the row
      to 72px tall (others are 48-58). Wrap the trailing admin pieces
      onto a tight subordinate line so the row stays 56px.
   4. Email row label cell has chkRedirect checkbox + "Email:" label.
      Hide the admin checkbox; let "Email:" render plain.
   5. Comments header right cell ("Refresh | Add Comment") — Figma shows a
      single circular "+" affordance. Hide Refresh + the "|" separator;
      style "Add Comment" as a 28x28 circular icon button.
   6. Website link img (ie.gif) — re-skin as a globe-style icon via CSS
      so it matches Figma's external-link affordance.
   =========================================================================== */

/* --- 13.1 Hide empty spacer / hidden-content rows -----------------------
   Pure structural targeting via :nth-of-type — rows 6 through 11 (1-indexed)
   between the Website row (5) and the Locations colspan=6 row (12). These
   correspond to:
     6: empty placeholder row
     7: Trial Date stub (lblTrialDate text="" by default)
     8: Intertanko (cells already display:none, but TR renders 12px tall)
     9: empty colspan=4 row
    10: trSubscripHeader (visible=false → empty TR with no cells)
    11: ContractedValues row (Literal visible=false, cells empty)

   Trial Date row IS preserved IF lblTrialDate has rendered text — use :has()
   to only hide rows where label text is empty. Browsers without :has() get
   the broader "always hide" fallback (acceptable: Trial Date is rare). */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(6),
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(8),
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(9),
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(10),
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(11) {
    display: none;
}

/* Trial Date row (1-indexed 7) — always hide. Admin Trial admin-rare and
   Figma doesn't include it. If a future ticket needs it, re-show with a
   :has() guard targeting non-empty lblTrialDate. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(7) {
    display: none;
}

/* --- 13.2 Row 0 (Company) col 3 — "Ships: 55 / 5" admin block ----------
   Demote to muted small text. Cell still renders but visually subordinate.
   The hdnRole hidden field stays out of the way (display:none by type). */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(1) > td.Label:nth-of-type(3) {
    font-size: 12px;
    color: var(--muted-foreground, #64748b);
    font-weight: 400;
    padding-top: 18px;
    text-align: left;
    white-space: nowrap;
}

/* The hidden a/lnk children that are visible="false" — leave alone. */

/* --- 13.3 Status row: hide the trailing " Retention: " admin sub-control
   The TD contains: <select> + " Retention: " text node + <checkbox>.
   The text node and checkbox can't be hidden individually without flex
   tricks (which broke the select width). Pragmatic: zero the TD's
   font-size to swallow the loose text, then restore it on the select.
   Hide the checkbox itself — admin-rare microtoggle, off-design.
   Status DD width is restored to 280px to match other inputs. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(2) > td:nth-of-type(2) {
    font-size: 0 !important;
    line-height: 0 !important;
    padding-top: 6px !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(2) > td:nth-of-type(2) > select {
    font-size: 14px !important;
    line-height: 20px !important;
    width: 280px !important;
    max-width: 280px;
}

/* Hide the admin Retention checkbox — off-Figma, rare-use. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] [id$="_chkIncludeInRetentionStats"] {
    display: none !important;
}

/* --- 13.4 Email row: hide admin chkRedirect, render plain "Email:" -----
   ASP.NET CheckBox emits `<span><input type=checkbox><label>Email:</label></span>`.
   Hide just the input so the "Email:" label still reads as the row label. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.Label [id$="_chkRedirect"] {
    display: none !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.Label [id$="_chkRedirect"] + label {
    margin: 0;
    color: var(--foreground, #0f172a);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

/* --- 13.5 Comments History header right cell ---------------------------
   HTML emitted: `<a>Refresh</a>&nbsp;|&nbsp;<a>Add Comment</a>` (raw text
   nodes between the anchors). To replace with a single circular "+":
     - Hide the first <a> (Refresh)
     - Zero the parent's font-size to swallow the "|" text node
     - Style the second <a> as a 28x28 circular icon button using ::before */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td:last-child {
    font-size: 0 !important;
    padding-right: 4px !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td:last-child a:first-of-type {
    display: none !important;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td:last-child a:last-of-type {
    /* Per Figma node 71:8312 "Icon / 24px / CirclePlus" sized 24×24 at the
       far-right slot of the Comments History header (Frame 22). The earlier
       32×32 pill chrome was a UI-convention guess — Figma is a bare 24px
       Lucide CirclePlus glyph painted in slate-foreground, no pill. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: var(--foreground, #0f172a) !important;
    text-decoration: none !important;
    font-size: 0 !important;
    line-height: 1;
    transition: color 120ms ease;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td:last-child a:last-of-type::before {
    /* Lucide CirclePlus glyph (circle + horizontal/vertical plus) painted via
       mask so it inherits `color`. Sized 24×24 to match Figma exactly. */
    content: "";
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -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'><circle cx='12' cy='12' r='10'/><line x1='8' y1='12' x2='16' y2='12'/><line x1='12' y1='8' x2='12' y2='16'/></svg>") no-repeat center / contain;
            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'><circle cx='12' cy='12' r='10'/><line x1='8' y1='12' x2='16' y2='12'/><line x1='12' y1='8' x2='12' y2='16'/></svg>") no-repeat center / contain;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] tr.EditProfileCommentHeader > td:last-child a:last-of-type:hover {
    color: var(--primary, #0d9488) !important;
}

/* --- 13.6 Website link icon — globe affordance per Figma --------------
   The hlkUrl renders `<a><img src="/images/ie.gif"/></a>`. Hide the IE
   favicon and replace with a CSS globe via the anchor's ::before pseudo. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a[id$="_hlkUrl"] {
    /* Per Figma node 71:7649 "Icon / 24px / Globe" — 24×24 glyph next to
       the Website input. The 22×22 + 16-glyph rule from a prior pass was
       a size guess; metadata names it 24×24 explicitly. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    border-radius: 4px;
    color: var(--muted-foreground, #64748b);
    text-decoration: none !important;
    vertical-align: middle;
    position: relative;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a[id$="_hlkUrl"] img {
    display: none;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a[id$="_hlkUrl"]::before {
    content: "";
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -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'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>") no-repeat center / contain;
            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'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>") no-repeat center / contain;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] a[id$="_hlkUrl"]:hover {
    color: var(--primary, #0d9488);
    background: var(--secondary, #f1f5f9);
}

/* --- 13.7 Locations table: Reminder Date pill width -------------------
   The Calendar control wraps an input + image in a TD. The inline width
   constraint plus the date placeholder ("Pick a date" in Figma) needs a
   bit more room. Bump the Reminder column to 150px and stretch the
   internal pill to fill it. */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.tdLocationReminderDate {
    width: 150px;
    min-width: 150px;
}

body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] td.tdLocationReminderDate input {
    max-width: 130px;
}

/* --- 13.8 Status row option styling — keep popup options legible
   even though the parent TD has font-size: 0 (see §13.3). ---------------- */
body.page-edit-profile.sidebar-nav [id$="_pnlCompany"] > table.StdTable > tbody > tr:nth-of-type(2) > td:nth-of-type(2) > select option {
    font-size: 14px;
    color: var(--foreground, #0f172a);
}

/* ==========================================================================
   §14 — Location Details modal (modalAddressDetails, ManageAccount.ascx:2973).
   Two-column form. The refresh skin's 14px Inter pushed label widths past the
   markup's inline width:70/95/230px so the layout broke in three ways:
     - "Location Type:" / "Address 2:" / "Postal Code:" wrapped to two lines
     - "Reminder:" cell stacked Calendar picker above the "Call in:" select
     - "Lat/Lon" row pushed the Set link below the lat/lon inputs
   Plus the modal's inline width:725px didn't leave room for the inputs at
   14px Inter — the right column's Address/City/Country dropdowns spilled
   past the modal's right edge.

   All fixes scoped to `[id$="_modalAddressDetails_pnlModalPopup"]`.
   ========================================================================== */

/* (0) Modal width — bump from the inline 725px to 840px so the 275px input
   columns + label gutters fit. max-width:calc(100vw-32px) lets it shrink
   gracefully on narrow viewports. */
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] {
    width: 840px !important;
    max-width: calc(100vw - 32px) !important;
}

/* (1) Pin column widths so the two columns have a stable right edge —
   left col: 90px label + 275px input, right col: 110px label + 275px input.
   padding-left:16px on the right-column label cell adds visible breathing
   room between the left input's right edge and the next label's text. */
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] .modPopContent td:nth-child(1) {
    width: 90px !important;
    white-space: nowrap !important;
    padding-right: 12px;
    vertical-align: middle;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] .modPopContent td:nth-child(2) {
    width: 275px !important;
    vertical-align: middle;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] .modPopContent td:nth-child(3) {
    width: 110px !important;
    white-space: nowrap !important;
    padding-left: 16px;
    padding-right: 12px;
    vertical-align: middle;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] .modPopContent td:nth-child(4) {
    width: 275px !important;
    vertical-align: middle;
}

/* (2) Every input/select inside the value cells fills its column — overrides
   the inline Width="215"/"240" and style="width:217px"/"width:242px" attrs so
   each row's right edge lands at the same X (the cell's right edge). This is
   the second half of the alignment fix from (1). */
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] .modPopContent td:nth-child(2) > input[type="text"],
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] .modPopContent td:nth-child(2) > select,
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] .modPopContent td:nth-child(4) > input[type="text"],
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] .modPopContent td:nth-child(4) > select {
    width: 100% !important;
    box-sizing: border-box;
}
/* Contact dropdown is wrapped in <span id="spAddressDetailContact"> — reach the
   select through the span so the dropdown matches the column right edge too. */
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #spAddressDetailContact,
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #spAddressDetailContact > select,
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #spAddressDetailContactOther,
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #spAddressDetailContactOther > input {
    width: 100% !important;
    box-sizing: border-box;
}

/* (3) Reminder row — calendar picker grows long, "Call in" dropdown stays
   short and ends inside the input column (before Location Type starts).
   Three pieces:
   (a) The td is flex-row so its children sit inline.
   (b) The Calendar control renders as `<span class="qDiv">` wrapping a date
       <input> + an image trigger; make that wrapper a flex container so the
       inner input can actually grow to fill it (% widths against an inline
       parent don't behave — without display:flex on the qDiv span the input
       stayed at its intrinsic ~150px width and only the icon was visible).
   (c) The Call in <select> gets a fixed narrow width (overrides rule (2)
       which would otherwise stretch every select in col 2 to 100%). */
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #tdAddressDetailReminderDate {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #tdAddressDetailReminderDate > *:first-child {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #tdAddressDetailReminderDate > *:first-child > input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #tdAddressDetailReminderDate > *:first-child > input[type="image"],
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #tdAddressDetailReminderDate > *:first-child > img {
    flex: 0 0 auto;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #tdAddressDetailReminderDate > [id$="_dpdCallBack"] {
    flex: 0 0 auto;
    width: 120px !important;
}

/* (4) Lat/Lon row — keep the Google icon, lat input, lon input, and Set link
   on one line, contained within the 244px column. Each piece sized to fit. */
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] tr:has(#spLat) > td:last-child {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #spLat,
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #spLon {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #spLat > input[type="text"],
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #spLon > input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
}
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #hlkGoogleMap,
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #btnGetGeoCodeData {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* (5) Comments textarea — sits in a `<td colspan="4">` so the column-width
   pins above don't apply. Use 100% with box-sizing so it follows the modal
   width instead of the markup's inline width:640px. */
body.page-edit-profile.sidebar-nav [id$="_modalAddressDetails_pnlModalPopup"] #taAddressDetailComment {
    width: 100% !important;
    box-sizing: border-box;
}