/* =========================================================================
   um-v2.css — Umerang on the WebCommander "common panel v2" design.

   Ported from the Claude design export "WebCommander Xero Plugin (13).html" —
   the same export WebCommander's own Xero / Exsited popups (core
   editor-common-v2.css, wcp2-*) and the Store Migration addon (sm-v2.css)
   follow, so the plugins read as one product. Values are written literally
   (token names in comments): the export resolves them from --wc-* custom
   properties this app does not define.

   Loaded LAST in _Layout (after commander-dashboard.css) and every rule is
   scoped to the .um-v2 root on .subscription-product-area, one class more
   specific than the rule it replaces, so pages on _LayoutEmpty (onboarding)
   keep their current look. Presentation only — every id, onclick, form field
   and JS hook class (.fee-nav-group__header, .linkclick, .open-close,
   .sidebar.open, [id*="-link"]) is left in place.

   Sections:
     0. Font
     1. Shell — page gutter + one card (Card, cardProps radius 12)
     2. Header — PageActionBar (52px) + Breadcrumb + "Go To Umerang"
     3. Sidebar — WCSubNav (230px rail, collapsible groups)
     4. Content pane
     5. Lists — the export's list card (all 9 .common-plugin-list pages)
     6. Scrollbars — the design system's .wc-scroll
     7. Settings — the export's SettingsSection cards (collapsible)
     8. Inline arrow — the small arrow-right used in copy
     9. Dropdown — js/um-select.js (list filters, rows per page, settings fields)
    10. Settings info tips + child rows
    11. Field Mapping — core's v2 skin (.wcp2-fm*), ported
    12. Header actions + Events & Emails (Settings layout)
    13. Dashboard - core's v2 skin (.wcp2-dash*), ported
   ========================================================================= */

/* ── 0. Font ──────────────────────────────────────────────────────────────
   The export uses Source Sans 3 at 400/500/600/700. main.css forces
   'Source Sans Pro' on `*` with !important, which has no real 500, so every
   medium label fell back to 400. Same family, re-cut with a 500 (loaded by
   _Layout). `*` is (0,0,0) + !important, so this (0,1,0) + !important wins. */
.um-v2,
.um-v2 *:not(.fa) {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
}

/* ── 1. Shell ─────────────────────────────────────────────────────────────
   One white card on the canvas: radius 12 (--wc-radius-lg, cardProps), 1px
   --wc-border, the DS Card's own --wc-shadow-card. The card is drawn by its
   two halves (the header and the rail + content row), so each carries its own
   side of the border and its own two corners. It sits 16px in from every edge
   (the export's <main> padding), not style-front.css's 20px. */
.subscription-product-area.um-v2.umerang-plugin-front {
    padding: 16px;
}
@media (max-width: 575px) {
    .subscription-product-area.um-v2.umerang-plugin-front {
        padding: 0;
    }
}
.um-v2 .main-title-wrap,
.um-v2 .subscription-product-container {
    border: 1px solid #e5e7eb; /* --wc-border */
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); /* --wc-shadow-card */
}
.um-v2 .subscription-product-container {
    /* 52px header + its 1px top border; the header's bottom divider is its own. */
    height: calc(100% - 53px);
    border-top: 0;
    border-radius: 0 0 12px 12px; /* --wc-radius-lg */
    overflow: hidden;
}

/* ── 2. Header ────────────────────────────────────────────────────────────
   PageActionBar with barProps minHeight 52: padding 0 24px, breadcrumb left,
   actions right (gap 12), 1px --wc-divider under it. */
.um-v2 .main-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 52px;
    padding: 0 24px;
    border-bottom: 1px solid #e9edf0; /* --wc-divider */
    border-radius: 12px 12px 0 0; /* --wc-radius-lg */
}

/* Breadcrumb: gap 10, chevron-right 14 in --wc-gray-400, crumbs 14px/1
   --wc-text-muted, the last one semibold --wc-text. */
