/* =====================================================================
   Energy NeXus design system (D-062, D-100) — light "cool paper" theme +
   dark "studio black" theme. Royal-blue accent; Gexa-green brand marks.
   ===================================================================== */

/* Default theme = LIGHT (a new user on a browser sees light first).
   Dark is opted into via html[data-theme="dark"], remembered per user+browser. */
:root {
    --enx-teal: #3b82f6;
    --enx-teal-dark: #2563eb;
    --enx-teal-ink: #1d4ed8;
    --enx-amber: #f59e0b;
    --enx-surface: #eef2f7;
    --enx-card: #ffffff;
    --enx-card-solid: #ffffff;
    --enx-ink: #0b1526;
    --enx-muted: #5b6b82;
    --enx-label: #334155;
    --enx-border: #dfe6ef;
    --enx-border-strong: #c3cedd;
    --enx-input-bg: #ffffff;
    /* Opaque grid cell backgrounds (sticky columns must hide scrolled content). */
    --enx-grid-cell: #ffffff;
    --enx-grid-hover: #eff5ff;
    --enx-grid-sel: #dbe8fe;
    --enx-radius: 16px;
    --enx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px -6px rgba(30, 41, 59, 0.08);
    --enx-shadow-md: 0 12px 32px -10px rgba(30, 41, 59, 0.16), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
    --enx-shadow-lift: 0 24px 52px -18px rgba(30, 41, 59, 0.22), 0 4px 10px -4px rgba(15, 23, 42, 0.08);
    --enx-grad-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
    --enx-ring: 0 0 0 3px rgba(59, 130, 246, 0.18);
    /* Accent line/edge colour and the faint accent-tinted surface behind callouts.
       Both MUST be declared in each theme: they were used with literal fallbacks
       before, which silently painted a near-white card in dark mode. */
    --enx-primary: #2563eb;
    --enx-soft: rgba(59, 130, 246, 0.07);
}

/* Dark theme — "Graphite" (user-selected 2026-07-16, replacing "Dusk"): a warm
   neutral charcoal with clearly lifted cards, deeper shadows, hairline borders and
   no blue tint in the neutrals. Royal-blue accent and green brand marks unchanged. */
html[data-theme="dark"] {
    --enx-teal-ink: #8ab6ff;
    --enx-amber: #fbbf24;
    --enx-surface: #17181c;
    --enx-card: #212329;
    --enx-card-solid: #212329;
    --enx-ink: #f2f3f5;
    --enx-muted: #a2a8b3;
    --enx-label: #d0d4da;
    --enx-border: rgba(255, 255, 255, 0.09);
    --enx-border-strong: rgba(255, 255, 255, 0.20);
    --enx-input-bg: #1b1d22;
    --enx-grid-cell: #212329;
    --enx-grid-hover: #2a2d34;
    --enx-grid-sel: #303845;
    --enx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
    --enx-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
    --enx-shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.5);
    /* Lighter accent so a 1px border reads against charcoal, and a translucent
       tint that darkens with whatever it sits on instead of a fixed pale blue. */
    --enx-primary: #60a5fa;
    --enx-soft: rgba(96, 165, 250, 0.10);
}

html, body {
    font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--enx-surface);
    color: var(--enx-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ambient depth behind the workspace (light theme): a blue brand wash top-right, a faint
   Gexa-green hint top-left, and a soft cool vertical gradient — deep enough that white
   cards visibly lift off the surface. Dark theme overrides below. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1100px 560px at 88% -12%, rgba(59, 130, 246, 0.10), transparent 60%),
        radial-gradient(720px 440px at -6% -8%, rgba(120, 190, 32, 0.06), transparent 55%),
        radial-gradient(820px 520px at -8% 112%, rgba(245, 158, 11, 0.04), transparent 55%),
        linear-gradient(170deg, #f6f8fc 0%, #e9eef6 100%);
}

/* Ambient depth behind the workspace (dark theme, Graphite): a warm neutral charcoal
   field with only a whisper of white light along the top edge — deliberately no blue
   or green tint so the surfaces stay calm and the accent colors carry the UI. */
html[data-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 30%),
        linear-gradient(180deg, #17181c 0%, #15161a 100%);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--enx-teal-ink);
}

a:hover { color: var(--enx-teal); }

::selection { background: rgba(59, 130, 246, 0.3); }

/* Slim dark scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(141, 163, 196, 0.22); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(141, 163, 196, 0.38); border: 2px solid transparent; background-clip: content-box; }
/* The corner square where horizontal + vertical scrollbars meet defaults to white —
   glaring inside dark rounded containers (e.g. the UAN grid shell). */
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    background-color: var(--enx-input-bg);
    color: var(--enx-ink);
    border: 1px solid var(--enx-border-strong);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    font-size: 0.92rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-control::placeholder { color: rgba(141, 162, 189, 0.55); }

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238da2bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.form-select option { background: var(--enx-card-solid); color: var(--enx-ink); }

.form-control:focus, .form-select:focus {
    background-color: var(--enx-input-bg);
    color: var(--enx-ink);
    border-color: var(--enx-teal);
    box-shadow: var(--enx-ring);
}

.form-control:disabled, .form-select:disabled {
    background-color: rgba(141, 163, 196, 0.08);
    color: var(--enx-muted);
}

.form-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--enx-label);
    margin-bottom: 0.3rem;
}

/* File inputs: branded picker button, rendered as a flush full-height
   segment (negative margins mirror the input padding) so it always aligns. */
.form-control[type="file"]::file-selector-button {
    padding: 0.55rem 1rem;
    margin: -0.55rem 0.85rem -0.55rem -0.85rem;
    border: 0;
    border-right: 1px solid var(--enx-border-strong);
    border-radius: 10px 0 0 10px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--enx-teal-ink);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.form-control[type="file"]::file-selector-button:hover {
    background: var(--enx-teal-dark);
    color: #fff;
}

.form-text {
    font-size: 0.74rem;
    color: var(--enx-muted);
}

.form-check-input {
    background-color: var(--enx-input-bg);
    border-color: var(--enx-border-strong);
}

.input-group-text {
    background: rgba(141, 163, 196, 0.12);
    color: var(--enx-muted);
    border: 1px solid var(--enx-border-strong);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus {
    box-shadow: var(--enx-ring);
}

.form-check-input:checked {
    background-color: var(--enx-teal-dark);
    border-color: var(--enx-teal-dark);
}

/* Dark theme switches: the default dark track + translucent gray knob vanish against
   dark cards. Lighten the track, brighten the border, and use a solid white knob so
   the control clearly reads as a toggle in both states. */
html[data-theme="dark"] .form-switch .form-check-input {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e2e8f0'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--enx-teal);
    border-color: var(--enx-teal);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.valid.modified:not([type=checkbox]) {
    outline: none;
}

.invalid {
    outline: 1px solid #ef4444;
}

.validation-message {
    color: #dc2626;
    font-size: 0.78rem;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Primary CTA — the single brand action per screen. Deep teal, soft layered shadow,
   subtle lift on hover (no dated glossy bevel). */
.enx-btn-primary {
    position: relative;
    z-index: 0;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.42rem 1.15rem;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), 0 8px 18px -8px rgba(37, 99, 235, 0.55);
    transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.15s ease;
}

/* Expanding "pulse" ring that scales out and fades on hover. */
.enx-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    z-index: -1;
    pointer-events: none;
    transition: transform 0.45s ease, opacity 0.45s ease;
}

.enx-btn-primary:hover:not(:disabled) {
    color: #fff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3), 0 18px 30px -10px rgba(37, 99, 235, 0.65);
}

.enx-btn-primary:hover:not(:disabled)::after {
    transform: scaleX(1.25) scaleY(1.55);
    opacity: 0;
}

.enx-btn-primary:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.enx-btn-primary:disabled {
    opacity: 0.5;
    color: #fff;
    box-shadow: none;
}

/* Dark theme: Gexa neon-green CTA with dark ink text — pops hard against the
   near-black surfaces and matches the login page's sign-in button. */
html[data-theme="dark"] .enx-btn-primary {
    background: linear-gradient(180deg, #8fd438 0%, #6fb31c 100%);
    color: #0a1322;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px -8px rgba(120, 190, 32, 0.65);
}

html[data-theme="dark"] .enx-btn-primary::after {
    background: linear-gradient(180deg, #8fd438 0%, #6fb31c 100%);
}

html[data-theme="dark"] .enx-btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #9fe348 0%, #78be20 100%);
    color: #0a1322;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 32px -8px rgba(120, 190, 32, 0.8);
}

html[data-theme="dark"] .enx-btn-primary:active:not(:disabled) {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 4px 14px -6px rgba(120, 190, 32, 0.55);
}

html[data-theme="dark"] .enx-btn-primary:disabled {
    color: #0a1322;
}

/* Secondary / outline — neutral slate (keeps the UI from being all-green). Teal is
   reserved for accents, links, focus, active steps, and selected states. */
.enx-btn-outline {
    border: 1px solid var(--enx-border-strong);
    color: var(--enx-ink);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--enx-card-solid);
    padding: 0.4rem 1rem;
    box-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.04);
    transition: all 0.13s ease;
}

.enx-btn-outline:hover {
    background: rgba(59, 130, 246, 0.06);
    border-color: var(--enx-teal);
    color: var(--enx-teal-ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.22);
}

.enx-btn-outline:active { transform: translateY(0); }

/* Ghost — lowest-emphasis pill for an optional/secondary action sitting next to a
   filled primary CTA (e.g. "Regenerate" beside "Send for eSignature"). Soft slate
   fill, no hard border, defers visually to the primary without looking unstyled. */
.enx-btn-ghost {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--enx-label);
    background: rgba(15, 23, 42, 0.045);
    padding: 0.42rem 1.1rem;
    transition: background 0.13s ease, color 0.13s ease, transform 0.13s ease, box-shadow 0.13s ease;
}
.enx-btn-ghost:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.10);
    color: var(--enx-teal-ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.22);
}
.enx-btn-ghost:active:not(:disabled) { transform: translateY(0); }
.enx-btn-ghost:disabled { opacity: 0.5; }
html[data-theme="dark"] .enx-btn-ghost {
    color: var(--enx-label);
    background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .enx-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.09);
    color: var(--enx-ink);
}

html[data-theme="dark"] .enx-btn-outline {
    border-color: var(--enx-border-strong);
    background: rgba(255, 255, 255, 0.025);
    color: var(--enx-ink);
}

html[data-theme="dark"] .enx-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--enx-ink);
}

/* Toolbar action pair — two joined utility buttons (e.g. "Refresh quotes" +
   "Quote sheet" on the pricing stage). Deliberately distinct from the primary CTA:
   a quiet card-surface pill with an inner divider and a blue-tinted hover. */
.enx-toolbtns {
    display: inline-flex; align-items: stretch; border: 1px solid var(--enx-border-strong);
    border-radius: 999px; overflow: hidden; background: var(--enx-card); box-shadow: var(--enx-shadow-sm);
}
.enx-toolbtn {
    display: inline-flex; align-items: center; gap: 0.45rem; border: 0; background: transparent;
    color: var(--enx-ink); font-size: 0.85rem; font-weight: 600; padding: 0.48rem 1.05rem;
    cursor: pointer; white-space: nowrap; transition: background 0.13s ease, color 0.13s ease;
}
.enx-toolbtn + .enx-toolbtn { border-left: 1px solid var(--enx-border); }
.enx-toolbtn svg { color: var(--enx-muted); flex-shrink: 0; transition: color 0.13s ease; }
.enx-toolbtn svg.enx-spin { animation: enx-spin 0.8s linear infinite; }
.enx-toolbtn:hover:not(:disabled), .enx-toolbtn:focus-visible {
    background: color-mix(in srgb, #3b82f6 10%, transparent); color: #2563eb; outline: none;
}
.enx-toolbtn:hover:not(:disabled) svg, .enx-toolbtn:focus-visible svg { color: currentColor; }
.enx-toolbtn:disabled { opacity: 0.55; cursor: default; }
html[data-theme="dark"] .enx-toolbtns { background: rgba(255, 255, 255, 0.03); }

/* Pricing-stage toolbar: layout-toggle + the joined quote-action pill, on their own row
   above the quote cards. The old three-column header dropped the pill into a ~285px
   col-md-4, which toggle + pill (~330px) overflowed once the 290px deal-summary rail
   appeared. The wrapper is a CSS container so the toolbar adapts to the CARD's width -
   media queries key off the viewport and can't see the sidebar or the rail. */
.enx-pricing-toolbar-wrap { container-type: inline-size; container-name: enx-pricing-bar; }
.enx-pricing-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.enx-pricing-toolbar > .enx-seg { flex: 0 0 auto; }
/* The pill may shrink and its buttons share the space, but it never exceeds the row. */
.enx-pricing-toolbar .enx-toolbtns { flex: 0 1 auto; max-width: 100%; }
.enx-pricing-toolbar .enx-toolbtn { flex: 1 1 auto; min-width: 0; justify-content: center; }
.enx-toolbtn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Narrow card: the pill wraps below the toggle and spans the row instead of being clipped. */
@container enx-pricing-bar (max-width: 370px) {
    .enx-pricing-toolbar { justify-content: flex-start; }
    .enx-pricing-toolbar .enx-toolbtns { flex: 1 1 100%; }
    .enx-pricing-toolbar .enx-toolbtn { padding-inline: 0.7rem; }
}
/* Very narrow card: icon-only, just above the width where the labels would ellipsis.
   aria-label + tooltip still name each action. */
@container enx-pricing-bar (max-width: 280px) {
    .enx-pricing-toolbar .enx-toolbtn { gap: 0; padding-inline: 0.5rem; }
    .enx-toolbtn-label { display: none; }
}
html[data-theme="dark"] .enx-toolbtn:hover:not(:disabled),
html[data-theme="dark"] .enx-toolbtn:focus-visible {
    background: rgba(59, 130, 246, 0.14); color: #8ab6ff;
}

/* Accent — a blue-tinted pill for the key secondary action in a toolbar (e.g. "Enrich
   UANs"): stronger than outline, quieter than the filled primary CTA. */
.enx-btn-accent {
    border: 1px solid rgba(59, 130, 246, 0.45);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--enx-teal-ink);
    background: rgba(59, 130, 246, 0.09);
    box-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.04);
    transition: all 0.13s ease;
}
.enx-btn-accent:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.16);
    border-color: var(--enx-teal);
    color: var(--enx-teal-ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.3);
}
.enx-btn-accent:active:not(:disabled) { transform: translateY(0); }
/* CTA-sized accent: matches enx-btn-primary's metrics so the pair sits flush when
   shown side by side (e.g. "Request custom pricing" next to "Save & Continue"). */