.um-v2 .main-title-wrap .um-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.um-v2 .main-title-wrap .um-crumb {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #6b7480; /* --wc-text-muted */
    white-space: nowrap;
}
.um-v2 .main-title-wrap .um-crumb-sep {
    display: inline-flex;
    color: #b6bdc5; /* --wc-gray-400 */
}
.um-v2 .main-title-wrap .um-crumb-sep svg {
    display: block;
}
.um-v2 .main-title-wrap h2.um-crumb--current {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #1a1f26; /* --wc-text */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Go To Umerang": the export's quiet text link (the dashboard's "Open Xero"),
   13px semibold --wc-blue-500 with a 14px Lucide external-link glyph in place
   of the old PNG background icon and underline. */
.um-v2 .main-title-wrap .go-to-clubeez {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #008df2; /* --wc-blue-500 */
    text-decoration: none;
    white-space: nowrap;
}
.um-v2 .main-title-wrap .go-to-clubeez:hover,
.um-v2 .main-title-wrap .go-to-clubeez:focus-visible {
    background: none;
    color: #0077cf; /* --wc-blue-600 */
    text-decoration: none;
}
.um-v2 .main-title-wrap .go-to-clubeez .um-go-icon {
    flex: 0 0 auto;
    display: block;
}

/* ── 3. Sidebar ───────────────────────────────────────────────────────────
   WCSubNav (the export's override of the DS SettingsSubNav): 230px incl. its
   1px --wc-divider, white, 10px bottom inset. Groups are separated by a
   divider; a group header is 40px (icon 15 --wc-text-secondary, 13px label,
   semibold while open, chevron 14 --wc-gray-400); its rows sit on a
   --wc-gray-25 band (2px 0 4px) at 34px, inset 32px, and the active row is
   white with a 2px --wc-blue-500 left edge and a medium blue label.
   _Layout's script still toggles .fee-nav-group--expanded; open/close is
   instant, as in the export. */
.um-v2 .subscription-product-container .sidebar {
    width: 230px;
    min-width: 230px;
    padding-bottom: 10px;
    border: 0;
    border-right: 1px solid #e9edf0; /* --wc-divider */
    background: #ffffff;
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group {
    border-bottom: 0;
    background: transparent;
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group + .fee-nav-group {
    border-top: 1px solid #e9edf0; /* --wc-divider */
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__header {
    gap: 7px;
    height: 40px;
    padding: 0 14px 0 12px;
    background: transparent;
    transition: none;
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__header:hover {
    background: transparent;
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__icon {
    flex: 0 0 auto;
    margin-right: 0;
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__icon svg,
.um-v2 .subscription-product-container .sidebar .fee-nav-group__toggle svg {
    display: block;
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #000000;
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group--expanded .fee-nav-group__title {
    font-weight: 600;
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__toggle {
    flex: 0 0 auto;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #b6bdc5; /* --wc-gray-400 */
    transform: none;
    transition: transform 200ms ease;
}
/* As WebCommander's Xero (.wcp2-subnav-group__toggle): open = chevron-down, closed = chevron-up
   (the glyph is a chevron-down). */
.um-v2 .subscription-product-container .sidebar .fee-nav-group:not(.fee-nav-group--expanded) .fee-nav-group__toggle {
    transform: rotate(-180deg);
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__items {
    padding: 2px 0 4px;
    background: #fafbfc; /* --wc-gray-25 */
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__items a.fee-navigation-tab__item {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 14px 0 32px;
    border-left: 2px solid transparent;
    background: transparent;
    transition: background 180ms cubic-bezier(.4, 0, .2, 1), color 180ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__items a.fee-navigation-tab__item:hover {
    background: #f4f6f7; /* --wc-gray-50 */
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__items a.fee-navigation-tab__item.active,
.um-v2 .subscription-product-container .sidebar .fee-nav-group__items a.fee-navigation-tab__item.active:hover {
    border-left-color: #008df2; /* --wc-blue-500 */
    background: #ffffff;
}
.um-v2 .subscription-product-container .sidebar .fee-navigation-tab__label {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #000000;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: none;
}
/* Hover only tints the row; the label stays black (the old sheet turned it blue). */
.um-v2 .subscription-product-container .sidebar .fee-nav-group__items a.fee-navigation-tab__item:hover .fee-navigation-tab__label {
    color: #000000;
}
.um-v2 .subscription-product-container .sidebar .fee-nav-group__items a.fee-navigation-tab__item.active .fee-navigation-tab__label {
    font-weight: 500;
    color: #008df2; /* --wc-blue-500 */
}
/* Overview: a group with a single destination is ONE row at group-header size
   (WebCommander's Xero .wcp2-subnav-single): 40px, icon 15 + 13px semibold
   label, no chevron, no child band. Active = white with the 2px --wc-blue-500
   edge and a blue icon + label, like an active child row. */
.um-v2 .subscription-product-container .sidebar a.um-nav-single {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px 0 12px;
    border-left: 2px solid transparent;
    background: transparent;
    color: #000000;
    text-decoration: none;
    user-select: none;
    transition: background 150ms ease, color 150ms ease;
}
.um-v2 .subscription-product-container .sidebar a.um-nav-single:hover {
    background: #f4f6f7; /* --wc-gray-50 */
}
.um-v2 .subscription-product-container .sidebar a.um-nav-single .fee-nav-group__title {
    font-weight: 600;
    color: inherit;
}
.um-v2 .subscription-product-container .sidebar a.um-nav-single.active,
.um-v2 .subscription-product-container .sidebar a.um-nav-single.active:hover {
    border-left-color: #008df2; /* --wc-blue-500 */
    background: #ffffff;
    color: #008df2;
}
.um-v2 .subscription-product-container .sidebar a.um-nav-single.active .fee-nav-group__icon {
    color: #008df2; /* --wc-blue-500 */
}
/* Below 767px _Layout's script turns the rail into an off-canvas drawer
   (.responsive / .open); keep it the rail's own width. */
.um-v2 .subscription-product-container.responsive .sidebar {
    left: -230px;
}
.um-v2 .subscription-product-container.responsive .sidebar.open {
    left: 0;
}

/* ── 4. Content pane ──────────────────────────────────────────────────────
   The export's scroll pane: --wc-gray-25 (not the canvas grey, which is only
   the ground OUTSIDE the card), filling the row beside the rail. */
.um-v2 .subscription-product-container .subscription-product-content {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    background: #fafbfc; /* --wc-gray-25 */
}

/* ── 5. Lists ─────────────────────────────────────────────────────────────
   Customer Group / Customer / Product / Coupon / Sync History / Activity &
   Tracking / Event Log / Error Queue / Conflict Queue all render the shared
   .common-plugin-list.cpl-data-section.um-fill block. The export's list screen
   (isCG) is ONE white card 16px in from the scroll pane that holds everything
   — title row, toolbar, table, pager — so the section becomes that card and
   each block takes its slot; no list markup changes.
   umerang-data-list.css is linked INSIDE each page (after this sheet), so
   every rule here is at least one class deeper than the one it replaces. */

/* The pane becomes a flex column so the card fills it (the old um-fill height,
   calc(100vh - 158px), was tuned to the previous header). */
.um-v2 .subscription-product-container .subscription-product-content:has(.common-plugin-list.um-fill) {
    display: flex;
    flex-direction: column;
    padding: 16px;
}
.um-v2 .subscription-product-content > .cps-coupon-fill {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.um-v2 .common-plugin-list.um-fill {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb; /* --wc-border */
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); /* --wc-shadow-card */
    overflow: hidden;
}

/* Title row: 14px 20px 10px — 18px/1.3 semibold title, a 1×16 --wc-border
   rule, the 13px --wc-text-muted count. */
.um-v2 .common-plugin-list .cpl-head {
    gap: 10px;
    margin: 0;
    padding: 14px 20px 10px;
}
.um-v2 .common-plugin-list .cpl-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-list .cpl-count {
    font-size: 13px;
    line-height: 1;
    color: #6b7480; /* --wc-text-muted */
}
.um-v2 .common-plugin-list .cpl-count::before {
    height: 16px;
    margin-right: 10px;
    background: #e5e7eb; /* --wc-border */
}

/* Toolbar: 0 20px 12px over a --wc-divider rule; search, filters, then the
   actions pushed right, gap 10px 12px. */
.um-v2 .common-plugin-list .cpl-toolbar {
    gap: 10px 12px;
    margin: 0;
    padding: 0 20px 12px;
    border-bottom: 1px solid #e9edf0; /* --wc-divider */
}

/* Search: a 32px pill (flex 0 1 240px, min 160px), the 14px magnifier 12px in
   on the left in --wc-text-micro, --wc-border-strong → --wc-gray-400 on hover
   → --wc-blue-500 on focus. */
.um-v2 .common-plugin-list .cpl-search {
    flex: 0 1 240px;
    width: auto;
    min-width: 160px;
    height: 32px;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #d6dade; /* --wc-border-strong */
    border-radius: 999px;
    font-size: 14px;
    color: #1a1f26; /* --wc-text */
    transition: border-color 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .common-plugin-list .cpl-search:hover {
    border-color: #b6bdc5; /* --wc-gray-400 */
}
.um-v2 .common-plugin-list .cpl-search:focus-within {
    border-color: #008df2; /* --wc-blue-500 */
    outline: none;
    box-shadow: none;
}
.um-v2 .common-plugin-list .cpl-search .cpl-search-icon {
    padding-left: 0;
    color: #8b949e; /* --wc-text-micro */
}
.um-v2 .common-plugin-list .cpl-search .cpl-search-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}
.um-v2 .common-plugin-list .cpl-search input {
    height: 30px;
    font-size: 14px;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-list .cpl-search input::placeholder {
    color: #8b949e; /* --wc-text-micro */
}
.um-v2 .common-plugin-list .cpl-search input:focus,
.um-v2 .common-plugin-list .cpl-search input:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Filter dropdowns: the export's 32px pill trigger — min 140px, 13px
   --wc-text, chevron-down 16 in --wc-text-muted 12px from the right. */
.um-v2 .common-plugin-list .cpl-select {
    min-width: 140px;
}
.um-v2 .common-plugin-list .cpl-select select {
    height: 32px;
    padding: 0 34px 0 14px;
    border: 1px solid #d6dade; /* --wc-border-strong */
    border-radius: 999px;
    font-size: 13px;
    color: #1a1f26; /* --wc-text */
    transition: border-color 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .common-plugin-list .cpl-select select:hover {
    border-color: #b6bdc5; /* --wc-gray-400 */
}
.um-v2 .common-plugin-list .cpl-select select:focus {
    border-color: #008df2; /* --wc-blue-500 */
    outline: none;
    box-shadow: none;
}
.um-v2 .common-plugin-list .cpl-select .cpl-select-chev {
    right: 12px;
    color: #6b7480; /* --wc-text-muted */
}

/* Icon actions ("···" more actions, Refresh): the export's 32px circle,
   --wc-border-strong, --wc-text-secondary 16px glyph, --wc-gray-50 on hover —
   not the old 52px pill that filled blue. */
.um-v2 .common-plugin-list .cpl-icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d6dade; /* --wc-border-strong */
    border-radius: 50%;
    background: #ffffff;
    color: #4d5662; /* --wc-text-secondary */
    transition: background 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .common-plugin-list .cpl-icon-btn:hover {
    border-color: #d6dade;
    background: #f4f6f7; /* --wc-gray-50 */
    color: #4d5662;
}
/* The glyphs are the export's Lucide ellipsis / refresh-cw (16, stroked);
   umerang-data-list.css FILLS this svg (white on hover), which would turn a
   stroke icon into a solid blob. */
.um-v2 .common-plugin-list .cpl-icon-btn > svg,
.um-v2 .common-plugin-list .cpl-icon-btn:hover > svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}
.um-v2 .common-plugin-list .cpl-icon-btn > svg path,
.um-v2 .common-plugin-list .cpl-icon-btn > svg circle,
.um-v2 .common-plugin-list .cpl-icon-btn:hover > svg path,
.um-v2 .common-plugin-list .cpl-icon-btn:hover > svg circle {
    fill: none;
}
.um-v2 .common-plugin-list .cpl-select .cpl-select-chev svg {
    display: block;
}

/* Table: the card's own scroll region, no frame of its own. */
.um-v2 .common-plugin-list.um-fill .cpl-table-card {
    border: 0;
    border-radius: 0;
    background: #ffffff;
}
/* Header: --wc-gray-25, 12px vertical, 13px/1.3 semibold --wc-text (the (13)
   export's Title Case header), a --wc-divider rule under it, sticky. Rows and
   header share a 20px side inset. */
.um-v2 .common-plugin-list .cpl-thead {
    gap: 12px;
    padding: 12px 20px;
    background: #fafbfc; /* --wc-gray-25 */
    border-bottom: 1px solid #e9edf0; /* --wc-divider */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1f26; /* --wc-text */
}
/* Rows: min 44px, 13px/1.4 black, a --wc-divider rule, #fbfcfd on hover.
   Two-line cells keep 8px of breathing room top and bottom. */
.um-v2 .common-plugin-list .cpl-row {
    gap: 12px;
    min-height: 44px;
    padding: 8px 20px;
    border-bottom: 1px solid #e9edf0; /* --wc-divider */
    font-size: 13px;
    line-height: 1.4;
    color: #000000;
    transition: background 120ms cubic-bezier(.4, 0, .2, 1);
}
/* Rows are white whatever their status (the export tints none — the status dot
   carries it), so the old failed / needs-attention row tints are neutralised;
   the classes stay for anything that reads them. */
.um-v2 .common-plugin-list .cpl-row,
.um-v2 .common-plugin-list .cpl-row.is-failed,
.um-v2 .common-plugin-list .cpl-row.needs-attention {
    background: #ffffff;
}
.um-v2 .common-plugin-list .cpl-row:hover,
.um-v2 .common-plugin-list .cpl-row.is-failed:hover,
.um-v2 .common-plugin-list .cpl-row.needs-attention:hover {
    background: #fbfcfd;
}
.um-v2 .common-plugin-list .cpl-status {
    gap: 7px;
    font-size: 13px;
    line-height: 1;
    color: #000000;
}
/* Reason hint next to a status: the export's Lucide info glyph, 14px
   --wc-text-muted (the old sheet drew a bordered italic "i"). */
.um-v2 .common-plugin-list .cpl-info-i {
    display: inline-flex;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 0;
    color: #6b7480; /* --wc-text-muted */
}
.um-v2 .common-plugin-list .cpl-info-i svg {
    display: block;
}
/* Direction (Activity & Tracking): "WC [arrow-right 14 --wc-text-muted] Umerang". */
.um-v2 .common-plugin-list .um-dir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.um-v2 .common-plugin-list .um-dir .um-dir-arrow {
    flex: 0 0 auto;
    color: #6b7480; /* --wc-text-muted */
}

/* Checkboxes: the DS Checkbox — 16px, radius 4, --wc-border-strong, filled
   --wc-blue-500 with a white check when on. Native inputs, restyled only. */
.um-v2 .common-plugin-list .cpl-thead input[type="checkbox"],
.um-v2 .common-plugin-list .cpl-row input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #d6dade; /* --wc-border-strong */
    border-radius: 4px;
    background: #ffffff center / 12px 12px no-repeat;
    vertical-align: middle;
    transition: background-color 120ms cubic-bezier(.4, 0, .2, 1), border-color 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .common-plugin-list .cpl-thead input[type="checkbox"]:hover,
.um-v2 .common-plugin-list .cpl-row input[type="checkbox"]:hover {
    border-color: #b6bdc5; /* --wc-gray-400 */
}
.um-v2 .common-plugin-list .cpl-thead input[type="checkbox"]:checked,
.um-v2 .common-plugin-list .cpl-row input[type="checkbox"]:checked {
    border-color: #008df2; /* --wc-blue-500 */
    background-color: #008df2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.um-v2 .common-plugin-list .cpl-thead input[type="checkbox"]:focus-visible,
.um-v2 .common-plugin-list .cpl-row input[type="checkbox"]:focus-visible {
    outline: 2px solid #b3dcfb; /* --wc-blue-200 */
    outline-offset: 1px;
}

/* Row kebab: 26px, radius 5, --wc-text-muted dots, --wc-gray-100 on hover,
   right-aligned in its column. */
.um-v2 .common-plugin-list .cpl-row-actions {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    justify-self: end;
    border-radius: 5px;
    color: #6b7480; /* --wc-text-muted */
}
.um-v2 .common-plugin-list .cpl-row-actions:hover {
    background: #eef1f3; /* --wc-gray-100 */
}
/* Lucide ellipsis-vertical, stroked (the old sheet fills it grey). */
.um-v2 .common-plugin-list .cpl-row-actions > svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}
/* Menus (row kebab + toolbar "···"): 190px, 5px pad, radius 8, --wc-border,
   the popover shadow; 32px items at 13px --wc-text, radius 5, --wc-gray-50 on
   hover (no blue tint). */
.um-v2 .common-plugin-list .cpl-row-menu {
    width: 190px;
    min-width: 190px;
    padding: 5px;
    border: 1px solid #e5e7eb; /* --wc-border */
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12); /* --wc-shadow-popover */
}
.um-v2 .common-plugin-list .cpl-row-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-list .cpl-row-menu-item:hover {
    background: #f4f6f7; /* --wc-gray-50 */
    color: #1a1f26;
}
.um-v2 .common-plugin-list .cpl-row-menu-item + .cpl-row-menu-item {
    margin-top: 2px;
}
/* Menu item icons: the export's leading 14px Lucide glyph in --wc-text-secondary
   (gap 8). umerang-data-list.css sizes and FILLS every svg inside the kebab
   and the toolbar button (20px, solid, white on hover), so these rules are one
   class deeper to keep the glyphs stroked. */
.um-v2 .common-plugin-list .cpl-row-actions .cpl-row-menu-item svg,
.um-v2 .common-plugin-list .cpl-row-actions:hover .cpl-row-menu-item svg,
.um-v2 .common-plugin-list .cpl-icon-btn .cpl-row-menu-item svg,
.um-v2 .common-plugin-list .cpl-icon-btn:hover .cpl-row-menu-item svg {
    flex: 0 0 auto;
    display: block;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .common-plugin-list .cpl-row-actions .cpl-row-menu-item svg *,
.um-v2 .common-plugin-list .cpl-icon-btn .cpl-row-menu-item svg *,
.um-v2 .common-plugin-list .cpl-icon-btn:hover .cpl-row-menu-item svg * {
    fill: none;
}
/* The "View in Umerang" item is an <a>: same row, no underline. */
.um-v2 .common-plugin-list a.cpl-row-menu-item,
.um-v2 .common-plugin-list a.cpl-row-menu-item:hover {
    display: flex;
    text-decoration: none;
}

/* Selection bar + its actions: DS Buttons, size sm (30px, 0 14, 13px). */
.um-v2 .common-plugin-list .cpl-sel-bar {
    padding: 10px 20px;
    background: #e6f4fe; /* --wc-blue-50 */
    border-bottom: 1px solid #d3ebfd; /* --wc-blue-100 */
}
.um-v2 .common-plugin-list .cpl-sel-count {
    font-size: 13px;
    color: #006ab8; /* --wc-blue-on-tint */
}
.um-v2 .common-plugin-list .cpl-sel-btn {
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

/* Empty state: 13px --wc-text-secondary; the rich variant's title is 15px
   semibold --wc-text over a 13px hint. */
.um-v2 .common-plugin-list .cpl-empty {
    padding: 48px 24px;
    font-size: 13px;
    line-height: 1.5;
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .common-plugin-list .cpl-empty-title {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.3;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-list .cpl-empty-sub {
    max-width: 420px;
    font-size: 13px;
    color: #4d5662; /* --wc-text-secondary */
}

/* Pager: INSIDE the card on a --wc-divider top rule, 12px 20px. Rows-per-page
   is the export's 32px, radius 6 trigger (min 66px); page cells are 30px,
   radius 6, --wc-divider border, 13px; current = --wc-blue-500 border + blue
   semibold; disabled = --wc-gray-300 text on white. */
.um-v2 .common-plugin-list .cpl-pagination {
    gap: 12px;
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid #e9edf0; /* --wc-divider */
    background: #ffffff;
}
/* 10 items or fewer: no footer at all (umerang-data-list.js toggles .is-hidden, WC core's rule). */
.um-v2 .common-plugin-list .cpl-pagination.is-hidden {
    display: none;
}
.um-v2 .common-plugin-list .cpl-pagination-info {
    gap: 12px;
    font-size: 13px;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-list .cpl-pagination-info select {
    -webkit-appearance: none;
    appearance: none;
    min-width: 66px;
    height: 32px;
    padding: 0 30px 0 12px;
    border: 1px solid #d6dade; /* --wc-border-strong */
    border-radius: 6px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
    font-size: 13px;
    color: #1a1f26;
}
.um-v2 .common-plugin-list .cpl-pagination-info select:hover {
    border-color: #b6bdc5; /* --wc-gray-400 */
}
.um-v2 .common-plugin-list .cpl-pager {
    gap: 6px;
}
.um-v2 .common-plugin-list .cpl-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border: 1px solid #e9edf0; /* --wc-divider */
    border-radius: 6px;
    background: #ffffff;
    font-size: 13px;
    color: #1a1f26; /* --wc-text */
    transition: background 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .common-plugin-list .cpl-page-btn:hover {
    border-color: #e9edf0;
    background: #f4f6f7; /* --wc-gray-50 */
    color: #1a1f26;
}
.um-v2 .common-plugin-list .cpl-page-btn.current,
.um-v2 .common-plugin-list .cpl-page-btn.current:hover {
    border-color: #008df2; /* --wc-blue-500 */
    background: #ffffff;
    font-weight: 600;
    color: #008df2;
}
.um-v2 .common-plugin-list .cpl-page-btn.disabled {
    border-color: #e9edf0;
    background: #ffffff;
    color: #d6dade; /* --wc-gray-300 */
}
.um-v2 .common-plugin-list .cpl-page-ellipsis {
    min-width: 16px;
    height: 30px;
    align-items: center;
    color: #6b7480; /* --wc-text-muted */
}
/* Footer copy: the export reads "[rows] Rows per page" (13px --wc-text) with
   no "Showing X–Y of Z" — umerang-data-list.js still writes that summary, so
   it stays in the markup, hidden. */
.um-v2 .common-plugin-list .cpl-pagination-info .um-rows-label {
    font-size: 13px;
    line-height: 1;
    color: #1a1f26; /* --wc-text */
    white-space: nowrap;
}
.um-v2 .common-plugin-list .cpl-pagination-info .um-page-summary {
    display: none;
}

/* ── 6. Scrollbars ────────────────────────────────────────────────────────
   The design system's .wc-scroll (WebCommander's v2 panels use the same,
   editor-common-v2.css .wc-rp-body): a thin #d7dde3 pill thumb on a clear
   track, instead of style.css's grey-track / white-thumb bar. style.css sets
   scrollbar-width / scrollbar-color on `*`; while those are set, Chrome draws
   its own bar (with arrow buttons on Windows) and ignores ::-webkit-scrollbar,
   so they are reset to auto here and the pseudo-elements draw the pill.
   Firefox (no ::-webkit-scrollbar) gets the thin #d7dde3 standard version.
   The rail hides its bar (.wc-rail-scroll). */
.um-v2 .subscription-product-content,
.um-v2 .common-plugin-list .cpl-table-card {
    scrollbar-width: auto;
    scrollbar-color: auto;
}
@supports not selector(::-webkit-scrollbar) {
    .um-v2 .subscription-product-content,
    .um-v2 .common-plugin-list .cpl-table-card {
        scrollbar-width: thin;
        scrollbar-color: #d7dde3 transparent;
    }
}
.um-v2 .subscription-product-content::-webkit-scrollbar,
.um-v2 .common-plugin-list .cpl-table-card::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
}
.um-v2 .subscription-product-content::-webkit-scrollbar-track,
.um-v2 .common-plugin-list .cpl-table-card::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-box-shadow: none;
}
.um-v2 .subscription-product-content::-webkit-scrollbar-thumb,
.um-v2 .common-plugin-list .cpl-table-card::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 6px;
    background-color: #d7dde3;
    background-clip: content-box;
    -webkit-box-shadow: none;
}
.um-v2 .subscription-product-container .sidebar {
    scrollbar-width: none;
}
.um-v2 .subscription-product-container .sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ── 7. Settings (Settings/Index, .common-plugin-settings .cps-*) ──────────
   The export's Settings screen: a centred 760px column, 16px in from the pane,
   of SettingsSection cards 16px apart. A card is radius 8 (sectionProps), 1px
   --wc-border, --wc-shadow-card; its header is 16px 20px — a 36px --wc-gray-100
   icon tile (radius 8, 16px --wc-text-secondary Lucide glyph), an 18px/1.3
   semibold title over a 13px/1.45 --wc-text-muted description — over a
   --wc-divider rule. Rows are 16px 24px, divided by --wc-divider: the label
   (13.5px/1.25 semibold) and hint (12.5px/1.4 --wc-text-secondary) on the LEFT,
   the control on the RIGHT. The markup puts the toggle first, so it is moved
   with `order`; the .um-set-* hooks and .is-on state are untouched. */
.um-v2 .subscription-product-container .subscription-product-content:has(> .common-plugin-settings) {
    padding: 16px;
}
.um-v2 .common-plugin-settings {
    display: grid;
    gap: 16px;
    align-content: start;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
}
.um-v2 .common-plugin-settings .cps-card {
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb; /* --wc-border */
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); /* --wc-shadow-card */
}
.um-v2 .common-plugin-settings .cps-card-head {
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #e9edf0; /* --wc-divider */
}
.um-v2 .common-plugin-settings .cps-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eef1f3; /* --wc-gray-100 */
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .common-plugin-settings .cps-card-icon svg {
    display: block;
}
.um-v2 .common-plugin-settings .cps-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-settings .cps-card-desc {
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7480; /* --wc-text-muted */
}

/* Rows */
.um-v2 .common-plugin-settings .cps-setting-row,
.um-v2 .common-plugin-settings .cps-setting-row--split {
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 16px 24px;
}
.um-v2 .common-plugin-settings .cps-setting-row + .cps-setting-row {
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid #e9edf0; /* --wc-divider */
}
.um-v2 .common-plugin-settings .cps-setting-row > .cps-toggle {
    order: 2;
}
.um-v2 .common-plugin-settings .cps-setting-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-settings .cps-setting-desc {
    margin-top: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .common-plugin-settings .cps-setting-title + .cps-setting-desc {
    margin-top: 2px;
}

/* Switch, size sm: 32x16 pill, --wc-gray-300 off / --wc-blue-500 on, a 12px
   white knob 2px in with the DS knob shadow. */
.um-v2 .common-plugin-settings .cps-toggle {
    background: #d6dade; /* --wc-gray-300 */
    transition: background 150ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .common-plugin-settings .cps-toggle.is-on {
    background: #008df2; /* --wc-blue-500 */
}
.um-v2 .common-plugin-settings .cps-toggle .mc-toggle-knob {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
    transition: left 150ms cubic-bezier(.4, 0, .2, 1);
}

/* Right-hand controls */
.um-v2 .common-plugin-settings .cps-setting-action {
    gap: 8px;
    padding-top: 0;
}
.um-v2 .common-plugin-settings .cps-setting-action > span {
    font-size: 13px;
    color: #6b7480; /* --wc-text-muted */
}
/* Select: the export's 220px x 34px field, radius 6, #BDBDBD, 14px, a Lucide
   chevron-down 16 in --wc-text-muted (replaces the CSS triangle). */
.um-v2 .common-plugin-settings .cps-select-wrap::after {
    content: none;
}
.um-v2 .common-plugin-settings .cps-select-wrap select {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    height: 34px;
    padding: 0 32px 0 12px;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    font-size: 14px;
    color: #000000;
}
.um-v2 .common-plugin-settings .cps-select-wrap select:hover {
    border-color: #b6bdc5; /* --wc-gray-400 */
}
.um-v2 .common-plugin-settings .cps-select-wrap select:focus,
.um-v2 .common-plugin-settings .cps-input:focus {
    border-color: #008df2; /* --wc-blue-500 */
    box-shadow: none;
}
/* Number / time inputs: 34px, radius 6, #BDBDBD, 14px (time 118px wide). */
.um-v2 .common-plugin-settings .cps-input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    font-size: 14px;
    color: #000000;
}
.um-v2 .common-plugin-settings .cps-input[type="time"] {
    width: 118px;
}
/* "Sync Historical Data": DS Button secondary, size sm — 32px pill, 1px
   --wc-blue-500, blue 13px semibold, --wc-blue-50 on hover (not a blue fill). */
.um-v2 .common-plugin-settings .cps-btn,
.um-v2 .common-plugin-settings .cps-btn:focus,
.um-v2 .common-plugin-settings .cps-btn:active {
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #008df2; /* --wc-blue-500 */
    border-radius: 999px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #008df2;
}
.um-v2 .common-plugin-settings .cps-btn:hover {
    background: #e6f4fe; /* --wc-blue-50 */
    color: #008df2;
}

/* Dependent rows (Blocked hours under the exclusion toggle, Max log size under
   Keep logs compact): the export's inset child row — a --wc-gray-50 band with a
   2px --wc-blue-500 left edge, radius 6, 14px 16px 14px 18px, 24px in from the
   card edges and 16px above its foot. The page script still dims it while its
   parent toggle is off. */
.um-v2 .common-plugin-settings .cps-setting-row.um-set-excl-row,
.um-v2 .common-plugin-settings .cps-setting-row.um-set-capkb-row {
    margin: -2px 24px 16px;
    padding: 14px 16px 14px 18px;
    border-top: 0;
    border-left: 2px solid #008df2; /* --wc-blue-500 */
    border-radius: 6px;
    background: #f4f6f7; /* --wc-gray-50 */
}
/* The row after a child (Hide personal details) keeps its own divider. */
.um-v2 .common-plugin-settings .um-set-capkb-row + .cps-setting-row {
    border-top: 1px solid #e9edf0; /* --wc-divider */
}

/* Disconnect: the export's account strip — 16px 24px 20px in the card; a
   14px 16px box, 1px --wc-border, radius 8, --wc-gray-25; 36px radius-8 mark,
   13.5px semibold name over a 12.5px --wc-text-secondary line; the button is a
   32px red-outline pill (--wc-red-text) with the unlink glyph, --wc-red-bg on
   hover (not a red fill). */
.um-v2 .common-plugin-settings .cps-account-row {
    flex-wrap: wrap;
    gap: 14px;
    margin: 16px 24px 20px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb; /* --wc-border */
    border-radius: 8px;
    background: #fafbfc; /* --wc-gray-25 */
}
.um-v2 .common-plugin-settings .cps-account-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.um-v2 .common-plugin-settings .cps-account-info {
    flex: 1 1 220px;
    min-width: 0;
}
.um-v2 .common-plugin-settings .cps-account-email {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-settings .cps-account-meta {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .common-plugin-settings .cps-disconnect-btn,
.um-v2 .common-plugin-settings .cps-disconnect-btn:focus,
.um-v2 .common-plugin-settings .cps-disconnect-btn:active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px 0 12px;
    border: 1px solid #dc2626; /* --wc-red-text */
    border-radius: 999px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #dc2626;
}
.um-v2 .common-plugin-settings .cps-disconnect-btn:hover {
    border-color: #dc2626;
    background: #fef2f2; /* --wc-red-bg */
    color: #dc2626;
}
.um-v2 .common-plugin-settings .cps-disconnect-btn svg {
    flex: 0 0 auto;
    display: block;
}

/* Collapse (SettingsSection): the header is the toggle; a 17px chevron in
   --wc-text-muted on the right — chevron-up while open, chevron-down folded.
   A folded card shows its header only. */
.um-v2 .common-plugin-settings .cps-card-head {
    cursor: pointer;
    user-select: none;
}
.um-v2 .common-plugin-settings .cps-card-head:focus-visible {
    outline: 2px solid #b3dcfb; /* --wc-blue-200 */
    outline-offset: -2px;
    border-radius: 8px;
}
.um-v2 .common-plugin-settings .cps-card-chev {
    flex: 0 0 auto;
    display: inline-flex;
    color: #6b7480; /* --wc-text-muted */
    transition: transform 200ms ease;
}
.um-v2 .common-plugin-settings .cps-card-chev svg {
    display: block;
}
.um-v2 .common-plugin-settings .cps-card.is-collapsed .cps-card-chev {
    transform: rotate(180deg);
}
.um-v2 .common-plugin-settings .cps-card.is-collapsed > :not(.cps-card-head) {
    display: none;
}
.um-v2 .common-plugin-settings .cps-card.is-collapsed .cps-card-head {
    border-bottom: 0;
}

/* ── 8. Inline arrow ──────────────────────────────────────────────────────
   "A → B" in copy is the export's small Lucide arrow-right (12px, current
   text colour) between the words — never a typed → or ">" glyph. Unscoped:
   the sync drawers (umerang-integration-drawers.js) render outside .um-v2. */
.um-inline-arrow {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0 4px;
    vertical-align: -1px;
}

/* ── 9. Dropdown (js/um-select.js) ────────────────────────────────────────
   The export's dropdown: the native <select> stays (hidden) as the source of
   truth; this is its face. Trigger: --wc-border-strong → --wc-gray-400 on
   hover → --wc-blue-500 while open / focused, chevron-down 16 --wc-text-muted
   (flips while open). Menu: 38px below, 5px pad, radius 8, --wc-border,
   popover shadow; 34px options at radius 6, --wc-gray-50 on hover, the chosen
   one --wc-blue-50 + semibold --wc-link with a check.
   Variants: list filter = 32px pill (min 140px); list footer = 32px radius 6
   (min 66px) opening UPWARD; settings field = the export's 220 × 34px,
   radius 6, #BDBDBD, 14px. */
.um-v2 select.um-dd-native {
    display: none !important;
}
.um-v2 .cpl-select.um-dd-on .cpl-select-chev {
    display: none;
}
.um-v2 .um-dd {
    position: relative;
    display: inline-flex;
    width: 100%;
}
.um-v2 .um-dd-trigger {
    width: 100%;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px 0 14px;
    border: 1px solid #d6dade; /* --wc-border-strong */
    border-radius: 999px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #1a1f26; /* --wc-text */
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .um-dd-trigger:hover {
    border-color: #b6bdc5; /* --wc-gray-400 */
    background: #ffffff;
    color: #1a1f26;
}
.um-v2 .um-dd.is-open .um-dd-trigger,
.um-v2 .um-dd-trigger:focus-visible {
    border-color: #008df2; /* --wc-blue-500 */
}
.um-v2 .um-dd-trigger:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.um-v2 .um-dd-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.um-v2 .um-dd-chev {
    flex: 0 0 auto;
    color: #6b7480; /* --wc-text-muted */
    transition: transform 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .um-dd.is-open .um-dd-chev {
    transform: rotate(180deg);
}
.um-v2 .um-dd-menu {
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 50;
    min-width: max(100%, 180px);
    max-height: 300px;
    overflow-y: auto;
    display: grid;
    gap: 1px;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #e5e7eb; /* --wc-border */
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12); /* --wc-shadow-popover */
}
.um-v2 .um-dd-menu[hidden] {
    display: none;
}
.um-v2 .um-dd-option {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #1a1f26; /* --wc-text */
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
}
.um-v2 .um-dd-option:hover,
.um-v2 .um-dd-option:focus-visible {
    background: #f4f6f7; /* --wc-gray-50 */
    color: #1a1f26;
}
.um-v2 .um-dd-option.is-selected,
.um-v2 .um-dd-option.is-selected:hover {
    background: #e6f4fe; /* --wc-blue-50 */
    font-weight: 600;
    color: #008df2; /* --wc-link */
}
.um-v2 .um-dd-check {
    flex: 0 0 auto;
    visibility: hidden;
    color: #008df2; /* --wc-blue-500 */
}
.um-v2 .um-dd-option.is-selected .um-dd-check {
    visibility: visible;
}
/* List footer (rows per page): 32px, radius 6, min 66px; opens upward. */
.um-v2 .um-dd--footer {
    width: auto;
}
.um-v2 .um-dd--footer .um-dd-trigger {
    min-width: 66px;
    gap: 8px;
    padding: 0 10px 0 12px;
    border-radius: 6px;
}
.um-v2 .um-dd--footer .um-dd-menu {
    top: auto;
    bottom: 38px;
    min-width: 96px;
}
/* Settings field: 220 × 34px, radius 6, #BDBDBD, 14px black; the menu is the
   field's width. */
.um-v2 .um-dd--field {
    width: 220px;
}
.um-v2 .um-dd--field .um-dd-trigger {
    height: 34px;
    gap: 8px;
    padding: 0 10px 0 12px;
    border-color: #bdbdbd;
    border-radius: 6px;
    font-size: 14px;
    color: #000000;
}
.um-v2 .um-dd--field .um-dd-trigger:hover {
    border-color: #b6bdc5; /* --wc-gray-400 */
    color: #000000;
}
.um-v2 .um-dd--field.is-open .um-dd-trigger,
.um-v2 .um-dd--field .um-dd-trigger:focus-visible {
    border-color: #008df2; /* --wc-blue-500 */
}
.um-v2 .um-dd--field .um-dd-menu {
    right: 0;
    min-width: 0;
}

/* ── 10. Settings: info tips + child rows ─────────────────────────────────
   A hint longer than the export's limit (120 chars, 70 beside a select) is an
   info icon after the label — 14px --wc-text-muted, cursor help — whose title
   holds the text, as in WebCommander's Xero settings.
   A dependent child row (Blocked hours, Max log size) shows only while its
   parent toggle is on (the export hides it; no reveal animation). */
.um-v2 .common-plugin-settings .um-set-tip {
    display: inline-flex;
    margin-left: 6px;
    vertical-align: -2px;
    color: #6b7480; /* --wc-text-muted */
    cursor: help;
}
.um-v2 .common-plugin-settings .um-set-tip svg {
    display: block;
}
.um-v2 .common-plugin-settings .um-set-tip:focus-visible {
    outline: 2px solid #b3dcfb; /* --wc-blue-200 */
    outline-offset: 1px;
    border-radius: 50%;
}
.um-v2 .common-plugin-settings .cps-setting-row.um-child-off {
    display: none;
}
/* Number with unit: the export's joined field — one 34px box, 1px #BDBDBD,
   radius 6; the value 72px, right-aligned 14px black; the unit a 64px
   --wc-gray-50 segment behind a #E5E7EB rule, 12px semibold
   --wc-text-secondary. Focus colours the whole box. */
.um-v2 .common-plugin-settings .um-num-group {
    display: inline-flex;
    align-items: stretch;
    height: 34px;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .common-plugin-settings .um-num-group:hover {
    border-color: #b6bdc5; /* --wc-gray-400 */
}
.um-v2 .common-plugin-settings .um-num-group:focus-within {
    border-color: #008df2; /* --wc-blue-500 */
}
.um-v2 .common-plugin-settings .um-num-group .cps-input,
.um-v2 .common-plugin-settings .um-num-group .cps-input:focus {
    width: 72px;
    height: 100%;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    color: #000000;
    text-align: right;
    box-shadow: none;
}
.um-v2 .common-plugin-settings .um-num-unit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    padding: 0 8px;
    border-left: 1px solid #e5e7eb;
    background: #f4f6f7; /* --wc-gray-50 */
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #4d5662; /* --wc-text-secondary */
}

/* ── 11. Field Mapping (DataMapping/Index: _CustomerCatalogMapping + _UmMappingSection) ──
   WebCommander's own v2 Field Mapping skin — the one Xero and Exsited render (core
   editor-common-v2.css section 5, .wcp2-fm*) — ported verbatim, scoped .um-v2. The page opts
   in exactly like core's _fieldMappingTables.gsp with wcp2 + fourthCol 'autosync': each entity
   is a card (icon tile, title over description, caret), each card has its own column header,
   rows are field | arrow | field | Auto-sync | lock. The accordion hooks, form names and selects
   are unchanged. umerang-field-mapping.css (linked inside the page, after this sheet) is one or
   two classes deep; every rule here is .um-v2 + core's 2-3 classes. */

/* The page frame carries its own 16px inset — the pane's 24px would double it. */
.um-v2 .subscription-product-container .subscription-product-content:has(.wcp2-fm-page) {
    padding: 0;
}
.um-v2 .mc-fm-page.wcp2-fm-page {
    padding: 16px;
}
/* The old white wrapper card goes away — the entity cards sit straight on the content pane. */
.um-v2 .mc-fm-wrap.wcp2-fm-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
/* Cards stack with a 16px gap; the old single bordered table goes away. */
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__table-wrapper {
    display: grid;
    gap: 16px;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
/* Card = DS SettingsSection + the screen's sectionProps (radius 8, overflow visible so a dropdown
   can hang out of it), with the export's --wc-shadow-card like Umerang's other cards. */
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card {
    background: #ffffff;
    border: 1px solid #e5e7eb; /* --wc-border */
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); /* --wc-shadow-card (as every Umerang card) */
    overflow: visible;
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card > .exsited-field-mapping__section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: transparent;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    border-radius: 8px;
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card > .exsited-field-mapping__section-header:hover {
    background: transparent;
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eef1f3; /* --wc-gray-100 */
    color: #4d5662;      /* --wc-text-secondary */
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card__text {
    flex: 1;
    min-width: 0;
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card__title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card__desc {
    display: block;
    margin-top: 1px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #6b7480; /* --wc-text-muted */
}
/* DS swaps chevron-down (closed) for chevron-up (open); one glyph rotated does the same. */
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card__caret {
    display: inline-flex;
    flex: 0 0 auto;
    color: #6b7480; /* --wc-text-muted */
    transition: transform 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card.expanded .wcp2-fm-card__caret {
    transform: rotate(180deg);
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-card > .exsited-field-mapping__section-body {
    padding: 0;
    background: transparent;
    border-top: 1px solid #e9edf0; /* --wc-divider */
}

/* Shared blue banner — the per-card "On export · matched by ..." one and the page-level
   "Sync on export" one (blue-50 box, 32px white disc icon, title 600 13/1.3 blue-on-tint,
   text 12.5/1.5). */
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__sync-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #e6f4fe; /* --wc-blue-50 */
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__sync-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: #ffffff;
    color: #008df2; /* --wc-blue-500 */
}
/* Core fills every banner svg (`fill: currentColor`) for its old solid glyphs; Lucide icons are
   stroke-only, so a fill would paint them as solid blobs. */
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__sync-icon svg {
    fill: none;
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-banner__text {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__sync-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #006ab8; /* --wc-blue-on-tint */
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__sync-desc {
    margin-top: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #1a1f26; /* --wc-text */
}
/* The per-card match banner sits in its own full-bleed divided band. */
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-match {
    padding: 14px 24px;
    border-bottom: 1px solid #e9edf0; /* --wc-divider */
}

/* Import: "When a match is found" / "When there's no match" rows (label left, 200px control right). */
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-act {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid #e9edf0; /* --wc-divider */
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-act__text {
    flex: 1 1 240px;
    min-width: 0;
    display: grid;
    gap: 3px;
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-act__label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-act__sub {
    font-size: 12.5px;
    line-height: 1.4;
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-act__control {
    flex: 0 0 200px;
    width: 200px;
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-act__control .exsited-field-mapping__conflict-note {
    font-size: 12.5px;
    line-height: 1.4;
    color: #6b7480; /* --wc-text-muted */
}

/* Column header + rows share one 4-track grid: field | arrow | field | lock/remove.
   Xero renders no gear, hint or 4th column, so the row's empty gear spacer and empty 4th-column
   <div> are dropped from the grid (display:none takes no track). A future wcp2 caller that turns
   on the gear / hint / auto-sync column must add a track here first. */
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-colhead,
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border-bottom: 1px solid #e9edf0; /* --wc-divider */
}
.um-v2 .exsited-field-mapping.wcp2-fm .wcp2-fm-colhead {
    background: #fafbfc; /* --wc-gray-25 */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__row {
    margin: 0;
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__row > .exsited-field-mapping__gear-spacer:empty,
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__row > div:empty {
    display: none;
}
/* Auto-sync variant (.wcp2-fm--autosync: a caller passing fourthCol 'autosync', e.g. Exsited) — 6 tracks:
   field | arrow | field | hint | Auto-sync | lock/remove. The row's hint cell (.exsited-field-mapping__gear-spacer,
   empty or holding the row's info icon) keeps its track here so every row lines up with the header. */
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .wcp2-fm-colhead,
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__row {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 18px 64px 32px;
}
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__row > .exsited-field-mapping__gear-spacer:empty {
    display: block;
}
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .wcp2-fm-colhead__autosync {
    text-align: center;
}
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__hint {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7480; /* --wc-text-muted */
    cursor: help;
}
/* Auto-sync checkbox → DS Checkbox (16px, radius 4, blue + white check when on), centred in its track. */
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__autosync {
    display: grid;
    place-items: center;
    justify-self: center;
    width: auto;
    margin: 0;
    padding: 0;
}
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__autosync input[type="checkbox"] {
    position: static;
    width: 16px;
    height: 16px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #d6dade; /* --wc-border-strong */
    border-radius: 4px;
    background: #ffffff no-repeat center / 12px 12px;
    cursor: pointer;
    transition: background-color 100ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__autosync input[type="checkbox"]:checked {
    border-color: #008df2;
    background-color: #008df2; /* --wc-blue-500 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__autosync input[type="checkbox"]:disabled {
    background-color: #f4f6f7; /* --wc-gray-50 */
    cursor: default;
}
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__autosync input[type="checkbox"]:checked:disabled {
    border-color: #a8d6f8;     /* --wc-blue-200 */
    background-color: #a8d6f8;
}
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__autosync input[type="checkbox"]:focus-visible {
    outline: 2px solid #d3ebfd; /* --wc-blue-100 */
    outline-offset: 1px;
}
/* No "Add field mapping" under the last row (section without allowAdd): drop its divider so it
   doesn't double up with the card's own bottom border. */
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__section-body > .exsited-field-mapping__row:last-child {
    border-bottom: 0;
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__arrow {
    display: grid;
    place-items: center;
    color: #6b7480; /* --wc-text-muted */
}
/* Lock and remove share one 28px centred box so their icons line up down the column.
   justify-content: center matters on the lock — core gives it `justify-content: flex-end` (it was a
   flex row), which under display:grid pushes the icon's track to the right edge of the cell. */
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__lock,
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__delete {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    justify-content: center;
    justify-self: center;
    margin: 0;
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__lock {
    color: #8b949e; /* --wc-text-micro */
    cursor: help;
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__delete {
    border-radius: 50%;
    color: #6b7480; /* --wc-text-muted */
    transition: background-color 120ms cubic-bezier(.4, 0, .2, 1), color 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__delete:hover {
    background: #fef2f2; /* --wc-red-bg */
    color: #dc2626;      /* --wc-red-text */
}

/* Field selects — the closed-state trigger of the export's hand-built dropdown, drawn on the REAL
   <select> (the core JS rebuilds these options and reads .val() constantly, so the native element
   stays the source of truth). 34px, radius 6, #BDBDBD border (blue-500 while focused), 13px,
   chevron-down 16 in text-muted; locked = gray-50 fill + text-secondary. */
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select,
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    padding: 0 32px 0 12px;
    border: 1px solid #bdbdbd;
    border-radius: 6px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #1a1f26; /* --wc-text */
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition: border-color 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select:focus,
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select:focus {
    border-color: #008df2; /* --wc-blue-500 */
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select:disabled {
    background-color: #f4f6f7; /* --wc-gray-50 */
    color: #4d5662;            /* --wc-text-secondary */
    cursor: default;
    opacity: 1;
}
/* Nothing picked yet ("— Select WebCommander field —" / "— Not mapped —") reads as a placeholder. */
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select:has(option[value=""]:checked),
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select:has(option[value="__none__"]:checked) {
    color: #6b7480; /* --wc-text-muted */
}

/* Open list — the export's listbox (white, radius 8, 5px inset, 34px rows, blue-50 selected row
   with a blue check on the right, max-height 300). CSS-only via customizable <select>
   (appearance: base-select); a browser without it keeps the styled trigger above and opens its
   native list, so behaviour is identical either way. */
@supports (appearance: base-select) {
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select {
        appearance: base-select !important;
        display: flex;
        align-items: center;
    }
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select::picker-icon,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select::picker-icon {
        display: none; /* the background-image chevron above is the caret */
    }
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select::picker(select),
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select::picker(select) {
        appearance: base-select;
        max-height: 300px;
        margin-top: 4px;
        padding: 5px;
        overflow-y: auto;
        background: #ffffff;
        border: 1px solid #e5e7eb; /* --wc-border */
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
    }
    /* The open list's scrollbar = the system one (editor-v2.css .custom-scroll-design: 3px, #d6d4d4
       thumb on a #F5F5F5 track). The list is a pseudo-element, so it can't carry that class — the same
       ::-webkit-scrollbar rules are chained onto ::picker(select) instead. */
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select::picker(select)::-webkit-scrollbar,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select::picker(select)::-webkit-scrollbar {
        width: 3px;
        height: 5px;
        background-color: #f5f5f5;
    }
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select::picker(select)::-webkit-scrollbar-track,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select::picker(select)::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        border-radius: 10px;
        background-color: #f5f5f5;
    }
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select::picker(select)::-webkit-scrollbar-thumb,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select::picker(select)::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #d6d4d4;
    }
    /* A browser that won't chain ::-webkit-scrollbar onto ::picker() gets the closest standard
       equivalent. Gated, not stacked: in Chrome, setting scrollbar-color/-width disables every
       ::-webkit-scrollbar rule, so applying both would throw the exact 3px look away. */
    @supports not selector(select::picker(select)::-webkit-scrollbar) {
        .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select::picker(select),
        .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select::picker(select) {
            scrollbar-width: thin;
            scrollbar-color: #d6d4d4 #f5f5f5;
        }
    }
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select option,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 34px;
        padding: 0 10px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 400;
        line-height: 1;
        color: #1a1f26; /* --wc-text */
        cursor: pointer;
    }
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select option:hover,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select option:focus-visible,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select option:hover,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select option:focus-visible {
        background: #f4f6f7; /* --wc-gray-50 */
        outline: none;
    }
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select option:checked,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select option:checked {
        background: #e6f4fe; /* --wc-blue-50 */
        color: #008df2;      /* --wc-blue-500 */
        font-weight: 600;
    }
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__select option::checkmark,
    .um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__conflict-select option::checkmark {
        order: 1; /* the DS puts the check AFTER the label */
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23008df2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    }
}

/* "Add field mapping" — stays a direct child of the section body (the add handler inserts new rows
   with $(this).before(row)), so its 12px 24px inset is margin, not a wrapper. */
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #008df2; /* --wc-blue-500 */
    text-decoration: none;
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__add:hover {
    color: #006ab8; /* --wc-blue-on-tint */
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__section-body > .exsited-field-mapping__flow-details {
    margin: 0 24px 12px;
}

/* umerang-field-mapping.css pins .settings-wrap at 680px and makes .mc-fm-page a centring flex box (which
   would shrink the column to its content); the v2 column is a full-width block capped at 760px. */
.um-v2 .settings-wrap:has(.wcp2-fm-page) {
    width: 100%;
}
.um-v2 .mc-fm-page.wcp2-fm-page {
    display: block;
}
.um-v2 .mc-fm-wrap.wcp2-fm-wrap {
    width: 100%;
}

/* Umerang's row has no hint cell, so its auto-sync grid is 5 tracks, not core's 6:
   field | arrow | field | Auto-sync | lock. */
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .wcp2-fm-colhead,
.um-v2 .exsited-field-mapping.wcp2-fm.wcp2-fm--autosync .exsited-field-mapping__row {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 64px 32px;
}
/* A row without a lock keeps its (empty) last track so the auto-sync boxes line up. */
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__gear-spacer {
    display: block;
    width: 28px;
    height: 28px;
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__lock svg {
    display: block;
}
/* The page-level "Sync on export" banner and footer note sit under the cards. */
.um-v2 .exsited-field-mapping.wcp2-fm > .exsited-field-mapping__sync-banner {
    margin-top: 16px;
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__sync-icon {
    display: grid;
    place-items: center;
}
.um-v2 .exsited-field-mapping.wcp2-fm .exsited-field-mapping__sync-icon svg {
    display: block;
}
.um-v2 .exsited-field-mapping.wcp2-fm > .exsited-field-mapping__footer-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6b7480; /* --wc-text-muted */
}
/* Save / Sync now: DS Buttons (32px pills, gap 12), right-aligned under the cards — Save primary,
   Sync now secondary (blue outline, --wc-blue-50 hover). */
.um-v2 .mc-fm-wrap.wcp2-fm-wrap .mc-fm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
}
.um-v2 .um-btn,
.um-v2 .um-btn:focus,
.um-v2 .um-btn:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 18px;
    border: 1px solid #008df2; /* --wc-blue-500 */
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}
.um-v2 .um-btn--primary,
.um-v2 .um-btn--primary:focus,
.um-v2 .um-btn--primary:active {
    background: #008df2;
    color: #ffffff;
}
.um-v2 .um-btn--primary:hover {
    border-color: #0077cf; /* --wc-blue-600 */
    background: #0077cf;
    color: #ffffff;
}
.um-v2 .um-btn--secondary,
.um-v2 .um-btn--secondary:focus,
.um-v2 .um-btn--secondary:active {
    background: #ffffff;
    color: #008df2;
}
.um-v2 .um-btn--secondary:hover {
    background: #e6f4fe; /* --wc-blue-50 */
    color: #008df2;
}
/* A list toolbar's single action (e.g. Customer Group Export) as a direct button after Refresh. */
.um-v2 .common-plugin-list .cpl-toolbar .cpl-data-action-btn {
    gap: 7px;
    cursor: pointer;
}
.um-v2 .common-plugin-list .cpl-toolbar .cpl-data-action-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* ── 12. Header actions + Events & Emails ─────────────────────────────────
   Header actions (the Xero PageActionBar's actions, gap 12): a page puts its
   Cancel / Save changes beside "Go To Umerang" through the layout's
   TopbarActions section. Events & Emails shows them only while a toggle
   differs from its saved state, as Xero's Field Mapping does. */
.um-v2 .main-title-wrap .um-topbar-right {
    gap: 16px;
}
.um-v2 .main-title-wrap .um-topbar-actions:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 12px;
}
.um-v2 .main-title-wrap .um-topbar-actions[hidden] {
    display: none;
}

/* Events & Emails (OnSiteTracking, .common-plugin-email-assignments .cpea-*):
   the Settings layout — a centred 760px column of cards 16px apart, 16px in
   from the pane. Card = radius 8, --wc-border, --wc-shadow-card; header 16px
   20px with the 36px --wc-gray-100 icon tile (16px glyph), the event name with
   its DS Badge, the 13px --wc-text-muted line and the 17px chevron; body rows
   16px 24px under --wc-divider rules, label LEFT / switch RIGHT (the markup
   puts the switch first, so it moves with `order`). The email-suppress row is
   the inset child row, shown only while its event is on. */
.um-v2 .subscription-product-container .subscription-product-content:has(#divOnSiteTracking) {
    padding: 16px;
}
/* "Last updated …" (when these settings were last saved): the Xero dashboard's meta line - 13px
   --wc-text-secondary - at the top of the 760px column. */
.um-v2 .onsite-tracking-wrap .um-ee-meta {
    max-width: 760px;
    margin: 0 auto 12px;
    font-size: 13px;
    line-height: 1.3;
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .common-plugin-email-assignments {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
}
.um-v2 .common-plugin-email-assignments .cpea-list {
    gap: 16px;
}
.um-v2 .common-plugin-email-assignments .cpea-card {
    background: #ffffff;
    border: 1px solid #e5e7eb; /* --wc-border */
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); /* --wc-shadow-card */
}
.um-v2 .common-plugin-email-assignments .cpea-card-header {
    gap: 10px;
    padding: 16px 20px;
    border-radius: 8px;
    user-select: none;
}
.um-v2 .common-plugin-email-assignments .cpea-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eef1f3; /* --wc-gray-100 */
    color: #4d5662; /* --wc-text-secondary */
}
.um-v2 .common-plugin-email-assignments .cpea-icon .fee-icon {
    width: 16px;
    height: 16px;
}
.um-v2 .common-plugin-email-assignments .cpea-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.um-v2 .common-plugin-email-assignments .cpea-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-email-assignments .cpea-desc {
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7480; /* --wc-text-muted */
}
/* Status: the DS Badge, size md — 22px pill, 0 9px, 12px semibold; success =
   --wc-green-bg / --wc-green-text, neutral = --wc-gray-100 / --wc-text-muted;
   no border, no dot. */
.um-v2 .common-plugin-email-assignments .cpea-chip {
    height: 22px;
    gap: 4px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.um-v2 .common-plugin-email-assignments .cpea-chip--configured {
    background: #dcfce7; /* --wc-green-bg */
    color: #16a34a; /* --wc-green-text */
}
.um-v2 .common-plugin-email-assignments .cpea-chip--configured::before {
    content: none;
}
.um-v2 .common-plugin-email-assignments .cpea-chip--not {
    background: #eef1f3; /* --wc-gray-100 */
    color: #6b7480; /* --wc-text-muted */
}
.um-v2 .common-plugin-email-assignments .cpea-chev svg {
    width: 17px;
    height: 17px;
}
.um-v2 .common-plugin-email-assignments .cpea-chev svg path {
    stroke: #6b7480; /* --wc-text-muted */
}

/* Body */
.um-v2 .common-plugin-email-assignments .cpea-card.is-open .cpea-body {
    padding: 0;
    border-top: 1px solid #e9edf0; /* --wc-divider */
}
.um-v2 .common-plugin-email-assignments .cpea-toggle-row {
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 16px 24px;
}
.um-v2 .common-plugin-email-assignments .cpea-toggle-row > .cpea-toggle {
    order: 2;
}
.um-v2 .common-plugin-email-assignments .cpea-toggle-row > div:not(.cpea-toggle) {
    flex: 1 1 auto;
    min-width: 0;
}
.um-v2 .common-plugin-email-assignments .cpea-toggle-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #1a1f26; /* --wc-text */
}
.um-v2 .common-plugin-email-assignments .cpea-toggle-desc {
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #4d5662; /* --wc-text-secondary */
}
/* Switch, size sm: --wc-gray-300 off / --wc-blue-500 on, DS knob shadow. */
.um-v2 .common-plugin-email-assignments .cpea-toggle {
    background: #d6dade; /* --wc-gray-300 */
    transition: background 150ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .common-plugin-email-assignments .cpea-toggle.is-on {
    background: #008df2; /* --wc-blue-500 */
}
.um-v2 .common-plugin-email-assignments .cpea-toggle::before {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
    transition: left 150ms cubic-bezier(.4, 0, .2, 1);
}
/* Child row (Disable WebCommander Emails): the inset band - --wc-gray-50,
   2px --wc-blue-500 left edge, radius 6, 14px 16px 14px 18px, 24px in from
   the card edges and 16px above its foot. Shown/hidden by the event toggle. */
.um-v2 .common-plugin-email-assignments .cpea-toggle-row.cpea-toggle-row--child {
    margin: -2px 24px 16px;
    padding: 14px 16px 14px 18px;
    border-left: 2px solid #008df2; /* --wc-blue-500 */
    border-radius: 6px;
    background: #f4f6f7; /* --wc-gray-50 */
}

/* ── 13. Dashboard (PluginDashboard/_Index, .wcp2-dash*) ──────────────────
   WebCommander's own v2 Dashboard skin - Xero's Dashboard and Exsited's Overview
   (core editor-common-v2.css section 4) - ported verbatim, scoped .um-v2, with
   the export's --wc-shadow-card on the cards. The page renders the same
   wcp2-dash-* blocks those dashboards do. */

/* .wcp2-dash carries its own 24px 28px 40px inset - the pane's 24px would double it. */
.um-v2 .subscription-product-container .subscription-product-content:has(.wcp2-dash) {
    padding: 0;
}
.um-v2 .wcp2-dash {
    max-width: 1160px;
    margin: 0 auto;
    padding: 24px 28px 40px; /* exact mockup values — flat 10px was narrowing the inner
        content by 18px each side (measured: mine 1140px, mockup 1104px = 1160-2*28) */
}
.um-v2 .wcp2-dash-head {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}
.um-v2 .wcp2-dash-title {
    font-size: 22px;
    line-height: 1.2; /* explicit — browser default is taller, measured 56px vs mockup's 49.28px */
    font-weight: 700;
    color: #1a1f26; /* text */
}
.um-v2 .wcp2-dash-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1.3; /* explicit, same reason */
    color: #4d5662; /* text-secondary */
}
.um-v2 .wcp2-dash-meta svg {
    color: #6b7480; /* text-muted */
}
.um-v2 .wcp2-dash-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.um-v2 .wcp2-dash-card {
    background: #ffffff;
    border: 1px solid #e5e7eb; /* border */
    border-radius: 8px; /* --wc-radius-md */
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); /* --wc-shadow-card */
    padding: 20px;
}
.um-v2 .wcp2-dash-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1f26; /* text */
}
.um-v2 .wcp2-dash-card-title--lg {
    font-size: 20px;
}
.um-v2 .wcp2-dash-card-desc {
    font-size: 13px;
    color: #4d5662; /* text-secondary */
    margin-top: 4px;
}
.um-v2 .wcp2-dash-divider {
    height: 1px;
    background: #e5e7eb; /* border */
    margin: 0 -20px 16px;
}

/* Connection card */
.um-v2 .wcp2-dash-conn {
    padding: 0;
}
.um-v2 .wcp2-dash-conn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px;
}
/* Export (12): the blue "xero" wordmark (27px wide) centred in a 40px bordered white circle. */
.um-v2 .wcp2-dash-conn-logo {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #e5e7eb; /* --wc-border */
    background: #ffffff; /* --wc-surface */
    display: grid;
    place-items: center;
}
.um-v2 .wcp2-dash-conn-logo img {
    width: 27px;
    height: auto;
    display: block;
}
.um-v2 .wcp2-dash-conn-info {
    flex: 1 1 260px;
    min-width: 0;
    display: grid;
    gap: 5px;
}
.um-v2 .wcp2-dash-conn-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.um-v2 .wcp2-dash-conn-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1f26; /* text */
}
.um-v2 .wcp2-dash-conn-meta {
    font-size: 12.5px;
    font-weight: 400;
    color: #4d5662; /* text-secondary */
}
.um-v2 .wcp2-dash-conn-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.um-v2 .wcp2-dash-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #008DF2; /* blue-500 */
    text-decoration: none;
}
.um-v2 .wcp2-dash-link:hover {
    text-decoration: underline;
}
/* Buttons — pill, matching the settings .cps-btn family already established */
/* button.wcp2-btn (element + class, not just .wcp2-btn) plus !important on the colour
   properties: css/admin/theme-sb.css ships a bare `button { background-color:#1198C5;
   color:#fff }` reset (no !important) that a plain single-class selector should already
   outrank on specificity alone — but it didn't in practice (HWC-5563 dashboard round), so
   this pins it defensively rather than relying on a specificity fight that measured wrong
   once already. See wc-design-port skill, "the admin shell loads css/admin/theme-sb.css".

   A SECOND, bigger core rule bites harder on :active specifically: editor-v2.css's
   `.popup button, .popup button:focus, .popup button:active, .popup button:visited` sets
   height:36px, padding:5px 25px, border-radius:50px, font 14px/600 (this popup sits inside
   a `.popup` ancestor). Its `:active` variant is class+element+pseudo-class = (0,2,1) —
   MORE specific than plain `button.wcp2-btn` (0,1,1) — so the instant you press the button,
   core's bigger padding/height wins and the button visibly grows/shifts, snapping back on
   release. Listing :active/:focus/:visited explicitly on every rule below (with !important
   on every box-model property, not just colour) closes this for all three pseudo-classes,
   not just :hover. */
.um-v2 button.wcp2-btn,
.um-v2 button.wcp2-btn:focus,
.um-v2 button.wcp2-btn:active,
.um-v2 button.wcp2-btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important; /* label centred even when the button is wider than its text */
    text-align: center;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
/* Pause/Resume map to the DS Button "secondary" variant, which is BLUE border/text/icon
   at REST — not the grey "neutral" variant I'd used here. Confirmed against the DS's own
   VARIANTS constant (secondary: background #fff, color/border var(--wc-blue-500)) rather
   than guessed. The icon svgs use currentColor, so this one fix also turns the icon blue —
   no separate icon-colour rule needed. */
.um-v2 button.wcp2-btn.wcp2-btn--outline {
    border: 1px solid #008DF2 !important; /* blue-500 */
    background: #ffffff !important;
    color: #008DF2 !important; /* blue-500 */
}
/* Hover: background only goes to blue-50 (DS HOVER.secondary) — border/colour stay blue,
   they don't change on hover. Not destructive, so no red anywhere (that's Disconnect's
   .wcp2-btn--danger-ghost below, a different, genuinely-grey-at-rest button). */
.um-v2 button.wcp2-btn.wcp2-btn--outline:hover {
    background: #e6f4fe !important; /* blue-50 */
    border-color: #008DF2; /* blue-500 */
    color: #008DF2 !important;
}
.um-v2 button.wcp2-btn.wcp2-btn--danger-ghost {
    border: 1px solid #d6dade; /* border-strong */
    background: #ffffff !important;
    color: #4d5662 !important; /* text-secondary */
}
.um-v2 button.wcp2-btn.wcp2-btn--danger-ghost:hover {
    background: #fef2f2 !important; /* red-bg */
    border-color: #dc2626; /* red-text */
    color: #dc2626 !important;
}
/* Primary (blue) — used for Reconnect and Open Error Queue. Both sit inside a RED alert
   banner, but the button itself is blue (the app's one primary/CTA colour), not red —
   confirmed against the mockup's "Open Error Queue" button, which is blue on a red banner. */
.um-v2 button.wcp2-btn.wcp2-btn--primary {
    border: 1px solid #008DF2; /* blue-500 */
    background: #008DF2 !important;
    color: #ffffff !important;
}
.um-v2 button.wcp2-btn.wcp2-btn--primary:hover {
    background: #0077cf !important; /* blue-600 */
}
/* State badge — connection-state pill. Ported from the export's generic Badge component
   (tone -> {background, color} only, NO border at all) instead of the old .cpd-state-badge's
   own approximated rgba() colours + border, which don't match any of Badge's actual tones. */
.um-v2 .wcp2-state-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.um-v2 .wcp2-state-badge--connected { background: #dcfce7; color: #16a34a; } /* tone=success: green-bg / green-text */
.um-v2 .wcp2-state-badge--requires_attention { background: #fdeccd; color: #b45309; } /* tone=warning: amber-bg-strong / amber-text */
.um-v2 .wcp2-state-badge--disabled { background: #eef1f3; color: #6b7480; } /* tone=neutral: gray-100 / text-muted */
.um-v2 .wcp2-state-badge--requires_attention_disabled { background: #fde3e3; color: #dc2626; } /* tone=danger: red-bg-strong / red-text */
.um-v2 .wcp2-state-badge--not_connected { background: #eef1f3; color: #6b7480; } /* tone=neutral */

/* Health pills row */
.um-v2 .wcp2-dash-health {
    display: flex;
    flex-wrap: wrap;
    column-gap: 56px;
    padding: 0 20px;
    border-top: 1px solid #e9edf0; /* divider */
}
.um-v2 .wcp2-dash-health-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
}
.um-v2 .wcp2-dash-health-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    display: inline-flex;
}
.um-v2 .wcp2-dash-health-icon--ok { color: #16a34a; } /* green-text */
.um-v2 .wcp2-dash-health-icon--warn { color: #dc2626; } /* red-text */
.um-v2 .wcp2-dash-health-icon--amber { color: #ea9214; } /* --wc-amber-icon */
.um-v2 .wcp2-dash-health-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1f26; /* text */
}
.um-v2 .wcp2-dash-health-hint {
    font-size: 12px;
    color: #4d5662; /* text-secondary */
    margin-top: 2px;
}
/* Export (9): inline "View" / "Review" link at the end of a health hint */
.um-v2 .wcp2-dash-health-hint .wcp2-dash-health-link {
    font-weight: 600;
    color: #008DF2; /* --wc-link (blue-500) */
    text-decoration: none;
}
.um-v2 .wcp2-dash-health-hint .wcp2-dash-health-link:hover {
    color: #0077cf; /* --wc-link-hover (blue-600) */
    text-decoration: underline;
}

/* Alerts — auth-failure attention strip */
.um-v2 .wcp2-dash-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-radius: 8px;
}
.um-v2 .wcp2-dash-alert--attention {
    background: #fef2f2; /* red-bg */
    border: 1px solid #fde3e3; /* red-bg-strong */
}
.um-v2 .wcp2-dash-alert-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fde3e3; /* red-bg-strong */
    color: #dc2626; /* red-text */
}
.um-v2 .wcp2-dash-alert-text {
    flex: 1 1 320px;
    min-width: 0;
    display: grid;
    gap: 3px;
}
.um-v2 .wcp2-dash-alert-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1f26; /* text */
}
.um-v2 .wcp2-dash-alert-desc {
    font-size: 12.5px;
    color: #4d5662; /* text-secondary */
    line-height: 1.45;
}

/* Stat tiles */
.um-v2 .wcp2-dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: #e9edf0; /* divider */
    border: 1px solid #e5e7eb; /* border */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); /* --wc-shadow-card */
}
.um-v2 .wcp2-dash-stat {
    background: #ffffff;
    padding: 16px 20px 18px;
    display: grid;
    gap: 8px;
    align-content: start;
}
.um-v2 .wcp2-dash-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.um-v2 .wcp2-dash-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7480; /* text-muted */
}
.um-v2 .wcp2-dash-stat-icon {
    display: inline-flex;
    color: #6b7480; /* text-muted */
}
.um-v2 .wcp2-dash-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: #1a1f26; /* text */
}

/* Recently synced + Sync activity — TWO SEPARATE cards side by side (the export has no shared
   "Sync" title/desc wrapping them, and no divider between them — each is its own bordered card). */
.um-v2 .wcp2-dash-two-col {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: stretch;
}
/* Both cards manage their own edge-to-edge header + row padding (like .wcp2-dash-conn above),
   so the shared .wcp2-dash-card's 20px padding is zeroed here. */
.um-v2 .wcp2-dash-sync-col {
    flex: 2 1 380px;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.um-v2 .wcp2-dash-sync-col:last-child {
    flex: 1 1 260px;
}
.um-v2 .wcp2-dash-recent-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 14px;
}
.um-v2 .wcp2-dash-act-head {
    padding: 16px 20px 14px;
}
.um-v2 .wcp2-dash-recent-sub {
    font-size: 12.5px;
    line-height: 1.3;
    color: #4d5662; /* text-secondary */
    margin-top: 2px;
}
.um-v2 .wcp2-dash-recent-more {
    padding: 12px 20px 16px;
    border-top: 1px solid #f0f3f4;
    margin-top: auto;
}
.um-v2 .wcp2-dash-view-all {
    color: #008DF2; /* blue-500 */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
/* Export puts a divider above EVERY row, including the first (right under the header) — no
   :first-of-type exception, confirmed against the template's <sc-for> markup. */
.um-v2 .wcp2-dash-recent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid #f0f3f4;
}
.um-v2 .wcp2-dash-recent-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f4f6f7; /* gray-50 */
    display: grid;
    place-items: center;
    color: #4d5662; /* text-secondary */
}
.um-v2 .wcp2-dash-recent-text {
    flex: 1 1 auto;
    min-width: 0;
}
.um-v2 .wcp2-dash-recent-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1f26; /* text */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.um-v2 .wcp2-dash-recent-email {
    font-size: 12px;
    color: #4d5662; /* text-secondary */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.um-v2 .wcp2-dash-recent-when {
    color: #6b7480; /* text-muted */
}
/* Design: dot + coloured text, no pill background (the earlier badge look — tinted background,
   padding, border-radius — was this session's own guess, not what the export specifies). */
.um-v2 .wcp2-dash-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    font-weight: 400;
    font-size: 13px;
    flex: 0 0 auto;
}
.um-v2 .wcp2-dash-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.um-v2 .wcp2-dash-status--ok { color: #0a9b49; /* green-text */ }
.um-v2 .wcp2-dash-status--ok .wcp2-dash-status-dot { background: #0dc15c; /* green-dot */ }
.um-v2 .wcp2-dash-status--skip { color: #6b7480; /* text-muted */ }
.um-v2 .wcp2-dash-status--skip .wcp2-dash-status-dot { background: #9aa2ac; /* gray-400 */ }
.um-v2 .wcp2-dash-status--fail { color: #eb0012; /* red-text */ }
.um-v2 .wcp2-dash-status--fail .wcp2-dash-status-dot { background: #eb0012; /* red-text */ }
.um-v2 .wcp2-dash-status-info {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #eb0012; /* red-text — only shown for Failed rows */
    cursor: help;
    flex-shrink: 0;
}
.um-v2 .wcp2-dash-status-info:hover {
    background: #f4f6f7; /* gray-100 */
}
.um-v2 .wcp2-dash-act-subtitle {
    font-size: 12.5px;
    color: #4d5662; /* text-secondary — export uses this, not text-muted */
}
/* Export puts a divider above EVERY row here too, same as .wcp2-dash-recent-row — no
   :first-of-type exception. */
.um-v2 .wcp2-dash-act-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid #f0f3f4;
}
/* Solid filled dot, colour-coded by whether the run had any failures — NOT the fixed blue ring
   this session had guessed at (u.dotStyle in the export is a plain filled circle, red or green,
   never blue/outlined). */
.um-v2 .wcp2-dash-act-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0dc15c; /* green-dot */
    margin-top: 5px;
}
.um-v2 .wcp2-dash-act-dot--fail {
    background: #eb0012; /* red-text */
}
/* Export colours this line's own text var(--wc-text) (BLACK), not text-secondary — the earlier
   muted-grey guess made every row (even successful ones) look dimmed/disabled. */
.um-v2 .wcp2-dash-act-text {
    font-size: 13px;
    color: #1a1f26; /* text */
    line-height: 1.3;
}
.um-v2 .wcp2-dash-act-failed {
    color: #eb0012; /* red-text */
}
.um-v2 .wcp2-dash-act-time {
    font-size: 12px;
    color: #6b7480; /* text-muted */
}
.um-v2 .wcp2-dash-empty {
    padding: 28px 20px;
    text-align: center;
    color: #9aa0a6;
    font-size: 13px;
}

/* Umerang specifics */
/* Connection mark: the "U" monogram (as Settings' account strip) in the 40px circle. */
.um-v2 .wcp2-dash-conn-logo.um-dash-logo {
    border: 0;
    background: #15141a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
}
.um-v2 .wcp2-dash-link svg,
.um-v2 .wcp2-dash-stat-icon svg,
.um-v2 .wcp2-dash-recent-avatar svg,
.um-v2 .wcp2-dash-status-info svg,
.um-v2 .wcp2-dash-alert-icon svg {
    display: block;
}
/* List-cap notice: the alert strip in the DS warning tone (--wc-amber-*), not the red attention one. */
.um-v2 .wcp2-dash-alert.um-dash-alert--warn {
    border: 1px solid #fdeccd; /* --wc-amber-bg-strong */
    background: #fff7ed; /* --wc-amber-bg */
}
.um-v2 .um-dash-alert--warn .wcp2-dash-alert-icon {
    background: #fdeccd; /* --wc-amber-bg-strong */
    color: #b45309; /* --wc-amber-text */
}
.um-v2 .um-dash-alert--warn .wcp2-dash-alert-desc {
    color: #1a1f26; /* --wc-text */
}
/* Stat tiles are links through to each entity's list (.um-nav-card + its loading spinner). */
.um-v2 .wcp2-dash-stats a.wcp2-dash-stat {
    position: relative;
    color: inherit;
    text-decoration: none;
    transition: background 120ms cubic-bezier(.4, 0, .2, 1);
}
.um-v2 .wcp2-dash-stats a.wcp2-dash-stat:hover {
    background: #fbfcfd;
}
.um-v2 .wcp2-dash-stats a.wcp2-dash-stat.is-disabled {
    pointer-events: none;
}
/* Sync all data: title + description left, the primary Sync Now pill right. */
.um-v2 .wcp2-dash-card.um-dash-syncall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.um-v2 .um-dash-syncall .um-dash-syncall-text {
    flex: 1 1 320px;
    min-width: 0;
}
.um-v2 .um-dash-syncall .wcp2-dash-card-desc {
    line-height: 1.45;
}

/* ── 14. Drawers & modals inside WebCommander ─────────────────────────────
   HWC-5846 / HWC-6076, as the Store Migration addon (its style.css). An
   iframe cannot paint outside its own box, so a drawer stopped under WC's top
   bar and its dim left WC's top bar and icon rail bright. js/um-wc-backdrop.js
   tells the admin while a backdrop is up; the admin then grows the plugin
   popup to the whole viewport (editor-v2.css, body.plugin-modal-backdrop)
   and makes it transparent. These rules sit outside the .um-v2 scope on
   purpose: they style html/body and the overlays appended to <body>. */

/* Inside WC (html.um-in-wc, set by um-wc-backdrop.js) the page colour is
   painted by the shell (.subscription-product-area, #F0F3F4), not html/body
   (Bootstrap's body is white), so the strip padded in below is see-through. */
html.um-in-wc,
html.um-in-wc body {
    background: transparent !important;
}
/* While the popup is full-viewport keep the page where it was by padding in
   the old 50px top / 80px left offset (WC's top bar / icon rail). The shell
   is height:100% of body (html, body height 100%, border-box), so it shrinks
   by the 50px on its own and nothing moves. The drawers are position:fixed
   inset 0, so they cover that strip: full height, header at the very top,
   WC's own chrome dimmed through the backdrop. */
html.um-wc-fullscreen {
    padding: 50px 0 0 80px;
    box-sizing: border-box;
}

/* One backdrop colour for every drawer, modal and dialog - the Store
   Migration / WC sync-popup mask - so the dim reads as one layer with the
   WC chrome showing through it. The um-* overlays set their colour inline
   (umerang-integration-drawers.js, Settings, Onboarding), hence !important. */
.um-xsh-overlay,
.um-confirm-overlay,
.um-sync-overlay,
.um-modal-overlay,
.um-ds-overlay,
.ui-widget-overlay,
.k-overlay,
.note-modal-backdrop {
    background: rgba(24, 31, 40, .34) !important;
    opacity: 1 !important;
}
.modal-backdrop {
    --bs-backdrop-bg: rgb(24, 31, 40);
    --bs-backdrop-opacity: .34;
}
/* Stacked Bootstrap modals keep one dim level, like the admin's single dim. */
.modal-backdrop ~ .modal-backdrop {
    --bs-backdrop-opacity: 0;
}

/* ── Bulk Action ▾ (WC core's toolbar bulk menu, .wcp2-table-bulk-trigger + .wcp2-table-menu) ──
   Shown in the list toolbar only while rows are ticked (umerang-data-list.js); it replaces the old in-list
   selection bar, which stays in the DOM for its count but is no longer shown. Trigger = the DS "secondary"
   button (white, blue-500 border + text, blue-50 hover), 32px pill; menu = 190px, 5px padding, radius 8 - the
   actions only, as Xero's (Export to Xero / Import from Xero). */
.um-v2 .common-plugin-list .mc-sel-bar.cpl-sel-bar { display: none !important; }
.um-v2 .common-plugin-list .um-bulk-wrap { position: relative; display: inline-flex; }
.um-v2 .common-plugin-list .um-bulk-wrap[hidden] { display: none; }
.um-v2 .common-plugin-list button.um-bulk-trigger,
.um-v2 .common-plugin-list button.um-bulk-trigger:focus,
.um-v2 .common-plugin-list button.um-bulk-trigger:active {
    height: 32px;
    padding: 0 12px 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #008df2; /* --wc-blue-500 */
    border-radius: 999px;
    background: #ffffff;
    color: #008df2;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
}
.um-v2 .common-plugin-list button.um-bulk-trigger:hover,
.um-v2 .common-plugin-list button.um-bulk-trigger[aria-expanded="true"] { background: #e6f4fe; /* --wc-blue-50 */ }
.um-v2 .common-plugin-list .um-bulk-trigger svg { flex-shrink: 0; }
.um-v2 .common-plugin-list .um-bulk-menu {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 50;
    width: 190px;
    padding: 5px;
    display: grid;
    gap: 2px;
    background: #ffffff;
    border: 1px solid #e5e7eb; /* --wc-border */
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.um-v2 .common-plugin-list .um-bulk-menu[hidden] { display: none; }
.um-v2 .common-plugin-list button.um-bulk-item,
.um-v2 .common-plugin-list button.um-bulk-item:focus,
.um-v2 .common-plugin-list button.um-bulk-item:active {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    color: #1a1f26;
    text-align: left;
    cursor: pointer;
}
.um-v2 .common-plugin-list button.um-bulk-item:hover { background: #f4f6f7; }

/* ── Stat strip (WC's aggregation strip, as Event Management's StatStrip / Store Migration's Sync History):
   one inline run of "Label [n]" between the toolbar and the table, 9px 20px, 18px apart, a --wc-divider under
   it. Label 13px black; the count in a tab-badge pill (h18, min-w 20, 0 6px, 11px semibold) on --wc-gray-100,
   the tone in the figure only. */
.um-v2 .common-plugin-list .um-stat-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 9px 20px;
    border-bottom: 1px solid #e9edf0; /* --wc-divider */
    background: #ffffff;
}
.um-v2 .common-plugin-list .um-stat { display: inline-flex; align-items: center; gap: 8px; }
.um-v2 .common-plugin-list .um-stat-label { font-size: 13px; line-height: 1; color: #000000; }
.um-v2 .common-plugin-list .um-stat-value {
    display: inline-grid;
    place-items: center;
    height: 18px;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef1f3; /* --wc-gray-100 */
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #000000;
}
.um-v2 .common-plugin-list .um-stat-value--success { color: #16a34a; } /* --wc-green-text */
.um-v2 .common-plugin-list .um-stat-value--danger { color: #dc2626; }  /* --wc-red-text */
.um-v2 .common-plugin-list .um-stat-value--warning { color: #b45309; } /* --wc-amber-text */

/* ── Sync Run Details drawer body (umerang-integration-drawers.js openRunDetailDrawer) ──
   WC core's run-detail drawer (editor-common-v2.css .mc-rd-*, as Xero / Exsited). Unscoped: the drawer is
   appended to <body>, outside the .um-v2 root; every class is um-rd- prefixed. */
/* Drawer header (openDrawer, every Umerang drawer): core's .mc-rd-header - 18px 20px over a --wc-divider, a 16px/600
   title, the 32px round Lucide close. */
.um-dr-head { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #e9edf0; }
.um-dr-head-text { min-width: 0; }
.um-dr-title { font-size: 16px; font-weight: 600; line-height: 1.2; color: #1a1f26; word-break: break-word; font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
button.um-dr-close, button.um-dr-close:focus, button.um-dr-close:active { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; margin: -6px -6px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4d5662; cursor: pointer; box-shadow: none; }
button.um-dr-close:hover { background: #f4f6f7; }
.um-rd { display: grid; gap: 20px; font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.um-rd-summary { display: grid; gap: 4px; }
.um-rd-status { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.um-rd-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.um-rd-badge--success { background: #dcfce7; color: #16a34a; }
.um-rd-badge--warning { background: #fdeccd; color: #b45309; }
.um-rd-badge--danger  { background: #fde3e3; color: #dc2626; }
.um-rd-badge--info    { background: #e6f4fe; color: #008df2; }
.um-rd-badge--neutral { background: #eef1f3; color: #6b7480; }
.um-rd-run-no { font-size: 13px; line-height: 1; color: #6b7480; }
.um-rd-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #e9edf0; }
.um-rd-kv-label { font-size: 13px; line-height: 1.3; color: #000000; }
.um-rd-kv-value { font-size: 13px; font-weight: 600; line-height: 1.3; color: #1a1f26; text-align: right; font-variant-numeric: tabular-nums; }
.um-rd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #e5e7eb; border-radius: 8px; background: #ffffff; }
.um-rd-tile { display: grid; gap: 6px; justify-items: center; padding: 14px 8px 12px; }
.um-rd-tile + .um-rd-tile { border-left: 1px solid #e9edf0; }
.um-rd-tile-value { font-size: 20px; font-weight: 700; line-height: 1; color: #1a1f26; font-variant-numeric: tabular-nums; }
.um-rd-tile-value--success { color: #16a34a; }
.um-rd-tile-value--danger  { color: #ef4444; }
.um-rd-tile-value--warning { color: #ea9214; }
.um-rd-tile-label { font-size: 11px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #4d5662; }
.um-rd-section { display: grid; gap: 10px; }
.um-rd-section-title { font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #1a1f26; }
.um-rd-entities { border: 1px solid #e5e7eb; border-radius: 8px; background: #ffffff; overflow: hidden; }
.um-rd-entity + .um-rd-entity { border-top: 1px solid #e9edf0; }
.um-rd-entity-head { display: flex; align-items: center; gap: 12px; min-height: 46px; box-sizing: border-box; padding: 10px 16px; }
.um-rd-entity-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #1a1f26; }
.um-rd-entity-total { flex: 0 0 auto; font-size: 12.5px; line-height: 1.3; color: #000000; font-variant-numeric: tabular-nums; }
.um-rd-entity-body { display: grid; gap: 10px; padding: 0 16px 14px; }
.um-rd-bar { height: 6px; border-radius: 999px; overflow: hidden; background: #eef1f3; }
.um-rd-bar svg { display: block; width: 100%; height: 100%; }
.um-rd-seg--ok { fill: #22c55e; }
.um-rd-seg--failed { fill: #ef4444; }
.um-rd-seg--skipped { fill: #f59e0b; }
.um-rd-entity-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 28px; }
.um-rd-entity-line { font-size: 12.5px; line-height: 1.3; color: #000000; font-variant-numeric: tabular-nums; }
.um-rd-spacer { flex: 1; }
a.um-rd-errtoggle, a.um-rd-errtoggle:hover { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #008df2; white-space: nowrap; cursor: pointer; text-decoration: none; }
/* Retry N failed: core's compact outline button (28px, 0 11px, 12px). */
button.um-rd-retryall, button.um-rd-retryall:focus, button.um-rd-retryall:active { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px solid #008df2; border-radius: 999px; background: #ffffff; box-shadow: none; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; color: #008df2; white-space: nowrap; cursor: pointer; }
button.um-rd-retryall:hover { background: #e6f4fe; }
button.um-rd-retryall[disabled] { opacity: .6; cursor: default; }
/* Record list - shown while the entity is open, full width under its body, rows divided. */
.um-rd-errors { display: none; border-top: 1px solid #e9edf0; background: #ffffff; }
.um-rd-entity.is-open .um-rd-errors { display: block; max-height: 220px; overflow-y: auto; }
.um-rd-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; }
.um-rd-item + .um-rd-item { border-top: 1px solid #e9edf0; }
.um-rd-item:hover { background: #fafbfc; }
.um-rd-item.um-rd-logrow { cursor: pointer; }
.um-rd-item-icon { flex: 0 0 auto; display: inline-flex; padding-top: 1px; }
.um-rd-item--failed .um-rd-item-icon { color: #ef4444; }
.um-rd-item--skipped .um-rd-item-icon { color: #b6bdc5; }
.um-rd-item-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.um-rd-item-name { font-size: 13px; font-weight: 600; line-height: 1.3; color: #1a1f26; overflow-wrap: anywhere; }
.um-rd-item-msg { font-size: 12.5px; line-height: 1.45; color: #4d5662; overflow-wrap: anywhere; }
.um-rd-item--failed .um-rd-item-msg { color: #ef4444; }
.um-rd-viewlog { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding-top: 1px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #008df2; white-space: nowrap; }
.um-rd-note { padding: 12px 16px; font-size: 12.5px; color: #6b7480; }
.um-rd-error { padding: 10px 12px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; font-size: 12.5px; color: #991b1b; white-space: pre-wrap; word-break: break-word; }

/* Status dot tones for rows that set them by class (Sync History) - the same colours the other lists' dots use. */
.um-v2 .common-plugin-list .cpl-status-dot--success { background: #0dc15c; }
.um-v2 .common-plugin-list .cpl-status-dot--warning { background: #ff9f40; }
.um-v2 .common-plugin-list .cpl-status-dot--danger  { background: #eb0012; }
.um-v2 .common-plugin-list .cpl-status-dot--neutral { background: #828282; }

/* ── Per-record Sync History drawer (openHistoryDrawer) - WC core's timeline (.mc-xsh-item, Xero / Exsited).
   Unscoped like um-rd-*: the drawer hangs off <body>. */
.um-xsh-list { display: flex; flex-direction: column; font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.um-xsh-item { display: flex; gap: 12px; }
.um-xsh-rail { flex: 0 0 12px; display: flex; flex-direction: column; align-items: center; padding-top: 15px; }
.um-xsh-ring { width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: #ffffff; border: 2px solid #b6bdc5; }
.um-xsh-ring--synced { border-color: #22c55e; }
.um-xsh-ring--failed { border-color: #dc2626; }
.um-xsh-ring--skipped { border-color: #d6dade; }
.um-xsh-ring--conflict { border-color: #ea9214; }
.um-xsh-rail-line { flex: 1; width: 1px; margin-top: 6px; background: #e9edf0; }
.um-xsh-entry { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 0 14px; }
.um-xsh-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.um-xsh-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.um-xsh-chip--synced { background: #dcfce7; color: #16a34a; }
.um-xsh-chip--failed { background: #fde3e3; color: #dc2626; }
.um-xsh-chip--skipped { background: #eef1f3; color: #6b7480; }
.um-xsh-chip--conflict { background: #fdeccd; color: #b45309; }
.um-xsh-time { font-size: 12.5px; color: #1a1f26; font-variant-numeric: tabular-nums; }
.um-xsh-line { font-size: 13px; line-height: 1.45; color: #1a1f26; word-break: break-word; }
.um-xsh-line strong { font-weight: 600; }
.um-xsh-meta { font-size: 12px; color: #4d5662; }
.um-xsh-retrybar { margin-bottom: 8px; }
button.um-xsh-retry, button.um-xsh-retry:focus, button.um-xsh-retry:active { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px solid #008df2; border-radius: 999px; background: #ffffff; box-shadow: none; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; color: #008df2; cursor: pointer; }
button.um-xsh-retry:hover { background: #e6f4fe; }

/* "Action" header over a row-kebab column (Event Log), right-aligned like the kebab under it (Xero's lists). */
.um-v2 .common-plugin-list .cpl-thead .cpl-th-action { justify-self: end; text-align: right; }

/* ── Drawer details (Event Log drawer + history "See details"): WC core's .mc-xsh-sect / .mc-xsh-call / .mc-xsh-pre.
   Unscoped (the drawers hang off <body>). */
.um-dr-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.um-dr-meta-text { font-size: 12.5px; color: #6b7480; }
.um-ev { display: grid; gap: 18px; font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.um-ev-sect { display: grid; gap: 8px; }
.um-ev-title { font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #1a1f26; }
.um-ev-note { padding: 10px 12px; border: 1px solid #e2e6ea; border-radius: 8px; background: #f6f7f8; font-size: 12.5px; color: #4d5662; white-space: pre-wrap; word-break: break-word; }
.um-xsh-note { font-size: 12.5px; color: #6b7480; }
.um-xsh-detailswrap { margin-top: 2px; }
a.um-xsh-details-toggle { font-size: 12px; font-weight: 600; color: #008df2; cursor: pointer; white-space: nowrap; }
.um-xsh-details { display: none; margin-top: 6px; }
.um-xsh-sect { margin-top: 8px; }
.um-xsh-sect-head { font-size: 12px; font-weight: 600; color: #000000; }
.um-xsh-copy { color: #008df2; font-weight: 600; cursor: pointer; }
.um-xsh-pre { margin: 6px 0 0; padding: 10px; border-radius: 6px; background: #0f1419; color: #e6edf3; font-size: 11.5px; line-height: 1.5; overflow: auto; max-height: 260px; white-space: pre-wrap; word-break: break-word; }
.um-xsh-call + .um-xsh-call { margin-top: 8px; }
/* Call row: a two-line card - chevron + "Call N of M" + method tag + the HTTP status on the right, then the URL. */
.um-xsh-call-head { display: grid; gap: 6px; padding: 9px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafbfc; cursor: pointer; }
.um-xsh-call-head:hover { background: #f4f6f7; }
.um-xsh-call.is-open .um-xsh-call-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.um-xsh-call-top { display: flex; align-items: center; gap: 8px; }
.um-xsh-call-chev { display: inline-flex; color: #6b7480; transition: transform .15s; }
.um-xsh-call.is-open .um-xsh-call-chev { transform: rotate(90deg); }
.um-xsh-call-num { font-size: 12.5px; font-weight: 600; color: #1a1f26; white-space: nowrap; }
.um-xsh-call-method { padding: 2px 6px; border-radius: 4px; background: #eef1f3; font-family: monospace; font-size: 11px; font-weight: 700; color: #4d5662; }
.um-xsh-call-spacer { flex: 1; }
.um-xsh-call-endpoint { padding-left: 22px; font-family: monospace; font-size: 11.5px; line-height: 1.45; color: #4d5662; word-break: normal; overflow-wrap: anywhere; }
.um-xsh-http-badge { padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; color: #ffffff; }
.um-xsh-http-badge--ok { background: #0dc15c; }
.um-xsh-http-badge--error { background: #eb0012; }
.um-xsh-http-badge--neutral { background: #ff9f40; }
.um-xsh-call-body { display: none; padding: 4px 12px 12px; border: 1px solid #e5e7eb; border-top: 0; border-radius: 0 0 8px 8px; }
.um-xsh-call.is-open .um-xsh-call-body { display: block; }
.um-xsh-call-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0; font-size: 12px; }
.um-xsh-call-meta-label { color: #828282; }

/* ── Centre modal (um-modal: Error Queue / Conflict Queue "Dismiss") - the core centre modal (WC's confirm
   shell, as Store Migration's sm-modal): 440 wide, radius 15, 56px header (18px/600 title, 20px X) over a
   #f0f3f4 rule, body 20px left-aligned, labelled 36px input, footer over a --wc-divider with the buttons right
   - 36px pills, Cancel blue outline, the action blue (destructive ones too). */
.um-v2 .um-modal { width: 440px; max-width: calc(100vw - 32px); padding: 0; border: 0; border-radius: 15px; background: #ffffff; box-shadow: 0 0 25px 4px rgba(0, 0, 0, .2); overflow: hidden; font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.um-v2 .um-modal .um-modal-head { min-height: 56px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 15px 20px; border-bottom: 1px solid #f0f3f4; }
.um-v2 .um-modal .um-modal-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; color: #000000; }
.um-v2 .um-modal button.um-modal-close, .um-v2 .um-modal button.um-modal-close:focus, .um-v2 .um-modal button.um-modal-close:active { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; box-shadow: none; color: #000000; cursor: pointer; }
.um-v2 .um-modal .um-modal-body { margin: 0; padding: 20px; }
.um-v2 .um-modal .um-modal-lead { margin: 0; font-size: 14px; line-height: 1.55; color: #000000; }
.um-v2 .um-modal .um-modal-record { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: #1a1f26; word-break: break-word; }
.um-v2 .um-modal .um-modal-label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: #1a1f26; }
.um-v2 .um-modal input.um-modal-input { width: 100%; height: 36px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 1px solid #d5dbe1; border-radius: 8px; background: #ffffff; font-size: 14px; color: #1a1f26; outline: none; box-shadow: none; }
.um-v2 .um-modal input.um-modal-input::placeholder { color: #9aa3ad; }
.um-v2 .um-modal input.um-modal-input:hover { border-color: #b6bfc8; }
.um-v2 .um-modal input.um-modal-input:focus { border-color: #008df2; box-shadow: 0 0 0 3px rgba(0, 141, 242, .12); }
.um-v2 .um-modal .um-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin: 0; padding: 16px 20px; border-top: 1px solid #e9edf0; }
.um-v2 .um-modal button.um-modal-btn, .um-v2 .um-modal button.um-modal-btn:focus, .um-v2 .um-modal button.um-modal-btn:active { height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 25px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1; box-shadow: none; cursor: pointer; }
.um-v2 .um-modal button.um-modal-cancel, .um-v2 .um-modal button.um-modal-cancel:focus, .um-v2 .um-modal button.um-modal-cancel:active { border: 1px solid #008df2; background: #ffffff; color: #008df2; }
.um-v2 .um-modal button.um-modal-cancel:hover { background: #e6f4fe; }
.um-v2 .um-modal button.um-modal-danger, .um-v2 .um-modal button.um-modal-danger:focus, .um-v2 .um-modal button.um-modal-danger:active { border: 1px solid #008df2; background: #008df2; color: #ffffff; }
.um-v2 .um-modal button.um-modal-danger:hover { border-color: #0077cf; background: #0077cf; }
.um-v2 .um-modal button.um-modal-btn[disabled] { opacity: .6; cursor: default; }