.enx-btn-accent.enx-btn-cta { padding: 0.42rem 1.15rem; font-weight: 600; letter-spacing: 0.01em; }
.enx-btn-accent:disabled { opacity: 0.55; color: var(--enx-teal-ink); }
html[data-theme="dark"] .enx-btn-accent {
    color: #8ab6ff;
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.12);
}
html[data-theme="dark"] .enx-btn-accent:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.2);
    color: #a7c8ff;
    box-shadow: 0 6px 18px -4px rgba(59, 130, 246, 0.35);
}
html[data-theme="dark"] .enx-btn-accent:disabled { color: #8ab6ff; }

/* Icon tints for outline toolbar buttons: the leading icon carries a soft color cue
   (matching the file-type icon palette) while the label stays neutral ink. On hover
   the standard outline treatment takes over the border/label; icons keep their tint. */
.enx-btn-outline.enx-tint-green svg { color: #10b981; }
.enx-btn-outline.enx-tint-violet svg { color: #8b5cf6; }
.enx-btn-outline.enx-tint-amber svg { color: #f59e0b; }
.enx-btn-outline.enx-tint-green:hover { border-color: #10b981; color: #047857; background: rgba(16, 185, 129, 0.06); box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.25); }
.enx-btn-outline.enx-tint-violet:hover { border-color: #8b5cf6; color: #6d28d9; background: rgba(139, 92, 246, 0.06); box-shadow: 0 6px 16px -4px rgba(139, 92, 246, 0.25); }
.enx-btn-outline.enx-tint-amber:hover { border-color: #f59e0b; color: #b45309; background: rgba(245, 158, 11, 0.07); box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.25); }
html[data-theme="dark"] .enx-btn-outline.enx-tint-green svg { color: #34d399; }
html[data-theme="dark"] .enx-btn-outline.enx-tint-violet svg { color: #a78bfa; }
html[data-theme="dark"] .enx-btn-outline.enx-tint-amber svg { color: #fbbf24; }
html[data-theme="dark"] .enx-btn-outline.enx-tint-green:hover { color: #6ee7b7; background: rgba(16, 185, 129, 0.1); }
html[data-theme="dark"] .enx-btn-outline.enx-tint-violet:hover { color: #c4b5fd; background: rgba(139, 92, 246, 0.1); }
html[data-theme="dark"] .enx-btn-outline.enx-tint-amber:hover { color: #fcd34d; background: rgba(245, 158, 11, 0.1); }

/* Bootstrap variants on the dark theme (light keeps Bootstrap defaults) */
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--enx-muted);
    border-color: var(--enx-border-strong);
}

html[data-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(141, 163, 196, 0.12);
    color: var(--enx-ink);
    border-color: var(--enx-border-strong);
}

html[data-theme="dark"] .btn-outline-danger {
    color: #fda4af;
    border-color: rgba(244, 63, 94, 0.45);
}

html[data-theme="dark"] .btn-outline-danger:hover {
    background: #e11d48;
    border-color: #e11d48;
    color: #fff;
}

html[data-theme="dark"] .alert-danger {
    background: rgba(225, 29, 72, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.35);
    color: #fecdd3;
}

html[data-theme="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #a7f3d0;
}

html[data-theme="dark"] .alert-warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fde68a;
}

html[data-theme="dark"] .alert-info {
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #bae6fd;
}

.text-muted { color: var(--enx-muted) !important; }
hr { border-color: var(--enx-border-strong); opacity: 1; }

/* ---------- Page chrome ---------- */
.enx-page-title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--enx-ink);
    margin: 0;
}

.enx-page-subtitle {
    color: var(--enx-muted);
    font-size: 0.92rem;
    margin: 0.15rem 0 0;
}

/* ---------- PageHeader (shared command bar) ---------- */
.enx-pagehead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding-bottom: 1rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--enx-border);
}
.enx-pagehead-main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; flex: 1 1 auto; }
.enx-pagehead-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(59, 130, 246, 0.12); color: #2563eb;
}
.enx-pagehead-icon svg { width: 21px; height: 21px; }
.enx-pagehead-icon.sky    { background: rgba(56, 189, 248, 0.14);  color: #0369a1; }
.enx-pagehead-icon.green  { background: rgba(16, 185, 129, 0.14);  color: #047857; }
.enx-pagehead-icon.amber  { background: rgba(245, 158, 11, 0.14);  color: #b45309; }
.enx-pagehead-icon.rose   { background: rgba(225, 29, 72, 0.12);   color: #e11d48; }
.enx-pagehead-icon.violet { background: rgba(168, 85, 247, 0.13);  color: #7e22ce; }
html[data-theme="dark"] .enx-pagehead-icon        { color: #60a5fa; }
html[data-theme="dark"] .enx-pagehead-icon.sky    { color: #38bdf8; }
html[data-theme="dark"] .enx-pagehead-icon.green  { color: #34d399; }
html[data-theme="dark"] .enx-pagehead-icon.amber  { color: #fbbf24; }
html[data-theme="dark"] .enx-pagehead-icon.rose   { color: #fb7185; }
html[data-theme="dark"] .enx-pagehead-icon.violet { color: #c084fc; }
.enx-pagehead-text { min-width: 0; }
.enx-pagehead-titlerow { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.enx-pagehead-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--enx-ink);
    margin: 0;
    line-height: 1.25;
}
.enx-pagehead-sub {
    color: var(--enx-muted);
    font-size: 0.85rem;
    margin: 0.1rem 0 0;
    line-height: 1.45;
}
.enx-pagehead-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.enx-pagehead-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--enx-border);
    border-radius: 999px;
    background: var(--enx-card-solid);
    font-size: 0.78rem; font-weight: 600; color: var(--enx-muted);
    white-space: nowrap;
}
.enx-pagehead-chip strong { color: var(--enx-ink); font-variant-numeric: tabular-nums; }
/* Warning variant — currently the "N missing DUNS" count on Utility Rules. Overrides the muted
   text AND the strong inside it, or the number would stay ink-coloured against the amber. */
.enx-pagehead-chip-warn {
    color: #b45309; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.45);
}
.enx-pagehead-chip-warn strong { color: inherit; }
html[data-theme="dark"] .enx-pagehead-chip-warn {
    color: #fcd34d; background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4);
}
.enx-pagehead-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 575.98px) {
    .enx-pagehead { padding-bottom: 0.8rem; margin-bottom: 1.1rem; }
    .enx-pagehead-icon { width: 38px; height: 38px; border-radius: 10px; }
    .enx-pagehead-icon svg { width: 18px; height: 18px; }
    .enx-pagehead-title { font-size: 1.2rem; }
    .enx-pagehead-sub { font-size: 0.8rem; }
    .enx-pagehead-actions { margin-left: 0; width: 100%; }
    .enx-pagehead-actions .btn { flex: 1 1 auto; }
}

.enx-card {
    background: var(--enx-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--enx-border);
    border-radius: var(--enx-radius);
    padding: 1.6rem 1.85rem;
    box-shadow: var(--enx-shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.enx-card:hover {
    border-color: var(--enx-border-strong);
    box-shadow: var(--enx-shadow-md);
}

.enx-card-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--enx-ink);
    margin-bottom: 1.1rem;
}

.enx-empty {
    color: var(--enx-muted);
    margin: 0;
}

/* Branded empty state */
.enx-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--enx-muted);
}

.enx-empty-state svg {
    color: rgba(141, 163, 196, 0.4);
    margin-bottom: 0.75rem;
}

.enx-empty-state p { margin: 0; font-size: 0.9rem; }

.enx-loading {
    color: var(--enx-muted);
    padding: 4rem;
    text-align: center;
    font-weight: 500;
}

.enx-loading::after {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 1rem auto 0;
    border-radius: 50%;
    border: 3px solid var(--enx-border-strong);
    border-top-color: var(--enx-teal);
    animation: enx-spin 0.8s linear infinite;
}

@keyframes enx-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Skeleton loaders ---------- */
.enx-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(141, 163, 196, 0.1);
    border-radius: 8px;
    min-height: 0.9rem;
}

.enx-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(141, 163, 196, 0.14), transparent);
    animation: enx-shimmer 1.4s ease-in-out infinite;
}

@keyframes enx-shimmer {
    100% { transform: translateX(100%); }
}

/* ---------- Stat cards ---------- */
/* ===== Signature-mix tracker (dashboard) ===== */
.enx-sigmix-card {
    background: var(--enx-card-solid); border: 1px solid var(--enx-border);
    border-radius: 16px; padding: 1.1rem 1.3rem;
    height: 100%; /* fill the stretched insight-grid cell so all tiles match height */
}
.enx-sigmix-head { display: flex; align-items: center; gap: 0.6rem; }
.enx-sigmix-head .enx-stat-icon { width: 30px; height: 30px; color: var(--enx-teal-ink); background: rgba(59,130,246,0.10); border-radius: 8px; display: grid; place-items: center; }
.enx-sigmix-title { font-weight: 700; color: var(--enx-ink); }
.enx-sigmix-sub { margin-left: auto; font-size: 0.8rem; color: var(--enx-muted); }
.enx-sigmix-empty { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--enx-muted); }
.enx-sigmix-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 0.9rem 0 0.7rem; background: rgba(141,163,196,0.18); }
.enx-sigmix-seg { height: 100%; transition: width 0.3s ease; }
.enx-sigmix-seg.enx-sigmix-esign, .enx-sigmix-dot.enx-sigmix-esign { background: #3b82f6; }
.enx-sigmix-seg.enx-sigmix-wet, .enx-sigmix-dot.enx-sigmix-wet { background: #f59e0b; }
.enx-sigmix-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: 0.85rem; color: var(--enx-ink); }
.enx-sigmix-key { display: inline-flex; align-items: center; gap: 0.4rem; }
.enx-sigmix-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.enx-sigmix-pct { color: var(--enx-muted); }

.enx-stat-card {
    position: relative;
    overflow: hidden;
    background: var(--enx-card-solid);
    border: 1px solid var(--enx-border);
    color: var(--enx-ink);
    border-radius: 16px;
    padding: 1.3rem 1.4rem 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--enx-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Soft per-metric color wash in the card's top-left corner (light theme only) —
   ties the icon chip, accent strip, and sparkline together without loud fills. */
html:not([data-theme="dark"]) .enx-stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(240px 130px at 0% 0%, color-mix(in srgb, var(--enx-accent, var(--enx-teal)) 9%, transparent), transparent 70%);
}

/* Top row: icon + value/label (the sparkline sits full-bleed below it). */
.enx-stat-top { display: flex; align-items: center; gap: 1.05rem; }

/* Tabler-style mini graph: full width, flush to the card's bottom edge. */
.enx-spark { display: block; margin: 0.9rem -1.4rem 0; width: calc(100% + 2.8rem); }

.enx-stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--enx-border-strong);
    box-shadow: var(--enx-shadow-md);
}

/* Left accent strip — color-codes each metric without a loud card background. */
.enx-stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--enx-accent, var(--enx-teal));
}

.enx-accent-teal { --enx-accent: #3b82f6; }
.enx-accent-amber { --enx-accent: #f59e0b; }
.enx-accent-sky { --enx-accent: #38bdf8; }
.enx-accent-green { --enx-accent: #10b981; }
.enx-accent-rose { --enx-accent: #e11d48; }

/* Stat-card row: container-driven columns (5-up on wide screens, wraps to 2-up on
   phones) instead of Bootstrap's viewport-keyed 4-up row. */
.enx-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 1rem;
}

/* Whole stat card is a deep link into the filtered deals list. */
.enx-stat-click { cursor: pointer; }
.enx-stat-click:focus-visible { outline: 2px solid var(--enx-teal); outline-offset: 2px; }

/* Insight row: pipeline / conversion / signature mix side by side, wrapping on smaller screens. */
.enx-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    align-items: stretch; /* equal-height tiles: each card fills the tallest row */
}

/* Shared headline stat row (all three insight cards) — identical height/rhythm so the
   bars below line up across cards: head -> headline -> bar -> legend. */
.enx-insight-headline { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.75rem; }
.enx-insight-num { font-size: 1.7rem; font-weight: 800; line-height: 1.15; color: var(--enx-ink); font-variant-numeric: tabular-nums; }
.enx-insight-num.sky { color: #0284c7; }
.enx-insight-num.blue { color: #2563eb; }
.enx-insight-num.green { color: #059669; }
.enx-insight-num.rose { color: #e11d48; }
html[data-theme="dark"] .enx-insight-num.sky { color: #38bdf8; }
html[data-theme="dark"] .enx-insight-num.blue { color: #60a5fa; }
html[data-theme="dark"] .enx-insight-num.green { color: #34d399; }
html[data-theme="dark"] .enx-insight-num.rose { color: #fb7185; }
.enx-insight-num-label { font-size: 0.8rem; color: var(--enx-muted); font-weight: 600; }
.enx-insight-hint { margin-left: auto; font-size: 0.76rem; color: var(--enx-muted); white-space: nowrap; }
.enx-conv-reasons { margin-top: 0.9rem; border-top: 1px solid var(--enx-border); padding-top: 0.7rem; }
.enx-conv-reasons-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--enx-muted); margin-bottom: 0.4rem; }
.enx-conv-reason { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; padding: 0.15rem 0; }
.enx-conv-reason-name { color: var(--enx-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enx-conv-reason-count { color: var(--enx-muted); font-weight: 700; font-variant-numeric: tabular-nums; }

.enx-stat-icon.rose { color: #e11d48; background: rgba(225, 29, 72, 0.12); }

.enx-stat-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.12);
    color: var(--enx-teal-ink);
}

.enx-stat-icon.amber {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.enx-stat-icon.sky {
    background: rgba(56, 189, 248, 0.14);
    color: #0369a1;
}

.enx-stat-icon.green {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

html[data-theme="dark"] .enx-stat-icon { color: var(--enx-teal); }
html[data-theme="dark"] .enx-stat-icon.amber { color: var(--enx-amber); }
html[data-theme="dark"] .enx-stat-icon.sky { color: #38bdf8; }
html[data-theme="dark"] .enx-stat-icon.green { color: #34d399; }

.enx-stat-value {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--enx-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.enx-stat-label {
    color: var(--enx-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

/* Animated count-up: --enx-num is set inline; the counter renders it and the
   @property registration lets the value itself interpolate from 0. */
@property --enx-num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.enx-count {
    counter-reset: enxnum var(--enx-num);
    animation: enx-count-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.enx-count::after {
    content: counter(enxnum);
}

@keyframes enx-count-up {
    from { --enx-num: 0; }
}

/* ---------- Tables ---------- */
.enx-table, .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--enx-ink);
    --bs-table-border-color: var(--enx-border);
    --bs-table-hover-bg: rgba(59, 130, 246, 0.055);
    --bs-table-hover-color: var(--enx-ink);
    --bs-table-striped-bg: rgba(141, 163, 196, 0.04);
    --bs-table-striped-color: var(--enx-ink);
    color: var(--enx-ink);
    margin-bottom: 0;
}

.enx-table th, .table th {
    color: var(--enx-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid var(--enx-border-strong);
    padding-bottom: 0.6rem;
    white-space: nowrap;
}

.enx-table td, .table td {
    vertical-align: middle;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    border-color: var(--enx-border);
    font-size: 0.92rem;
}

.enx-row-link {
    cursor: pointer;
    transition: background 0.12s ease;
}

/* Deal list polish: tabular deal number, strong customer name, hover chevron affordance */
.enx-deal-table td { vertical-align: middle; white-space: nowrap; }
.enx-deal-table td.enx-cell-strong { white-space: normal; }
.enx-deal-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--enx-teal-ink); }

/* Accent chip for the deal number in the deals table */
.enx-deal-table .enx-deal-num {
    display: inline-block;
    padding: 0.14rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    background: rgba(20, 184, 166, 0.1);
    color: var(--enx-teal-ink);
}

html[data-theme="dark"] .enx-deal-table .enx-deal-num {
    background: rgba(159, 219, 82, 0.12);
    color: #b5e97a;
}
.enx-cell-strong { font-weight: 600; color: var(--enx-ink); }
.enx-deal-table .enx-row-chevron { width: 36px; text-align: center; color: var(--enx-muted); opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; }
.enx-deal-table tr:hover .enx-row-chevron { opacity: 1; transform: translateX(0); color: var(--enx-teal-ink); }

/* Dashboard mini-tables — richer rows with customer avatars + hover affordance */
.enx-mini-table td, .enx-mini-table th { vertical-align: middle; }
.enx-mini-table tbody td { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.enx-mini-table .enx-row-chevron { width: 26px; text-align: right; color: var(--enx-muted); opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; }
.enx-mini-table tr:hover .enx-row-chevron { opacity: 1; transform: translateX(0); color: var(--enx-teal-ink); }
.enx-cust { display: flex; align-items: center; gap: 0.6rem; }
.enx-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.enx-avatar-empty { background: rgba(141, 163, 196, 0.18); color: var(--enx-muted); font-weight: 600; }
.enx-count-chip { font-size: 0.74rem; font-weight: 700; color: var(--enx-muted); background: rgba(141, 163, 196, 0.14); border-radius: 999px; padding: 0.12rem 0.6rem; }

/* ===== Dashboard deal lists (premium row list) ===== */
.enx-deals-card { --enx-accent: #3b82f6; display: flex; flex-direction: column; padding: 1.35rem 1.4rem 0.6rem; }
.enx-deals-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.enx-deals-head-left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.enx-deals-ico {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    color: var(--enx-accent);
    background: color-mix(in srgb, var(--enx-accent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--enx-accent) 26%, transparent);
}
.enx-deals-card .enx-count-chip {
    color: var(--enx-accent);
    background: color-mix(in srgb, var(--enx-accent) 12%, transparent);
}

.enx-deals-list { display: flex; flex-direction: column; }
.enx-deal-row {
    display: flex; align-items: center; gap: 0.8rem; width: 100%;
    padding: 0.7rem 0.6rem; border-radius: 12px; cursor: pointer; position: relative;
    border: 1px solid transparent;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
/* Divider is a pseudo-element, not a border, so every row keeps the same 12px
   hover shape - a border-top would force square top corners on rows 2..n and
   make the first row's highlight read differently from the rest. */
.enx-deal-row + .enx-deal-row::before {
    content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 1px;
    background: var(--enx-border); transition: opacity 0.14s ease;
}
.enx-deal-row:hover, .enx-deal-row:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--enx-accent) 7%, transparent);
    border-color: color-mix(in srgb, var(--enx-accent) 22%, transparent);
    box-shadow: var(--enx-shadow-sm);
    transform: translateY(-1px);
    z-index: 1; /* keep the accent border + shadow above the neighbouring rows */
}
/* hide the dividers touching a hovered row so the rounded highlight reads cleanly */
.enx-deal-row:hover::before, .enx-deal-row:focus-visible::before,
.enx-deal-row:hover + .enx-deal-row::before, .enx-deal-row:focus-visible + .enx-deal-row::before { opacity: 0; }

.enx-deal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.enx-deal-line1 { display: flex; align-items: baseline; gap: 0.5rem; }
.enx-deal-cust { font-weight: 700; font-size: 0.92rem; color: var(--enx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enx-deal-cust-empty { font-style: italic; font-weight: 500; color: var(--enx-muted); }
.enx-deal-num { font-variant-numeric: tabular-nums; font-size: 0.76rem; font-weight: 700; color: var(--enx-accent); flex-shrink: 0; }
.enx-deal-line2 { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--enx-muted); }
.enx-deal-uan { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; }
.enx-deal-uan svg { color: var(--enx-amber); }
.enx-deal-dot { opacity: 0.6; }
.enx-deal-date { font-variant-numeric: tabular-nums; }

.enx-deal-chev { flex-shrink: 0; color: var(--enx-muted); opacity: 0; transform: translateX(-4px); transition: opacity 0.14s ease, transform 0.14s ease; }
.enx-deal-row:hover .enx-deal-chev, .enx-deal-row:focus-visible .enx-deal-chev { opacity: 1; transform: translateX(0); color: var(--enx-accent); }

/* Color-varied customer avatars */
.enx-avatar { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.86rem; font-weight: 800; color: #fff; box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.25); }
.enx-av-0 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.enx-av-1 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.enx-av-2 { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.enx-av-3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.enx-av-4 { background: linear-gradient(135deg, #f43f5e, #be123c); }
.enx-av-5 { background: linear-gradient(135deg, #10b981, #047857); }
/* Status-meaningful avatar colors (mirror the status-pill palette) */
.enx-av-draft    { background: linear-gradient(135deg, #94a3b8, #64748b); }
.enx-av-info     { background: linear-gradient(135deg, #22d3ee, #0e7490); }
.enx-av-warn     { background: linear-gradient(135deg, #f59e0b, #b45309); }
.enx-av-progress { background: linear-gradient(135deg, #818cf8, #4338ca); }
.enx-av-success  { background: linear-gradient(135deg, #10b981, #047857); }
.enx-av-review   { background: linear-gradient(135deg, #e879f9, #a21caf); }
.enx-av-lost     { background: linear-gradient(135deg, #f43f5e, #b91c1c); }
.enx-avatar-empty { background: rgba(141, 163, 196, 0.18) !important; color: var(--enx-muted); font-weight: 600; box-shadow: none; }

.enx-deals-foot {
    display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start;
    margin-top: 0.55rem; padding: 0.5rem 0.2rem; font-size: 0.82rem; font-weight: 700;
    color: var(--enx-accent); text-decoration: none; transition: gap 0.14s ease;
}
.enx-deals-foot:hover { gap: 0.6rem; color: var(--enx-accent); text-decoration: none; }

.enx-deals-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center;
    color: var(--enx-muted); font-size: 0.86rem; padding: 2rem 1rem 2.4rem;
}
.enx-deals-empty-ico {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    color: var(--enx-muted); background: rgba(141, 163, 196, 0.12);
}

/* ===== D&B business lookup modal (compact, dense rows) ===== */
.enx-dnb-backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.enx-dnb-dialog { max-width: 960px; }
.enx-dnb-content {
    border: 1px solid var(--enx-border); border-radius: 16px; overflow: hidden;
    background: var(--enx-card-solid); box-shadow: var(--enx-shadow-lift);
}
.enx-dnb-head {
    display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.3rem 0.9rem;
    border-bottom: 1px solid var(--enx-border);
}
.enx-dnb-head-text { flex: 1; min-width: 0; }
.enx-dnb-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--enx-ink); overflow-wrap: anywhere; }
.enx-dnb-sub { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--enx-muted); }
.enx-dnb-close {
    margin-left: auto; flex-shrink: 0; border: 0; background: transparent; color: var(--enx-muted);
    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.enx-dnb-close:hover { background: rgba(15, 23, 42, 0.06); color: var(--enx-ink); }
html[data-theme="dark"] .enx-dnb-close:hover { background: rgba(255, 255, 255, 0.08); }
.enx-dnb-body { overflow-y: auto; max-height: min(64vh, 620px); }

.enx-dnb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.enx-dnb-table thead th {
    position: sticky; top: 0; z-index: 1; background: var(--enx-card-solid);
    text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--enx-muted); padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--enx-border-strong);
}
.enx-dnb-table tbody td { padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--enx-border); vertical-align: middle; }
.enx-dnb-table tbody tr { cursor: pointer; transition: background 0.1s ease; }
.enx-dnb-table tbody tr:hover { background: var(--enx-grid-hover); }
.enx-dnb-table tbody tr:last-child td { border-bottom: 0; }

.enx-dnb-name { font-weight: 600; color: var(--enx-ink); line-height: 1.25; }
.enx-dnb-status { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--enx-muted); margin-top: 0.1rem; }
.enx-dnb-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--enx-muted); }
.enx-dnb-status.is-ok .enx-dnb-status-dot { background: #10b981; }
.enx-dnb-status.is-ok { color: #047857; }
.enx-dnb-status.is-bad .enx-dnb-status-dot { background: #e11d48; }
.enx-dnb-status.is-bad { color: #be123c; }
html[data-theme="dark"] .enx-dnb-status.is-ok { color: #34d399; }
html[data-theme="dark"] .enx-dnb-status.is-bad { color: #fb7185; }
.enx-dnb-duns { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--enx-label); }
.enx-dnb-addr { color: var(--enx-muted); font-size: 0.8rem; max-width: 440px; }

.enx-conf-chip {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
    padding: 0.1rem 0.4rem; border-radius: 7px; font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums;
    cursor: help;
}
.enx-conf-high { background: rgba(16, 185, 129, 0.14); color: #047857; }
.enx-conf-mid  { background: rgba(59, 130, 246, 0.14); color: var(--enx-teal-ink); }
.enx-conf-low  { background: rgba(245, 158, 11, 0.16); color: #b45309; }
html[data-theme="dark"] .enx-conf-high { color: #34d399; }
html[data-theme="dark"] .enx-conf-low { color: #fcd34d; }
.enx-dnb-grade { margin-left: 0.4rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; color: var(--enx-muted); font-family: ui-monospace, "Consolas", monospace; }
.enx-dnb-use { padding: 0.3rem 0.95rem; }

.enx-dnb-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
    padding: 0.75rem 1.3rem; border-top: 1px solid var(--enx-border);
}
/* Secondary/left action (e.g. "Resend code") and hints pin left; primary actions group right. */
.enx-dnb-foot .enx-dnb-foot-start,
.enx-dnb-foot .enx-dnb-hint { margin-right: auto; }
.enx-dnb-hint { font-size: 0.76rem; color: var(--enx-muted); }

/* No-results / failure message in the lookup body: full ink (slightly softened) instead of
   text-muted, which was too dim to read against the dark modal background. */
.enx-dnb-empty { color: var(--enx-ink); opacity: 0.92; font-size: 0.95rem; line-height: 1.55; }

/* Create-user modal (reuses the D&B modal shell) */
.enx-usermodal-dialog { max-width: 760px; }
.enx-usermodal-body { padding: 1.1rem 1.3rem; overflow-y: auto; max-height: min(70vh, 680px); }
.enx-usermodal-body .form-label { font-weight: 600; }
.enx-usermodal-foot { justify-content: flex-end; gap: 0.6rem; }

/* Section dividers inside the create/edit user modals: small caps label with a rule,
   grouping the form into Profile / Sign-in & security / Role & assignment. */
.enx-usermodal-section {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--enx-muted);
}
.enx-usermodal-section::after { content: ""; flex: 1; height: 1px; background: var(--enx-border); }
.enx-usermodal-body .row > .enx-usermodal-section:first-child { margin-top: 0; }

/* Requirement checklists float over the form as a transient popover (shown while the
   field is focused or holds an invalid value) so the grid never reflows around them. */
.enx-field-pop { position: relative; }
.enx-field-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    animation: enx-popover-in 0.12s ease-out;
}
.enx-field-popover .enx-pwchecklist {
    margin: 0;
    background: var(--enx-surface, #fff);
    border-color: var(--enx-border);
    box-shadow: 0 10px 28px rgba(15, 30, 55, 0.16), 0 2px 6px rgba(15, 30, 55, 0.08);
}
@keyframes enx-popover-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Soft validity tints: green ring once the value satisfies its policy, red only when
   non-empty and invalid — untouched fields stay neutral. */
.enx-input-valid,
.enx-input-valid:focus { border-color: #22c55e; box-shadow: 0 0 0 0.15rem rgba(34, 197, 94, 0.15); }
.enx-input-invalid,
.enx-input-invalid:focus { border-color: #f43f5e; box-shadow: 0 0 0 0.15rem rgba(244, 63, 94, 0.12); }

/* Close-lost modal (reuses the D&B modal shell) */
.enx-closelost-dialog { max-width: 520px; }
.enx-closelost-body { padding: 1.1rem 1.3rem; }
.enx-closelost-body .form-label { font-weight: 600; }
.enx-closelost-foot { justify-content: flex-end; gap: 0.6rem; }



.enx-price {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* ===== Matrix Pricing ===== */
/* Branded loader card (mirrors the contract/eSign overlay, but centered in-page). */
.enx-matrix-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 3.5rem 2rem;
    text-align: center;
}

/* Summary bar above the grid */
.enx-matrix-bar {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.9rem; margin-bottom: 1rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.07), rgba(59, 130, 246, 0.015));
    border: 1px solid color-mix(in srgb, var(--enx-teal) 22%, transparent);
}
.enx-matrix-bar-ico {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    color: var(--enx-teal-ink);
    background: color-mix(in srgb, var(--enx-teal) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--enx-teal) 26%, transparent);
}
.enx-matrix-bar-text { display: flex; flex-direction: column; line-height: 1.25; }
.enx-matrix-bar-title { font-weight: 700; color: var(--enx-ink); font-size: 0.95rem; }
.enx-matrix-bar-sub { font-size: 0.8rem; color: var(--enx-muted); }
.enx-matrix-count { font-size: 0.78rem; font-weight: 600; color: var(--enx-muted); }

/* Says which filter was auto-relaxed because the chosen combination has no rows (e.g.
   AEPCPL never serves HOUSTON). Amber, like the other "we changed something you picked"
   cues: the grid is showing real data, just not the exact slice that was asked for. */
.enx-matrix-note {
    margin-left: 0.5rem;
    font-weight: 500;
    color: #b45309;
}

[data-theme="dark"] .enx-matrix-note { color: #fbbf24; }

/* Filter strip: labeled fields in a responsive grid. Desktop packs as many
   ~170px columns as fit; phones get a tidy two-up grid instead of six
   full-width anonymous selects. */
.enx-matrix-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.6rem 0.75rem;
}

.enx-filter-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; min-width: 0; }

.enx-filter-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--enx-muted);
}

.enx-matrix-filters .enx-filter { max-width: none; width: 100%; }

@media (max-width: 640.98px) {
    .enx-matrix-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .enx-matrix-filters .enx-filter { font-size: 0.86rem; padding: 0.42rem 1.9rem 0.42rem 0.6rem; }
}

/* Rounded, clipped table frame (x: scroll instead of clip so phones can swipe) */
.enx-table-wrap {
    border: 1px solid var(--enx-border);
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Plain horizontal-scroll wrapper for wide tables: tables set their own natural
   width, so on phones they'd otherwise push the WHOLE page into horizontal
   overflow (header included). The wrapper contains the scroll to the table. */
.enx-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.enx-table-scroll > .table { margin-bottom: 0; }
.enx-matrix-table { margin-bottom: 0; }
.enx-matrix-table thead th {
    background: var(--enx-surface);
    padding-top: 0.7rem;
    padding-left: 0.9rem; padding-right: 0.9rem;
    border-bottom: 1px solid var(--enx-border-strong);
}
.enx-matrix-table tbody td { padding-left: 0.9rem; padding-right: 0.9rem; }
.enx-matrix-table tbody tr { transition: background 0.1s ease; }
.enx-matrix-table tbody tr:nth-child(even) { background: rgba(141, 163, 196, 0.045); }
.enx-matrix-table tbody tr:hover { background: rgba(59, 130, 246, 0.06); }

/* Term shown as a subtle chip */
.enx-term-chip {
    display: inline-block; font-size: 0.78rem; font-weight: 600;
    color: var(--enx-muted); background: rgba(141, 163, 196, 0.14);
    border-radius: 999px; padding: 0.12rem 0.55rem; white-space: nowrap;
}

/* The rate is the hero value — emerald (money), tabular, with a faint pill */
.enx-matrix-price {
    display: inline-flex; align-items: baseline; gap: 0.06em;
    font-variant-numeric: tabular-nums;
    font-weight: 700; font-size: 0.96rem;
    color: #047857;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 8px; padding: 0.16rem 0.5rem;
}
.enx-matrix-price-cur { font-size: 0.78em; font-weight: 600; opacity: 0.75; }
html[data-theme="dark"] .enx-matrix-price { color: #34d399; }

.enx-search { max-width: 300px; }
.enx-filter { max-width: 230px; }
.enx-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.enx-sortable:hover { background-color: rgba(0, 0, 0, 0.03); }
html[data-theme="dark"] .enx-sortable:hover { background-color: rgba(255, 255, 255, 0.04); }
/* The header is keyboard-operable (role=button + tabindex), so it needs a visible focus
   ring — without one a keyboard user can't tell which column they're about to sort. */
.enx-sortable:focus-visible { outline: 2px solid var(--enx-accent, #38bdf8); outline-offset: -2px; }
/* The active column reads slightly stronger than the rest of the header row, so the
   sort state survives a glance even where the ▲/▼ glyph is small. */
.enx-sortable[aria-sort]:not([aria-sort="none"]) { color: var(--enx-text); font-weight: 700; }

/* ---------- Status pills ---------- */
.enx-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.enx-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.enx-pill-draft { background: #f1f5f9; color: #64748b; }
.enx-pill-info { background: #ecfeff; color: #0e7490; }
.enx-pill-warn { background: #fffbeb; color: #b45309; }
.enx-pill-progress { background: #eef2ff; color: #4338ca; }
.enx-pill-success { background: #ecfdf5; color: #047857; }
.enx-pill-review { background: #fdf4ff; color: #a21caf; }
.enx-pill-lost { background: #fef2f2; color: #b91c1c; }

html[data-theme="dark"] .enx-pill-draft { background: rgba(141, 163, 196, 0.14); color: #aebfd6; }
html[data-theme="dark"] .enx-pill-info { background: rgba(34, 211, 238, 0.12); color: #67e8f9; }
html[data-theme="dark"] .enx-pill-warn { background: rgba(251, 191, 36, 0.13); color: #fcd34d; }
html[data-theme="dark"] .enx-pill-progress { background: rgba(129, 140, 248, 0.14); color: #a5b4fc; }
html[data-theme="dark"] .enx-pill-success { background: rgba(52, 211, 153, 0.13); color: #6ee7b7; }
html[data-theme="dark"] .enx-pill-review { background: rgba(232, 121, 249, 0.13); color: #f0abfc; }
html[data-theme="dark"] .enx-pill-lost { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }

/* ---------- Wizard stepper ---------- */
.enx-stepper {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    background: var(--enx-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--enx-border);
    border-radius: var(--enx-radius);
    overflow: hidden;
    box-shadow: var(--enx-shadow-sm);
}

.enx-stepper li {
    flex: 1;
    position: relative;
    text-align: center;
    padding: 0.85rem 0.5rem;
    color: var(--enx-muted);
    font-size: 0.82rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    cursor: default;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.enx-stepper li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: var(--enx-border);
}

/* Phones: six stages don't fit at 430px, and overflow:hidden made the later
   stages completely unreachable. Let the strip scroll horizontally instead. */
@media (max-width: 640px) {
    .enx-stepper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .enx-stepper::-webkit-scrollbar { display: none; }
    .enx-stepper li { flex: 1 0 auto; padding: 0.85rem 0.9rem; }
}

.enx-stepper li.enx-step.done {
    color: var(--enx-teal-ink);
    cursor: pointer;
}

.enx-stepper li.enx-step.done:hover {
    background: rgba(59, 130, 246, 0.08);
}

/* Dark: completed steps read Gexa green ("done" = success), matching the green CTA;
   blue stays reserved for the active/in-progress step. */
html[data-theme="dark"] .enx-stepper li.enx-step.done {
    color: #9fdb52;
}

html[data-theme="dark"] .enx-stepper li.enx-step.done:hover {
    background: rgba(120, 190, 32, 0.08);
}

.enx-stepper li.enx-step.done::before {
    content: "✓ ";
}

.enx-stepper li.enx-step.reachable {
    color: var(--enx-teal-ink);
    cursor: pointer;
}

/* The deal's current stage (reachable but not being viewed) gets an amber pulsing
   "you are here" locator icon so it's clear where the deal stands from any tab. */
.enx-step-current {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 0.4em;
    color: var(--enx-amber);
}
.enx-step-current-ico { display: block; overflow: visible; }
.enx-step-pulse-ring {
    transform-origin: center;
    animation: enx-step-pulse 1.8s ease-out infinite;
}
@keyframes enx-step-pulse {
    0%   { transform: scale(0.6); opacity: 1; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .enx-step-pulse-ring { animation: none; opacity: 0.65; }
}

.enx-stepper li.enx-step.reachable:hover {
    background: rgba(59, 130, 246, 0.08);
}

.enx-stepper li.enx-step.active {
    color: var(--enx-ink);
    border-bottom-color: var(--enx-teal);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.1), transparent);
}

html[data-theme="dark"] .enx-stepper li.enx-step.active {
    color: #fff;
    text-shadow: 0 0 18px rgba(59, 130, 246, 0.5);
}

/* ---------- UAN grid interop ---------- */
.enx-upload-input { display: none; }

.enx-uan-card { position: relative; }

.enx-drop-hint {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: 16px;
    border: 2px dashed var(--enx-teal);
    background: rgba(59, 130, 246, 0.08);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--enx-teal-ink);
    pointer-events: none;
}

.enx-uan-card.enx-dropping .enx-drop-hint { display: flex; }

.enx-context-menu {
    position: fixed;
    z-index: 10000;
    min-width: 140px;
    background: var(--enx-card-solid);
    border: 1px solid var(--enx-border-strong);
    border-radius: 10px;
    box-shadow: var(--enx-shadow-md);
    padding: 0.3rem;
}

.enx-context-menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--enx-ink);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.45rem 0.7rem;
    border-radius: 7px;
    cursor: pointer;
}

.enx-context-menu button:hover {
    background: rgba(59, 130, 246, 0.12);
    color: var(--enx-teal-ink);
}

/* ---------- Empty states ---------- */
.enx-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.4rem 1rem;
}

.enx-empty-state-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    color: var(--enx-teal-ink);
    margin-bottom: 0.9rem;
}

.enx-empty-state-title {
    font-weight: 700;
    color: var(--enx-ink);
    font-size: 1rem;
}

.enx-empty-state-sub {
    color: var(--enx-muted);
    font-size: 0.86rem;
    max-width: 420px;
    margin-top: 0.3rem;
}

/* ---------- Save success micro-interaction ---------- */
.enx-btn-primary.enx-saved,
.enx-btn-primary.enx-saved:disabled {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35);
    opacity: 1;
    animation: enx-save-pop 0.35s ease;
}

@keyframes enx-save-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ---------- Pricing quotes ---------- */
.enx-product-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(59, 130, 246, 0.12);
    color: var(--enx-teal-ink);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Quote card grid: sized from the CONTAINER (not the viewport) so cards keep a
   readable minimum width whatever the window/sidebar situation. */
.enx-quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 0.85rem;
}

.enx-quote-card {
    position: relative;
    min-width: 0; /* let grid tracks shrink without content overflow */
    border: 1.5px solid var(--enx-border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    background: var(--enx-card-solid);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    /* The whole card is the select control. */
    cursor: pointer;
    user-select: none;
}

/* Keyboard focus ring for the clickable cards/rows (role=button divs). */
.enx-quote-card:focus-visible,
.enx-quote-row:focus-visible {
    outline: 2px solid var(--enx-teal-dark);
    outline-offset: 2px;
}

/* Passive "Select / Selected ✓" indicator — replaces the old per-quote buttons now
   that the whole card/row is the click target. Styled like the former buttons so the
   affordance survives, but inert (clicks fall through to the card/row). */
.enx-quote-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--enx-border);
    color: var(--enx-muted);
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
/* Pinned to the bottom so it aligns across all cards in a row, regardless of the
   "Best price" badge / "Custom" tag above it. */
.enx-quote-pick-card { margin-top: auto; width: 100%; }
.enx-quote-card:hover .enx-quote-pick,
.enx-quote-row:hover .enx-quote-pick {
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--enx-teal-ink);
    background: rgba(59, 130, 246, 0.06);
}
.enx-quote-pick.is-selected {
    border-color: var(--enx-teal-dark);
    background: var(--enx-teal-dark);
    color: #fff;
}
.enx-quote-card:hover .enx-quote-pick.is-selected,
.enx-quote-row:hover .enx-quote-pick.is-selected {
    border-color: var(--enx-teal-dark);
    background: var(--enx-teal-dark);
    color: #fff;
}

.enx-quote-card:hover {
    border-color: rgba(59, 130, 246, 0.45);
    transform: translateY(-3px);
    box-shadow: var(--enx-shadow-md);
}

.enx-quote-card.selected {
    border-color: var(--enx-teal-dark);
    background: rgba(59, 130, 246, 0.04);
    box-shadow: 0 0 0 1px var(--enx-teal-dark), 0 10px 26px rgba(37, 99, 235, 0.18);
}

/* Selected check badge. On a quote card it shares the top-right corner with the remove
   button, so both are laid out by .enx-quote-corner rather than positioning themselves —
   see the note there. The reason picker (D-117) reuses this class on a card that has no
   remove button and no corner cluster, so the absolute fallback stays. */
.enx-quote-check {
    position: absolute; top: 0.7rem; right: 0.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--enx-teal-dark); color: #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

/* Top-right cluster of a quote card: the ✕ and, when selected, the check badge.
   Replaces two independently-positioned absolute elements plus a `right: 2.6rem` nudge
   on the ✕ to dodge the badge. That nudge was a guess at the badge's width and it read
   as a stray glyph floating in the middle of the tile — the two controls were the same
   size, the same distance apart as everything else, and had no visual relationship.
   One flex row positions itself once, and the gap is the only spacing number. */
.enx-quote-corner {
    position: absolute; top: 0.6rem; right: 0.6rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
    /* The cluster is a layout box over the card's click target; only its children take
       pointer events, so the gap between them still selects the card. */
    pointer-events: none;
}
.enx-quote-corner > * { pointer-events: auto; }
/* Inside the cluster the badge is a flex item, not an absolute one. */
.enx-quote-corner .enx-quote-check { position: static; top: auto; right: auto; }

/* Lowest all-in rate among the rendered quotes. */
.enx-quote-card.lowest {
    border-color: #16a34a;
    box-shadow: 0 0 0 1px #16a34a, 0 8px 24px rgba(22, 163, 74, 0.14);
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.06), rgba(22, 163, 74, 0) 60%);
}
.enx-quote-card.lowest.selected {
    box-shadow: 0 0 0 2px var(--enx-teal-dark), 0 10px 26px rgba(37, 99, 235, 0.2);
}
.enx-quote-best-tag {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.16rem 0.6rem;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}

.enx-quote-term {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--enx-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Narrow cards: the Custom tag + remove button wrap INSIDE the card instead of
       overflowing onto the neighboring tile. */
    flex-wrap: wrap;
    row-gap: 0.2rem;
    min-width: 0;
}

.enx-quote-remove {
    margin-left: auto;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--enx-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}
.enx-quote-remove:hover { color: #e11d48; background: rgba(225, 29, 72, 0.1); }

/* Card layout: the remove button sits in the top-right cluster (see .enx-quote-corner)
   instead of riding the wrapping term row. Sized to match the check badge it sits
   beside — a 24px circle next to a 22px one looked misaligned. */
.enx-quote-remove-corner {
    margin-left: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 0.85rem;
    /* Muted until the tile is hovered or the button focused: on the selected card the ✕
       sat at full strength right beside the blue check, reading as a second badge of
       equal importance rather than a secondary action. */
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.enx-quote-card:hover .enx-quote-remove-corner,
.enx-quote-remove-corner:hover,
.enx-quote-remove-corner:focus-visible { opacity: 1; }
/* Touch has no hover, so the affordance would never appear. */
@media (hover: none) {
    .enx-quote-remove-corner { opacity: 1; }
}
/* In the LIST layout the remove button sits beside the Select button, where the
   card layout's bare corner glyph reads as a stray character — give it a real
   icon-button treatment matched to the btn-sm height. */
.enx-quote-row-actions .enx-quote-remove {
    margin-left: 0;
    width: 29px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--enx-border);
    border-radius: 8px;
    background: transparent;
    line-height: 1;
}
.enx-quote-row-actions .enx-quote-remove:hover { border-color: rgba(225, 29, 72, 0.5); }

/* ── Quote LIST layout (alternative to cards; user-selectable) ─────────── */
/* The column template lives on the LIST, and each row is a `subgrid`, so every
   row shares the SAME column tracks. Without this each row was an independent grid
   that sized its own columns from its own content, so rows with different content
   (the "Lowest rate"/"Selected ✓" row vs "+X vs best"/"Select" rows) had their
   columns land at different x-positions and nothing lined up across rows. */
.enx-quote-list {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(150px, auto) minmax(200px, 1.2fr) minmax(110px, auto) auto;
    gap: 0.5rem 0.9rem;
}
.enx-quote-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    border: 1.5px solid var(--enx-border);
    border-radius: 12px;
    padding: 0.65rem 1rem;
    background: var(--enx-card-solid);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    /* The whole row is the select control. */
    cursor: pointer;
    user-select: none;
}
.enx-quote-row:hover { border-color: rgba(59, 130, 246, 0.45); box-shadow: var(--enx-shadow-sm); }

/* Locked while a staged Salesforce sync is in flight. The tiles are clickable divs, so a
   disabled <fieldset> can't grey them out — the guard lives in PricingStage.SelectAsync and
   this makes the refusal visible instead of the click just silently doing nothing. The
   selected tile stays legible so the broker can still see what they picked. */
.enx-quote-card.is-locked,
.enx-quote-row.is-locked {
    cursor: not-allowed;
    opacity: 0.55;
    filter: saturate(0.6);
}
.enx-quote-card.is-locked:hover,
.enx-quote-row.is-locked:hover {
    border-color: var(--enx-border);
    transform: none;
    box-shadow: none;
}
.enx-quote-card.is-locked:hover .enx-quote-pick,
.enx-quote-row.is-locked:hover .enx-quote-pick {
    border-color: var(--enx-border);
    color: var(--enx-muted);
    background: transparent;
}
.enx-quote-card.is-locked.selected,
.enx-quote-row.is-locked.selected { opacity: 0.8; }

/* "Request sales rep help" reason picker (D-117). Reuses .enx-quote-card wholesale — the
   border, hover lift, teal selected ring, corner check badge and focus ring all come from
   above — and only overrides the grid, which is auto-fill/158px for quote tiles and needs
   to be one full-width column inside a 520px modal. */
.enx-reason-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
.enx-reason-card { padding: 0.9rem 1rem; gap: 0.25rem; }
.enx-reason-title { font-size: 0.95rem; color: var(--enx-ink); padding-right: 1.75rem; }
.enx-reason-desc { font-size: 0.82rem; color: var(--enx-muted); }
/* The "this takes the deal off Matrix pricing" warning — the one consequence a broker
   must not miss, since that is exactly the mis-click this picker exists to prevent. */
.enx-reason-caution {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b45309; /* matches .enx-banner-warning */
}
html[data-theme="dark"] .enx-reason-caution { color: #fbbf24; }
.enx-quote-row.selected {
    border-color: var(--enx-teal-dark);
    background: rgba(59, 130, 246, 0.04);
    box-shadow: 0 0 0 1px var(--enx-teal-dark);
}
.enx-quote-row.lowest { border-color: #16a34a; box-shadow: 0 0 0 1px #16a34a; }
.enx-quote-row.lowest.selected { box-shadow: 0 0 0 2px var(--enx-teal-dark); }
.enx-quote-row-term { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--enx-muted); }
.enx-quote-row-term strong { font-size: 1.05rem; color: var(--enx-ink); }
/* The "★ Best price" pill is shared with the vertical card layout, where it uses
   align-self:flex-start. In this horizontal row the term cell is baseline-aligned,
   so flex-start pushed the pill to the top, out of line with the "N months" text.
   Center it here so it sits inline with the rest of the row. */
.enx-quote-row-term .enx-quote-best-tag { align-self: center; }
.enx-quote-row-rate { font-weight: 800; font-size: 1.05rem; color: var(--enx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.enx-quote-row-rate span { font-size: 0.72rem; font-weight: 600; color: var(--enx-muted); }
.enx-quote-row-breakdown { font-size: 0.78rem; color: var(--enx-muted); font-variant-numeric: tabular-nums; }
.enx-quote-row-delta { font-size: 0.78rem; font-weight: 600; color: var(--enx-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.enx-quote-row-delta.is-best { color: #16a34a; }
.enx-quote-row-actions { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; }
@media (max-width: 768px) {
    /* Collapse the shared 5-col track to one column so the desktop min-widths don't
       force horizontal overflow; each row then defines its own compact 2-col layout. */
    .enx-quote-list { grid-template-columns: 1fr; }
    .enx-quote-row { grid-template-columns: 1fr auto; row-gap: 0.45rem; }
    .enx-quote-row-breakdown, .enx-quote-row-delta { display: none; }
    /* The actions cell auto-flows into row 2 column 1 (1fr), which left the Select
       button floating mid-row. Span the full row so it sits flush right. */
    .enx-quote-row-actions { grid-column: 1 / -1; }
}

.enx-quote-custom-tag {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--enx-amber);
    border: 1px solid rgba(245, 158, 11, 0.35);
    text-transform: none;
    letter-spacing: 0.02em;
}

.enx-quote-rate {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--enx-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.enx-quote-rate span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--enx-muted);
}

.enx-quote-breakdown {
    font-size: 0.76rem;
    color: var(--enx-muted);
    font-variant-numeric: tabular-nums;
}

/* Comparison vs the lowest quote — helps brokers weigh terms at a glance. */
.enx-quote-delta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--enx-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.5rem;
}
.enx-quote-delta.is-best { color: #16a34a; }
.enx-quote-delta.is-best span { display: inline-flex; align-items: center; gap: 0.25rem; }
.enx-quote-delta.is-best span::before { content: "▼"; font-size: 0.6rem; }

/* ---------- Read-only lockdown ---------- */
.enx-stage-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.enx-stage-fieldset:disabled .btn,
.enx-stage-fieldset:disabled .enx-btn-primary,
.enx-stage-fieldset:disabled .enx-btn-outline {
    pointer-events: none;
    opacity: 0.55;
}

/* Custom comboboxes (<EnxSelect>) are divs, so fieldset:disabled does NOT lock them
   natively — components should pass Disabled, and this rule is the defense-in-depth
   blanket so no custom control inside a locked stage stays clickable. */
.enx-stage-fieldset:disabled .enx-select {
    pointer-events: none;
    opacity: 0.55;
}

/* Read-only exceptions: harmless controls (document Download links, PDF preview) stay
   fully usable on a closed deal. */
.enx-stage-fieldset:disabled .enx-ro-allow,
.enx-stage-fieldset:disabled a.enx-ro-allow.btn {
    pointer-events: auto;
    opacity: 1;
}

/* Read-only deal: the tax-exemption upload dropzone should look disabled (it already is,
   via the disabled <input>), and file-remove buttons are hidden. */
.enx-stage-fieldset:disabled .enx-dropzone {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    border-style: dashed;
    background: var(--enx-surface);
}
.enx-stage-fieldset:disabled .enx-dropzone u { text-decoration: none; }
.enx-stage-fieldset:disabled .enx-fileremove { display: none; }

/* (The boxed .enx-readonly-banner was retired 2026-08-03 — the wizard's read-only and
   sync-lock notices now use the shared slim .enx-banner status lines, so every message
   in the wizard reads the same regardless of which stage raised it.) */

/* ---------- Wizard layout + summary rail ---------- */
.enx-wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1200px) {
    .enx-wizard-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
    }
}

.enx-deal-rail {
    position: sticky;
    top: 5.25rem;
}

@media (max-width: 1199.98px) {
    .enx-deal-rail { display: none; }
}

.enx-rail-card { padding: 1.25rem 1.4rem; }

.enx-rail-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--enx-muted);
    margin-bottom: 0.9rem;
}

.enx-rail-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
}

.enx-rail-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--enx-border);
}

.enx-rail-list > div:last-child { border-bottom: none; padding-bottom: 0; }

.enx-rail-list dt {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--enx-muted);
    white-space: nowrap;
}

.enx-rail-list dd {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* ===== Deal communications widget (tracked emails, rail card + manual view) ===== */
.enx-comms-card { margin-top: 0.9rem; }
.enx-comms-head { display: flex; align-items: center; gap: 0.5rem; }
.enx-comms-refresh {
    margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border: none; border-radius: 6px; background: transparent;
    color: var(--enx-muted); cursor: pointer;
}
.enx-comms-refresh:hover:not(:disabled) { background: rgba(141, 163, 196, 0.14); color: var(--enx-ink); }
/* The button was ALREADY disabled during a refresh - it just looked identical, so a click
   appeared to do nothing at all (QA 2026-08-13). The icon spins in place rather than being
   swapped for a separate spinner: at 24px a glyph swap makes the card header jump. */
.enx-comms-refresh:disabled { cursor: default; opacity: 0.7; }
.enx-comms-refresh:disabled:hover { background: transparent; }
/* enx-spin is otherwise scoped to .enx-toolbtn, so the class alone would not animate here. */
.enx-comms-refresh svg.enx-spin { animation: enx-spin 0.8s linear infinite; transform-origin: 50% 50%; }
.enx-comms-empty { font-size: 0.82rem; color: var(--enx-muted); margin: 0; }
.enx-comms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.enx-comms-item {
    display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.35rem;
    border-bottom: 1px solid var(--enx-border); cursor: pointer; border-radius: 8px;
}
.enx-comms-item:last-child { border-bottom: none; }
.enx-comms-item:hover, .enx-comms-item:focus-visible { background: rgba(141, 163, 196, 0.10); outline: none; }
.enx-comms-ico {
    flex-shrink: 0; margin-top: 0.1rem; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 7px; color: var(--enx-teal);
    background: color-mix(in srgb, var(--enx-teal) 12%, transparent);
}
.enx-comms-ico-failed { color: #dc2626; background: rgba(220, 38, 38, 0.12); }
.enx-comms-body { min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.enx-comms-subject {
    font-size: 0.82rem; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.enx-comms-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.72rem; color: var(--enx-muted); }
.enx-comms-cat {
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.64rem;
    color: var(--enx-muted); background: rgba(141, 163, 196, 0.14); border-radius: 999px; padding: 0.08rem 0.5rem;
}
.enx-comms-pill-failed { color: #dc2626; background: rgba(220, 38, 38, 0.12); font-weight: 700; }
.enx-comms-toggle {
    margin-top: 0.5rem; border: none; background: transparent; color: var(--enx-teal);
    font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 0.15rem 0;
}
.enx-comms-toggle:hover { text-decoration: underline; }

/* Preview modal (reuses the D&B shell) */
.enx-comms-dialog { max-width: 680px; }
.enx-comms-detail-body { padding: 1rem 1.3rem 1.2rem; overflow-y: auto; max-height: min(72vh, 720px); display: flex; flex-direction: column; gap: 0.8rem; }
.enx-comms-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; color: var(--enx-muted); margin-top: 0.25rem; }
.enx-comms-detail-list { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.enx-comms-detail-list > div { display: flex; gap: 0.6rem; font-size: 0.82rem; }
.enx-comms-detail-list dt { font-weight: 700; color: var(--enx-muted); min-width: 92px; }
.enx-comms-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.enx-comms-error { color: #dc2626; }
.enx-comms-frame {
    width: 100%; min-height: 340px; flex: 1; border: 1px solid var(--enx-border); border-radius: 10px;
    background: #f1f5f9; /* matches the email template's page background so the framed body reads as a real message */
}

.enx-rail-rate {
    color: var(--enx-teal-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

/* Dark: the headline rate glows Gexa green — the deal's money number is the win. */
html[data-theme="dark"] .enx-rail-rate {
    color: #9fdb52;
    text-shadow: 0 0 16px rgba(120, 190, 32, 0.35);
}

.enx-rail-rate span {
    font-size: 0.7rem;
    color: var(--enx-muted);
    text-shadow: none;
    font-weight: 500;
}

/* ---------- Broker margin: the "adjusted on the signing day" treatment (D-109) ----------
   Amber, not red: the commission moved, which the broker must notice, but the deal is fine.
   Reusing the error palette here would read as "something is broken" on a deal that signed
   and is proceeding normally. */
.enx-margin-chip {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
    color: #92400e;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

html[data-theme="dark"] .enx-margin-chip {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.32);
}

.enx-margin-was {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--enx-muted);
    font-variant-numeric: tabular-nums;
    text-shadow: none;
}

.enx-margin-was s { opacity: 0.85; }

.enx-margin-delta {
    margin-left: 0.3rem;
    font-weight: 700;
    color: #b45309;
}

html[data-theme="dark"] .enx-margin-delta { color: #fbbf24; }

/* The stat cell itself gets an amber rail, mirroring how .enx-cstat-accent marks the all-in
   rate — the two "look here" cells then read as one visual language. */
.enx-cstat-adjusted {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* Helper text under a form input, sized to sit below the control without competing with it. */
.enx-field-note {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--enx-muted);
}

/* ---------- UAN grid ---------- */
.enx-uan-card { position: relative; }
.enx-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(244, 246, 250, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    animation: enx-overlay-fade .18s ease both;
}
html[data-theme="dark"] .enx-overlay { background: rgba(8, 9, 12, 0.6); }
@keyframes enx-overlay-fade { from { opacity: 0; } to { opacity: 1; } }

/* Sticky-centered spinner: the overlay dims the whole (possibly very tall) card, but
   the box stays pinned to the viewport center so it's always visible regardless of
   scroll. Avoids position:fixed, which backdrop-filter/transform ancestors would trap.
   The sticky+translate lives on the anchor so the box keeps its own pop animation. */
.enx-overlay-sticky { display: block; }
.enx-overlay-sticky .enx-overlay-anchor {
    position: sticky;
    top: 50vh;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
}

.enx-overlay-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem 2rem 1.6rem;
    background: var(--enx-card-solid);
    border: 1px solid var(--enx-border);
    border-radius: 16px;
    box-shadow: var(--enx-shadow-lift);
    animation: enx-overlay-pop .22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes enx-overlay-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* Branded loader: gradient ring spinner with the pulsing logo bolt at its centre. */
.enx-loader { position: relative; width: 56px; height: 56px; }
.enx-loader-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0.15) 35%, #3b82f6 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    animation: enx-spin .85s linear infinite;
}
@keyframes enx-spin { to { transform: rotate(360deg); } }
.enx-loader-bolt {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--enx-amber);
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5));
    animation: enx-bolt-pulse 1.1s ease-in-out infinite;
}
@keyframes enx-bolt-pulse { 0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }

.enx-overlay-title { font-size: 1rem; font-weight: 700; color: var(--enx-ink); }
.enx-overlay-text { font-size: 0.84rem; font-weight: 500; color: var(--enx-muted); min-height: 1.2em; animation: enx-phase-in .35s ease both; }
@keyframes enx-phase-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.enx-overlay-progress { width: 180px; height: 4px; border-radius: 999px; overflow: hidden; background: var(--enx-border); margin-top: 0.2rem; }
.enx-overlay-progress span {
    display: block; width: 40%; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--enx-teal), var(--enx-amber));
    animation: enx-progress-slide 1.3s ease-in-out infinite;
}
@keyframes enx-progress-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
.enx-overlay-meta { font-size: 0.74rem; color: var(--enx-muted); margin-top: 0.15rem; }
.enx-overlay-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--enx-teal-ink); }
.enx-dots { display: inline-block; width: 1.1em; text-align: left; vertical-align: bottom; }
.enx-dots::after { content: ""; animation: enx-dots 1.4s steps(1, end) infinite; }
@keyframes enx-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } 100% { content: ""; } }

/* Success banner (replaces the bootstrap green alert on the contract stage) */
/* (The boxed .enx-success-banner and its parts were retired 2026-08-03 — the Pricing,
   Contract, eSignature and Confirmation stages now use the shared slim .enx-banner
   status lines introduced for the UAN stage, so every wizard tab reads the same.) */


/* ===== Contract Package stage ===== */
.enx-contract-head { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1.1rem; }
.enx-contract-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    color: var(--enx-teal-ink); background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.22);
}
.enx-contract-sub { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--enx-muted); line-height: 1.4; }

.enx-contract-plan {
    border: 1px solid var(--enx-border); border-radius: 14px; padding: 0.85rem 1rem 1rem;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.01));
    margin-bottom: 1rem;
}
.enx-contract-plan-eyebrow {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--enx-muted);
}
/* auto-fit, not repeat(3, 1fr) (2026-08-06). A viewport breakpoint is the wrong lever here:
   the sidebar switches on at 641px (MainLayout.razor.css) and eats 264px plus 2.25rem of side
   padding, so a 667px landscape phone is simultaneously "wide enough for three columns" by the
   media query and left with ~330px to draw them in — which clipped "Your margin" off the right
   edge (iPhone SE landscape). auto-fit measures the container the columns actually live in, so
   it drops to two-up and then one-up on its own, whatever the sidebar is doing. */
.enx-contract-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.7rem; margin-top: 0.6rem;
}
/* Phone portrait stays a single stack: two 10rem columns technically fit, but the 1.18rem
   tabular value plus its "$/kWh" suffix is unreadable at that width. */
@media (max-width: 640px) { .enx-contract-stats { grid-template-columns: 1fr; } }
.enx-cstat {
    background: var(--enx-card-solid); border: 1px solid var(--enx-border); border-radius: 11px;
    padding: 0.65rem 0.8rem; display: flex; flex-direction: column; gap: 0.2rem;
    /* A grid item's default min-width is auto — i.e. its content — so a long value forces its
       track wider instead of wrapping, and the row overflows the card whatever the column count
       is. This is what let the clipping escape; auto-fit above only decides how many columns. */
    min-width: 0;
}
.enx-cstat-accent { border-color: rgba(59, 130, 246, 0.45); box-shadow: inset 3px 0 0 var(--enx-teal); }
.enx-cstat-label { font-size: 0.72rem; font-weight: 600; color: var(--enx-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.enx-cstat-value { font-size: 1.18rem; font-weight: 700; color: var(--enx-ink); font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.enx-cstat-accent .enx-cstat-value { color: var(--enx-teal-ink); }
.enx-cstat-value small { font-size: 0.72rem; font-weight: 600; color: var(--enx-muted); }

.enx-contract-includes { margin: 0 0 1rem; }
.enx-contract-includes-title { font-size: 0.78rem; font-weight: 700; color: var(--enx-label); }
.enx-contract-includes ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.enx-contract-includes li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--enx-ink); }
.enx-include-check { flex-shrink: 0; color: var(--enx-teal); }
.enx-contract-hint { margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--enx-muted); }

.enx-doc-bar {
    display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0.6rem;
    padding: 0.7rem 0.85rem; border: 1px solid var(--enx-border); border-radius: 12px; background: var(--enx-card-solid);
}
.enx-doc-bar-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    color: var(--enx-teal-ink); background: rgba(59, 130, 246, 0.10);
}
.enx-doc-bar-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.enx-doc-bar-name { font-size: 0.88rem; font-weight: 600; color: var(--enx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enx-doc-bar-ver { font-size: 0.76rem; color: var(--enx-muted); }
.enx-doc-bar-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* Wet/manual signature upload card (D-099) */
.enx-wetsign-card {
    margin-top: 1rem; padding: 1rem 1.1rem; border: 1px dashed var(--enx-border-strong);
    border-radius: 12px; background: linear-gradient(180deg, rgba(59,130,246,0.05), rgba(59,130,246,0.01));
}
.enx-wetsign-head { display: flex; align-items: flex-start; gap: 0.7rem; }
.enx-wetsign-title { font-size: 0.98rem; font-weight: 700; color: var(--enx-ink); margin: 0; }
.enx-wetsign-sub { font-size: 0.83rem; color: var(--enx-muted); margin: 0.15rem 0 0; }
.enx-wetsign-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.85rem; }


/* Soft tint — enough to group the row as "has a problem" without painting valid cells
   as errors; the red-ringed cell, left accent bar, and warning chip carry the detail. */
.enx-row-invalid { background: rgba(225, 29, 72, 0.055); }
.enx-cell-error { color: #fda4af; font-size: 0.74rem; margin-top: 3px; font-weight: 500; }
/* Warning chip: a 24px tinted circle with an SVG triangle — same visual language as the
   circular remove button beside it (was a raw "⚠" text glyph that sat off-baseline). */
.enx-row-error-badge {
    /* grid + block svg kills every off-center cause at once: inline baseline,
       line-height, whitespace text nodes, and inherited vertical-align nudges. */
    display: grid; place-items: center;
    width: 24px; height: 24px; flex-shrink: 0;
    padding: 0; line-height: 0;
    box-sizing: border-box;
    border-radius: 50%;
    color: #e11d48;
    background: rgba(225, 29, 72, 0.12);
    cursor: help;
}
/* Constant-width warning slot (UX-001): reserved on EVERY row so the remove button
   keeps the same horizontal position whether or not the row has an error. Without it
   the badge only existed on invalid rows, changing the flex content width and moving
   the centred X — deleting several bad rows meant re-aiming after every click. */
.enx-row-error-slot { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; }
.enx-row-error-badge svg { display: block; margin: 0; }
.enx-row-error-badge:focus-visible { outline: 2px solid rgba(225, 29, 72, 0.45); outline-offset: 1px; }
html[data-theme="dark"] .enx-row-error-badge { color: #fb7185; background: rgba(225, 29, 72, 0.18); }

/* ============ UAN data grid — modern editable data table ============ */
/* Billing toggle — flat inline row (de-boxed 2026-07-18: the stacked bordered
   panels above the grid read as clutter; a hairline divider groups them instead). */
.enx-billing-toggle { display: flex; align-items: center; gap: 0.4rem 0.9rem; flex-wrap: wrap;
    margin: 0 0 0.35rem; padding: 0.45rem 0.15rem 0.55rem; border: 0; border-bottom: 1px solid var(--enx-border); border-radius: 0; background: transparent; }
.enx-billing-toggle .form-check { display: flex; align-items: center; gap: 0.5rem; padding-left: 0; }
.enx-billing-toggle .form-check-input { margin: 0; float: none; cursor: pointer; }
.enx-billing-toggle .form-check-label { font-weight: 600; color: var(--enx-ink); cursor: pointer; }
.enx-billing-toggle .form-text { flex: 1 1 240px; }

/* Deal Start Date — month/year-only flatpickr field above the grid (2026-07-17).
   Flat row like the billing toggle (de-boxed 2026-07-18). */
.enx-dealstart { display: flex; align-items: center; gap: 0.4rem 0.9rem; flex-wrap: wrap;
    margin: 0.75rem 0 0; padding: 0.45rem 0.15rem 0.55rem; border: 0; border-bottom: 1px solid var(--enx-border); border-radius: 0; background: transparent; }
.enx-dealstart-label { font-weight: 600; color: var(--enx-ink); margin: 0; }
.enx-dealstart .form-text { flex: 1 1 240px; }
.enx-dealstart-value { font-weight: 600; color: var(--enx-primary); background: var(--enx-soft); border-radius: 8px; padding: 0.2rem 0.65rem; }
.enx-month-wrap { position: relative; display: inline-flex; align-items: center; }
.enx-month-wrap .enx-month-input { width: 120px; padding-right: 1.8rem; cursor: pointer; background: var(--enx-card); }
.enx-month-wrap .enx-month-icon { position: absolute; right: 0.55rem; color: var(--enx-muted); cursor: pointer; display: inline-flex; }

/* Deal Start Date callout card (2026-07-24): brokers kept scanning past the flat
   row, so the field gets an accent-bordered, tinted card that anchors the eye.
   The tint is the translucent --enx-soft, so it darkens over the dark surface
   rather than punching a pale hole in it. */
.enx-dealstart-callout { border: 1px solid var(--enx-primary); border-left: 5px solid var(--enx-primary);
    border-radius: 10px; background: var(--enx-soft); padding: 0.85rem 1.1rem; }
.enx-dealstart-callout-body { display: flex; flex-direction: column; gap: 0.45rem; }
.enx-dealstart-callout-title { font-weight: 700; font-size: 1rem; color: var(--enx-ink); margin: 0; }
.enx-dealstart-callout-title .enx-required { color: #dc2626; }
html[data-theme="dark"] .enx-dealstart-callout-title .enx-required { color: #fca5a5; }
.enx-dealstart-callout-help { font-size: 0.82rem; color: var(--enx-muted); margin: 0; }
.enx-month-wrap-lg { align-self: flex-start; }
.enx-month-wrap-lg .enx-month-input { width: 150px; font-size: 1rem; font-weight: 600; padding: 0.45rem 2rem 0.45rem 0.7rem; }
/* The field must stay legible against the tint, which sits ON the card - so the
   input takes the dedicated input surface, not --enx-card (same colour as the card). */
.enx-dealstart-callout .enx-month-input { background: var(--enx-input-bg); }
.enx-month-wrap-lg .enx-month-icon { right: 0.65rem; color: var(--enx-primary); }

/* flatpickr monthSelect calendar — retheme the stock white popup with the portal
   variables so it follows light/dark. The calendar is appended to <body>, outside
   any component, so these live at the global level. */
.flatpickr-calendar {
    background: var(--enx-card-solid);
    border: 1px solid var(--enx-border-strong);
    border-radius: 12px;
    box-shadow: var(--enx-shadow-md);
    color: var(--enx-ink);
}
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; } /* stock arrow can't be recolored per-theme */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthSelect-theme-light .flatpickr-current-month { color: var(--enx-ink); fill: var(--enx-ink); }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: var(--enx-muted); fill: var(--enx-muted); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--enx-teal-ink); }
.flatpickr-monthSelect-month {
    color: var(--enx-ink);
    border-radius: 8px;
}
.flatpickr-monthSelect-month:hover,
.flatpickr-monthSelect-month:focus {
    background: color-mix(in srgb, #3b82f6 12%, transparent);
    color: var(--enx-teal-ink);
}
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.selected:hover {
    background: var(--enx-teal-dark);
    color: #fff;
}
.flatpickr-monthSelect-month.flatpickr-disabled,
.flatpickr-monthSelect-month.flatpickr-disabled:hover {
    color: var(--enx-muted);
    opacity: 0.4;
    background: transparent;
    cursor: default;
}

/* Toolbar: quick filter + density + row count */
.enx-grid-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.25rem 0 0.7rem; }
.enx-grid-filter { position: relative; flex: 0 1 280px; }
.enx-grid-filter input { padding-left: 2rem; }
.enx-grid-filter svg { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--enx-muted); pointer-events: none; }
.enx-grid-count { color: var(--enx-muted); font-size: 0.8rem; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.enx-toolbar-actions { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }

/* Broker-safe deal sync-health badge: "Processing" (spinner) / "Needs attention" (amber). */
.enx-sync-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 600; padding: 0.14rem 0.5rem;
    border-radius: 999px; white-space: nowrap; vertical-align: middle; cursor: default;
}
.enx-sync-badge-processing { background: rgba(13, 110, 253, 0.09); color: #0b5ed7; border: 1px solid rgba(13, 110, 253, 0.25); }
.enx-sync-badge-attention { background: rgba(255, 152, 0, 0.12); color: #b45309; border: 1px solid rgba(255, 152, 0, 0.4); }
.enx-sync-badge-synced { background: rgba(16, 185, 129, 0.10); color: #047857; border: 1px solid rgba(16, 185, 129, 0.28); }
html[data-theme="dark"] .enx-sync-badge-synced { color: #34d399; }
.enx-sync-badge-spinner {
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid rgba(13, 110, 253, 0.25); border-top-color: #0b5ed7;
    animation: enx-uan-spin .8s linear infinite;
}

/* Per-row auto-enrich indicator: sits inside the UAN cell, right-aligned over the input.
   spin = verifying, ok = brief green check, fail = red dot (5s) with the reason on hover. */
.enx-uan-cellwrap { position: relative; }
.enx-uan-cellwrap:has(.enx-uan-status) input { padding-right: 1.9rem; }
.enx-uan-status {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; pointer-events: auto;
    animation: enx-uan-status-in .15s ease-out;
}
@keyframes enx-uan-status-in { from { opacity: 0; transform: translateY(-50%) scale(.6); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
.enx-uan-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(13, 110, 253, 0.25); border-top-color: var(--enx-teal, #0d6efd);
    animation: enx-uan-spin .7s linear infinite;
}
@keyframes enx-uan-spin { to { transform: rotate(360deg); } }
.enx-uan-spinner-fail { border-color: rgba(220, 53, 69, 0.25); border-top-color: #dc3545; animation: none; background: #dc3545; border: 0; width: 10px; height: 10px; }
.enx-uan-status-fail { animation: enx-uan-status-in .15s ease-out, enx-uan-fail-pulse 1.2s ease-in-out infinite .15s; }
@keyframes enx-uan-fail-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.enx-uan-status-ok { color: #198754; }
.enx-uan-status-ok svg { animation: enx-uan-status-in .18s ease-out; }

.enx-seg { display: inline-flex; border: 1px solid var(--enx-border-strong); border-radius: 9px; overflow: hidden; }
.enx-seg button { border: 0; background: transparent; color: var(--enx-muted); font-size: 0.76rem; font-weight: 600; padding: 0.32rem 0.65rem; cursor: pointer; transition: background .12s, color .12s; }
.enx-seg button:not(:last-child) { border-right: 1px solid var(--enx-border); }
.enx-seg button.active { background: var(--enx-teal); color: #ffffff; }
/* Density selector: square icon buttons (Compact / Default / Comfortable) */
.enx-density-seg button { display: inline-flex; align-items: center; justify-content: center; padding: 0.34rem 0.5rem; }
.enx-density-seg button svg { display: block; }

/* Contextual bulk-action bar (visible when rows are selected): count badge + label on
   the left, a matched-height action group on the right. Slides in when selection starts. */
.enx-grid-bulkbar {
    display: flex; align-items: center; gap: 0.55rem;
    background: rgba(59, 130, 246, 0.09);
    border: 1px solid rgba(59, 130, 246, 0.32);
    border-radius: 12px;
    padding: 0.45rem 0.6rem 0.45rem 0.75rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    animation: enx-bulkbar-in .18s ease both;
}
@keyframes enx-bulkbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.enx-bulk-count {
    display: inline-grid; place-items: center;
    min-width: 26px; height: 26px; padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--enx-teal); color: #fff;
    font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.enx-bulk-label { font-weight: 600; color: var(--enx-teal-ink); }
.enx-bulk-actions { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.enx-bulk-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    height: 30px; padding: 0 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem; font-weight: 600;
    color: var(--enx-label);
    background: var(--enx-card-solid);
    border: 1px solid var(--enx-border-strong);
    transition: all 0.13s ease;
    white-space: nowrap;
}
.enx-bulk-btn:hover { color: var(--enx-ink); border-color: var(--enx-muted); transform: translateY(-1px); box-shadow: var(--enx-shadow-sm); }
.enx-bulk-btn:active { transform: translateY(0); }
.enx-bulk-btn svg { flex-shrink: 0; }
.enx-bulk-btn.enx-bulk-danger { color: #e11d48; border-color: rgba(225, 29, 72, 0.4); background: rgba(225, 29, 72, 0.06); }
.enx-bulk-btn.enx-bulk-danger:hover { color: #fff; background: #e11d48; border-color: #e11d48; box-shadow: 0 4px 12px -2px rgba(225, 29, 72, 0.45); }
html[data-theme="dark"] .enx-bulk-count { color: #06101f; }
html[data-theme="dark"] .enx-bulk-btn { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .enx-bulk-btn.enx-bulk-danger { color: #fb7185; background: rgba(225, 29, 72, 0.1); }
html[data-theme="dark"] .enx-bulk-btn.enx-bulk-danger:hover { color: #fff; background: #e11d48; }

/* Unusable-accounts bar: same shape as the blue selection bar but rose-tinted, because
   it reports a problem the broker didn't ask for rather than confirming their selection.
   Both can be on screen at once, so they must not look interchangeable. */
.enx-grid-unusablebar { background: rgba(225, 29, 72, 0.07); border-color: rgba(225, 29, 72, 0.3); }
.enx-grid-unusablebar .enx-bulk-label { color: #9f1239; }
.enx-bulk-count.enx-bulk-count-danger { background: #e11d48; box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35); color: #fff; }
html[data-theme="dark"] .enx-grid-unusablebar { background: rgba(225, 29, 72, 0.12); }
html[data-theme="dark"] .enx-grid-unusablebar .enx-bulk-label { color: #fda4af; }
html[data-theme="dark"] .enx-bulk-count.enx-bulk-count-danger { color: #fff; }

/* Grid shell: rounded, bordered, scrollable; header sticks to the top while scrolling.
   clip-path (not just border-radius) because browsers don't clip sticky cells, row
   accent bars, or scrollbar tracks to a scroll container's rounded corners — the
   clip-path hard-clips everything painted inside, in every scroll position. */
.enx-grid-shell { border: 1px solid var(--enx-border); border-radius: 14px; overflow: auto;
    background: var(--enx-grid-cell); max-height: 62vh; clip-path: inset(0 round 14px); }
/* clip-path clips even position:fixed descendants, which would hide the EnxSelect menu.
   enxSelect.js suspends the clip while a menu is open (scrolling closes the menu, so
   the corners are only ever square during that brief window). */
.enx-grid-shell.enx-clip-suspend { clip-path: none; }
.enx-uan-grid { margin: 0; border-collapse: separate; border-spacing: 0; width: 100%; }

/* Sticky header */
.enx-uan-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--enx-grid-cell); color: var(--enx-muted);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
    padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--enx-border-strong); border-right: 1px solid var(--enx-border); text-align: left; }
.enx-uan-grid thead th:last-child { border-right: 0; }
.enx-uan-grid thead th .enx-req { color: #e11d48; margin-left: 1px; }

/* Body cells — vertical gridlines so column boundaries are clear */
.enx-uan-grid tbody td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--enx-border); border-right: 1px solid var(--enx-border); vertical-align: middle; font-size: 0.9rem; }
.enx-uan-grid tbody td:last-child { border-right: 0; }
.enx-uan-grid tbody tr:last-child td { border-bottom: 0; }

/* Density — three levels (Quick Entry parity): Compact / Default (mid) / Comfortable. */
.enx-uan-grid.enx-density-comfortable tbody td { padding-top: 0.62rem; padding-bottom: 0.62rem; }
.enx-uan-grid.enx-density-comfortable .form-control,
.enx-uan-grid.enx-density-comfortable .form-select { min-height: 40px; }
.enx-uan-grid.enx-density-default tbody td { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.enx-uan-grid.enx-density-default .form-control,
.enx-uan-grid.enx-density-default .form-select { min-height: 34px; }
.enx-uan-grid.enx-density-compact tbody td { padding-top: 0.12rem; padding-bottom: 0.12rem; }
.enx-uan-grid.enx-density-compact .form-control,
.enx-uan-grid.enx-density-compact .form-select { font-size: 0.82rem; min-height: 30px; padding-top: 0.15rem; padding-bottom: 0.15rem; }

/* Polished grid dropdowns — crisp teal chevron, hover/focus affordance. */
.enx-uan-grid .form-select {
    cursor: pointer; border-radius: 8px; padding-right: 1.95rem;
    background-repeat: no-repeat; background-position: right 0.55rem center; background-size: 13px;
    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='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.enx-uan-grid .form-select:hover:not(:disabled) { border-color: var(--enx-teal); background-color: var(--enx-grid-hover); }
.enx-uan-grid .form-select:focus { border-color: var(--enx-teal); box-shadow: var(--enx-ring); }
.enx-uan-grid .form-select:disabled { background-image: none; cursor: default; }

/* ── Custom dropdown (<EnxSelect>) — styled trigger + floating option list ── */
.enx-select { position: relative; width: 100%; }
/* "TX | Texas"-style options: fixed-width code column so the pipes line up. */
.enx-select-code { display: inline-block; min-width: 2.1em; }
.enx-select-code-sep { color: var(--enx-muted); margin-right: 0.45em; }
.enx-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    width: 100%; min-height: 34px; padding: 0.3rem 0.6rem; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--enx-ink); font-size: 0.88rem; cursor: pointer; user-select: none;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; }
.enx-uan-grid td:hover > .enx-select .enx-select-trigger,
.enx-select.is-open .enx-select-trigger { border-color: var(--enx-border-strong); background: var(--enx-grid-cell); }
.enx-select-trigger:hover { border-color: var(--enx-teal); }
.enx-select-trigger:focus-visible, .enx-select.is-open .enx-select-trigger { outline: none; border-color: var(--enx-teal); box-shadow: var(--enx-ring); }
.enx-select-trigger.enx-invalid { border-color: #e11d48; background-color: rgba(225, 29, 72, 0.06); box-shadow: 0 0 0 0.15rem rgba(225, 29, 72, 0.22); }
.enx-select.is-disabled .enx-select-trigger { cursor: default; color: var(--enx-muted); opacity: 0.65; }

/* Form-field variant: makes the trigger look like a .form-control (visible border,
   matching height/padding/radius) for use outside the UAN grid. */
.enx-select-input .enx-select-trigger {
    border-color: var(--enx-border-strong);
    background-color: var(--enx-input-bg);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    min-height: 0;
    font-size: 0.92rem;
}
.enx-select-input .enx-select-trigger:hover { border-color: var(--enx-teal); }
.enx-select-input.is-open .enx-select-trigger { background-color: var(--enx-input-bg); }
.enx-select.is-disabled .enx-select-chev { display: none; }
.enx-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enx-select-text.is-placeholder { color: var(--enx-muted); }
.enx-select-chev { flex-shrink: 0; color: var(--enx-teal-ink); transition: transform .15s ease; }
.enx-select.is-open .enx-select-chev { transform: rotate(180deg); }

/* While an EnxSelect menu is open, enxSelect.js tags the pop's containing-block card
   with this class: the backdrop-filter card is its own stacking context, so without a
   raised z-index any LATER sibling card would paint over the open menu. */
/* Raises the card that hosts an open dropdown above its LATER siblings. A backdrop-filtered
   card is its own stacking context, so the popup's z-index:3000 is scoped inside the card and
   loses to the next card in source order regardless. Two variants because the fix differs by
   the host's own position (see enxSelect.js `open`): a static host needs the position too, an
   already-positioned one only needs the z-index. 40 clears sibling cards, but it also beats
   the sticky topbar's 30 — so close() must always strip both classes, or the card scrolls
   over the header for the rest of the page's life. */
.enx-pop-host { position: relative; z-index: 40; }
.enx-pop-host-raise { z-index: 40; }
.enx-select-pop { position: fixed; top: 0; left: -9999px; z-index: 3000; max-height: 300px; overflow: hidden; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    background: var(--enx-card-solid); border: 1px solid var(--enx-border-strong); border-radius: 10px;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.28), 0 4px 12px -4px rgba(15, 23, 42, 0.12);
    animation: enx-select-in .12s ease; }
@keyframes enx-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.enx-select-opts { overflow-y: auto; padding: 0.3rem; }
.enx-select-search { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--enx-border); color: var(--enx-muted); flex-shrink: 0; }
.enx-select-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--enx-ink); font-size: 0.88rem; padding: 0; }
.enx-select-search-input::placeholder { color: var(--enx-muted); }
.enx-select-opt { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.4rem 0.6rem; border-radius: 7px; font-size: 0.86rem; color: var(--enx-ink); cursor: pointer;
    white-space: nowrap; }
.enx-select-opt.is-active { background: var(--enx-grid-hover); }
.enx-select-opt.is-selected { color: var(--enx-teal-ink); font-weight: 600; }
.enx-select-opt.is-selected.is-active { background: var(--enx-grid-sel); }
.enx-select-check { flex-shrink: 0; color: var(--enx-teal); }
/* Unticked checkbox in a Multiple EnxSelect (2026-08-06, Matrix term filter). Sized to the 14px
   check SVG it replaces so rows don't shift height as options are ticked. Border only — a filled
   box reads as a disabled control, and this is the plain "not chosen yet" state. */
.enx-select-box { flex-shrink: 0; width: 14px; height: 14px; border-radius: 4px;
    border: 1.5px solid var(--enx-border-strong); }
.enx-select-empty { padding: 0.5rem 0.6rem; font-size: 0.82rem; color: var(--enx-muted); }

/* Status banners (enrich / paste / errors) — slim, borderless status lines
   (de-boxed 2026-07-18): colored icon + text with a 3px accent tick instead of
   full bordered boxes, so stacked messages stop competing with the grid. */
.enx-banner { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.75rem; border-radius: 6px;
    font-size: 0.86rem; border: 0; border-left: 3px solid transparent; background: transparent; }
.enx-banner svg { flex-shrink: 0; }
.enx-banner .enx-banner-body { flex: 1; }
/* Multi-sentence banners (the wizard stages carry longer explanatory copy than the UAN
   grid's one-liners): opt in with .enx-banner-multiline so the icon sits with the FIRST
   line rather than floating at the vertical centre of a wrapped paragraph. Kept as an
   explicit modifier rather than a :has() heuristic so the alignment is predictable. */
.enx-banner-multiline { align-items: flex-start; }
.enx-banner-multiline > svg { margin-top: 2px; }
.enx-banner .enx-banner-body { line-height: 1.45; }
/* Dismiss affordance inherits the banner's tone instead of Bootstrap's black glyph. */
.enx-banner .btn-close { flex-shrink: 0; padding: 0.25rem; font-size: 0.6rem; opacity: 0.55; }
.enx-banner .btn-close:hover { opacity: 0.9; }
html[data-theme="dark"] .enx-banner .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.enx-banner-success { border-left-color: rgba(59, 130, 246, 0.55); color: var(--enx-teal-ink); }
.enx-banner-info { border-left-color: rgba(59, 130, 246, 0.5); color: #1d4ed8; }
html[data-theme="dark"] .enx-banner-info { color: #8ab6ff; }
.enx-banner-warning { border-left-color: rgba(245, 158, 11, 0.6); color: #b45309; }
html[data-theme="dark"] .enx-banner-warning { color: #fbbf24; }
.enx-banner-error { border-left-color: rgba(239, 68, 68, 0.55); color: #b42318; }
html[data-theme="dark"] .enx-banner-error { color: #fca5a5; }

/* Usage-responsibility acknowledgement — flat pressable row (de-boxed 2026-07-18):
   no bordered panel; a teal accent tick appears when checked. */
.enx-ack { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 1.1rem; padding: 0.65rem 0.8rem;
    border: 0; border-left: 3px solid var(--enx-border); border-radius: 6px; background: transparent;
    cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.enx-ack:hover { background: rgba(59, 130, 246, 0.05); border-left-color: var(--enx-teal); }
.enx-ack.is-checked { border-left-color: var(--enx-teal); background: transparent; }
.enx-ack .form-check-input { margin: 0; flex-shrink: 0; width: 1.15em; height: 1.15em; margin-top: 0.1rem; cursor: pointer; }
.enx-ack-body { display: flex; flex-direction: column; gap: 0.15rem; }
.enx-ack-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--enx-muted); }
.enx-ack.is-checked .enx-ack-title { color: var(--enx-teal-ink); }
.enx-ack-text { font-size: 0.88rem; line-height: 1.45; color: var(--enx-ink); }

/* Column resize handle (rendered into each header cell by uanGrid.js) */
.enx-grid-resizer { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; z-index: 6; }
.enx-grid-resizer::after { content: ""; position: absolute; top: 22%; right: 3px; height: 56%; width: 2px; border-radius: 2px; background: transparent; transition: background .12s; }
.enx-uan-grid thead th:hover .enx-grid-resizer::after { background: var(--enx-border-strong); }
.enx-grid-resizer:hover::after, .enx-grid-resizing .enx-grid-resizer::after { background: var(--enx-teal); }

/* Row states */
.enx-uan-grid tbody tr { transition: background 0.12s ease; }
.enx-uan-grid tbody tr:hover { background: var(--enx-grid-hover); }
.enx-uan-grid tbody tr:focus-within { background: var(--enx-grid-hover); }
.enx-uan-grid tbody tr.enx-row-selected { background: var(--enx-grid-sel); }
/* Status left-accent bar — on the first CELL (not the row): inset shadows follow the
   element's border-radius, so the bar clips cleanly at the rounded bottom-left corner
   (on the <tr> it painted square and poked a red sliver outside the curve). */
.enx-uan-grid tbody tr.enx-row-invalid td:first-child { box-shadow: inset 3px 0 0 #e11d48; }
.enx-uan-grid tbody tr.enx-row-enriched td:first-child { box-shadow: inset 3px 0 0 #10b981; }

/* Excel-like editable cells: borderless until hover/focus, clear focus ring.
   Use background-color (not the background shorthand) so the select chevron image survives. */
.enx-uan-grid .form-control, .enx-uan-grid .form-select { border-color: transparent; background-color: transparent;
    box-shadow: none; border-radius: 7px; transition: border-color .12s, background-color .12s, box-shadow .12s; }
.enx-uan-grid td:hover > .form-control, .enx-uan-grid td:hover > .form-select { border-color: var(--enx-border-strong); background-color: var(--enx-grid-cell); }
.enx-uan-grid .form-control:focus, .enx-uan-grid .form-select:focus { border-color: var(--enx-teal); background-color: var(--enx-grid-cell);
    box-shadow: 0 0 0 0.16rem rgba(59, 130, 246, 0.25); }

/* Per-cell validation: ring the offending input + the cell carries a Tippy. */
.enx-uan-grid td.enx-cell-invalid { cursor: help; }
.enx-uan-grid td.enx-cell-invalid .form-control, .enx-uan-grid td.enx-cell-invalid .form-select,
.enx-uan-grid td.enx-cell-invalid .enx-select-trigger {
    border-color: #e11d48; background-color: rgba(225, 29, 72, 0.06); box-shadow: 0 0 0 0.15rem rgba(225, 29, 72, 0.22); }

/* Sticky columns: leading (#/select), UAN, and actions stay put when scrolled wide. */
.enx-grid-sticky { position: sticky; z-index: 2; background: var(--enx-grid-cell); }
.enx-uan-grid thead .enx-grid-sticky { z-index: 5; }
.enx-uan-grid tbody tr:hover .enx-grid-sticky { background: var(--enx-grid-hover); }
.enx-uan-grid tbody tr:focus-within .enx-grid-sticky { background: var(--enx-grid-hover); }
.enx-uan-grid tbody tr.enx-row-selected .enx-grid-sticky { background: var(--enx-grid-sel); }
.enx-grid-lead { left: 0; width: 48px; min-width: 48px; text-align: center; }
.enx-grid-uan { left: 48px; }
/* Center + vertically align the pinned #/select and actions columns (header + body);
   higher specificity than the general header/body text-align rules. */
.enx-uan-grid th.enx-grid-lead, .enx-uan-grid td.enx-grid-lead,
.enx-uan-grid th.enx-grid-actions, .enx-uan-grid td.enx-grid-actions { text-align: center; vertical-align: middle; }
.enx-uan-grid th.enx-grid-lead input, .enx-uan-grid td.enx-grid-lead input { vertical-align: middle; margin: 0; }

/* "Same as service" column — centered header stack + tidy checkboxes (was a cramped,
   misaligned bare checkbox). Higher specificity than the general header text-align. */
.enx-uan-grid th.enx-grid-center, .enx-uan-grid td.enx-grid-center { text-align: center; vertical-align: middle; }
.enx-uan-grid td.enx-grid-center .form-check-input { margin: 0; float: none; cursor: pointer; }
/* "Same as service" header: button-style select-all toggle. The label, checkbox and
   text form a single pressable pill; the checkbox matches the row-level checkbox size. */
.enx-grid-allbtn { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; cursor: pointer;
    padding: 0.28rem 0.55rem; border: 1px solid var(--enx-border-strong); border-radius: 8px;
    background: var(--enx-surface); transition: background .12s, border-color .12s, color .12s;
    text-transform: uppercase; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--enx-muted);
    line-height: 1.15; white-space: normal; text-align: left; }
.enx-grid-allbtn:hover { border-color: var(--enx-teal); }
.enx-grid-allbtn.active { background: rgba(59, 130, 246, 0.12); border-color: var(--enx-teal); color: var(--enx-ink); }
.enx-grid-allbtn > span { max-width: 72px; }
.enx-grid-allbtn .form-check-input { margin: 0; float: none; flex-shrink: 0; cursor: pointer; }
/* Saved UANs are immutable — show the locked input as read-only. Uses the themed
   surface token so it reads as a recessed field in both light and dark modes. */
.enx-uan-grid input.enx-locked { background: var(--enx-surface); color: var(--enx-muted); cursor: not-allowed; }

/* General button-style checkbox: checkbox + label form one pressable pill that
   highlights when checked (used for "Tax exempt", etc.). */
.enx-toggle-btn { display: flex; width: fit-content; align-items: center; gap: 0.45rem; margin: 0; cursor: pointer;
    /* Block-level (not inline-flex) so a spacer label above it forces it onto the input row.
       Height matches .form-control (padding 0.55rem + 0.92rem*1.5 line + 2px border). */
    min-height: calc(1.1rem + 1.38rem + 2px); padding: 0.25rem 0.75rem;
    border: 1px solid var(--enx-border-strong); border-radius: 10px;
    background: var(--enx-surface); transition: background .12s, border-color .12s, color .12s;
    font-size: 0.86rem; font-weight: 600; color: var(--enx-muted); line-height: 1.2;
    white-space: nowrap; user-select: none; }
.enx-toggle-btn:hover { border-color: var(--enx-teal); }
.enx-toggle-btn.active { background: rgba(59, 130, 246, 0.12); border-color: var(--enx-teal); color: var(--enx-ink); }
.enx-toggle-btn .form-check-input { margin: 0; float: none; flex-shrink: 0; cursor: pointer; }

/* ── Tax-exemption uploader ─────────────────────────────────────────────── */
.enx-taxupload { border: 1px solid var(--enx-border-strong); border-radius: 12px; padding: 1rem 1.1rem;
    background: var(--enx-card-solid); box-shadow: var(--enx-shadow-sm); }
.enx-taxupload-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.enx-taxupload-title { font-weight: 700; font-size: 0.95rem; color: var(--enx-ink); }
.enx-taxupload-count { font-size: 0.78rem; font-weight: 600; color: var(--enx-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.enx-chip { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 0.15rem 0.5rem; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
.enx-chip-req { background: rgba(245, 158, 11, 0.15); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.4); }
.enx-chip-ok { background: rgba(59, 130, 246, 0.14); color: var(--enx-teal-ink); border: 1px solid rgba(59, 130, 246, 0.4); }

.enx-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
    border: 1.5px dashed var(--enx-border-strong); border-radius: 10px; padding: 1.1rem 1rem; margin: 0;
    text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.enx-dropzone:hover { border-color: var(--enx-teal); background: rgba(59, 130, 246, 0.05); }
.enx-dropzone svg { color: var(--enx-teal); }
.enx-dropzone-main { font-size: 0.88rem; font-weight: 600; color: var(--enx-ink); }
.enx-dropzone-main u { color: var(--enx-teal-ink); text-decoration: none; border-bottom: 1.5px solid var(--enx-teal); }
.enx-dropzone-sub { font-size: 0.75rem; color: var(--enx-muted); }
.enx-dropzone.is-dragover { border-color: var(--enx-teal); background: rgba(59, 130, 246, 0.10); border-style: solid; }
.enx-dropzone.is-busy { pointer-events: none; }
.enx-dropzone.is-disabled { cursor: default; background: var(--enx-surface); border-style: solid; }
.enx-dropzone.is-disabled:hover { border-color: var(--enx-border-strong); background: var(--enx-surface); }

/* ===== Admin Settings page (v2: grouped sections, accent cards, cron presets) ===== */
.enx-set-section { margin-bottom: 2.1rem; }
.enx-set-sechead { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem;
    padding-bottom: 0.7rem; border-bottom: 1px solid var(--enx-border); }
.enx-set-secicon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.enx-set-secicon svg { width: 19px; height: 19px; }
.enx-set-sechead-text { min-width: 0; }
.enx-set-sectitle { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; color: var(--enx-ink); }
.enx-set-secsub { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--enx-muted); }

.enx-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.enx-set-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); }
@media (max-width: 560.98px) { .enx-set-grid, .enx-set-grid.is-wide { grid-template-columns: 1fr; } }

/* NO `overflow: hidden` here, deliberately. It used to clip the accent bar (formerly a
   `::before` pseudo-element) to the card's rounded corners, and that one declaration made
   the Pricing Window Time Zone dropdown impossible to open (reported 2026-08-05).

   The option list is position:fixed precisely so no ancestor can clip it — but this card
   is also an `.enx-card`, which carries backdrop-filter, and a backdrop-filtered element
   becomes the CONTAINING BLOCK for its fixed descendants. Once it is the containing
   block, its overflow applies to them again. The trigger sits at the bottom of the card
   (`.enx-set-editor` has margin-top:auto) and the menu opens downward, so it was clipped
   away to nothing. The menu was rendered, positioned and clickable — just invisible and
   outside the clip box. This is why the Settings page alone was affected: `.enx-set-card`
   is the only dropdown host in the app that clips itself (`enxSelect.js` already suspends
   the UAN grid's clip-path for the same reason).

   Present since 2026-08-03 (D-111, the first dropdown on this page) — not a regression
   from the mobile sweep. The accent is now a real border side (see below), which the box
   model already clips to the border-radius on its own, so this still needs no overflow. */
.enx-set-card { position: relative; display: flex; flex-direction: column; gap: 0.65rem; padding: 1.2rem 1.3rem;
    /* Accent used to be a separate ::before bar inset from the corners with its own small
       radius — at 3px wide against a 16px card radius it pinched into an odd nub right
       where it met the curve. A real border-left of mixed width tapers into the thin
       border on the other three sides natively at the rounded corner, so it reads as
       part of the card's frame instead of a floating line. */
    border: 1px solid var(--enx-border);
    border-left: 3px solid var(--enx-set-accent, var(--enx-border));
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
/* border-left-color is re-asserted here because the generic `.enx-card:hover` sets the
   border-color SHORTHAND, which expands to all four sides and greyed the accent out the
   moment the pointer touched a card. Same shorthand trap as `.is-dirty` below. Equal
   specificity to `.enx-card:hover`, but this rule comes later in the file, so it wins. */
.enx-set-card:hover { transform: translateY(-2px);
    border-left-color: var(--enx-set-accent, var(--enx-border)); }
/* Suspended while a dropdown in this card is open. The hover lift shifts the containing
   block by 2px, which drags the fixed popup with it — the menu twitched whenever the
   cursor crossed the card edge on its way to an option. */
.enx-set-card:has(.enx-select.is-open) { transform: none; }

/* Hover sweep: the accent grows out of the left rail and travels right along the top and
   bottom edges at once, the two tips converging on the middle of the right edge, so the
   whole frame ends up accent-coloured. Un-hover retraces it.

   Two halves of a full rounded outline, each revealed by a left-to-right `clip-path`
   wipe. Deliberately NOT `transform: scaleX()`: scaling is only identity at the end, so
   in transit it squashes the 1px border to a fraction of a pixel and turns the corner
   radius elliptical. Clipping reveals the border at its true size and true curvature.

   One animated property (`clip-path`), so un-hover just interpolates back along the same
   path from wherever it currently is — a half-finished sweep reverses smoothly instead of
   snapping, with no separate retract keyframes to keep in sync.

   No `overflow`/`clip-path` is added to the CARD itself — see the note above about the
   backdrop-filter containing block eating the EnxSelect popup. These are pseudo-elements,
   which have no descendants, so clipping them cannot reach the dropdown. */
.enx-set-card::before,
.enx-set-card::after {
    content: "";
    position: absolute;
    /* Offsets resolve against the ancestor's PADDING box, so each one has to step back out
       over its own border to land on the card's border-box edge: 3px on the left (the
       accent rail), 1px elsewhere. The overlay reproduces the full outline including the
       left side — painting accent over accent there is a no-op, and it means the sweep
       needs no separate treatment for the left corners. */
    left: -3px;
    right: -1px;
    border: 1px solid var(--enx-set-accent, transparent);
    border-left-width: 3px;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .5s ease;
}
/* 50% resolves against the padding box (2px shorter than the border box), so each half
   lands 1px shy of centre; +2px overlaps them instead of leaving a 2px gap in the right
   edge exactly where the two tips are supposed to meet. */
.enx-set-card::before {
    top: -1px;
    height: calc(50% + 2px);
    border-bottom: none;
    border-radius: var(--enx-radius) var(--enx-radius) 0 0;
}
.enx-set-card::after {
    bottom: -1px;
    height: calc(50% + 2px);
    border-top: none;
    border-radius: 0 0 var(--enx-radius) var(--enx-radius);
}
.enx-set-card:hover::before,
.enx-set-card:hover::after { clip-path: inset(0 0 0 0); }
/* The amber "unsaved" outline outranks the category accent: a dirty card must keep
   signalling that it is dirty while the pointer is over it. */
.enx-set-card.is-dirty:hover::before,
.enx-set-card.is-dirty:hover::after { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) {
    /* Keep the end state, drop the travel. */
    .enx-set-card::before, .enx-set-card::after { transition: none; }
}
/* border-color longhand, not the shorthand — the shorthand would also overwrite the
   left side's accent color set above, replacing the category color with amber whenever
   a card is dirty. */
.enx-set-card.is-dirty { border-top-color: rgba(245, 158, 11, 0.55); border-right-color: rgba(245, 158, 11, 0.55);
    border-bottom-color: rgba(245, 158, 11, 0.55); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08); }

/* Accent palette shared by section icons + card icons + the left card rail */
.enx-set-icon, .enx-set-secicon { color: var(--enx-set-accent-ink, var(--enx-teal-ink));
    background: color-mix(in srgb, var(--enx-set-accent, #3b82f6) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--enx-set-accent, #3b82f6) 26%, transparent); }
.is-blue   { --enx-set-accent: #3b82f6; --enx-set-accent-ink: #2563eb; }
.is-sky    { --enx-set-accent: #06b6d4; --enx-set-accent-ink: #0e7490; }
.is-green  { --enx-set-accent: #10b981; --enx-set-accent-ink: #047857; }
.is-amber  { --enx-set-accent: #f59e0b; --enx-set-accent-ink: #b45309; }
.is-rose   { --enx-set-accent: #f43f5e; --enx-set-accent-ink: #be123c; }
.is-violet { --enx-set-accent: #8b5cf6; --enx-set-accent-ink: #6d28d9; }
html[data-theme="dark"] .is-blue   { --enx-set-accent-ink: #8ab6ff; }
html[data-theme="dark"] .is-sky    { --enx-set-accent-ink: #67e8f9; }
html[data-theme="dark"] .is-green  { --enx-set-accent-ink: #34d399; }
html[data-theme="dark"] .is-amber  { --enx-set-accent-ink: #fcd34d; }
html[data-theme="dark"] .is-rose   { --enx-set-accent-ink: #fb7185; }
html[data-theme="dark"] .is-violet { --enx-set-accent-ink: #c4b5fd; }

.enx-set-head { display: flex; align-items: center; gap: 0.7rem; }
.enx-set-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.enx-set-icon svg { width: 19px; height: 19px; }
.enx-set-titles { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.enx-set-title { font-weight: 700; font-size: 0.95rem; color: var(--enx-ink); letter-spacing: -0.01em; }
.enx-set-key { font-size: 0.68rem; color: var(--enx-muted); background: var(--enx-surface);
    padding: 0.06rem 0.4rem; border-radius: 5px; border: 1px solid var(--enx-border); align-self: flex-start; }
.enx-set-dirtychip { margin-left: auto; flex-shrink: 0; font-size: 0.7rem; font-weight: 700;
    color: #b45309; background: rgba(245, 158, 11, 0.14); border-radius: 999px; padding: 0.16rem 0.6rem; }
html[data-theme="dark"] .enx-set-dirtychip { color: #fcd34d; }
.enx-set-help { font-size: 0.8rem; color: var(--enx-muted); margin: 0; line-height: 1.5; }

/* One-click schedule presets on cron cards */
.enx-set-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.enx-set-preset { border: 1px solid var(--enx-border-strong); background: var(--enx-surface);
    color: var(--enx-muted); font-size: 0.76rem; font-weight: 600; border-radius: 999px; padding: 0.24rem 0.7rem;
    cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.enx-set-preset:hover:not(:disabled) { border-color: var(--enx-set-accent, var(--enx-teal)); color: var(--enx-ink); }
.enx-set-preset.active { background: color-mix(in srgb, var(--enx-set-accent, #3b82f6) 12%, transparent);
    border-color: color-mix(in srgb, var(--enx-set-accent, #3b82f6) 55%, transparent);
    color: var(--enx-set-accent-ink, var(--enx-teal-ink)); }
.enx-set-preset:disabled { opacity: 0.5; cursor: not-allowed; }

.enx-set-editor { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; }
.enx-set-input { position: relative; flex: 1 1 auto; min-width: 0; }
.enx-set-input.has-unit input { padding-right: 4.4rem; }
/* Bootstrap's inline invalid icon collides with the unit suffix (SEC/CODES/…);
   the red border + message below already convey the error. */
.enx-set-input.has-unit input.is-invalid { background-image: none; }
.enx-set-input.is-mono input { font-family: ui-monospace, "Consolas", monospace; letter-spacing: 0.04em; }
/* Numeric settings carry a browser stepper on the right edge of the input. The unit suffix
   used to be absolutely positioned inside that same space, so the arrows were drawn on top
   of the label. For these inputs the label moves outside the box, while the stepper stays. */
.enx-set-input:has(input[type="number"]) { display: flex; align-items: center; gap: 0.4rem; }
.enx-set-input:has(input[type="number"]) input { flex: 1 1 auto; min-width: 0; padding-right: 0.75rem; }
.enx-set-input:has(input[type="number"]) .enx-set-unit { position: static; transform: none;
    flex-shrink: 0; pointer-events: auto; }
/* Native date picker: the calendar button is the affordance, so make it visible rather than
   the near-invisible default, and match the dark theme where the browser can't. */
.enx-set-input input[type="date"] { min-height: 2.35rem; }
.enx-set-input input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: 0.55; padding: 0.15rem; border-radius: 4px; }
.enx-set-input input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1; background-color: rgba(0, 138, 192, 0.12); }
[data-theme="dark"] .enx-set-input input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); opacity: 0.65; }
/* The dropdown replaces the textbox, so it has to fill the same slot the input did. */
.enx-set-input > .enx-select { width: 100%; }
.enx-set-unit { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--enx-muted); pointer-events: none; }
.enx-set-save { flex-shrink: 0; min-width: 4.6rem; }
.enx-set-revert { flex-shrink: 0; font-size: 0.8rem; text-decoration: none; padding: 0.25rem 0.2rem; color: var(--enx-muted); }
.enx-set-revert:hover { color: var(--enx-ink); }

/* Email-list editor (IT Failure / Contract Admin recipients): several stacked rows plus an
   "Add email" affordance, so it needs its own column layout instead of the single-input
   row `.enx-set-editor` was built for — otherwise Save centers against the whole stack
   instead of sitting under it. */
.enx-set-editor.is-emaillist { flex-wrap: wrap; align-items: flex-start; }
.enx-set-editor.is-emaillist .enx-set-input { flex-basis: 100%; }
/* margin-left:auto on Save AND Revert would split the free space between both auto
   margins, so Save sits further left whenever Revert appears next to it. Put the auto
   margin only on the first of the two so the pair always sits flush against the right
   edge together, keeping Save's position stable whether or not Revert is present. */
.enx-set-editor.is-emaillist .enx-set-save { margin-left: auto; }
.enx-set-editor.is-emaillist .enx-set-save ~ .enx-set-revert { margin-left: 0; }
.enx-emaillist { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.enx-emailrow { display: flex; align-items: center; gap: 0.5rem; }
.enx-emailrow .form-control { flex: 1 1 auto; min-width: 0; }
.enx-emailrow-remove { flex-shrink: 0; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
    border: 1px solid var(--enx-border); border-radius: 8px; background: var(--enx-surface);
    color: var(--enx-muted); cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; }
.enx-emailrow-remove:hover:not(:disabled) { border-color: #e11d48; color: #e11d48; background: rgba(225, 29, 72, 0.07); }
.enx-emailrow-remove:disabled { opacity: 0.5; cursor: not-allowed; }
.enx-emaillist-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem;
    border: 1px dashed var(--enx-border-strong); border-radius: 8px; background: transparent;
    color: var(--enx-set-accent-ink, var(--enx-teal-ink)); font-size: 0.8rem; font-weight: 600;
    padding: 0.35rem 0.8rem; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.enx-emaillist-add:hover:not(:disabled) { border-style: solid; background: color-mix(in srgb, var(--enx-set-accent, #3b82f6) 8%, transparent); }
.enx-emaillist-add:disabled { opacity: 0.5; cursor: not-allowed; }

.enx-set-error { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: #b3261e; }
html[data-theme="dark"] .enx-set-error { color: #fb7185; }
.enx-set-nextrun { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
    font-size: 0.78rem; color: var(--enx-set-accent-ink, var(--enx-teal-ink));
    background: color-mix(in srgb, var(--enx-set-accent, #3b82f6) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--enx-set-accent, #3b82f6) 22%, transparent);
    border-radius: 999px; padding: 0.28rem 0.75rem; }
.enx-set-nextrun strong { font-variant-numeric: tabular-nums; }

/* Automation-schedule cards only: trigger the job now, and say what it did last time.
   The chip mirrors .enx-set-nextrun's shape so "next run" and "last run" read as a pair. */
.enx-set-runrow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.enx-set-runnow { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.enx-set-lastrun { display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.74rem; font-weight: 600; color: var(--enx-muted);
    background: rgba(141, 163, 196, 0.1); border: 1px solid var(--enx-border);
    border-radius: 999px; padding: 0.2rem 0.6rem; }
.enx-set-lastrun svg { color: #10b981; flex-shrink: 0; }
.enx-set-lastrun.is-failed { color: #b3261e; background: rgba(225, 29, 72, 0.08);
    border-color: rgba(225, 29, 72, 0.3); }
.enx-set-lastrun.is-failed svg { color: currentColor; }
html[data-theme="dark"] .enx-set-lastrun svg { color: #34d399; }
html[data-theme="dark"] .enx-set-lastrun.is-failed { color: #fb7185; }
/* The outcome sentence itself. Muted for a normal run; the failure case borrows the
   validation-error red already used on this page so both read as "needs attention". */
.enx-set-lastdetail { font-size: 0.74rem; line-height: 1.5; color: var(--enx-muted); }
.enx-set-lastdetail.is-failed { color: #b3261e; }
html[data-theme="dark"] .enx-set-lastdetail.is-failed { color: #fb7185; }
/* Reuses the loader ring's spin so the running state matches the rest of the app. */
.enx-set-runspin { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: enx-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .enx-set-runspin { animation-duration: 2s; } }

.enx-set-cronref summary { cursor: pointer; font-size: 0.74rem; font-weight: 600; color: var(--enx-muted); user-select: none; }
.enx-set-cronref summary:hover { color: var(--enx-ink); }
.enx-set-cronref-body { margin-top: 0.45rem; font-size: 0.76rem; color: var(--enx-muted); line-height: 1.6;
    background: rgba(141, 163, 196, 0.08); border: 1px dashed var(--enx-border-strong);
    border-radius: 10px; padding: 0.6rem 0.8rem; }
.enx-set-cronref-body code { font-size: 0.72rem; color: var(--enx-ink); background: var(--enx-surface);
    border: 1px solid var(--enx-border); border-radius: 4px; padding: 0.02rem 0.3rem; }

.enx-set-foot { display: flex; align-items: center; gap: 0.75rem; font-size: 0.72rem; color: var(--enx-muted);
    border-top: 1px dashed var(--enx-border); padding-top: 0.55rem; margin-top: 0.15rem; }

.enx-filelist { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.85rem; }
.enx-filechip { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem;
    border: 1px solid var(--enx-border); border-radius: 9px; background: var(--enx-surface); }
.enx-fileicon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 7px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; }
.enx-fileicon-pdf { background: #e4574c; }
.enx-fileicon-doc { background: #2b6cb0; }
.enx-fileicon-xls { background: #2f855a; }
.enx-fileicon-txt { background: #64748b; }
.enx-fileicon-img { background: #8b5cf6; }
.enx-fileicon-gen { background: #475569; }
.enx-filename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.85rem; font-weight: 500; color: var(--enx-ink); }
.enx-fileremove { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--enx-muted);
    cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease; }
.enx-fileremove:hover { background: #dc2626; color: #fff; transform: scale(1.12); box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.5); }
.enx-fileremove:active { transform: scale(0.96); }

/* ── Contacts ───────────────────────────────────────────────────────────── */
.enx-contact-card { border: 1px solid var(--enx-border); border-radius: 12px; padding: 0.85rem 1rem 0.95rem;
    margin-bottom: 0.75rem; background: var(--enx-card-solid); transition: border-color .15s ease, box-shadow .15s ease; }
.enx-contact-card.is-primary { border-color: rgba(59, 130, 246, 0.5); box-shadow: inset 3px 0 0 var(--enx-teal); }
.enx-contact-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.55rem; }
.enx-contact-title { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--enx-muted); }
.enx-primary-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; cursor: pointer;
    font-size: 0.8rem; font-weight: 600; color: var(--enx-muted); transition: color .12s ease; }
.enx-primary-toggle:hover { color: var(--enx-teal-ink); }
.enx-primary-toggle.active { color: var(--enx-teal-ink); }
.enx-primary-toggle .form-check-input { margin: 0; float: none; flex-shrink: 0; cursor: pointer; }
.enx-contact-remove { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--enx-muted);
    cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease; }
.enx-contact-remove:hover { background: #dc2626; color: #fff; transform: scale(1.12); box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.5); }
.enx-contact-remove:active { transform: scale(0.96); }
/* Per-contact Salesforce role assignment (each role to one contact; cross-synced). */
.enx-roles-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;
    padding-top: 0.7rem; border-top: 1px dashed var(--enx-border); }
.enx-roles-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--enx-muted); margin-right: 0.15rem; }
.enx-role-chip { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.32rem 0.65rem;
    border: 1px solid var(--enx-border-strong); border-radius: 999px; cursor: pointer; user-select: none;
    font-size: 0.8rem; font-weight: 600; color: var(--enx-muted); background: var(--enx-surface);
    transition: background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease; }
.enx-role-chip:hover { border-color: var(--enx-teal); }
.enx-role-chip.active { background: rgba(59, 130, 246, 0.12); border-color: var(--enx-teal); color: var(--enx-teal-ink); }
.enx-role-chip.disabled { opacity: 0.45; cursor: not-allowed; }
.enx-role-chip.disabled:hover { border-color: var(--enx-border-strong); }
.enx-role-chip .form-check-input { margin: 0; float: none; flex-shrink: 0; cursor: pointer; }
.enx-role-chip.disabled .form-check-input { cursor: not-allowed; }

/* ── Inline validation ──────────────────────────────────────────────────── */
.enx-field-error, .enx-taxupload-error { display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; color: #dc2626; margin-top: 0.22rem; }
.enx-field-error::before, .enx-taxupload-error::before {
    content: ""; flex-shrink: 0; width: 13px; height: 13px;
    background: center / contain no-repeat 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='%23dc2626' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); }
.enx-invalid, .enx-invalid:focus { border-color: #dc2626 !important; }
/* Narrow input for short fixed-width values (e.g. DUNS XX-XXX-XXXX). */
.enx-input-compact { max-width: 220px; }
.enx-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important; }

/* Branded tippy theme for rich tooltips (D&B lookup button). Neutral charcoal (not navy)
   so it sits naturally on both the light theme and the studio-black dark theme. */
.tippy-box[data-theme~='enx'] { background: linear-gradient(150deg, #23262d 0%, #16181d 100%);
    color: #eceef2; border-radius: 11px; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Long unbroken tokens — Salesforce IDs, JSON error payloads, URLs — have no space to wrap
       at, so without these the text runs straight out of the rounded box (seen on the Background
       Jobs page: an 18-digit Utility Account id split the border).
       Wrapping only: NO max-width override here. tippy sets its own max-width inline from the
       per-binding `maxWidth` option, and an !important here beat all of them — silently widening
       every enx tooltip across ~25 pages, not just the one that needed it.
       NO max-height either: these tooltips are created without `interactive: true`, so the box
       has pointer-events:none and a scrollbar inside it could never be grabbed — capping the
       height made anything past the cap permanently unreachable, which is worse than a tall
       tooltip. Server-side truncation is what keeps these short (see ProblemJobRowDto.LastError). */
    overflow-wrap: anywhere; }
.tippy-box[data-theme~='enx'] .tippy-content { padding: 0.65rem 0.8rem; }
/* `~=` matches whole words, so the rule above does NOT cover data-theme="enx-error" — the UAN
   grid's error tooltips, which carry the rawest Salesforce payloads of all. Give them the same
   wrapping. */
.tippy-box[data-theme~='enx-error'] { overflow-wrap: anywhere; }

/* Error tippy theme for the UAN grid (red-accented, light card; dark card in dark mode). */
.tippy-box[data-theme~='enx-error'] { background: #fff; color: #b42318; border: 1px solid #fca5a5;
    border-radius: 10px; box-shadow: 0 12px 30px rgba(190, 18, 60, 0.22), 0 2px 8px rgba(190, 18, 60, 0.12); }
.tippy-box[data-theme~='enx-error'] .tippy-content { padding: 0.5rem 0.65rem; }
html[data-theme="dark"] .tippy-box[data-theme~='enx-error'] { background: #251a1f; color: #fca5a5;
    border-color: rgba(244, 63, 94, 0.65); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); }

/* Diamond arrows for both themes: tippy's stock arrow is a border-triangle that can
   only be filled — the box outline stops dead at it. Replace it with a rotated square
   that has its own background AND a 1px border on the two exposed sides, so the outline
   runs continuously around the tip in every placement and both color themes. */
.tippy-box[data-theme~='enx'] > .tippy-arrow::before,
.tippy-box[data-theme~='enx-error'] > .tippy-arrow::before {
    content: ""; position: absolute;
    width: 10px; height: 10px;
    border-style: solid;
    transform: rotate(45deg);
    /* tippy's base css sets a per-placement transform-origin (e.g. "center left") for its
       own triangle; rotating our square around that edge shoves left/right arrows behind
       the box. Rotate around the center so the diamond stays put in every placement. */
    transform-origin: center;
}
/* Placement geometry: which half pokes out of the box + which two sides get the border */
.tippy-box[data-theme~='enx'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='enx-error'][data-placement^='top'] > .tippy-arrow::before { left: 3px; top: auto; bottom: -5px; border-width: 0 1px 1px 0; }
.tippy-box[data-theme~='enx'][data-placement^='bottom'] > .tippy-arrow::before,
.tippy-box[data-theme~='enx-error'][data-placement^='bottom'] > .tippy-arrow::before { left: 3px; bottom: auto; top: -5px; border-width: 1px 0 0 1px; }
.tippy-box[data-theme~='enx'][data-placement^='left'] > .tippy-arrow::before,
.tippy-box[data-theme~='enx-error'][data-placement^='left'] > .tippy-arrow::before { top: 3px; left: auto; right: -5px; border-width: 1px 1px 0 0; }
.tippy-box[data-theme~='enx'][data-placement^='right'] > .tippy-arrow::before,
.tippy-box[data-theme~='enx-error'][data-placement^='right'] > .tippy-arrow::before { top: 3px; right: auto; left: -5px; border-width: 0 0 1px 1px; }
/* Colors: match each theme's box background + border (placement rules above have higher
   specificity than tippy's own placement rules, so its triangle colors can't leak in). */
.tippy-box[data-theme~='enx'][data-placement] > .tippy-arrow::before { background: #1a1c22; border-color: rgba(255, 255, 255, 0.16); }
.tippy-box[data-theme~='enx-error'][data-placement] > .tippy-arrow::before { background: #fff; border-color: #fca5a5; }
html[data-theme="dark"] .tippy-box[data-theme~='enx-error'][data-placement] > .tippy-arrow::before { background: #251a1f; border-color: rgba(244, 63, 94, 0.65); }
.enx-tip-err { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.79rem; line-height: 1.4; font-weight: 500; }
.enx-tip-err svg { flex-shrink: 0; color: #dc2626; margin-top: 1px; }
.enx-tip-title { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.01em; }
.enx-tip-title.enx-tip-ok { color: #93c5fd; }
.enx-tip-sub { margin-top: 0.3rem; color: #b7c6dc; font-size: 0.76rem; line-height: 1.4; max-width: 250px; }
.enx-tip-list { margin: 0.4rem 0 0.1rem; padding: 0; list-style: none; }
.enx-tip-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: #e7eef8; padding: 0.12rem 0; }
.enx-tip-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.enx-tip-spin { width: 12px; height: 12px; border: 2px solid rgba(231, 238, 248, 0.35); border-top-color: #93c5fd;
    border-radius: 50%; display: inline-block; animation: enx-tip-spin 0.7s linear infinite; }
@keyframes enx-tip-spin { to { transform: rotate(360deg); } }
/* Selection-group error (dropdowns / radios / checkbox groups), per the design reference. */
.enx-group-error { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: #dc2626; margin-top: 0.45rem; }
.enx-group-error svg { flex-shrink: 0; }
/* When a selection group is invalid, tint its label and unselected options red. */
.is-invalid-group { color: #dc2626 !important; }
.enx-role-chip.is-invalid-group { border-color: #dc2626; color: #dc2626; }
.enx-role-chip.is-invalid-group:hover { border-color: #dc2626; }
.enx-primary-toggle.is-invalid-group .form-check-input { outline: 2px solid rgba(220, 38, 38, 0.6); outline-offset: 1px; border-radius: 50%; }
.enx-grid-uan::after, .enx-grid-lead::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--enx-border); }
.enx-grid-actions { right: 0; text-align: center; white-space: nowrap; }
.enx-grid-actions::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: var(--enx-border); }
/* Warning chip + remove button: one centered flex group, identical circle sizing. */
.enx-grid-actions-wrap { display: inline-flex; align-items: center; justify-content: center; gap: 5px; vertical-align: middle; }

/* Leading column: row number <-> checkbox swap (GitHub-style) */
.enx-grid-rownum { color: var(--enx-muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.enx-grid-check { display: none; }
.enx-uan-grid tbody tr:hover .enx-grid-rownum,
.enx-uan-grid tbody tr.enx-row-selected .enx-grid-rownum { display: none; }
.enx-uan-grid tbody tr:hover .enx-grid-check,
.enx-uan-grid tbody tr.enx-row-selected .enx-grid-check { display: inline-block; }

/* Read-only enriched service-address cell */
.enx-grid-svcaddr { color: var(--enx-muted); font-size: 0.8rem; max-width: 240px; vertical-align: middle; }
/* Clamp the address to two lines with a tight line-height so the row stays compact.
   Full address is on the hover title. */
.enx-svcaddr-text {
    line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ESI ID status chip (from Enrich) shown in its own Status column */
.enx-svc-status { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; white-space: nowrap; }
.enx-svc-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.enx-svc-active { color: #047857; background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.22); }
.enx-svc-deenergized { color: #b45309; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.28); }
.enx-svc-inactive { color: #b91c1c; background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.28); }
html[data-theme="dark"] .enx-svc-active { color: #34d399; }
html[data-theme="dark"] .enx-svc-deenergized { color: #fbbf24; }
html[data-theme="dark"] .enx-svc-inactive { color: #f87171; }
.enx-grid-svcaddr.enx-pending { font-style: italic; opacity: 0.7; }

/* Remove-row button: quiet by default, danger on hover */
.enx-grid-rowdel { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; background: transparent; color: var(--enx-muted); border-radius: 50%; width: 24px; height: 24px; padding: 0; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease; }
.enx-grid-rowdel:hover { background: #e11d48; color: #fff; transform: scale(1.12); box-shadow: 0 4px 10px -2px rgba(225, 29, 72, 0.5); }
.enx-grid-rowdel:active { transform: scale(0.96); }

/* Empty state */
.enx-grid-empty { text-align: center; color: var(--enx-muted); padding: 2rem 1rem; font-size: 0.9rem; }

/* ---------- Admin repair ---------- */
.enx-activity {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--enx-border);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
}

.enx-activity.failed {
    border-color: #fecaca;
    background: #fef9f9;
}

html[data-theme="dark"] .enx-activity.failed {
    border-color: rgba(244, 63, 94, 0.4);
    background: rgba(225, 29, 72, 0.08);
}

.enx-payload {
    background: rgba(2, 8, 20, 0.8);
    border: 1px solid var(--enx-border);
    color: #a5f3eb;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-size: 0.74rem;
    margin: 0.4rem 0 0;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---------- eSignature timeline ---------- */
.enx-sign-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: relative;
    padding-left: 0.25rem;
}

.enx-sign-step {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    color: var(--enx-muted);
    font-size: 0.9rem;
}

.enx-sign-step strong { color: var(--enx-ink); }

.enx-sign-dot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 3px;
    border-radius: 50%;
    border: 3px solid var(--enx-border-strong);
    background: var(--enx-card-solid);
}

.enx-sign-step.done .enx-sign-dot {
    border-color: var(--enx-teal-dark);
    background: var(--enx-teal);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}

/* ===== eSignature stage (redesigned) ===== */
.enx-sign-badge {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
    padding: 0.3rem 0.7rem 0.3rem 0.6rem; border-radius: 999px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
    border: 1px solid transparent;
}
.enx-sign-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.enx-sign-badge-amber { color: #b45309; background: rgba(245, 158, 11, 0.13); border-color: rgba(245, 158, 11, 0.4); }
.enx-sign-badge-blue  { color: var(--enx-teal-ink); background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.4); }
.enx-sign-badge-green { color: #047857; background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.4); }
.enx-sign-badge-slate { color: var(--enx-muted); background: rgba(100, 116, 139, 0.12); border-color: var(--enx-border-strong); }
.enx-sign-badge-amber .enx-sign-badge-dot { animation: enx-badge-blink 1.6s ease-in-out infinite; }
@keyframes enx-badge-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
html[data-theme="dark"] .enx-sign-badge-amber { color: #fbbf24; }
html[data-theme="dark"] .enx-sign-badge-green { color: #34d399; }

/* Connected vertical timeline */
.enx-timeline { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.enx-tl-item { display: flex; gap: 0.85rem; position: relative; padding-bottom: 1.5rem; }
.enx-tl-item:last-child { padding-bottom: 0; }
.enx-tl-item:not(:last-child)::before {
    content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px;
    background: var(--enx-border-strong); border-radius: 2px;
}
.enx-tl-item.done:not(:last-child)::before { background: var(--enx-teal); }
.enx-tl-marker {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--enx-border-strong); background: var(--enx-card-solid); color: var(--enx-muted);
}
.enx-tl-item.done .enx-tl-marker { background: var(--enx-teal); border-color: var(--enx-teal-dark); color: #fff; }
.enx-tl-item.current .enx-tl-marker { border-color: var(--enx-amber); }
.enx-tl-pip { width: 9px; height: 9px; border-radius: 50%; background: var(--enx-amber); }
.enx-tl-item.current .enx-tl-marker::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid var(--enx-amber); transform-origin: center;
    animation: enx-step-pulse 1.8s ease-out infinite;
}
.enx-tl-body { display: flex; flex-direction: column; gap: 0.12rem; padding-top: 0.2rem; min-width: 0; }
.enx-tl-title { font-weight: 700; font-size: 0.92rem; color: var(--enx-ink); }
.enx-tl-item.pending .enx-tl-title { color: var(--enx-muted); font-weight: 600; }
.enx-tl-item.current .enx-tl-title { color: var(--enx-ink); }
.enx-tl-meta { font-size: 0.82rem; color: var(--enx-muted); }
@media (prefers-reduced-motion: reduce) {
    .enx-tl-item.current .enx-tl-marker::after { animation: none; opacity: 0.6; }
    .enx-sign-badge-amber .enx-sign-badge-dot { animation: none; }
}

.enx-sign-divider { height: 1px; background: var(--enx-border); margin: 1.3rem 0; }

/* (The boxed .enx-reprice-note for the post-expiry re-price reminder (D-085) was retired
   2026-08-03 — it now uses the shared .enx-banner enx-banner-warning status line.) */
.enx-terms-unavailable { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--enx-muted); margin: 0; }
.enx-terms-unavailable svg { flex-shrink: 0; color: var(--enx-muted); }
.enx-terms-unavailable strong { color: var(--enx-label); font-weight: 600; }
.enx-sign-help { font-size: 0.88rem; color: var(--enx-muted); line-height: 1.5; margin: 0 0 1rem; }
.enx-sign-help strong { color: var(--enx-label); font-weight: 700; }
.enx-sign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.enx-bi { margin-right: 6px; vertical-align: -3px; }

/* Margin Analysis review panel (D-128) — the before/after/change figures the broker decides on.
   auto-fit rather than three fixed columns so the three numbers stack on a phone instead of
   squeezing to two characters wide; a commission the broker cannot read is not a review. */
.enx-margin-review-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem; margin: 0.5rem 0 0.75rem;
}
.enx-margin-review-figure { font-size: 1.05rem; font-weight: 700; color: var(--enx-label); line-height: 1.3; }
/* Direction is a supporting cue, never the only one — the figures themselves say which way it
   moved, so a colour-blind broker loses nothing. */
.enx-margin-review-figure.is-down { color: #b42318; }
.enx-margin-review-figure.is-up { color: #067647; }
html[data-theme="dark"] .enx-margin-review-figure.is-down { color: #fca5a5; }
html[data-theme="dark"] .enx-margin-review-figure.is-up { color: #6ee7b7; }
/* Margin Analysis tab, Change column. Same red as the review panel above so the list and the
   deal agree; scoped to its own class because the table cell is not a review figure. */
.enx-margin-delta-down { color: #b42318; }
html[data-theme="dark"] .enx-margin-delta-down { color: #fca5a5; }
.enx-margin-review-why { margin: 0 0 0.25rem; padding-left: 1.1rem; font-size: 0.85rem; color: var(--enx-muted); }
.enx-margin-review-why li { margin-bottom: 0.2rem; }

/* Deals / Margin Analysis tab strip (D-128) */
.enx-deal-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--enx-border); margin-bottom: 1rem; }
.enx-deal-tab {
    border: 0; background: transparent; color: var(--enx-muted);
    font-size: 0.88rem; font-weight: 600; padding: 0.55rem 0.9rem; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: color .12s, border-color .12s;
}
.enx-deal-tab:hover { color: var(--enx-label); }
.enx-deal-tab.active { color: var(--enx-teal); border-bottom-color: var(--enx-teal); }
.enx-deal-tab-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem;
    padding: 0 0.35rem; height: 1.25rem; border-radius: 999px;
    background: #b54708; color: #ffffff; font-size: 0.7rem; font-weight: 700; line-height: 1;
}

/* "Margin Review" row badge — shown on BOTH tabs, beside the status badge, never instead of it */
.enx-margin-badge {
    display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
    background: #fef0c7; color: #b54708; border: 1px solid #fedf89;
}
.enx-margin-badge.is-overdue { background: #fee4e2; color: #b42318; border-color: #fecdca; }
/* "Awaiting Costs" (D-128b) — informational, not a warning. Blue rather than the amber base:
   nothing is wrong and nothing is owed by the broker, so it must not read like the two above. */
.enx-margin-badge.is-waiting { background: #e0f2fe; color: #075985; border-color: #bae6fd; }

/* Dark theme. Every other pill in this file carries its own dark rule (see .enx-pill-* above) —
   the light pastels are opaque, so without these three the badges would sit on a dark row as
   bright white-ish chips. Translucent fills over the row colour, matching the pill convention. */
html[data-theme="dark"] .enx-margin-badge {
    background: rgba(251, 191, 36, 0.14); color: #fcd34d; border-color: rgba(251, 191, 36, 0.35);
}
html[data-theme="dark"] .enx-margin-badge.is-overdue {
    background: rgba(248, 113, 113, 0.15); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35);
}
html[data-theme="dark"] .enx-margin-badge.is-waiting {
    background: rgba(56, 189, 248, 0.14); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.35);
}

/* Action button variants — soft tinted pills, consistent with enx-btn-outline/ghost */
.enx-btn-danger, .enx-btn-warning {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 600;
    font-size: 0.875rem;
    padding: 0.4rem 1rem; border: 1px solid transparent;
    transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.13s ease, box-shadow 0.13s ease;
}
/* Small variant so these align with .btn-sm outline buttons beside them */
.enx-btn-danger.btn-sm, .enx-btn-warning.btn-sm { padding: 0.3rem 0.9rem; font-size: 0.82rem; }
/* enx-btn-outline's / enx-btn-primary's own padding overrides Bootstrap's .btn-sm — give
   them the same small metrics as the danger/warning pills so mixed pairs sit flush. */
.enx-btn-outline.btn-sm,
.enx-btn-primary.btn-sm,
.enx-btn-ghost.btn-sm,
.enx-btn-accent.btn-sm {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.3rem 0.9rem; font-size: 0.82rem;
}
.enx-btn-danger { color: #e11d48; background: rgba(225, 29, 72, 0.07); border-color: rgba(225, 29, 72, 0.32); }
.enx-btn-danger:hover:not(:disabled) {
    color: #be123c; background: rgba(225, 29, 72, 0.13); border-color: #e11d48;
    transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(225, 29, 72, 0.4);
}
.enx-btn-warning { color: #b45309; background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.38); }
.enx-btn-warning:hover:not(:disabled) {
    color: #92400e; background: rgba(245, 158, 11, 0.18); border-color: var(--enx-amber);
    transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(245, 158, 11, 0.45);
}
.enx-btn-danger:active:not(:disabled), .enx-btn-warning:active:not(:disabled) { transform: translateY(0); }
.enx-btn-danger:disabled, .enx-btn-warning:disabled { opacity: 0.5; }
html[data-theme="dark"] .enx-btn-danger { color: #fb7185; }

/* Solid danger variant: a real filled button (used in the deal header) so a destructive action
   doesn't read as a status pill next to the StatusBadge. */
.enx-btn-danger-solid { color: #fff; background: #e11d48; border-color: #e11d48; }
.enx-btn-danger-solid:hover:not(:disabled) { color: #fff; background: #be123c; border-color: #be123c; }
html[data-theme="dark"] .enx-btn-danger-solid { color: #fff; }

/* Deal-header status: a labeled group, separated from the action buttons so the pill reads as
   state (not another button). A thin divider sets it apart. */
.enx-header-status {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding-left: 0.85rem; margin-left: 0.35rem;
    border-left: 1px solid var(--enx-border);
}
.enx-header-status-label {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--enx-muted);
}
html[data-theme="dark"] .enx-btn-warning { color: #fbbf24; }

/* Contract number ("CID") — the key internal teams use for deal processing. */
.enx-contract-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.22rem 0.7rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--enx-teal-ink);
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.25);
}
html[data-theme="dark"] .enx-contract-chip {
    color: #9fdb52;
    background: rgba(159, 219, 82, 0.1);
    border-color: rgba(159, 219, 82, 0.25);
}
/* Click-to-copy affordance for the header chip. */
.enx-contract-chip-btn { cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.enx-contract-chip-btn:hover { background: rgba(20, 184, 166, 0.18); border-color: rgba(20, 184, 166, 0.45); }
html[data-theme="dark"] .enx-contract-chip-btn:hover { background: rgba(159, 219, 82, 0.18); border-color: rgba(159, 219, 82, 0.45); }
.enx-rail-contract { font-variant-numeric: tabular-nums; color: var(--enx-teal-ink); }
html[data-theme="dark"] .enx-rail-contract { color: #9fdb52; }
/* Click-to-copy contract number in the deal-summary rail (button styled as inline text). */
.enx-contract-copy {
    border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
    color: inherit; text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px; text-decoration-color: rgba(20, 184, 166, 0.5);
}
.enx-contract-copy:hover { text-decoration-style: solid; }

/* Small inline help icon beside a form label — shows a native tooltip on hover/focus. */
.enx-label-help {
    display: inline-grid; place-items: center;
    width: 15px; height: 15px; margin-left: 0.3rem;
    vertical-align: middle; position: relative; top: -1px;
    border-radius: 50%; cursor: help;
    color: var(--enx-muted); border: 1px solid var(--enx-border-strong);
    font-size: 0.62rem; font-weight: 700; line-height: 1;
}
.enx-label-help:hover, .enx-label-help:focus-visible { color: var(--enx-ink); border-color: var(--enx-muted); }

/* Touch hit target (2026-08-06). The circle is 15px because that is the size it should LOOK;
   15px is also less than half the 44px a finger needs, so on a phone the Tax ID help was being
   missed as often as it was being ignored. The overlay grows the tappable area without moving
   the glyph or reflowing the label.

   Wide but not tall, deliberately. 44px in BOTH directions is the guideline, but this icon sits
   on a label line with an input ~13px below its centre and the previous field ~22px above: a
   44px-tall overlay is a positioned element over a static one, so it would paint on top and
   swallow taps on the top edge of the field below — trading a tooltip you can't open for a
   field you can't focus. Horizontally there is nothing to collide with (label text ends to the
   left, empty label to the right), so the full 44px goes there and the height is capped to the
   label's own line box. ~4.7x the original area, no new dead zones.
   -webkit-tap-highlight-color stops iOS flashing a grey block the size of the overlay. */
.enx-label-help { -webkit-tap-highlight-color: transparent; }
@media (hover: none) and (pointer: coarse) {
    .enx-label-help::after {
        content: ""; position: absolute; top: 50%; left: 50%;
        width: 44px; height: 24px; transform: translate(-50%, -50%);
    }
}

.enx-confirm-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--enx-grad-primary);
    color: #fff;
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.4);
}

/* Dark: completion celebrates in Gexa green (matches the CTA + done steps). */
html[data-theme="dark"] .enx-confirm-icon {
    background: linear-gradient(135deg, #8fd438 0%, #63a318 100%);
    color: #0a1322;
    box-shadow: 0 12px 36px rgba(120, 190, 32, 0.4);
}

/* ---------- Blocked-UANs panel (billing-system eligibility failure) ---------- */
.enx-uanblock-panel {
    /* De-boxed 2026-07-18: accent stripe + soft left-fade instead of a full
       bordered card, keeping error prominence without the heavy box. */
    border: 0;
    border-left: 3px solid #e11d48;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(90deg, rgba(225, 29, 72, 0.07), rgba(225, 29, 72, 0) 65%);
    padding: 0.7rem 0.95rem;
    animation: enx-phase-in .25s ease both;
}
.enx-uanblock-head { display: flex; align-items: flex-start; gap: 0.7rem; }
.enx-uanblock-ico {
    /* Bare colored icon (no tile box behind it) — de-boxed 2026-07-18. */
    flex-shrink: 0; display: grid; place-items: center;
    color: #e11d48; margin-top: 1px;
}
.enx-uanblock-title { font-size: 0.95rem; font-weight: 700; color: #be123c; }
.enx-uanblock-text { font-size: 0.84rem; color: var(--enx-label); margin-top: 0.15rem; }
.enx-uanblock-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.enx-uanblock-chip {
    font-family: ui-monospace, "Consolas", monospace;
    font-size: 0.8rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #be123c;
    background: rgba(225, 29, 72, 0.09);
    border: 1px solid rgba(225, 29, 72, 0.3);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}
html[data-theme="dark"] .enx-uanblock-panel { background: linear-gradient(90deg, rgba(225, 29, 72, 0.10), rgba(225, 29, 72, 0) 65%); }
html[data-theme="dark"] .enx-uanblock-ico { color: #fb7185; }
html[data-theme="dark"] .enx-uanblock-title { color: #fda4af; }
html[data-theme="dark"] .enx-uanblock-chip { color: #fda4af; background: rgba(225, 29, 72, 0.13); }

/* ---------- Manual-review (custom pricing) deal view ---------- */
/* Hero: broker-safe status panel — informational blue accent, no internal reasons. */
.enx-manual-hero {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-left: 4px solid var(--enx-teal);
}
.enx-manual-ico {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid; place-items: center;
    color: var(--enx-teal-ink);
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.enx-manual-title { font-size: 1.15rem; font-weight: 700; color: var(--enx-ink); margin: 0.15rem 0 0.35rem; }
.enx-manual-msg { font-size: 0.95rem; color: var(--enx-label); margin: 0 0 0.3rem; }
.enx-manual-sub { font-size: 0.84rem; color: var(--enx-muted); margin: 0; }

/* Deal-facts strip: replaces the summary rail (which only repeated the cards below). */
.enx-manual-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.enx-manual-stat {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--enx-border); border-radius: 12px;
    background: var(--enx-card-solid);
}
.enx-manual-stat-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--enx-muted); }
.enx-manual-stat-value { font-size: 1rem; font-weight: 700; color: var(--enx-ink); font-variant-numeric: tabular-nums; }

/* Read-only details list: compact label-over-value tiles in a responsive grid, so the
   card height matches the little it holds instead of one sparse row per field. */
.enx-manual-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.9rem 2rem;
    margin: 0;
}
.enx-manual-list > div { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.enx-manual-list .enx-manual-span { grid-column: 1 / -1; }
.enx-manual-list dt { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--enx-muted); }
.enx-manual-list dd { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--enx-ink); overflow-wrap: anywhere; }
.enx-manual-contact-meta { font-weight: 500; color: var(--enx-muted); font-size: 0.85rem; }
.enx-manual-uan { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Card headers: icon chip + title (+ count), matching the dashboard card rhythm. */
.enx-manual-card-head {
    display: flex; align-items: center; gap: 0.55rem;
    margin-bottom: 0.9rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--enx-border);
}
.enx-manual-card-ico {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    color: var(--enx-teal-ink);
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.22);
}
html[data-theme="dark"] .enx-manual-card-ico {
    color: #9fdb52;
    background: rgba(159, 219, 82, 0.1);
    border-color: rgba(159, 219, 82, 0.22);
}

/* Wide read-only UAN table: slightly denser, no mid-value wrapping. */
.enx-manual-uan-table { font-size: 0.88rem; }
.enx-manual-uan-table th, .enx-manual-uan-table td { white-space: nowrap; }
.enx-manual-uan-table td.enx-manual-addr { white-space: normal; min-width: 200px; }

/* ---------- Impersonation banner ---------- */
.enx-impersonation-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(90deg, #92400e 0%, #b45309 55%, #d97706 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 2px 8px rgba(146, 64, 14, 0.35);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 500;
}

/* Pulsing "you are being watched" eye badge. */
.enx-imp-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    animation: enx-imp-pulse 2.2s ease-in-out infinite;
}

@keyframes enx-imp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
    55%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

.enx-imp-text {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* Impersonated user shown as a chip with a mini avatar. */
.enx-imp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.14rem 0.6rem 0.14rem 0.18rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.enx-imp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fff;
    color: #b45309;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    padding-top: 0.09em; /* optical centering (see .enx-user-avatar) */
    user-select: none;
}

.enx-imp-by { color: rgba(255, 255, 255, 0.75); font-weight: 400; }
.enx-imp-by strong { color: #fff; font-weight: 600; }

/* Return button: solid white so it's unmissable on the amber banner. */
.enx-imp-stop {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: #fff;
    color: #92400e;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    white-space: nowrap;
}

.enx-imp-stop:hover:not(:disabled) {
    background: #fff7ed;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.enx-imp-stop:active:not(:disabled) { transform: translateY(0); }
.enx-imp-stop:disabled { opacity: 0.7; cursor: default; }

@media (max-width: 640px) {
    .enx-imp-by { display: none; }
}

/* ---------- Toast notifications (js/toast.js) ----------
   Theme-aware surface cards (not solid color blocks): the card uses the app's
   card/ink/border tokens so it follows light/dark automatically; severity shows as
   a left accent bar + tinted icon + countdown bar (via --toast-accent). */
#enx-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.enx-toast {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px 13px 18px;
    border-radius: 14px;
    min-width: 320px;
    max-width: 440px;
    background: var(--enx-card-solid);
    border: 1px solid var(--enx-border);
    color: var(--enx-ink);
    box-shadow: 0 12px 32px -8px rgba(11, 21, 38, 0.28), 0 4px 12px -4px rgba(11, 21, 38, 0.14);
    pointer-events: auto;
    transform: translateX(120%) scale(0.96);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.21, 1.02, 0.55, 1.1), opacity 0.3s ease;
}

html[data-theme="dark"] .enx-toast {
    box-shadow: 0 14px 36px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Severity accent bar down the left edge. */
.enx-toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--toast-accent);
}

.enx-toast-show { transform: translateX(0) scale(1); opacity: 1; }
.enx-toast-hide { transform: translateX(120%) scale(0.96); opacity: 0; }

.enx-toast-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--toast-accent);
    background: color-mix(in srgb, var(--toast-accent) 14%, transparent);
}

.enx-toast-content { flex: 1; min-width: 0; padding-top: 2px; }
.enx-toast-summary { font-weight: 700; font-size: 0.87rem; letter-spacing: 0.01em; color: var(--enx-ink); }
.enx-toast-detail { font-size: 0.79rem; color: var(--enx-muted); margin-top: 2px; overflow-wrap: anywhere; }

.enx-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: none;
    border: none;
    color: var(--enx-muted);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.enx-toast-close:hover { color: var(--enx-ink); background: rgba(141, 163, 196, 0.16); }

/* Countdown bar along the bottom; toast.js pauses it on hover. */
.enx-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: color-mix(in srgb, var(--toast-accent) 55%, transparent);
    transform-origin: left;
    animation: enx-toast-countdown linear forwards;
}

@keyframes enx-toast-countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Severity accents — one variable drives the bar, icon tint, and countdown. */
.enx-toast-info    { --toast-accent: #3b82f6; }
.enx-toast-success { --toast-accent: #16a34a; }
.enx-toast-warning { --toast-accent: #f59e0b; }
.enx-toast-error   { --toast-accent: #e11d48; }

html[data-theme="dark"] .enx-toast-info    { --toast-accent: #60a5fa; }
html[data-theme="dark"] .enx-toast-success { --toast-accent: #8fd438; }
html[data-theme="dark"] .enx-toast-warning { --toast-accent: #fbbf24; }
html[data-theme="dark"] .enx-toast-error   { --toast-accent: #fb7185; }

/* ---------- Users admin page ---------- */
/* Role selection as toggleable chips (hidden checkbox inside the label). */
.enx-role-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.enx-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--enx-border-strong);
    background: transparent;
    color: var(--enx-muted);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, box-shadow 0.13s ease;
}

.enx-role-chip input { position: absolute; opacity: 0; pointer-events: none; }

.enx-role-chip:hover { border-color: rgba(59, 130, 246, 0.55); color: var(--enx-ink); }

.enx-role-chip:has(input:checked) {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.6);
    color: #2563eb;
    box-shadow: 0 1px 5px -2px rgba(59, 130, 246, 0.45);
}

.enx-role-chip:has(input:checked)::before { content: "✓"; font-weight: 800; }

.enx-role-chip:has(input:focus-visible) {
    outline: 2px solid rgba(59, 130, 246, 0.55);
    outline-offset: 2px;
}

html[data-theme="dark"] .enx-role-chip:has(input:checked) {
    color: #8ab6ff;
    background: rgba(59, 130, 246, 0.16);
}

/* Read-only role badges in the users table. */
.enx-role-badges { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }

.enx-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    background: rgba(141, 163, 196, 0.14);
    border: 1px solid var(--enx-border);
    color: var(--enx-ink);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Small avatar next to names (table rows + Edit-user header). */
.enx-tbl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--enx-grad-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    padding-top: 0.09em; /* optical centering (see .enx-user-avatar) */
    user-select: none;
}

html[data-theme="dark"] .enx-tbl-avatar {
    background: linear-gradient(135deg, #8fd438 0%, #63a318 100%);
    color: #0a1322;
}

.enx-user-cell { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; }

/* ---------- Support page ---------- */
.enx-support-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .enx-support-layout { grid-template-columns: minmax(0, 1fr); }
}

.enx-support-side { display: flex; flex-direction: column; gap: 1.25rem; }

/* Topic picker: pill chips with icons. */
.enx-support-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.enx-support-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--enx-border-strong);
    background: transparent;
    color: var(--enx-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.enx-support-cat:hover { border-color: var(--enx-teal); color: var(--enx-ink); }

.enx-support-cat.is-active {
    border-color: var(--enx-teal);
    background: color-mix(in srgb, var(--enx-teal) 12%, transparent);
    color: var(--enx-teal-ink);
}

.enx-support-cat-ico { display: inline-flex; }

.enx-req { color: #dc2626; }

.enx-support-count {
    text-align: right;
    font-size: 0.72rem;
    color: var(--enx-muted);
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.enx-support-copy-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--enx-muted);
}

/* "No rep configured" icon tile. */
.enx-support-noRep {
    width: 64px; height: 64px; margin: 0 auto;
    display: grid; place-items: center;
    border-radius: 18px;
    color: var(--enx-muted);
    background: rgba(141, 163, 196, 0.14);
    border: 1px solid var(--enx-border);
}

/* Rep card. */
.enx-support-rep-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }

.enx-support-rep-ava {
    width: 46px; height: 46px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    font-weight: 800; font-size: 1rem; color: #fff;
    background: linear-gradient(135deg, #78be20 0%, #4f8c12 100%);
    user-select: none;
}

.enx-support-rep-id { display: flex; flex-direction: column; min-width: 0; }
.enx-support-rep-name { font-weight: 700; color: var(--enx-ink); }
.enx-support-rep-sub { font-size: 0.76rem; color: var(--enx-muted); }

.enx-support-rep-row {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.4rem 0;
    font-size: 0.86rem; color: var(--enx-ink);
    border-top: 1px solid var(--enx-border);
    overflow-wrap: anywhere;
}
.enx-support-rep-row svg { color: var(--enx-muted); flex: none; }
.enx-support-rep-row a { color: var(--enx-teal-ink); text-decoration: none; }
.enx-support-rep-row a:hover { text-decoration: underline; }

/* Tips card. */
.enx-support-tips-title { font-size: 0.95rem; font-weight: 700; color: var(--enx-ink); margin-bottom: 0.6rem; }
.enx-support-tips ul { margin: 0 0 0.9rem; padding-left: 1.1rem; font-size: 0.84rem; color: var(--enx-muted); }
.enx-support-tips li { margin-bottom: 0.4rem; }
.enx-support-tips li strong { color: var(--enx-ink); }

.enx-support-sla {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    font-size: 0.8rem; color: var(--enx-teal-ink);
    background: color-mix(in srgb, var(--enx-teal) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--enx-teal) 24%, transparent);
}
.enx-support-sla svg { flex: none; }

/* Identity chip beside the "Edit user" heading. */
.enx-edit-who {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.75rem 0.2rem 0.25rem;
    border-radius: 999px;
    background: rgba(141, 163, 196, 0.12);
    border: 1px solid var(--enx-border);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--enx-ink);
}

/* ---------- Top bar ---------- */
.enx-top-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

.enx-global-search {
    flex: 1 1 auto;
    max-width: 420px;
    margin-bottom: 0;
}

.enx-global-search .enx-search {
    max-width: none;
    width: 100%;
}

/* Light theme: the global search reads as a soft inset pill against the glass topbar;
   focus swaps to a white field with the standard brand ring. */
html:not([data-theme="dark"]) .enx-global-search .enx-search {
    background: rgba(15, 23, 42, 0.045);
    border-color: transparent;
    border-radius: 999px;
    padding-left: 1.1rem;
}

html:not([data-theme="dark"]) .enx-global-search .enx-search:focus {
    background: #ffffff;
    border-color: var(--enx-teal);
}

html:not([data-theme="dark"]) .enx-user-chip {
    border: 1px solid var(--enx-border);
    background: var(--enx-card-solid);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html:not([data-theme="dark"]) .enx-user-chip:hover {
    border-color: var(--enx-border-strong);
    background: var(--enx-card-solid);
}

.enx-theme-toggle {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--enx-border);
    background: var(--enx-card-solid);
    color: var(--enx-muted);
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.25s ease, background 0.15s ease;
}

.enx-theme-toggle:hover {
    color: var(--enx-teal-ink);
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.08);
    transform: rotate(15deg);
}

.enx-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--enx-ink);
    padding: 0.3rem 0.65rem 0.3rem 0.35rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

.enx-user-chip:hover,
.enx-user-chip.is-open { background: rgba(141, 163, 196, 0.1); color: var(--enx-ink); }

.enx-user-caret { color: var(--enx-muted); transition: transform 0.15s ease; }
.enx-user-chip.is-open .enx-user-caret { transform: rotate(180deg); }

/* Password-policy live checklist (shared PasswordChecklist component: Change
   Password, Reset Password, and the forced-change step on Login). */
.enx-pwchecklist { list-style: none; margin: 0 0 1.1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--enx-border); border-radius: 10px; background: rgba(141, 163, 196, 0.06); display: flex; flex-direction: column; gap: 0.35rem; }
.enx-pwrule { display: flex; align-items: center; gap: 0.55rem; font-size: 0.84rem; color: var(--enx-muted); transition: color 0.15s ease; }
.enx-pwrule-ico { flex: none; }
.enx-pwrule.is-met { color: var(--enx-ink); }
.enx-pwrule.is-met .enx-pwrule-ico { color: #22c55e; }

/* Dark auth surfaces (reset-password card + login forced-change card): restyle the
   checklist for the NextEra Dark Blue background — glassy inset panel, muted slate
   rules that brighten to near-white with a brand-green check as they're met. */
.enx-login-card .enx-pwchecklist,
.enx-auth-card .enx-pwchecklist {
    border-color: rgba(141, 163, 196, 0.22);
    background: rgba(6, 25, 36, 0.55);
}
.enx-login-card .enx-pwrule,
.enx-auth-card .enx-pwrule { color: #8da2bd; }
.enx-login-card .enx-pwrule.is-met,
.enx-auth-card .enx-pwrule.is-met { color: #e7eef8; }
.enx-login-card .enx-pwrule.is-met .enx-pwrule-ico,
.enx-auth-card .enx-pwrule.is-met .enx-pwrule-ico { color: #7ac143; }

/* Profile dropdown (Change password / Sign out). */
.enx-user-menu { position: relative; }
/* Rendered OUTSIDE .top-row (its backdrop-filter would trap position:fixed).
   z-index must stay BELOW the topbar (z 30) so the open panel remains clickable,
   while still covering the page body for click-away close. */
.enx-user-menu-backdrop { position: fixed; inset: 0; z-index: 25; }
/* max-width is load-bearing, not cosmetic (2026-08-06). The panel is anchored right:0 and had
   only a min-width, so it sized itself to its widest child and grew LEFTWARD — a broker whose
   header line reads "gouthamkumarbrokeradmin · gouthamkumarb@prodigygroupindia.com" pushed it
   clean off the left edge of a 414px phone and every row was cut in half. The ellipsis rules on
   .enx-user-menu-name/-sub could never fire, because nothing was ever constraining them: the box
   widened instead of the text clipping. Capping the box is what makes those rules work.
   min() on min-width too — a bare min-width: 200px would win over max-width and reintroduce the
   overflow on a 320px device. */
.enx-user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    min-width: min(200px, calc(100vw - 1.5rem));
    max-width: min(320px, calc(100vw - 1.5rem));
    padding: 0.35rem;
    border-radius: 12px;
    border: 1px solid var(--enx-border-strong);
    background: var(--enx-card-solid);
    box-shadow: 0 12px 32px rgba(8, 15, 30, 0.28);
}
.enx-user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--enx-ink);
    font-size: 0.86rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.enx-user-menu-item svg { color: var(--enx-muted); flex: none; }
.enx-user-menu-item:hover,
.enx-user-menu-item:focus-visible { background: rgba(141, 163, 196, 0.12); color: var(--enx-ink); }
.enx-user-menu-divider { height: 1px; margin: 0.3rem 0.4rem; background: var(--enx-border); }

/* Identity header at the top of the profile dropdown: full name + username/email. */
.enx-user-menu-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem 0.45rem;
}
.enx-user-avatar-lg { width: 38px; height: 38px; font-size: 0.95rem; flex: none; }
.enx-user-menu-id { display: flex; flex-direction: column; min-width: 0; }
.enx-user-menu-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--enx-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Wraps rather than ellipsises (2026-08-06). This line is "username · email", and the email is
   the half that gets cut — which is the half a user is actually checking when they open the menu
   to confirm who they are signed in as. Now that the panel is capped, one line of nowrap would
   turn every long address into "gouthamkumarbrokeradmin · gouthamkumarb@prodi…". Two wrapped
   lines fit inside the same cap and stay readable; -webkit-line-clamp bounds the pathological
   case so the header can't grow without limit. anywhere, not break-word: an email has no spaces
   to break at, so break-word leaves it overflowing. */
.enx-user-menu-sub {
    font-size: 0.76rem;
    color: var(--enx-muted);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.enx-user-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--enx-grad-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;           /* inherited 1.5 line-height pushes initials off-center */
    letter-spacing: 0;
    /* Optical centering: caps sit on the baseline with no descenders, so a mathematically
       centered em-box renders them slightly high — nudge the glyphs down a hair. */
    padding-top: 0.09em;
    user-select: none;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

/* Dark: brand-green identity chip against the black topbar. */
html[data-theme="dark"] .enx-user-avatar {
    background: linear-gradient(135deg, #8fd438 0%, #63a318 100%);
    color: #0a1322;
    box-shadow: 0 2px 10px rgba(120, 190, 32, 0.4);
}

/* ---------- Brand ---------- */
.enx-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Sidebar lockup (2026-07-28): the login page's endorsed NES lockup scaled for the
   header, so the brand looks identical before and after sign-in. The theme-driven logo
   swap was dropped on 2026-08-01 when the panel went navy in light mode too — it keyed
   off html[data-theme="dark"], so a light-mode navy panel would have rendered the
   dark-ink mark on dark until the user happened to switch themes. The nav now uses the
   reversed art unconditionally. */
.enx-nee-lockup-nav { gap: 0.65rem; min-width: 0; }
.enx-nee-lockup-nav .enx-nee-lockup-logo { width: 108px; }
.enx-nee-lockup-nav .enx-nee-lockup-product { font-size: 1.1rem; line-height: 1; }
.enx-nee-lockup-nav .enx-nee-lockup-divider { min-height: 26px; }

/* Compact brand mark for the collapsed icon rail — a rounded tile with the two-tone
   "NX" monogram in the NextEra palette. Hidden while the sidebar is expanded. */
.enx-brand-mark {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    font-size: 0.95rem;
    letter-spacing: -0.03em;
    background: linear-gradient(160deg, rgba(122, 193, 67, 0.14), rgba(45, 183, 230, 0.10));
    border: 1px solid rgba(45, 183, 230, 0.30);
    box-shadow: 0 4px 14px rgba(45, 183, 230, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* NeXus wordmark — NextEra approved palette (2026-07-22): "Gexa" follows the sidebar's
   strong text color (navy in light, white in dark), the "NeXus" accent is Brand Blue
   #008AC0 (like the "era" in the NextEra logo), lifted to the approved Light Blue
   #2DB7E6 on dark surfaces for contrast. Fixed regardless of the site accent. */
.enx-brand-gexa { color: var(--sb-brand, #ffffff); }
.enx-brand-accent { color: #008ac0; }      /* NextEra Brand Blue */
html[data-theme="dark"] .enx-brand-accent { color: #2db7e6; }

/* ---------- Collapsed sidebar (icon-only rail) ----------
   The hamburger toggles .page.enx-nav-collapsed. On desktop the sidebar shrinks to a
   74px rail (MainLayout.razor.css); here we hide the labels/section headers and center
   the icons. font-size:0 hides the link text while the explicitly-sized SVG icons stay. */
@media (min-width: 641px) {
    .page.enx-nav-collapsed .enx-brand-text,
    .page.enx-nav-collapsed .enx-nav-section { display: none; }

    /* margin: 0 kills Bootstrap's .navbar-brand margin-right (1rem), which shrank the
       full-width flex item and pushed the tile ~8px LEFT of the icon axis (measured
       via Playwright 2026-07-28). */
    .page.enx-nav-collapsed .enx-brand { justify-content: center; gap: 0; width: 100%; margin: 0; }

    /* The header row carries Bootstrap's ps-3 (1rem !important left padding), which
       pushed the centered NX tile ~8px right of the icon column in the 74px rail.
       Neutralize both paddings so the tile centers exactly like the icons (2026-07-28). */
    .page.enx-nav-collapsed .sidebar .top-row { padding-left: 0 !important; padding-right: 0 !important; }
    .page.enx-nav-collapsed .sidebar .top-row .container-fluid { padding: 0; justify-content: center; }

    .page.enx-nav-collapsed .enx-brand-mark { display: inline-flex; }

    .page.enx-nav-collapsed .nav-item { padding-left: 0.5rem; padding-right: 0.5rem; }

    .page.enx-nav-collapsed .nav-link {
        font-size: 0;
        gap: 0;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* The active row's accent is its 3px left border (NavMenu.razor.css), and that file pays
       the 2px back out of padding-left so the expanded nav's icons stay in one column. Here
       the icon is CENTRED in a 74px rail, so that compensation would push it 2px off-centre
       — the one row in the nav that looked misaligned.
       !important because Blazor's scoped CSS appends an attribute selector to the component
       rule, which outranks this plain class selector on specificity. */
    .page.enx-nav-collapsed .nav-link.active { padding-left: 0 !important; }

    .page.enx-nav-collapsed .nav-link svg { width: 20px; height: 20px; }
}

/* ---------- Login ---------- */
.enx-empty-layout { min-height: 100vh; }

.enx-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 600px at 80% -10%, rgba(0, 138, 192, 0.24), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, rgba(115, 184, 67, 0.14), transparent 55%),
        linear-gradient(160deg, #081c28 0%, #0c2738 55%, #11374e 100%);
    padding: 1rem;
}

.enx-login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}

.enx-login-card {
    position: relative;
    background: rgba(10, 32, 46, 0.78);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(141, 163, 196, 0.18);
    border-radius: 22px;
    padding: 2.5rem 2.75rem;
    width: 100%;
    max-width: 430px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 138, 192, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: enx-fade-up-lg 0.5s ease both;
}

@keyframes enx-fade-up-lg {
    from { opacity: 0; transform: translateY(16px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.enx-login-brand { text-align: center; margin-bottom: 1.9rem; }
.enx-login-brand-logo { display: block; width: 150px; height: auto; margin: 0 auto 0.9rem; }

/* Forgot/reset cards reuse the login lockup, centered above the title (the login
   `.enx-auth-card-brand` variant hides itself on desktop, so this stays separate). */
.enx-auth-brand-center { justify-content: center; margin-bottom: 1.75rem; }

/* Muted secondary link under the auth CTAs ("Back to sign in") — the default bright
   blue Bootstrap link fought the primary button for attention. */
.enx-auth-text-link {
    color: #8da2bd;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 4px;
}
.enx-auth-text-link:hover { color: #e7eef8; text-decoration: underline; }

/* Forgot/reset CTAs: match the login Sign-in button's approved Brand Blue gradient
   (the global .enx-btn-primary blue is off-palette on the dark auth surfaces). */
.enx-login-card .enx-btn-primary,
.enx-login-card .enx-btn-primary::after {
    background: linear-gradient(135deg, #2db7e6 0%, #008ac0 55%, #00719e 100%);
}
.enx-login-card .enx-btn-primary {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px -8px rgba(0, 138, 192, 0.6);
}
.enx-login-card .enx-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #43c4ef 0%, #0095cf 55%, #007bab 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 16px 34px -10px rgba(0, 138, 192, 0.75);
}
.enx-login-card .enx-btn-primary:active:not(:disabled) {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 6px 16px -6px rgba(0, 138, 192, 0.55);
}

/* Login is always branded dark, independent of the user theme. */
.enx-login-brand h1 {
    font-size: 1.8rem;
    margin: 0.65rem 0 0.25rem;
}

.enx-login-brand p {
    color: #8da2bd;
    font-size: 0.85rem;
    margin: 0;
}

.enx-login-card .form-label { color: #b7c6dc; }

.enx-login-card .form-control {
    background-color: rgba(6, 25, 36, 0.72);
    color: #e7eef8;
    border-color: rgba(141, 163, 196, 0.26);
}

.enx-login-card .form-control:focus {
    border-color: #2db7e6;
}

.enx-login-card .validation-message { color: #fda4af; }

/* ---------- Sign-in (redesigned split-screen, always branded dark) ---------- */
/* Approved palette (2026-07-22): the auth surfaces sit on NextEra Dark Blue #0C2738
   (with darker/lighter shades of the same hue for depth), Brand Blue #008AC0 carries
   the primary CTA, Light Blue #2DB7E6 carries links/focus/accents on dark, and Brand
   Green #73B843 keeps the bolt/energy notes — the blue/green pairing of the logo. */
.enx-auth-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    background: #0c2738;
    color: #e7eef8;
    font-synthesis-weight: none;
}

/* ----- Left: brand hero ----- */
.enx-auth-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    background:
        radial-gradient(900px 620px at 85% -10%, rgba(115, 184, 67, 0.14), transparent 60%),
        radial-gradient(760px 520px at -15% 115%, rgba(0, 138, 192, 0.16), transparent 55%),
        linear-gradient(155deg, #081c28 0%, #0c2738 48%, #11374e 100%);
    border-right: 1px solid rgba(141, 163, 196, 0.12);
}

.enx-auth-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: enx-auth-drift 14s ease-in-out infinite alternate;
}

.enx-auth-hero-orb-1 {
    width: 420px; height: 420px;
    top: -120px; right: -80px;
    background: radial-gradient(circle, rgba(115, 184, 67, 0.26), transparent 70%);
}

.enx-auth-hero-orb-2 {
    width: 380px; height: 380px;
    bottom: -140px; left: -100px;
    background: radial-gradient(circle, rgba(0, 138, 192, 0.30), transparent 70%);
    animation-delay: -7s;
}

@keyframes enx-auth-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(24px, 18px, 0) scale(1.08); }
}

.enx-auth-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse at 30% 40%, black 25%, transparent 78%);
    pointer-events: none;
}

.enx-auth-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 3.25rem 4rem;
}

.enx-auth-hero-brand,
.enx-auth-card-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

/* Endorsed lockup: official NextEra Energy Services mark (reversed SVG, brand art
   untouched) + divider + NeXus product wordmark in Inter/Light Blue. */
.enx-nee-lockup {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.enx-nee-lockup-logo {
    display: block;
    width: 172px;
    height: auto;
    flex: none;
}
.enx-nee-lockup-divider {
    flex: none;
    width: 1px;
    align-self: stretch;
    background: rgba(148, 163, 184, 0.35);
}
.enx-nee-lockup-product {
    font-size: 1.9rem;
    line-height: 1;
}
.enx-nee-lockup-sm .enx-nee-lockup-logo { width: 128px; }
.enx-nee-lockup-sm .enx-nee-lockup-product { font-size: 1.45rem; }

/* NeXus product wordmark — SupplyIQ-style treatment: rounded geometric sans
   (Poppins), mixed case, two-tone split in the NextEra palette (green lead-in,
   Light Blue emphasis — the same pattern as Supply(green)IQ(blue)). */
.enx-nexus-wordmark {
    font-family: "Poppins", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    letter-spacing: -0.015em;
}
.enx-nexus-wordmark .enx-nexus-a { font-weight: 500; color: #7ac143; }
.enx-nexus-wordmark .enx-nexus-b { font-weight: 700; color: #2db7e6; }

.enx-auth-hero-copy { margin: auto 0; padding: 3rem 0; }

.enx-auth-hero-copy h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #f4f8fd;
    margin: 0 0 0.9rem;
    max-width: 20ch;
}

.enx-auth-hero-copy > p {
    color: #93a7c4;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 0 2.2rem;
}

.enx-auth-hero-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.enx-auth-hero-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.enx-auth-feature-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    color: #2db7e6;
    background: rgba(45, 183, 230, 0.10);
    border: 1px solid rgba(45, 183, 230, 0.22);
}

.enx-auth-hero-features strong {
    display: block;
    color: #e7eef8;
    font-size: 0.92rem;
    font-weight: 700;
}

.enx-auth-hero-features li > div > span {
    color: #8da2bd;
    font-size: 0.82rem;
}

.enx-auth-hero-foot {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #8da2bd;
    font-size: 0.8rem;
    text-wrap: balance;
}

/* ----- Right: sign-in panel ----- */
.enx-auth-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    position: relative;
    background:
        radial-gradient(700px 460px at 110% -10%, rgba(0, 138, 192, 0.12), transparent 60%),
        #0a2130;
}

.enx-auth-card {
    width: 100%;
    max-width: 430px;
    background: rgba(10, 32, 46, 0.82);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(141, 163, 196, 0.16);
    border-radius: 20px;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: enx-fade-up-lg 0.5s ease both;
}

.enx-auth-card-brand { margin-bottom: 1.75rem; }

/* Hide the duplicate in-card brand when the hero (which carries it) is visible. */
@media (min-width: 992px) {
    .enx-auth-card-brand { display: none; }
}

/* Phones: 2.5rem of card padding inside 1.5rem of shell padding left only ~262px
   of content on a 390px screen, which crushed the OTP boxes and the recovery-code
   grid on the MFA challenge. Recovers ~50px. */
@media (max-width: 640px) {
    .enx-auth-shell { padding: 1.5rem 0.85rem; }
    .enx-auth-card { padding: 1.6rem 1.25rem 1.4rem; }
}

.enx-auth-title {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    margin: 0 0 0.3rem;
}

.enx-auth-subtitle {
    color: #8da2bd;
    font-size: 0.9rem;
    margin: 0 0 1.75rem;
}

.enx-auth-field { margin-bottom: 1.15rem; }

.enx-auth-field .form-label {
    color: #b7c6dc;
    font-size: 0.83rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.enx-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

/* DOM-ordered after the password input (so Tab goes username → password first),
   but absolutely pinned up beside the label for the familiar layout. */
.enx-auth-field-pw { position: relative; }

.enx-auth-forgot {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2db7e6;
    text-decoration: none;
    border-radius: 4px;
}

.enx-auth-forgot:hover { color: #6ed2f0; text-decoration: underline; }

.enx-auth-input-wrap { position: relative; }

.enx-auth-input-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64779a;
    display: inline-flex;
    pointer-events: none;
    transition: color 0.15s ease;
}

.enx-auth-input-wrap:focus-within .enx-auth-input-icon { color: #2db7e6; }

.enx-auth-card .form-control.enx-auth-input {
    background-color: rgba(6, 25, 36, 0.72);
    color: #e7eef8;
    border: 1px solid rgba(141, 163, 196, 0.26);
    border-radius: 11px;
    padding: 0.7rem 0.9rem 0.7rem 2.55rem;
    font-size: 0.92rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.enx-auth-card .form-control.enx-auth-input::placeholder { color: #55688c; }

.enx-auth-card .form-control.enx-auth-input-toggle { padding-right: 2.9rem; }

.enx-auth-card .form-control.enx-auth-input:focus {
    border-color: #2db7e6;
    box-shadow: 0 0 0 3px rgba(45, 183, 230, 0.18);
    outline: none;
}

.enx-auth-card .form-control.enx-auth-input.is-invalid {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
    background-image: none;
}

.enx-auth-field-error {
    color: #fda4af;
    font-size: 0.78rem;
    margin-top: 0.35rem;
}

.enx-auth-eye {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #64779a;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.enx-auth-eye:hover { color: #b7c6dc; background: rgba(141, 163, 196, 0.12); }

.enx-auth-eye:focus-visible {
    outline: 2px solid #2db7e6;
    outline-offset: 1px;
    color: #b7c6dc;
}

.enx-auth-remember {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.15rem 0 1.35rem;
    color: #8da2bd;
    font-size: 0.83rem;
    cursor: pointer;
    user-select: none;
}

.enx-auth-remember input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px; height: 17px;
    flex: none;
    border-radius: 5px;
    border: 1.5px solid rgba(141, 163, 196, 0.4);
    background: rgba(6, 25, 36, 0.72);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.enx-auth-remember input[type="checkbox"]::before {
    content: "";
    width: 9px; height: 9px;
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background: #ffffff;
}

.enx-auth-remember input[type="checkbox"]:checked {
    background: #008ac0;
    border-color: #008ac0;
}

.enx-auth-remember input[type="checkbox"]:checked::before { transform: scale(1); }

.enx-auth-remember input[type="checkbox"]:focus-visible {
    outline: 2px solid #2db7e6;
    outline-offset: 2px;
}

.enx-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: #fda4af;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    font-size: 0.84rem;
    margin-bottom: 1.1rem;
    animation: enx-auth-shake 0.35s ease;
}

.enx-auth-alert svg { flex: none; margin-top: 0.1rem; }

/* Success variant (forgot/reset confirmations): same dark-glass treatment in the
   NextEra green, gentle fade-in instead of the error shake. */
.enx-auth-alert.enx-auth-alert-success {
    color: #86efac;
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
    animation: enx-fade-up-lg 0.35s ease;
}

/* Info variant (MFA "a new code was sent"): brand blue, no shake. */
.enx-auth-alert.enx-auth-alert-info {
    color: #7dd3fc;
    background: rgba(45, 183, 230, 0.1);
    border-color: rgba(45, 183, 230, 0.3);
    animation: enx-fade-up-lg 0.35s ease;
}

/* One-time code entry: larger spaced digits for readability. */
.enx-auth-otp {
    letter-spacing: 0.35em;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* ===== Admin user detail page (profile card + login history related list) ===== */
.enx-userdetail-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.enx-userdetail-idblock { min-width: 0; }
.enx-userdetail-pills { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }

/* Admin-generated MFA code: shown once, so make it unambiguous and copyable. */
.enx-admin-otp-code {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    user-select: all;
    padding: 0.5rem 0;
}

.enx-history-toolbar { align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.enx-history-title { margin: 0; font-size: 1rem; font-weight: 600; }
.enx-history-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.enx-history-filters .enx-select { min-width: 170px; }
.enx-history-date { width: 150px; }
.enx-history-date-sep { color: var(--enx-muted, #64748b); }
.enx-history-detail { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enx-history-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
}
/* Top instance (deal list, D-124): the padding has to move to the other side or the strip
   floats away from the table it pages and crowds the toolbar above it. */
.enx-history-pager.is-top { padding-top: 0; padding-bottom: 0.75rem; }

/* ===== Admin user detail redesign (udx = user detail experience) ===== */

/* --- Hero profile card --- */
.enx-udx-hero { padding: 1.1rem 1.25rem 1rem; }
.enx-udx-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.enx-udx-avatarwrap { position: relative; flex: 0 0 auto; }
.enx-udx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(150deg, #2db7e6, #008ac0 60%, #00719e);
    box-shadow: 0 8px 20px rgba(0, 138, 192, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.enx-udx-statusdot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2.5px solid var(--enx-card-bg, #ffffff);
}
.enx-udx-statusdot.is-active { background: #10b981; }
.enx-udx-statusdot.is-inactive { background: #94a3b8; }
.enx-udx-statusdot.is-locked { background: #ef4444; }

.enx-udx-id { min-width: 0; }
.enx-udx-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}
.enx-udx-username { color: var(--enx-muted, #64748b); font-size: 0.85rem; margin-top: 0.1rem; }
.enx-udx-badges { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.4rem; }

.enx-udx-mfa {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    border-radius: 12px;
    border: 1px solid transparent;
    margin-left: auto;
}
.enx-udx-mfa.is-on { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); color: #047857; }
.enx-udx-mfa.is-off { background: rgba(148, 163, 184, 0.10); border-color: rgba(148, 163, 184, 0.30); color: #64748b; }
.enx-udx-mfa-ico { display: inline-flex; width: 22px; height: 22px; }
.enx-udx-mfa-ico svg { width: 100%; height: 100%; }
.enx-udx-mfa-text { display: flex; flex-direction: column; line-height: 1.2; }
.enx-udx-mfa-title { font-weight: 700; font-size: 0.85rem; }
.enx-udx-mfa-sub { font-size: 0.72rem; opacity: 0.8; }

.enx-udx-actions { display: flex; align-items: center; gap: 0.5rem; }
.enx-udx-actions .btn { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.enx-udx-mfa + .enx-udx-actions { margin-left: 0; }

.enx-udx-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem 1rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--enx-border, #e2e8f0);
}
.enx-udx-fact { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.enx-udx-fact-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(0, 138, 192, 0.08);
    color: #008ac0;
}
.enx-udx-fact-ico svg { width: 16px; height: 16px; }
.enx-udx-fact-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.enx-udx-fact-lbl { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--enx-muted, #64748b); }
.enx-udx-fact-val { font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Security stat tiles --- */
.enx-udx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}
.enx-udx-stat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    background: var(--enx-card-bg, #ffffff);
    border: 1px solid var(--enx-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.enx-udx-stat:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
.enx-udx-stat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
}
.enx-udx-stat-ico svg { width: 19px; height: 19px; }
.enx-udx-stat-ico.is-blue { background: rgba(0, 138, 192, 0.10); color: #008ac0; }
.enx-udx-stat-ico.is-green { background: rgba(16, 185, 129, 0.10); color: #059669; }
.enx-udx-stat-ico.is-rose { background: rgba(244, 63, 94, 0.10); color: #e11d48; }
.enx-udx-stat-ico.is-violet { background: rgba(139, 92, 246, 0.10); color: #7c3aed; }
.enx-udx-stat-ico.is-amber { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.enx-udx-stat-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.enx-udx-stat-val { font-weight: 700; font-size: 0.95rem; }
.enx-udx-stat-val.is-alert { color: #e11d48; }
.enx-udx-stat-lbl { font-size: 0.72rem; color: var(--enx-muted, #64748b); }

/* --- History card: toolbar + filters --- */
.enx-udx-histhead { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.7rem; }
.enx-udx-histtitle { display: inline-flex; align-items: center; gap: 0.5rem; }
.enx-udx-histhead .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.enx-udx-filters {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--enx-border, #e2e8f0);
    margin-bottom: 0.25rem;
}
.enx-udx-filters .enx-select { min-width: 190px; }
.enx-udx-statuschips {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.12);
}
.enx-udx-statuschip {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 0.28rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--enx-muted, #64748b);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.enx-udx-statuschip:hover { color: var(--enx-text, #0f172a); }
.enx-udx-statuschip.active {
    background: var(--enx-card-bg, #ffffff);
    color: var(--enx-text, #0f172a);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.enx-udx-statuschip.is-success.active { color: #047857; }
.enx-udx-statuschip.is-failure.active { color: #e11d48; }
.enx-udx-daterange { display: inline-flex; align-items: center; gap: 0.4rem; }
.enx-udx-clear { font-size: 0.8rem; text-decoration: none; color: var(--enx-muted, #64748b); padding: 0.25rem 0.4rem; }
.enx-udx-clear:hover { color: #e11d48; }

/* --- Activity table --- */
.enx-udx-dim { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; }
.enx-udx-table td { vertical-align: middle; }
.enx-udx-col-time { width: 130px; }
.enx-udx-dayrow td {
    padding: 0.55rem 0.75rem 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--enx-muted, #64748b);
    background: rgba(148, 163, 184, 0.06);
    border-bottom: none;
}
.enx-udx-failrow td { background: rgba(244, 63, 94, 0.045); }
.enx-udx-failrow td:first-child { box-shadow: inset 3px 0 0 rgba(225, 29, 72, 0.55); }
.enx-udx-time { line-height: 1.25; white-space: nowrap; }
.enx-udx-clock { display: block; font-weight: 600; font-size: 0.83rem; }
.enx-udx-rel { display: block; font-size: 0.72rem; color: var(--enx-muted, #64748b); }
.enx-udx-event { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.enx-udx-evico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 9px;
}
.enx-udx-evico svg { width: 15px; height: 15px; }
.enx-udx-evico.is-green { background: rgba(16, 185, 129, 0.10); color: #059669; }
.enx-udx-evico.is-rose { background: rgba(244, 63, 94, 0.10); color: #e11d48; }
.enx-udx-evico.is-blue { background: rgba(0, 138, 192, 0.10); color: #008ac0; }
.enx-udx-evico.is-amber { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.enx-udx-evico.is-violet { background: rgba(139, 92, 246, 0.10); color: #7c3aed; }
.enx-udx-evtext { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.enx-udx-evlabel { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.85rem; flex-wrap: wrap; }
.enx-udx-evsub {
    font-size: 0.75rem;
    color: var(--enx-muted, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 420px;
}
.enx-udx-methodtag {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    background: rgba(0, 138, 192, 0.08);
    color: #0e7490;
    white-space: nowrap;
}
.enx-udx-ip {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.82rem;
    cursor: copy;
    border-radius: 6px;
    padding: 0.1rem 0.3rem;
    margin: -0.1rem -0.3rem;
    transition: background 0.12s ease;
}
.enx-udx-ip:hover { background: rgba(0, 138, 192, 0.10); }
.enx-udx-client { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Skeleton loader --- */
.enx-udx-skel { padding: 0.5rem 0; }
.enx-udx-skelrow { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0.5rem; }
.enx-udx-skelbar, .enx-udx-skelcircle {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.14) 25%, rgba(148, 163, 184, 0.26) 50%, rgba(148, 163, 184, 0.14) 75%);
    background-size: 200% 100%;
    animation: enx-udx-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    height: 12px;
}
.enx-udx-skelcircle { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; }
@keyframes enx-udx-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Pager --- */
.enx-udx-pager { display: inline-flex; align-items: center; gap: 0.25rem; }
.enx-udx-pager .btn { min-width: 34px; }
.enx-udx-ellipsis { padding: 0 0.3rem; color: var(--enx-muted, #64748b); }

/* --- OTP modal --- */
.enx-udx-otp-header { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.enx-udx-otp-digits { display: inline-flex; gap: 0.45rem; justify-content: center; }
.enx-udx-otp-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 54px;
    border-radius: 12px;
    border: 1px solid var(--enx-border, #e2e8f0);
    background: rgba(0, 138, 192, 0.05);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0;
    color: #008ac0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}
.enx-udx-otp-count { margin-top: 0.6rem; font-size: 0.82rem; font-weight: 600; color: var(--enx-muted, #64748b); }
.enx-udx-otp-count.is-low { color: #e11d48; }
.enx-udx-otp-chips { display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.55rem; }
.enx-udx-chip {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
}
.enx-udx-chip.is-ok { background: #ecfdf5; color: #047857; }
.enx-udx-chip.is-bad { background: #fef2f2; color: #b91c1c; }
.enx-udx-chip.is-muted { background: #f1f5f9; color: #64748b; }

/* --- Dark theme --- */
html[data-theme="dark"] .enx-udx-statusdot { border-color: var(--enx-card-bg, #101827); }
html[data-theme="dark"] .enx-udx-mfa.is-on { background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.28); color: #6ee7b7; }
html[data-theme="dark"] .enx-udx-mfa.is-off { background: rgba(141, 163, 196, 0.10); border-color: rgba(141, 163, 196, 0.25); color: #aebfd6; }
html[data-theme="dark"] .enx-udx-fact-ico { background: rgba(45, 183, 230, 0.12); color: #67d8f9; }
html[data-theme="dark"] .enx-udx-stat-ico.is-blue { background: rgba(45, 183, 230, 0.12); color: #67d8f9; }
html[data-theme="dark"] .enx-udx-stat-ico.is-green,
html[data-theme="dark"] .enx-udx-evico.is-green { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; }
html[data-theme="dark"] .enx-udx-stat-ico.is-rose,
html[data-theme="dark"] .enx-udx-evico.is-rose { background: rgba(251, 113, 133, 0.12); color: #fda4af; }
html[data-theme="dark"] .enx-udx-stat-ico.is-violet,
html[data-theme="dark"] .enx-udx-evico.is-violet { background: rgba(167, 139, 250, 0.13); color: #c4b5fd; }
html[data-theme="dark"] .enx-udx-stat-ico.is-amber,
html[data-theme="dark"] .enx-udx-evico.is-amber { background: rgba(251, 191, 36, 0.12); color: #fcd34d; }
html[data-theme="dark"] .enx-udx-evico.is-blue { background: rgba(45, 183, 230, 0.12); color: #67d8f9; }
html[data-theme="dark"] .enx-udx-stat-val.is-alert { color: #fda4af; }
html[data-theme="dark"] .enx-udx-dayrow td { background: rgba(141, 163, 196, 0.06); }
html[data-theme="dark"] .enx-udx-failrow td { background: rgba(251, 113, 133, 0.06); }
html[data-theme="dark"] .enx-udx-statuschips { background: rgba(141, 163, 196, 0.12); }
html[data-theme="dark"] .enx-udx-statuschip.active { background: rgba(255, 255, 255, 0.10); }
html[data-theme="dark"] .enx-udx-statuschip.is-success.active { color: #6ee7b7; }
html[data-theme="dark"] .enx-udx-statuschip.is-failure.active { color: #fda4af; }
html[data-theme="dark"] .enx-udx-methodtag { background: rgba(45, 183, 230, 0.12); color: #67d8f9; }
html[data-theme="dark"] .enx-udx-otp-digit { background: rgba(45, 183, 230, 0.08); color: #67d8f9; }
html[data-theme="dark"] .enx-udx-chip.is-ok { background: rgba(52, 211, 153, 0.13); color: #6ee7b7; }
html[data-theme="dark"] .enx-udx-chip.is-bad { background: rgba(251, 113, 133, 0.13); color: #fda4af; }
html[data-theme="dark"] .enx-udx-chip.is-muted { background: rgba(141, 163, 196, 0.14); color: #aebfd6; }
html[data-theme="dark"] .enx-udx-ip:hover { background: rgba(45, 183, 230, 0.14); }

/* --- Responsive --- */
@media (max-width: 900px) {
    .enx-udx-mfa { margin-left: 0; }
    .enx-udx-actions { width: 100%; }
    .enx-udx-client { display: none; }
    .enx-udx-table th:last-child { display: none; }
}

@keyframes enx-auth-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.enx-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    border-radius: 11px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(160deg, #2db7e6, #008ac0 55%, #00719e);
    box-shadow: 0 10px 26px rgba(0, 138, 192, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.enx-auth-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(0, 138, 192, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.enx-auth-submit:active:not(:disabled) { transform: translateY(0); }

.enx-auth-submit:focus-visible {
    outline: 2px solid #f1f5f9;
    outline-offset: 2px;
}

.enx-auth-submit:disabled { opacity: 0.75; cursor: default; }

.enx-auth-submit.is-success {
    background: linear-gradient(160deg, #8bc95f, #73b843);
    color: #0c2738;
    opacity: 1;
}

.enx-auth-spinner {
    width: 16px; height: 16px;
    flex: none;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: enx-auth-spin 0.7s linear infinite;
}

@keyframes enx-auth-spin { to { transform: rotate(360deg); } }

.enx-auth-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    color: #64779a;
    font-size: 0.75rem;
}

.enx-auth-panel-foot {
    margin-top: 1.4rem;
    color: #64779a;
    font-size: 0.8rem;
    text-align: center;
}

/* Legal footer — mirrors the myaccount.gexaenergy.com footer links. */
.enx-auth-legal {
    margin-top: 1.6rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(100, 119, 154, 0.22);
    width: 100%;
    max-width: 460px;
    text-align: center;
}
.enx-auth-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.1rem;
    row-gap: 0.3rem;
}
.enx-auth-legal-links a {
    color: #8ba0c2;
    font-size: 0.74rem;
    text-decoration: none;
    transition: color 0.13s ease;
}
.enx-auth-legal-links a:hover,
.enx-auth-legal-links a:focus-visible { color: #d3deef; text-decoration: underline; }
.enx-auth-legal-copy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.1rem;
    row-gap: 0.2rem;
    margin-top: 0.55rem;
    color: #64779a;
    font-size: 0.72rem;
}

/* The login hero/panel always render on the dark brand surface; the wordmark's
   "Gexa" is white there and the "NeXus" accent uses the approved Light Blue
   (Brand Blue lacks contrast on the Dark Blue surface). */
.enx-auth-split .enx-brand-gexa { color: #f1f5f9; }
.enx-auth-split .enx-brand-accent { color: #2db7e6; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .enx-auth-hero-orb { animation: none; }
    .enx-auth-card { animation: none; }
    .enx-auth-alert { animation: none; }
}

/* Responsive: collapse to a single centered column; the card carries the brand. */
@media (max-width: 991.98px) {
    .enx-auth-split { grid-template-columns: 1fr; }
    .enx-auth-hero { display: none; }
    .enx-auth-panel { min-height: 100vh; }
}

@media (max-width: 480px) {
    .enx-auth-card { padding: 1.9rem 1.4rem 1.6rem; border-radius: 16px; }
    .enx-auth-panel { padding: 1.5rem 1rem; }
}

/* ---------- Blazor boot UI (branded splash) ---------- */
.enx-boot {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(0, 138, 192, 0.18), transparent 60%),
        radial-gradient(900px 480px at -12% 110%, rgba(115, 184, 67, 0.10), transparent 55%),
        linear-gradient(160deg, #081c28 0%, #0c2738 55%, #11374e 100%);
}

.enx-boot-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    animation: enx-boot-in 600ms ease-out both;
}

.enx-boot-mark {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #73b843;
    background: rgba(115, 184, 67, 0.08);
    border: 1px solid rgba(115, 184, 67, 0.25);
    box-shadow: 0 0 48px rgba(115, 184, 67, 0.25), inset 0 0 24px rgba(115, 184, 67, 0.08);
    animation: enx-boot-pulse 2.2s ease-in-out infinite;
}

.enx-boot-brand {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #f1f5f9;
}

.enx-boot-brand span {
    color: #2db7e6;
}

.enx-boot-bar {
    width: 240px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.enx-boot-bar-fill {
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, #008ac0, #2db7e6);
    box-shadow: 0 0 12px rgba(45, 183, 230, 0.6);
    transition: width 0.12s ease-out;
}

.enx-boot-caption {
    font-size: 0.85rem;
    color: #7e8ca3;
    letter-spacing: 0.04em;
}

@keyframes enx-boot-pulse {
    0%, 100% { box-shadow: 0 0 32px rgba(115, 184, 67, 0.18), inset 0 0 24px rgba(115, 184, 67, 0.06); }
    50% { box-shadow: 0 0 64px rgba(115, 184, 67, 0.38), inset 0 0 28px rgba(115, 184, 67, 0.12); }
}

@keyframes enx-boot-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#app {
    min-height: 100vh;
    background: var(--enx-surface);
}

/* Unhandled-error banner: fixed dark-red design with white text so it reads clearly
   on BOTH light and dark themes (the old pale-amber strip vanished in dark mode).
   "Copy details" hands support the captured error buffer (js/enxErrors.js). */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    align-items: center;
    gap: 0.65rem;
    box-sizing: border-box;
    padding: 0.7rem 2.6rem 0.7rem 1.1rem;
    background: linear-gradient(160deg, #7f1d1d, #991b1b);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: #fef2f2;
    font-size: 0.87rem;
    font-weight: 500;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}

/* Blazor toggles display:block when an error occurs; restyle to flex via [style] hook. */
#blazor-error-ui[style*="block"] { display: flex !important; flex-wrap: wrap; }

#blazor-error-ui .enx-err-icon { display: inline-flex; color: #fecaca; flex: 0 0 auto; }
#blazor-error-ui .enx-err-text { flex: 1 1 auto; min-width: 200px; }

#blazor-error-ui .enx-err-btn {
    display: inline-flex; align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 0.8rem; font-weight: 600;
    padding: 0.28rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease;
}
#blazor-error-ui .enx-err-btn:hover { background: rgba(255, 255, 255, 0.18); color: #ffffff; }
#blazor-error-ui .enx-err-btn:disabled { opacity: .8; cursor: default; }
#blazor-error-ui .enx-err-btn-primary { background: #ffffff; color: #7f1d1d; border-color: #ffffff; }
#blazor-error-ui .enx-err-btn-primary:hover { background: #fee2e2; color: #7f1d1d; }

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #fecaca;
    font-size: 0.9rem;
    line-height: 1;
}
#blazor-error-ui .dismiss:hover { color: #ffffff; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 10px;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ── Page-load failure state (server unreachable) ───────────────────────── */
.enx-loadfail { display: flex; justify-content: center; padding: 7vh 1rem 3rem; }
.enx-loadfail-card {
    max-width: 460px;
    width: 100%;
    text-align: center;
    background: var(--enx-card-solid);
    border: 1px solid var(--enx-border);
    border-radius: 18px;
    padding: 2.6rem 2.25rem 1.9rem;
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.08);
    animation: enx-nf-in .4s ease-out both;
}
.enx-loadfail-visual {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 88px; height: 88px; margin-bottom: 1.1rem;
}
.enx-loadfail-icon {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; border-radius: 20px;
    color: #f59e0b;
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.32);
    box-shadow: 0 8px 26px rgba(245, 158, 11, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Sonar rings pulsing outward — "searching for a signal". */
.enx-loadfail-ring {
    position: absolute; inset: 0;
    border-radius: 24px;
    border: 1.5px solid rgba(245, 158, 11, 0.45);
    animation: enx-lf-pulse 2.4s ease-out infinite;
}
.enx-loadfail-ring-2 { animation-delay: 1.2s; }
@keyframes enx-lf-pulse {
    0%   { transform: scale(0.78); opacity: 0.9; }
    100% { transform: scale(1.25); opacity: 0; }
}
.enx-loadfail-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--enx-ink); margin-bottom: 0.5rem; }
.enx-loadfail-sub { color: var(--enx-muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.35rem; }
.enx-loadfail-actions { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.35rem; }
.enx-loadfail-auto {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; color: var(--enx-muted);
    padding-top: 1.1rem; border-top: 1px dashed var(--enx-border);
}
.enx-loadfail-auto strong { color: var(--enx-ink); font-variant-numeric: tabular-nums; }
.enx-loadfail-progress {
    display: block; width: 180px; height: 4px; border-radius: 999px;
    background: var(--enx-border); overflow: hidden;
}
.enx-loadfail-progress > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    transition: width 1s linear;
}

/* ── Deal not-found state (bad link / no access) ────────────────────────── */
.enx-nf { display: flex; justify-content: center; padding: 9vh 1rem 3rem; }
.enx-nf-card {
    max-width: 480px;
    width: 100%;
    text-align: center;
    background: var(--enx-card-solid);
    border: 1px solid var(--enx-border);
    border-radius: 18px;
    padding: 2.75rem 2.25rem 2.25rem;
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.08);
    animation: enx-nf-in .4s ease-out both;
}
@keyframes enx-nf-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.enx-nf-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; border-radius: 20px; margin-bottom: 1.25rem;
    color: var(--enx-teal-ink);
    background: linear-gradient(160deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.04));
    border: 1px solid rgba(59, 130, 246, 0.28);
    box-shadow: 0 8px 26px rgba(59, 130, 246, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.enx-nf-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--enx-ink); margin-bottom: 0.5rem; }
.enx-nf-sub { color: var(--enx-muted); font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.4rem; }
.enx-nf-actions { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.enx-nf-hint {
    font-size: 0.8rem; color: var(--enx-muted); margin: 0;
    padding-top: 1.1rem; border-top: 1px dashed var(--enx-border);
}

/* ── Documents module (deal-grouped) ────────────────────────────────────── */
.enx-doc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    padding: 0.85rem 1rem; margin-bottom: 1rem; }
.enx-doc-search { position: relative; display: flex; align-items: center; flex: 1 1 300px; min-width: 240px; }
.enx-doc-search svg { position: absolute; left: 0.8rem; color: var(--enx-muted); pointer-events: none; }
.enx-doc-search .form-control { padding-left: 2.3rem; padding-right: 2rem; }
.enx-doc-search-clear { position: absolute; right: 0.5rem; border: 0; background: none;
    color: var(--enx-muted); font-size: 0.85rem; cursor: pointer; padding: 0.2rem 0.4rem; }
.enx-doc-search-clear:hover { color: var(--enx-ink); }
.enx-doc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Expand/Collapse all — quiet text buttons pinned to the toolbar's right edge. */
.enx-doc-bulk { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.enx-doc-bulk-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border: none; background: transparent; cursor: pointer;
    color: var(--enx-muted); font-size: 0.8rem; font-weight: 600;
    padding: 0.3rem 0.45rem; border-radius: 7px; transition: all .12s ease;
    white-space: nowrap;
}
.enx-doc-bulk-btn:hover:not(:disabled) { color: var(--enx-teal-ink); background: rgba(59, 130, 246, 0.08); }
.enx-doc-bulk-btn:disabled { opacity: .45; cursor: default; }
.enx-doc-bulk-sep { width: 1px; height: 16px; background: var(--enx-border-strong); }
.enx-doc-chip { border: 1px solid var(--enx-border-strong); border-radius: 999px;
    background: var(--enx-card-solid); color: var(--enx-muted); font-size: 0.8rem; font-weight: 600;
    padding: 0.3rem 0.85rem; cursor: pointer; transition: all .12s ease; }
.enx-doc-chip:hover { border-color: var(--enx-teal); color: var(--enx-teal-ink); }
.enx-doc-chip-on { background: rgba(59, 130, 246, 0.12); border-color: var(--enx-teal); color: var(--enx-teal-ink); }

.enx-doc-deal { padding: 0; margin-bottom: 0.75rem; overflow: hidden; }
.enx-doc-deal-head { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1.1rem;
    cursor: pointer; user-select: none; }
.enx-doc-deal-head:hover { background: rgba(59, 130, 246, 0.045); }
.enx-doc-caret { display: inline-flex; color: var(--enx-muted); transition: transform .15s ease; flex-shrink: 0; }
.enx-doc-caret-open { transform: rotate(90deg); }
.enx-doc-deal-main { flex: 1 1 auto; min-width: 0; }
.enx-doc-deal-line1 { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.enx-doc-cust { font-weight: 700; font-size: 0.98rem; color: var(--enx-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enx-doc-dealno { font-size: 0.82rem; font-weight: 600; color: var(--enx-muted); white-space: nowrap; }
.enx-doc-deal-line2 { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--enx-muted); }
.enx-doc-dot { opacity: 0.6; }
.enx-doc-open { white-space: nowrap; flex-shrink: 0; }

.enx-doc-deal-body { border-top: 1px solid var(--enx-border); padding: 0.5rem 1.1rem 0.9rem; }
.enx-doc-section { margin-top: 0.75rem; }
.enx-doc-section-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--enx-muted); margin-bottom: 0.35rem; }
.enx-doc-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.6rem;
    border: 1px solid var(--enx-border); border-radius: 10px; margin-bottom: 0.4rem;
    background: var(--enx-card-solid); }
.enx-doc-row-old { opacity: 0.65; }
.enx-doc-row .enx-pill { flex-shrink: 0; }
.enx-doc-file { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.enx-doc-filename { font-size: 0.88rem; font-weight: 600; color: var(--enx-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enx-doc-meta { font-size: 0.74rem; color: var(--enx-muted); display: flex; align-items: center; gap: 0.35rem;
    font-variant-numeric: tabular-nums; }
.enx-doc-latest { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    background: rgba(59, 130, 246, 0.13); color: var(--enx-teal-ink);
    border-radius: 999px; padding: 0.05rem 0.45rem; }
.enx-doc-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.enx-doc-older { border: 0; background: none; color: var(--enx-teal-ink); font-size: 0.78rem;
    font-weight: 600; cursor: pointer; padding: 0.15rem 0.25rem; }
.enx-doc-older:hover { text-decoration: underline; }

html[data-theme="dark"] .enx-doc-deal-head:hover { background: rgba(255, 255, 255, 0.035); }
html[data-theme="dark"] .enx-doc-row { background: rgba(255, 255, 255, 0.02); }

@media (max-width: 640px) {
    .enx-doc-deal-head { flex-wrap: wrap; }
    .enx-doc-open { display: none; } /* the whole header still expands; deal opens from within */
    .enx-doc-row { flex-wrap: wrap; }
}

/* ================= Phone-width fixes (≤640px) ================= */
@media (max-width: 640px) {
    /* Topbar: avatar-only user chip (the full name wrapped to two lines and
       crushed the search box); keep every control at its natural size. */
    .enx-user-name, .enx-user-caret { display: none; }
    .enx-user-chip { padding: 0.25rem; }
    .enx-theme-toggle, .enx-user-avatar { flex-shrink: 0; }
    .enx-global-search { min-width: 0; }

    /* Document bar (Contract + Confirmation stages): at phone widths the two
       action buttons crushed the name/meta column into one-word-per-line —
       let the actions wrap to their own full-width row instead. */
    .enx-doc-bar { flex-wrap: wrap; }
    .enx-doc-bar-meta { flex: 1 1 calc(100% - 46px); }
    .enx-doc-bar-actions { flex: 1 1 100%; }
    .enx-doc-bar > .btn { flex: 0 0 auto; }

    /* UAN grid: the pinned lead + UAN columns ate most of a 430px screen, so
       horizontally scrolling revealed (almost) nothing. Unpin on phones — the
       whole grid scrolls normally; the sticky header row is kept. */
    .enx-uan-grid .enx-grid-sticky { position: static; }
    /* …and let the page scroll vertically instead of trapping the grid in 62vh
       with a nested horizontal scroll inside it. */
    .enx-grid-shell { max-height: none; }

    /* Deal header status: keep the label + badge on one line. */
    .enx-header-status { white-space: nowrap; }

    /* ── Card padding (2026-08-04 mobile sweep) ──────────────────────────────
       1.85rem of side padding is ~60px of a 390px screen. Every near-miss below
       became an actual overflow because of it, so this one rule buys ~26px of
       content width on every page in the app. */
    .enx-card { padding: 1.1rem 1.05rem; }

    /* ── Dropdown popup (EnxSelect) ──────────────────────────────────────────
       Options are nowrap on desktop so the list reads as one line each; on a
       phone a long label (a timezone, a full status name) made the popup wider
       than the screen. enxSelect.js now clamps the box; let the text wrap in it. */
    .enx-select-opt { white-space: normal; }
    .enx-select-pop { max-width: calc(100vw - 16px); }

    /* ── Admin user detail ───────────────────────────────────────────────────
       The 900px block above handles tablets. At phone width the three action
       buttons are white-space:nowrap and together exceed the card, the history
       header's ms-auto export button has nowhere to go, and two 150px date
       inputs plus a separator don't fit on one row. */
    .enx-udx-actions { flex-wrap: wrap; }
    .enx-udx-actions .btn { flex: 1 1 auto; justify-content: center; }
    .enx-udx-histhead { flex-wrap: wrap; }
    .enx-udx-histhead > .ms-auto { margin-left: 0 !important; width: 100%; }
    .enx-udx-filters .enx-select { min-width: 0; flex: 1 1 100%; }
    .enx-udx-daterange { flex-wrap: wrap; width: 100%; }
    /* min-width:0 is load-bearing: iOS gives input[type=date] a large intrinsic
       width and ignores `width` without it. */
    .enx-history-date { width: auto; flex: 1 1 130px; min-width: 0; }
    .enx-history-filters .enx-select { min-width: 0; flex: 1 1 100%; }
    .enx-history-pager, .enx-udx-pager { flex-wrap: wrap; justify-content: center; }

    /* ── Deal list toolbar + pager (2026-08-04: the list gained real paging) ──
       .enx-search caps at 300px and .enx-filter at 230px — side by side that is
       530px against a ~281px card, so they wrapped but each still overshot.
       Full-width stacked instead. Scoped to this toolbar rather than styling
       .enx-search globally, which would also hit the topbar and the admin
       reference toolbars (those deliberately stay 2-up). The pager reuses the
       history-pager rules above, which already wrap and centre. */
    .enx-deal-toolbar .enx-search,
    .enx-deal-toolbar .enx-filter { max-width: none; flex: 1 1 100%; min-width: 0; }

    /* ── Admin settings ──────────────────────────────────────────────────────
       Editor row is input + Save + an optional Clear/Revert link; below ~300px
       of card the input can't hold a date picker or a dropdown as well. */
    .enx-set-editor { flex-wrap: wrap; }
    .enx-set-input { flex: 1 1 100%; }
    .enx-set-card { padding: 1rem; }

    /* ── Security page: verification-method rows ─────────────────────────────
       Label + up to three badges on one side, up to three buttons on the other,
       neither allowed to shrink. Stack them instead. */
    .enx-mfa-row { flex-wrap: wrap; gap: 0.5rem; }
    .enx-mfa-row-text { flex: 1 1 100%; min-width: 0; }
    .enx-mfa-row-actions { flex: 1 1 100%; flex-wrap: wrap; }
    .enx-mfa-row-actions .btn { flex: 1 1 auto; }

    /* ── Modals ──────────────────────────────────────────────────────────────
       Reclaim Bootstrap's default dialog margin; the D&B header stacks. */
    .modal-dialog { margin: 0.5rem; }
    .enx-dnb-head { flex-wrap: wrap; }

    /* flatpickr month picker: appended to <body>, so nothing else caps it. */
    .flatpickr-calendar { max-width: calc(100vw - 16px); }
}

/* Backstop for anything the rules above miss: `clip`, never `hidden` — `hidden`
   would make the body a scroll container and break every position:sticky
   descendant (topbar, sidebar, grid headers, the deal rail). Scoped to phones so
   desktop behaviour is provably unchanged. */
@media (max-width: 640px) {
    html, body { overflow-x: clip; }
}

/* ── Admin reference pages (Meter Read Cycles, Utility Rules, Broker Directory) ── */
.enx-ref-filters { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; }
.enx-ref-filters .enx-filter { max-width: 210px; min-width: 140px; }
/* When a toolbar mixes the (label-less) search box with labeled dropdowns, bottom-align
   everything so the search input lines up with the selects, and give the selects the
   same height as the search input. */
.enx-doc-toolbar:has(.enx-ref-filters) { align-items: flex-end; }
.enx-ref-filters .form-select-sm { padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.875rem; }
.enx-ref-clear { font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--enx-muted); }
.enx-ref-clear:hover { color: var(--enx-ink); }
.enx-ref-resultbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.enx-ref-meta { font-size: 0.78rem; color: var(--enx-muted); }
.enx-ref-subtle { font-size: 0.72rem; color: var(--enx-muted); font-variant-numeric: tabular-nums; }
.enx-ref-none { color: var(--enx-muted); font-style: italic; font-size: 0.85rem; }
.enx-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.enx-ref-capnote {
    margin-top: 0.8rem; padding: 0.55rem 0.9rem; border-radius: 10px;
    font-size: 0.8rem; color: var(--enx-muted);
    background: rgba(141, 163, 196, 0.1); border: 1px dashed var(--enx-border-strong);
}

/* Utility-rule cards: responsive two-up grid of chip-heavy cards */
.enx-ref-utilgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; }
@media (max-width: 520.98px) { .enx-ref-utilgrid { grid-template-columns: 1fr; } }
.enx-ref-utilcard { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.15rem 1.3rem; }
.enx-ref-utilhead { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--enx-border); }
.enx-ref-utilicon {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    color: #b45309; background: rgba(245, 158, 11, 0.13); border: 1px solid rgba(245, 158, 11, 0.26);
}
html[data-theme="dark"] .enx-ref-utilicon { color: #fcd34d; }
.enx-ref-utilname { font-weight: 700; font-size: 0.95rem; color: var(--enx-ink); flex: 1; min-width: 0; }
.enx-ref-rulerow { display: flex; flex-direction: column; gap: 0.3rem; }
.enx-chipset { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.enx-rule-chip {
    display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--enx-ink);
    background: rgba(141, 163, 196, 0.13); border: 1px solid var(--enx-border);
    border-radius: 999px; padding: 0.12rem 0.6rem; white-space: nowrap;
}
.enx-rule-chip-mono { font-family: ui-monospace, "Consolas", monospace; font-variant-numeric: tabular-nums; }
/* Missing Receiver DUNS (2026-08-12). Amber rather than the usual em-dash: an empty DUNS is not
   an unset optional field, it means matrix pricing returns no cost for every deal on that utility.
   Same amber the meter-read calendar uses for its weekend rows, so the two read as one language. */
.enx-rule-chip-warn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: #b45309; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.45);
}
html[data-theme="dark"] .enx-rule-chip-warn {
    color: #fcd34d; background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4);
}

/* State-rules banner card on the Utility Rules page */
.enx-ref-staterules { display: flex; flex-direction: column; gap: 0.65rem; }
.enx-ref-staterules-head { display: flex; align-items: center; gap: 0.75rem; }
.enx-ref-staterules-badge {
    flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    font-weight: 800; font-size: 0.9rem; letter-spacing: 0.03em;
    color: #0e7490; background: rgba(6, 182, 212, 0.13); border: 1px solid rgba(6, 182, 212, 0.28);
}
html[data-theme="dark"] .enx-ref-staterules-badge { color: #67e8f9; }

/* Admin repair: maintenance action tiles + detail headers */
.enx-admin-action { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.2rem; }
.enx-admin-action-icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
}
.enx-admin-action-icon.is-violet { color: #6d28d9; background: rgba(139, 92, 246, 0.13); border: 1px solid rgba(139, 92, 246, 0.26); }
.enx-admin-action-icon.is-amber { color: #b45309; background: rgba(245, 158, 11, 0.13); border: 1px solid rgba(245, 158, 11, 0.26); }
html[data-theme="dark"] .enx-admin-action-icon.is-violet { color: #c4b5fd; }
html[data-theme="dark"] .enx-admin-action-icon.is-amber { color: #fcd34d; }
.enx-admin-action-text { flex: 1; min-width: 0; }
.enx-admin-action-title { font-weight: 700; font-size: 0.92rem; color: var(--enx-ink); }
.enx-admin-action-help { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--enx-muted); line-height: 1.45; }
.enx-admin-action > .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 480.98px) {
    .enx-admin-action { flex-wrap: wrap; }
    .enx-admin-action > .btn { flex: 1 1 100%; }
}

.enx-detail-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.enx-detail-head .enx-card-title { margin-bottom: 0; flex: 1; min-width: 0; }
.enx-repair-selected td { background: rgba(59, 130, 246, 0.07); }
html[data-theme="dark"] .enx-repair-selected td { background: rgba(159, 219, 82, 0.08); }

/* ── Users admin table (dense, two-line identity cells, icon actions) ── */
.enx-users-table td { font-size: 0.86rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.enx-users-table .enx-user-cell { align-items: center; }
.enx-user-cell-text { display: inline-flex; flex-direction: column; gap: 0.06rem; min-width: 0; line-height: 1.3; }
.enx-user-name { font-weight: 600; color: var(--enx-ink); }
.enx-user-sub { font-size: 0.74rem; font-weight: 400; color: var(--enx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.enx-user-dot { margin: 0 0.35rem; opacity: 0.6; }
.enx-user-inactive .enx-user-name, .enx-user-inactive td { color: var(--enx-muted); }
.enx-user-inactive .enx-tbl-avatar { filter: grayscale(1); opacity: 0.65; }

/* Compact icon action buttons with tooltips (replaces the chunky text buttons). */
.enx-rowactions { display: inline-flex; gap: 0.3rem; }
.enx-iconbtn {
    display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--enx-border); background: transparent; color: var(--enx-muted);
    cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.enx-iconbtn:hover:not(:disabled) {
    color: var(--enx-teal-ink); border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.08); transform: translateY(-1px);
}
.enx-iconbtn.is-warn:hover:not(:disabled) { color: #b45309; border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.1); }
.enx-iconbtn.is-ok:hover:not(:disabled) { color: #047857; border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.1); }
.enx-iconbtn:disabled { opacity: 0.45; cursor: not-allowed; }
html[data-theme="dark"] .enx-iconbtn:hover:not(:disabled) { color: #8ab6ff; }
html[data-theme="dark"] .enx-iconbtn.is-warn:hover:not(:disabled) { color: #fcd34d; }
html[data-theme="dark"] .enx-iconbtn.is-ok:hover:not(:disabled) { color: #34d399; }

/* Edit-user modal touches (shares the create-user / D&B modal shell). */
.enx-usermodal-avatar { width: 34px; height: 34px; font-size: 0.85rem; flex-shrink: 0; align-self: center; }
.enx-usermodal-password {
    padding: 0.8rem 0.95rem; border-radius: 12px;
    border: 1px dashed var(--enx-border-strong); background: rgba(141, 163, 196, 0.06);
}
.enx-usermodal-password .form-label { margin-bottom: 0.35rem; }
.enx-usermodal-password .btn { white-space: nowrap; flex-shrink: 0; align-self: center; }

/* Compact toggle + help-icon pattern (Users modals): short switch labels with the
   long explanation in a branded tippy tooltip instead of inline text. */
.enx-switch-row { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; min-height: 38px; }
.enx-switch-field { display: inline-flex; align-items: center; gap: 0.4rem; }
.enx-switch-field .form-check-label { font-weight: 600; white-space: nowrap; }
.enx-help-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    color: var(--enx-muted); cursor: help; flex-shrink: 0;
    transition: color 0.12s ease, background 0.12s ease;
}
.enx-help-tip:hover, .enx-help-tip:focus-visible { color: var(--enx-teal-ink); background: rgba(59, 130, 246, 0.1); outline: none; }

/* ── Meter-read-cycle matrix (utility/year chips + cycle × month grid) ── */
.enx-mrc-picker { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.95rem 1.15rem; margin-bottom: 1rem; }
.enx-mrc-pickrow { display: flex; align-items: baseline; gap: 0.8rem; }
.enx-mrc-picklabel { flex-shrink: 0; width: 46px; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--enx-muted); }
.enx-mrc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.enx-mrc-chip { border: 1px solid var(--enx-border-strong); background: var(--enx-surface);
    color: var(--enx-muted); font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 0.28rem 0.85rem;
    cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.enx-mrc-chip:hover { border-color: rgba(59, 130, 246, 0.55); color: var(--enx-ink); }
.enx-mrc-chip.active { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.6); color: #2563eb; }
html[data-theme="dark"] .enx-mrc-chip.active { color: #8ab6ff; background: rgba(59, 130, 246, 0.16); }
.enx-mrc-chip.is-year { font-variant-numeric: tabular-nums; }
/* Cycle chips: compact numeric pills (there can be 20+), min-width keeps 1–2 digit
   labels the same size so the row reads as a scale rather than ragged pills. */
.enx-mrc-chip.is-cycle { min-width: 2.35rem; text-align: center; padding: 0.24rem 0.55rem;
    font-variant-numeric: tabular-nums; }
.enx-mrc-clearfilter { display: inline-flex; align-items: center; gap: 0.3rem; border: none;
    background: none; padding: 0; font-size: 0.76rem; font-weight: 600; color: var(--enx-muted);
    cursor: pointer; }
.enx-mrc-clearfilter:hover { color: var(--enx-ink); }
.enx-mrc-matrixtitle { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; }

.enx-mrc-matrix { table-layout: fixed; min-width: 900px; }
.enx-mrc-matrix th, .enx-mrc-matrix td { padding: 0.4rem 0.3rem; }
.enx-mrc-cyclecol { width: 62px; text-align: center; }
.enx-mrc-cell { line-height: 1.2; }
.enx-mrc-dow { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--enx-muted); }
.enx-mrc-day { display: block; font-size: 0.92rem; font-weight: 600; color: var(--enx-ink);
    font-variant-numeric: tabular-nums; }
.enx-mrc-none { color: var(--enx-border-strong); }
/* Weekend shading sits on an inset inner block (2026-07-28): shading the td itself
   made vertically adjacent weekend cells merge into one solid band. */
.enx-mrc-fill { display: block; padding: 0.18rem 0.25rem; border-radius: 8px; }
.enx-mrc-cell.is-weekend { padding-top: 0.22rem; padding-bottom: 0.22rem; }
.enx-mrc-cell.is-weekend .enx-mrc-fill { background: rgba(245, 158, 11, 0.10); }
.enx-mrc-cell.is-weekend .enx-mrc-dow, .enx-mrc-cell.is-weekend .enx-mrc-day { color: #b45309; }
html[data-theme="dark"] .enx-mrc-cell.is-weekend .enx-mrc-dow,
html[data-theme="dark"] .enx-mrc-cell.is-weekend .enx-mrc-day { color: #fcd34d; }

/* Off-month read date (2026-08-11): ~18% of the calendar reads in a month other than its
   own cycle month, and the cell only had room for a weekday and a day number — so a "26"
   in the NOV column read as Nov 26 when the date is really Oct 26. The tag states the real
   month; the tint marks the cell as one to look at.
   Blue, not amber: 51 rows are off-month AND weekend, so the two must stay distinguishable.
   Declared after the weekend rules so the blue wins the background on those overlap rows,
   while the weekend text colour below still applies — one cell, both signals. */
.enx-mrc-monthtag { display: block; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: #1d4ed8; line-height: 1.25; }
.enx-mrc-cell.is-offmonth { padding-top: 0.22rem; padding-bottom: 0.22rem; }
.enx-mrc-cell.is-offmonth .enx-mrc-fill { background: rgba(37, 99, 235, 0.10); }
html[data-theme="dark"] .enx-mrc-monthtag { color: #93c5fd; }
html[data-theme="dark"] .enx-mrc-cell.is-offmonth .enx-mrc-fill { background: rgba(96, 165, 250, 0.16); }

/* The whole bubble is the Salesforce link, not just the day number: the tinted block already
   reads as one object, and in a 12-column table a target the width of "2" is a hard click.
   Styled to read as ordinary text until hover — every cell would otherwise be blue and
   underlined, drowning out the weekend/off-month signals this table exists to show.

   The colour rules carry `!important` and name every descendant on purpose. The global
   `a:hover { color: var(--enx-teal) }` near the top of this file is more specific than a bare
   class, so without this the day number turned teal on hover and the weekend/off-month colours
   were lost exactly when the user was pointing at the cell. */
.enx-mrc-link { display: block; color: inherit !important; text-decoration: none; cursor: pointer;
    border-radius: 8px; transition: background-color 0.12s ease, box-shadow 0.12s ease; }
.enx-mrc-link:hover, .enx-mrc-link:focus-visible { color: inherit !important; }
.enx-mrc-link:hover .enx-mrc-dow, .enx-mrc-link:hover .enx-mrc-day, .enx-mrc-link:hover .enx-mrc-monthtag,
.enx-mrc-link:focus-visible .enx-mrc-dow, .enx-mrc-link:focus-visible .enx-mrc-day,
.enx-mrc-link:focus-visible .enx-mrc-monthtag { color: inherit; }
/* Hover moves the whole bubble, not the text: a surface change reads as "this block is the
   button" where an underline on the digits would point back at the old, smaller target. */
.enx-mrc-link:hover { background: var(--enx-surface); }
.enx-mrc-cell.is-weekend .enx-mrc-link:hover { background: rgba(245, 158, 11, 0.22); }
.enx-mrc-cell.is-offmonth .enx-mrc-link:hover { background: rgba(37, 99, 235, 0.22); }
.enx-mrc-link:focus-visible { outline: none; box-shadow: var(--enx-ring); }

.enx-mrc-legend-swatch.is-offmonth { background: rgba(37, 99, 235, 0.25); border: 1px solid rgba(37, 99, 235, 0.5); }

.enx-mrc-legend { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem;
    font-size: 0.76rem; color: var(--enx-muted); }
.enx-mrc-legend-swatch { flex-shrink: 0; width: 14px; height: 14px; border-radius: 4px; }
.enx-mrc-legend-swatch.is-weekend { background: rgba(245, 158, 11, 0.25); border: 1px solid rgba(245, 158, 11, 0.5); }

/* Missing deal-start month on the UAN tab (must be set on the Customer tab). */
.enx-dealstart-missing { color: #b45309; background: rgba(245, 158, 11, 0.12); }
html[data-theme="dark"] .enx-dealstart-missing { color: #fcd34d; background: rgba(245, 158, 11, 0.16); }

/* ── Load Profile Mappings (segment → rate-class admin table) ── */
/* Toolbar: search (filter) anchors left, add-segment (create) anchors right — two
   distinct jobs get distinct visual homes instead of two look-alike stacked inputs. */
.enx-lpm-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--enx-border);
}
.enx-lpm-searchwrap { position: relative; display: flex; align-items: center; gap: 0.5rem; flex: 1 1 300px; max-width: 360px; }
.enx-lpm-searchicon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--enx-text-muted, #94a3b8);
    pointer-events: none;
    display: inline-flex;
}
.enx-lpm-search { padding-left: 2.15rem; font-size: 0.875rem; }
.enx-lpm-searchwrap:focus-within .enx-lpm-searchicon { color: #008ac0; }
.enx-lpm-searchmeta { white-space: nowrap; font-size: 0.8rem; color: var(--enx-text-muted, #64748b); display: inline-flex; align-items: center; gap: 0.35rem; }
.enx-lpm-add { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end; }
.enx-lpm-addgroup { display: flex; }
.enx-lpm-addgroup .enx-lpm-addinput { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.enx-lpm-addbtn { border-top-left-radius: 0; border-bottom-left-radius: 0; white-space: nowrap; }
.enx-lpm-addinput { width: 240px; font-size: 0.85rem; text-transform: uppercase; }
.enx-lpm-addhint { font-size: 0.75rem; color: var(--enx-text-muted, #94a3b8); }
@media (max-width: 720px) {
    .enx-lpm-add { align-items: flex-start; width: 100%; }
    .enx-lpm-searchwrap { max-width: none; }
    /* The 240px input + the nowrap "Add segment" button came to ~370px, which is wider
       than a phone card's content box (~281px at 390px viewport) — it pushed the WHOLE
       page into horizontal overflow and clipped the button. Let the input absorb what's
       left instead; the joined input+button pill (see the radius rules above) is kept. */
    .enx-lpm-addgroup { width: 100%; }
    .enx-lpm-addinput { width: auto; flex: 1 1 auto; min-width: 0; }
}
.enx-lpm-table td { vertical-align: middle; }
/* Restrict chip: amber like the weekend/warning accents — visually distinct from the
   blue rate-class chips so a restricted segment reads at a glance. */
.enx-lpm-restrict.active { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.65); color: #b45309; }
html[data-theme="dark"] .enx-lpm-restrict.active { color: #fcd34d; background: rgba(245, 158, 11, 0.16); }
.enx-lpm-modified td { background: rgba(59, 130, 246, 0.05); }
.enx-lpm-dirtychip { color: #2563eb; border-color: rgba(59, 130, 246, 0.4); }
html[data-theme="dark"] .enx-lpm-dirtychip { color: #8ab6ff; }
.enx-lpm-footer { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--enx-border); }
.enx-lpm-dirtynote { font-size: 0.78rem; color: var(--enx-muted); }

/* ── Merged Brokers page: broker rows expand into their agent tree ── */
/* Fixed column widths: with auto layout the sparse "Default margin" / "Portal owner"
   columns collapse into each other while "Status" hoards the slack. */
.enx-broker-table { table-layout: fixed; min-width: 860px; }
.enx-broker-table th:nth-child(1) { width: 38%; }
.enx-broker-table th:nth-child(2) { width: 10%; }
.enx-broker-table th:nth-child(3) { width: 14%; }
.enx-broker-table th:nth-child(4) { width: 20%; }
.enx-broker-table th:nth-child(5) { width: 9%; }
.enx-broker-table th:nth-child(6) { width: 9%; }
.enx-broker-table td { overflow: hidden; text-overflow: ellipsis; }
.enx-broker-row { cursor: pointer; }
.enx-broker-row.is-expanded td { background: rgba(59, 130, 246, 0.05); }
html[data-theme="dark"] .enx-broker-row.is-expanded td { background: rgba(159, 219, 82, 0.06); }
.enx-broker-chev { flex-shrink: 0; color: var(--enx-muted); transition: transform 0.15s ease; }
.enx-broker-chev.is-open { transform: rotate(90deg); }

.enx-agent-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px;
    padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--enx-teal-ink);
    background: rgba(59, 130, 246, 0.10); border: 1px solid rgba(59, 130, 246, 0.25); }
.enx-agent-count.is-zero { color: var(--enx-muted); background: rgba(141, 163, 196, 0.10); border-color: var(--enx-border); }
html[data-theme="dark"] .enx-agent-count { color: #8ab6ff; }

/* Expanded agent panel: indented, framed, with its own mini-table. */
.enx-broker-agents-row > td { padding: 0.6rem 0 0.9rem 2.4rem !important; background: rgba(59, 130, 246, 0.03); }
html[data-theme="dark"] .enx-broker-agents-row > td { background: rgba(159, 219, 82, 0.04); }
.enx-broker-agents { border: 1px solid var(--enx-border); border-radius: 12px; padding: 0.85rem 1rem;
    background: var(--enx-surface); margin-right: 0.9rem; }
.enx-broker-agents-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem;
    color: var(--enx-muted); margin-bottom: 0.6rem; }
.enx-broker-agents-table { margin-bottom: 0; }
.enx-broker-agents-table td { font-size: 0.84rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
/* Per-broker welcome-packet template block below the agent list in the expanded panel. */
.enx-broker-template { border-top: 1px dashed var(--enx-border); margin-top: 0.85rem; padding-top: 0.75rem; }
.enx-broker-template .enx-user-name { font-size: 0.86rem; }
.enx-agent-hit td { background: rgba(245, 158, 11, 0.08); }

.enx-broker-unlinked-avatar { background: rgba(245, 158, 11, 0.16); color: #b45309; }
html[data-theme="dark"] .enx-broker-unlinked-avatar { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }

/* ===== MFA: method picker, authenticator QR, recovery codes (login card + setup) ===== */
.enx-auth-method-list { display: flex; flex-direction: column; gap: 0.6rem; }
.enx-auth-method { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
    width: 100%; text-align: left; padding: 0.7rem 0.9rem; border-radius: 12px; cursor: pointer;
    border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(255, 255, 255, 0.04); color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease; }
.enx-auth-method:hover:not(:disabled) { border-color: #2db7e6; background: rgba(45, 183, 230, 0.08); }
.enx-auth-method:disabled { opacity: 0.6; cursor: default; }
.enx-auth-method strong { font-size: 0.92rem; }
.enx-auth-method span { font-size: 0.8rem; opacity: 0.75; }

.enx-auth-qr-wrap { text-align: center; margin-bottom: 1rem; }
.enx-auth-qr { width: 180px; height: 180px; border-radius: 12px; background: #fff; padding: 8px; }
.enx-auth-qr-hint { font-size: 0.8rem; opacity: 0.75; margin: 0.5rem 0 0.25rem; }
.enx-auth-manual-key { display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em;
    padding: 0.3rem 0.6rem; border-radius: 8px; background: rgba(148, 163, 184, 0.15);
    word-break: break-all; user-select: all; }

.enx-auth-recovery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.enx-auth-recovery-code { display: block; text-align: center; font-size: 0.9rem; letter-spacing: 0.06em;
    padding: 0.45rem 0.4rem; border-radius: 8px; background: rgba(148, 163, 184, 0.15);
    border: 1px dashed rgba(148, 163, 184, 0.4); user-select: all; }
/* Light-theme variant for modals (Security page regenerate/first-activation). */
.enx-auth-recovery-grid.is-light .enx-auth-recovery-code {
    background: var(--enx-surface); border-color: var(--enx-border-strong); color: var(--enx-ink); }

/* ===== One-time-code boxes (OtpInput.razor): one box per digit ===== */
.enx-otp { display: flex; gap: 0.45rem; justify-content: center; margin: 0.35rem 0; }
.enx-otp-box {
    width: 2.6rem; height: 3.1rem; padding: 0; text-align: center;
    font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums;
    border: 1.5px solid var(--enx-border-strong); border-radius: 10px;
    background: var(--enx-surface); color: var(--enx-ink); caret-color: var(--enx-teal, #2db7e6);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.enx-otp-box:focus {
    outline: none; border-color: #2db7e6;
    box-shadow: 0 0 0 3px rgba(45, 183, 230, 0.2);
}
.enx-otp-box:disabled { opacity: 0.55; }
/* Dark login-card variant (matches .enx-auth-input glass styling). */
.enx-otp.is-dark .enx-otp-box {
    border-color: rgba(148, 163, 184, 0.35); background: rgba(255, 255, 255, 0.05); color: #f1f5f9;
}
.enx-otp.is-dark .enx-otp-box:focus {
    border-color: #2db7e6; box-shadow: 0 0 0 3px rgba(45, 183, 230, 0.22);
    background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 420px) {
    .enx-otp { gap: 0.3rem; }
    .enx-otp-box { width: 2.2rem; height: 2.7rem; font-size: 1.15rem; }
}

/* ===== TOTP two-step indicator (MfaStepDots.razor) ===== */
.enx-stepdots { display: flex; align-items: flex-start; justify-content: center; gap: 0.5rem; margin: 0.5rem 0 0.9rem; }
.enx-stepdots-step { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; }
.enx-stepdots-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; font-size: 0.82rem; font-weight: 700;
    border: 2px solid var(--enx-border-strong); color: var(--enx-muted); background: var(--enx-surface);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.enx-stepdots-step.is-active .enx-stepdots-dot {
    border-color: #2db7e6; color: #0b7ea8; transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(45, 183, 230, 0.14);
}
.enx-stepdots-step.is-done .enx-stepdots-dot {
    border-color: #10b981; background: #10b981; color: #fff;
}
.enx-stepdots-label { font-size: 0.72rem; font-weight: 600; color: var(--enx-muted); text-align: center; max-width: 130px; }
.enx-stepdots-step.is-active .enx-stepdots-label { color: var(--enx-ink); }
.enx-stepdots-line {
    flex: 0 1 70px; height: 2px; margin-top: 13px; border-radius: 2px;
    background: var(--enx-border-strong); transition: background 0.25s ease;
}
.enx-stepdots-line.is-done { background: #10b981; }
/* Dark login-card variant. */
.enx-stepdots.is-dark .enx-stepdots-dot {
    border-color: rgba(148, 163, 184, 0.45); background: rgba(255, 255, 255, 0.05); color: #cbd5e1;
}
.enx-stepdots.is-dark .enx-stepdots-step.is-active .enx-stepdots-dot {
    border-color: #2db7e6; color: #7dd3fc; box-shadow: 0 0 0 4px rgba(45, 183, 230, 0.18);
}
.enx-stepdots.is-dark .enx-stepdots-step.is-done .enx-stepdots-dot {
    border-color: #10b981; background: #10b981; color: #fff;
}
.enx-stepdots.is-dark .enx-stepdots-label { color: rgba(203, 213, 225, 0.75); }
.enx-stepdots.is-dark .enx-stepdots-step.is-active .enx-stepdots-label { color: #f1f5f9; }
.enx-stepdots.is-dark .enx-stepdots-line { background: rgba(148, 163, 184, 0.35); }
.enx-stepdots.is-dark .enx-stepdots-line.is-done { background: #10b981; }

/* ===== PasswordInput: show/hide eye toggle (QA request 2026-07-29) ===== */
.enx-pw-wrap { position: relative; }
.enx-pw-input { padding-right: 2.4rem; }
.enx-pw-eye {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    width: 2.4rem; padding: 0; border: none; background: none;
    color: #64748b; cursor: pointer; border-radius: 0 6px 6px 0;
}
.enx-pw-eye:hover, .enx-pw-eye:focus-visible { color: #0b1526; }
.enx-pw-eye:focus-visible { outline: 2px solid #2db7e6; outline-offset: -2px; }