/* ════════════════════════════════════════════════════════════════════
   Entity View — modern, minimalist shell for Account & Opportunity pages.

   Plain HTML + this stylesheet (no MudBlazor chrome). Everything lives
   under the .ev-* namespace so it never leaks into other pages, and the
   card/table overrides are scoped under .ev-details so the shared
   AmboltCard / InfoTable components are only restyled on these pages.

   Brand: navy #1E3A8A. Dark-mode aware via the html[data-theme="dark"] ancestor
   class that MudThemeProvider toggles.
   ════════════════════════════════════════════════════════════════════ */

/* Design tokens (light + dark) live in css/ev/tokens.css — loaded before
   this sheet. Do not re-define --ev-* variables here. */

.ev-root {
    color: var(--ev-text);
    font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    width: 100%;
    padding-bottom: 32px;
}

/* ── Sticky-header table variant ──
   Opt-in for long list tables: caps the scroll wrapper's height so it
   scrolls vertically, and pins the header row while it does. Add the
   modifier next to .ev-table-scroll on tables that routinely exceed a
   screenful. */
.ev-table-scroll--sticky {
    max-height: 70vh;
    overflow-y: auto;
}

.ev-table-scroll--sticky .ev-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ev-surface);
    box-shadow: 0 1px 0 var(--ev-border);
}

/* ── Full-width opt-out for the standard page container ──
   The app-wide page width lives on .app-container (MainLayout.razor.css,
   1440px). A page that genuinely needs the whole viewport (e.g. very wide
   data grids) opts out by carrying the `page-fullwidth` class anywhere in
   its markup. Global (unscoped) rule with .app-main in the chain so it
   out-specifies the scoped .app-container declaration. */
.app-main .app-container:has(.page-fullwidth) {
    max-width: none;
}

/* ─────────────────────────────  Hero header  ───────────────────────── */
.ev-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: var(--ev-shadow);
}

.ev-hero-id {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    flex: 1 1 360px;
}

.ev-avatar {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--ev-primary-soft);
    color: var(--ev-primary);
}

.ev-avatar .material-icons { font-size: 28px; }

.ev-headings { min-width: 0; }

.ev-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ev-text-muted);
    text-decoration: none;
    margin-bottom: 4px;
    transition: color 0.15s ease;
}

.ev-back:hover { color: var(--ev-primary); }
.ev-back .material-icons { font-size: 1rem; }

.ev-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--ev-text-soft);
}

.ev-title {
    margin: 1px 0 0;
    font-size: 1.55rem;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ev-text);
}

.ev-sub {
    margin-top: 5px;
    font-size: 0.85rem;
    color: var(--ev-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ev-sub .material-icons { font-size: 1rem; opacity: 0.7; }

.ev-sub-truncate {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────────────────────  Chips  ─────────────────────────────── */
.ev-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    background: var(--ev-primary-soft);
    color: var(--ev-primary);
    border: 1px solid transparent;
    white-space: nowrap;
}

.ev-chip .material-icons { font-size: 0.95rem; }

.ev-chip--muted { background: var(--ev-surface-2); color: var(--ev-text-muted); border-color: var(--ev-border); }
.ev-chip--success { background: rgba(0, 137, 123, 0.1); color: #047857; }
.ev-chip--won { background: rgba(0, 137, 123, 0.12); color: #047857; }
.ev-chip--lost { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.ev-chip--closed { background: var(--ev-surface-2); color: var(--ev-text-muted); border-color: var(--ev-border); }
.ev-chip--warn { background: rgba(245, 158, 11, 0.12); color: #b45309; }

html[data-theme="dark"] .ev-chip--success,
html[data-theme="dark"] .ev-chip--won { color: #6ee7b7; }
html[data-theme="dark"] .ev-chip--lost { color: #fca5a5; }
html[data-theme="dark"] .ev-chip--warn { color: #fcd34d; }

/* Engage-RM clickable chip */
.ev-chip-btn {
    cursor: pointer;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    font-family: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.ev-chip-btn:hover { background: rgba(245, 158, 11, 0.2); box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2); }
html[data-theme="dark"] .ev-chip-btn { color: #fcd34d; }

/* ─────────────────────────────  Actions  ──────────────────────────── */
.ev-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.ev-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 11px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.1;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ev-btn .material-icons { font-size: 1.05rem; line-height: 1; }
.ev-btn:disabled, .ev-btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.ev-btn:active:not(:disabled) { transform: translateY(1px); }

.ev-btn-cta { background: var(--ev-cta); color: #fff; }
.ev-btn-cta:hover { background: var(--ev-cta-hover); box-shadow: 0 4px 14px rgba(0, 137, 123, 0.3); color: #fff; }

.ev-btn-primary { background: var(--ev-primary); color: #fff; }
.ev-btn-primary:hover { background: var(--ev-primary-hover); box-shadow: 0 4px 14px var(--ev-primary-ring); color: #fff; }
html[data-theme="dark"] .ev-btn-primary, html[data-theme="dark"] .ev-btn-primary:hover { color: #0f172a; }

.ev-btn-ghost {
    background: var(--ev-surface);
    color: var(--ev-text);
    border-color: var(--ev-border-strong);
}

.ev-btn-ghost:hover { background: var(--ev-surface-2); border-color: var(--ev-primary); color: var(--ev-text); }
.ev-btn-ghost .material-icons { color: var(--ev-text-muted); }
.ev-btn-ghost:hover .material-icons { color: var(--ev-primary); }

/* Greyed-but-clickable CTA: the action still works, but the muted look signals
   a caution (e.g. de-energised meter) that the click will ask to confirm. */
.ev-btn--deenergised { background: var(--ev-surface-2); color: var(--ev-text-muted); border-color: var(--ev-border-strong); }
.ev-btn--deenergised:hover { color: var(--ev-text); border-color: var(--ev-warn); }

/* Coloured icon accents on ghost buttons — keeps recognisability while
   staying minimalist (neutral surface, coloured glyph only). */
.ev-ic-sf .material-icons { color: #3b82f6; }
.ev-ic-perf .material-icons { color: #8b5cf6; }
.ev-ic-tender .material-icons { color: #ec4899; }
.ev-ic-ecoes .material-icons { color: #a855f7; }
.ev-ic-params .material-icons { color: #ec4899; }
.ev-ic-settings .material-icons { color: #64748b; }
.ev-ic-warn .material-icons { color: #f59e0b; }
.ev-btn-ghost:hover.ev-ic-sf .material-icons,
.ev-btn-ghost:hover.ev-ic-perf .material-icons,
.ev-btn-ghost:hover.ev-ic-tender .material-icons,
.ev-btn-ghost:hover.ev-ic-ecoes .material-icons,
.ev-btn-ghost:hover.ev-ic-params .material-icons,
.ev-btn-ghost:hover.ev-ic-settings .material-icons,
.ev-btn-ghost:hover.ev-ic-warn .material-icons { color: inherit; }

/* ─────────────────────────────  Dropdown menus  ───────────────────── */
.ev-menu { position: relative; display: inline-flex; }

.ev-menu-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; border: none; }

.ev-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    min-width: 248px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 14px;
    box-shadow: var(--ev-shadow-pop);
    padding: 6px;
    animation: ev-pop 0.13s ease;
}

@keyframes ev-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Grid (fixed icon column + text column) so anchor and button items line
   up identically — element type no longer affects where the label starts. */
.ev-menu-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 11px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 12px;
    border-radius: 9px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.83rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--ev-text);
    text-decoration: none;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.ev-menu-item:hover { background: var(--ev-primary-soft); color: var(--ev-primary); }
/* Icon sits in the fixed first grid column so every label starts at the same x */
.ev-menu-item .material-icons { font-size: 1.1rem; color: var(--ev-text-soft); justify-self: center; }
.ev-menu-item:hover .material-icons { color: var(--ev-primary); }
.ev-menu-item:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.ev-menu-sep { height: 1px; background: var(--ev-border); margin: 5px 8px; }

.ev-menu-stats {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px 10px;
}

.ev-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--ev-surface-2);
    border-radius: 10px;
}

.ev-stat-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ev-text-soft); }
.ev-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--ev-primary); line-height: 1; }

/* ─────────────────────────────  Alert banner  ─────────────────────── */
.ev-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.ev-alert .material-icons { font-size: 1.2rem; }
.ev-alert--error { background: rgba(239, 68, 68, 0.1); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.25); }
html[data-theme="dark"] .ev-alert--error { color: #fca5a5; }
.ev-alert--warn { background: var(--ev-warn-soft); color: var(--ev-warn); border: 1px solid rgba(245, 158, 11, 0.28); align-items: flex-start; }
.ev-alert--info { background: var(--ev-primary-soft); color: var(--ev-primary); border: 1px solid var(--ev-primary-ring); }
.ev-alert--success { background: var(--ev-success-soft); color: var(--ev-success); border: 1px solid rgba(4, 120, 87, 0.22); }
.ev-alert--muted { background: var(--ev-surface-2); color: var(--ev-text-muted); border: 1px solid var(--ev-border); align-items: flex-start; }
.ev-alert-list { margin: 6px 0 0; padding-left: 18px; font-weight: 500; }

.ev-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    font-weight: 600;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ─────────────────────────────  Tab bar  ──────────────────────────── */
.ev-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    border-bottom: 1px solid var(--ev-border);
    margin-bottom: 20px;
    /* Scroll only as a fallback when the tabs genuinely overflow (e.g. the
       8-tab Account view on a narrow screen); no visible scrollbar so the
       bar never looks "slightly scrollable". */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ev-tabs::-webkit-scrollbar { height: 0; width: 0; display: none; }

.ev-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--ev-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ev-tab .material-icons { font-size: 1.15rem; }
.ev-tab:hover { color: var(--ev-text); }
.ev-tab.is-active { color: var(--ev-primary); border-bottom-color: var(--ev-primary); }
.ev-tab:disabled, .ev-tab.is-disabled { opacity: 0.4; cursor: not-allowed; }
.ev-tab:disabled:hover, .ev-tab.is-disabled:hover { color: var(--ev-text-muted); }

.ev-tab-count {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ev-surface-2);
    color: var(--ev-text-muted);
    line-height: 1.5;
}

.ev-tab.is-active .ev-tab-count { background: var(--ev-primary-soft); color: var(--ev-primary); }

/* Inset tab bar — for tabs nested inside a card (e.g. OpportunityInfoCard) */
.ev-tabs-inset { margin-bottom: 12px; }
.ev-tabs-inset .ev-tab { padding: 9px 10px; font-size: 0.8rem; }

/* ─────────────────────────────  Panels  ───────────────────────────── */
.ev-panel { animation: ev-fade 0.2s ease; }
.ev-panel[hidden] { display: none; }

@keyframes ev-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* A neutral surface wrapper for tab content that hosts a heavy table /
   sub-component, so those panels match the carded look of the page. */
.ev-surface {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--ev-shadow);
}

.ev-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: var(--ev-primary-soft);
    color: var(--ev-primary);
    font-size: 0.8rem;
    font-weight: 500;
}

.ev-hint .material-icons { font-size: 1.05rem; }

/* ─────────────────────────────  Skeleton  ─────────────────────────── */
.ev-skeleton { display: flex; flex-direction: column; gap: 16px; }

.ev-sk-hero {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: var(--ev-shadow);
}

.ev-sk-avatar { width: 54px; height: 54px; border-radius: 16px; flex: none; }
.ev-sk-hero-text { flex: 1; min-width: 0; }
.ev-sk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-sk-btn { width: 112px; height: 38px; border-radius: 11px; }
.ev-sk-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ev-sk-pill { width: 78px; height: 24px; border-radius: 999px; }

.ev-sk-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--ev-border); padding-bottom: 14px; }
.ev-sk-tab { width: 92px; height: 15px; border-radius: 6px; }

/* Two columns to match what actually loads in — .ev-dashgrid on Home and
   .ev-cardgrid--flat on the detail pages are both 2-up. A `min-width: 1500px`
   viewport rule used to push the skeleton to 3 columns, so on a wide screen
   the placeholder snapped from 3 to 2 the moment data arrived. */
.ev-sk-grid { column-gap: 14px; column-count: 2; }
.ev-sk-card { width: 100%; border-radius: 16px; margin-bottom: 14px; break-inside: avoid; }

@media (max-width: 900px) { .ev-sk-grid { column-count: 1; } }

/* Shimmer on every skeleton shape */
.ev-sk-avatar, .ev-sk-btn, .ev-sk-pill, .ev-sk-tab, .ev-sk-card, .ev-sk-bar {
    background: linear-gradient(100deg, var(--ev-surface-2) 30%, var(--ev-border) 50%, var(--ev-surface-2) 70%);
    background-size: 220% 100%;
    animation: ev-shimmer 1.4s ease-in-out infinite;
}

.ev-sk-bar { border-radius: 6px; }

@keyframes ev-shimmer {
    0% { background-position: 180% 0; }
    100% { background-position: -80% 0; }
}

/* ════════════════════════════════════════════════════════════════════
   Details tab — restyle the shared AmboltCard / InfoTable components,
   but ONLY inside .ev-details so the other 56 pages that reuse them are
   untouched. No ::deep needed: these are global selectors gated by the
   .ev-details ancestor that exists only on these two pages.
   ════════════════════════════════════════════════════════════════════ */
.ev-details { width: 100%; }

/* The MudGrid keeps its responsive column behaviour; zero its negative
   gutter (rather than widening it) so the row never overflows the page
   and introduces a phantom horizontal scroll. */
.ev-details .mud-grid { margin: 0 !important; width: 100% !important; }
.ev-details .mud-grid > .mud-grid-item { padding: 8px !important; }

/* Outer card */
.ev-details .card {
    padding: 0 !important;
    border: 1px solid var(--ev-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--ev-shadow) !important;
    background: var(--ev-surface) !important;
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.ev-details .card:hover { border-color: var(--ev-border-strong) !important; box-shadow: var(--ev-shadow-pop) !important; }

/* Strip the nested MudPaper backgrounds/shadows inside the card */
.ev-details .card .mud-paper { background: transparent !important; box-shadow: none !important; }

/* Card header (the first inner MudPaper — holds icon + title + header slot).
   Kept on the same clean white surface as the body, separated only by a
   hairline divider — no grey fill. */
.ev-details .card > .mud-paper:first-child {
    display: block;
    padding: 13px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--ev-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Card title */
.ev-details .card .mud-typography-h6 {
    color: var(--ev-text) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* The big navy circle icon → compact rounded-square. MudIcon renders the
   <svg> itself with .header-icon applied, so size it with border-box +
   padding to inset the glyph. */
.ev-details .header-icon {
    box-sizing: border-box !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    padding: 7px !important;
    border-radius: 10px !important;
    background: var(--ev-primary-soft) !important;
    color: var(--ev-primary) !important;
}

/* Card body */
.ev-details .grey-paper {
    padding: 4px 16px 12px !important;
    background: var(--ev-surface) !important;
}

/* Key/value table → clean spec list. The InfoTable's MudSimpleTable carries
   an inline grey background (var(--ev-bg)); neutralise the
   whole wrapper so the fields sit on the card's clean white surface. */
.ev-details table { width: 100%; border-collapse: collapse; background: transparent !important; }
.ev-details .mud-table,
.ev-details .mud-simple-table {
    background: transparent !important;
    box-shadow: none !important;
}

.ev-details thead th {
    text-align: left;
    font-size: 0.66rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ev-text-soft) !important;
    font-weight: 700 !important;
    padding: 8px 8px 6px !important;
    border-bottom: 1px solid var(--ev-border) !important;
}

.ev-details tbody tr { border-bottom: 1px solid var(--ev-border); }
.ev-details tbody tr:last-child { border-bottom: none; }
/* Gentle, on-brand hover (navy tint, never grey) */
.ev-details tbody tr:hover { background: var(--ev-primary-soft); }

.ev-details td {
    padding: 10px 8px !important;
    border: none !important;
    vertical-align: top;
    font-size: 0.85rem;
    background: transparent !important;
}

.ev-details td:first-child {
    color: var(--ev-text-muted) !important;
    font-weight: 500;
    width: 40%;
    padding-right: 12px !important;
}

.ev-details td:last-child { color: var(--ev-text); font-weight: 600; }
.ev-details td .mud-typography { font-size: 0.85rem; color: inherit; }

/* Links inside the spec list */
.ev-details td a, .ev-details td .mud-link { color: var(--ev-primary) !important; font-weight: 600; }
.ev-details td a:hover, .ev-details td .mud-link:hover { text-decoration: underline; }

/* Keep MudBlazor progress bar (Loading) subtle */
.ev-details .mud-progress-linear { border-radius: 4px; overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════
   Plain-HTML detail cards (EvCard / EvRow) — used on the Details tabs in
   place of the shared MudBlazor AmboltCard.
   ════════════════════════════════════════════════════════════════════ */
/* Detail-card grid — column-packed ("masonry"), so a short card is followed
   immediately by the next one instead of leaving dead space until the start
   of the next row:

       +---------+---------+---------+
       |         | card2   | card3   |
       |         +---------+         |
       |  card1  | card4   |         |
       |         |         +---------+
       |         |         | card5   |
       +---------+---------+---------+

   Cards keep their exact content height. The trade-off — accepted
   deliberately — is that only the first card in each column has an aligned
   top; CSS cannot both pack upward and align every row. (grid-template-rows:
   masonry would, but it has not shipped in Chrome.)

   column-width, not column-count, so the browser derives the column count
   from the CONTAINER rather than the viewport. That keeps it correct inside
   the 1440px .app-container and on full-width pages alike — a viewport media
   query previously forced a third column into a 1440px container.
   ~360px gives 3 columns on a desktop container, 2 mid-size, 1 on mobile.

   break-inside on every direct child, not just .ev-card: some pages put an
   @if wrapper or a bare element in here, and an unguarded child can fragment
   across a column boundary and leave a stray slab of card background behind. */
.ev-cardgrid {
    column-width: 360px;
    column-gap: 14px;
}

.ev-cardgrid > * {
    break-inside: avoid;
}

.ev-cardgrid > .ev-card {
    width: 100%;
    margin: 0 0 14px;
}

/* ── Summary-list variant: same cards, no chrome ──────────────────────
   Add `ev-cardgrid--flat` alongside `ev-cardgrid`. Every EvCard inside
   loses its box — background, border, radius, shadow, head rule — and
   becomes a titled group of <dl> rows, the GOV.UK "summary list" pattern
   (also Stripe, Vercel project settings). Nothing about the components
   changes; their header actions, counts and icons all still render.

   A real grid, NOT CSS multi-column. Multi-column packs tighter, but the
   column count and the split point are decided by the browser's balancer,
   which is why this layout kept coming out with one group alone on the left
   and everything else on the right, and why group headings never lined up
   across the columns. A grid places item 1 top-left and item 2 top-right,
   both starting at the same y, every time — alignment stops being something
   the browser might do and becomes structural.

   align-items: start keeps each group only as tall as its content. The cost
   is a gap under the shorter group in a row; the answer to that is evenly
   sized groups, not a cleverer layout, which is why the oversized cards were
   split rather than arranged around.

   Two columns, not three: without borders to separate them, label/value
   rows need the extra width to stay readable as distinct pairs.

   Sits inside an .ev-surface on the pages that use it, so the groups get a
   sheet to live on and the tab lines up with every other tab on the page. */
.ev-cardgrid--flat {
    columns: initial;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 32px;
    align-items: start;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .ev-cardgrid--flat { grid-template-columns: 1fr; }
}

/* A rule above each group, so the boundary between one group and the next is
   explicit rather than implied by whitespace alone. */
.ev-cardgrid--flat > .ev-card {
    margin: 0;
    padding-top: 12px;
    background: none;
    border: 0;
    border-top: 1px solid var(--ev-border);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transition: none;
}

/* .ev-card:hover paints a border and shadow. On a boxed card that reads as a
   lift; on a flat group there is no box or padding for it to sit around, so
   it draws a rectangle tight against the text. Cancel it — but hold the top
   rule, or the group separator blinks out as the pointer crosses it. */
.ev-cardgrid--flat > .ev-card:hover {
    border-color: transparent;
    border-top-color: var(--ev-border);
    box-shadow: none;
}

/* Fixed height, not content height. A group whose header carries buttons or a
   status tag is taller than one with only a title, so the first group in the
   left column and the first in the right column started their rows at
   different heights — the columns looked vertically offset even though the
   column boxes were flush. Pinning the header to the tallest thing it can
   contain (a 28px icon button) makes every group's first row line up. */
.ev-cardgrid--flat .ev-card-head {
    min-height: 28px;
    padding: 0 0 4px;
    gap: 8px;
    border-bottom: 0;
    background: none;
}

/* No icon: the rounded glyph tile is card furniture, and a flat list reads
   more calmly without a column of coloured squares down the left. */
.ev-cardgrid--flat .ev-card-icon { display: none; }

/* Near body size, not tiny — it is the uppercase, letter-spaced, muted
   treatment that demotes it, not shrinking it into illegibility. */
.ev-cardgrid--flat .ev-card-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ev-text-soft);
}

.ev-cardgrid--flat .ev-card-count {
    min-width: 18px;
    height: 18px;
    font-size: 0.66rem;
}

.ev-cardgrid--flat .ev-card-actions .ev-iconbtn {
    width: 28px;
    height: 28px;
}

.ev-cardgrid--flat .ev-card-body { padding: 0; }
.ev-cardgrid--flat .ev-spec-row { padding: 7px 0; }

/* ── Empty fields ────────────────────────────────────────────────────
   Most EvRows render unconditionally, so a record with sparse Salesforce
   data shows a long list of labels against nothing. A row whose value
   produced no output collapses; the toggle below brings them back for
   anyone who needs to see which fields exist but are unset.

   Scoped to the flat grid on purpose — this changes what is on screen, and
   the boxed .ev-cardgrid used by a dozen other pages keeps today's
   behaviour until someone decides otherwise. */
.ev-cardgrid--flat .ev-spec-row:has(> .ev-spec-value:empty) { display: none; }

.ev-surface:has(.ev-showempty-input:checked)
  .ev-cardgrid--flat .ev-spec-row:has(> .ev-spec-value:empty) { display: flex; }

/* A blank value is worth marking when deliberately shown, otherwise the row
   reads as a rendering fault rather than "we hold nothing for this". */
.ev-surface:has(.ev-showempty-input:checked)
  .ev-cardgrid--flat .ev-spec-value:empty::after {
    content: "—";
    color: var(--ev-text-soft);
    font-weight: 500;
}

.ev-showempty {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    font-size: 0.76rem;
    color: var(--ev-text-muted);
    cursor: pointer;
    user-select: none;
}
.ev-showempty:hover { color: var(--ev-text); }
.ev-showempty-input { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--ev-primary); }
.ev-showempty-input:focus-visible { outline: 2px solid var(--ev-primary); outline-offset: 2px; }

/* ── Copy-to-clipboard affordance on identifier rows ────────────────── */
.ev-copy { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ev-copy-btn {
    width: 22px;
    height: 22px;
    flex: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.ev-copy-btn .material-icons { font-size: 0.92rem; }
/* Revealed on hover, but always present for keyboard and touch — opacity
   keeps it in the layout so rows do not shift when it appears. */
.ev-spec-row:hover .ev-copy-btn,
.ev-copy-btn:focus-visible { opacity: 1; }
@media (hover: none) { .ev-copy-btn { opacity: 1; } }

.ev-card {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 16px;
    box-shadow: var(--ev-shadow);
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

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

/* The card normally clips to its rounded corners (overflow: hidden), which also
   clips the rate/usage converter popovers. Let only the card that hosts the
   rates editor overflow so those popovers can sit on top of the card. */
.ev-card:has(.ev-rates-edit) { overflow: visible; }

.ev-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--ev-border);
}

.ev-card-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--ev-primary-soft);
    color: var(--ev-primary);
    display: grid;
    place-items: center;
    font-size: 20px;
}

.ev-card-title { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ev-text); }
.ev-card-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ev-card-body { padding: 6px 16px 14px; }

.ev-spec { margin: 0; }
.ev-spec-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ev-border); }
.ev-spec-row:last-child { border-bottom: none; }
.ev-spec-label { flex: 0 0 42%; margin: 0; color: var(--ev-text-muted); font-weight: 500; font-size: 0.85rem; }
.ev-spec-value { flex: 1; min-width: 0; margin: 0; color: var(--ev-text); font-weight: 600; font-size: 0.85rem; word-break: break-word; }
.ev-spec-value a { color: var(--ev-primary); font-weight: 600; text-decoration: none; }
.ev-spec-value a:hover { text-decoration: underline; }
.ev-card-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--ev-primary-soft); color: var(--ev-primary); font-size: 0.82rem; font-weight: 500; }
.ev-card-note .material-icons { font-size: 1.05rem; }
.ev-subhead { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ev-text-soft); margin: 4px 0 2px; }

/* ─── Edit-form fields (plain-HTML forms on the edit pages) ─────────── */
.ev-field { display: flex; flex-direction: column; gap: 5px; padding: 7px 0; }
.ev-field-label { font-size: 0.78rem; font-weight: 600; color: var(--ev-text-muted); }
.ev-field-label .ev-req { color: var(--ev-danger); margin-left: 2px; }

.ev-input, .ev-select, .ev-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.85rem;
    padding: 9px 11px;
    border: 1px solid var(--ev-border-strong);
    border-radius: 9px;
    background: var(--ev-surface);
    color: var(--ev-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ev-textarea { resize: vertical; min-height: 70px; }

/* Selects: drop the native control (which flashes dark before load and
   hides the rounded border) and draw our own chevron. */
.ev-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: 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='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 34px;
    cursor: pointer;
}
.ev-input:focus, .ev-select:focus, .ev-textarea:focus { outline: none; border-color: var(--ev-primary); box-shadow: 0 0 0 2px var(--ev-primary-ring); }
.ev-input[readonly] { background: var(--ev-surface-2); color: var(--ev-text-muted); cursor: default; }
.ev-input.is-invalid, .ev-select.is-invalid, .ev-textarea.is-invalid { border-color: var(--ev-danger); box-shadow: 0 0 0 2px var(--ev-danger-soft); }
.ev-field-error { font-size: 0.72rem; color: var(--ev-danger); }
.ev-field-hint { font-size: 0.72rem; color: var(--ev-text-soft); }
.ev-readonly-value { font-size: 0.85rem; color: var(--ev-text); font-weight: 600; padding: 5px 0; }

.ev-check-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; }
.ev-check-row label { font-size: 0.85rem; color: var(--ev-text); cursor: pointer; }

/* checkbox list (multi-select replacement) */
.ev-checklist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; border: 1px solid var(--ev-border); border-radius: 9px; padding: 8px 10px; }
.ev-checklist label { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ev-text); cursor: pointer; }

/* ─── Editable rates grid (CurrentRatesAndUsages) ──────────────────── */
/* ─── Rates & Usage table (read-only, Opportunity view) ────────────────
   These rules used to live in an inline <style> block at the foot of
   OpportunityContractRatesCard. That block is injected into the body, after
   this stylesheet, so it won the cascade at equal specificity and quietly
   overrode anything set here. Moved wholesale so there is one definition.

   Presented as a bounded object rather than loose rows: the surrounding
   group is a chromeless list of label/value pairs, so a table needs its own
   frame to read as a distinct thing rather than more of the same. */
.ev-rates-heading {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ev-text-soft);
    margin: 14px 0 6px;
}

.ev-rates { overflow-x: auto; }

.ev-rates table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    border: 1px solid var(--ev-border);
    border-radius: 10px;
    overflow: hidden;
}

.ev-rates th {
    text-align: left;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ev-text-soft);
    background: var(--ev-surface-2);
    padding: 7px 12px;
    border-bottom: 1px solid var(--ev-border);
    white-space: nowrap;
}

.ev-rates td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ev-border);
    color: var(--ev-text-muted);
    font-weight: 500;
}

.ev-rates tbody tr:last-child td { border-bottom: none; }

.ev-rates th.num,
.ev-rates td.num { text-align: right; white-space: nowrap; }

/* 600, not 700 — the Total row is the only thing here that should read as
   bold. Every value at 700 leaves nothing to emphasise. */
.ev-rates .val {
    color: var(--ev-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Units sit quietly beside the figure so a column of numbers still scans as
   a column of numbers. */
.ev-rates .unit {
    color: var(--ev-text-soft);
    font-size: 0.7rem;
    margin-left: 3px;
}

/* Totals read as a summary of the rows above, not another row. */
.ev-rates tr.total td {
    background: var(--ev-surface-2);
    border-top: 1px solid var(--ev-border-strong);
    border-bottom: none;
    color: var(--ev-text);
    font-weight: 700;
}

.ev-rates-edit { margin-top: 8px; }
.ev-rate-line { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ev-rate-label { flex: 0 0 32%; font-weight: 600; font-size: 0.84rem; color: var(--ev-text); }
.ev-rate-col { flex: 1; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ev-text-soft); }
.ev-rate-head { display: flex; align-items: center; gap: 10px; padding: 8px 0 4px; border-bottom: 1px solid var(--ev-border); margin-bottom: 2px; }
.ev-rate-input { flex: 1; display: flex; align-items: center; gap: 6px; position: relative; }
.ev-rate-input .ev-input { flex: 1; min-width: 0; padding: 7px 9px; }
.ev-rate-unit { font-size: 0.72rem; color: var(--ev-text-soft); white-space: nowrap; }
.ev-rate-total .ev-input { background: var(--ev-surface-2); font-weight: 700; }

.ev-conv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--ev-border-strong);
    border-radius: 8px;
    background: var(--ev-surface);
    color: var(--ev-text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ev-conv-btn:hover { border-color: var(--ev-primary); color: var(--ev-primary); }
.ev-conv-btn .material-icons { font-size: 1rem; }

.ev-conv-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    min-width: 210px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 12px;
    box-shadow: var(--ev-shadow-pop);
    padding: 10px;
}

.ev-conv-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .ev-spec-label { flex-basis: 44%; }
}

/* ════════════════════════════════════════════════════════════════════
   Tab data grids — every non-Details tab hosts a MudTable / MudDataGrid
   wrapped in its own MudCard/MudPaper. We wrap each in a single
   .ev-surface frame, then flatten the component's own nested chrome and
   apply one clean "table skin". Gated under .ev-surface (which exists
   only on these pages) so the shared table components are untouched
   everywhere else.
   ════════════════════════════════════════════════════════════════════ */

/* ── Uniform tab cards ────────────────────────────────────────────────
   Every tab is one .ev-surface card. .ev-surface owns ALL the padding
   (16px); each component's own card / paper / content / grid padding is
   reset to zero so the toolbar and table align flush to the same edges
   and every tab looks identical. */
.ev-surface .mud-card,
.ev-surface .mud-card-content,
.ev-surface .mud-table,
.ev-surface .mud-data-grid,
.ev-surface .mud-paper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Neutralise the MudGrid gutter (AttachmentsAndNotes wraps its grid in one) */
.ev-surface .mud-grid { margin: 0 !important; width: 100% !important; }
.ev-surface .mud-grid > .mud-grid-item { padding: 0 !important; }

/* Reset the Bootstrap spacing utilities the bespoke toolbars carry so they
   align flush-left with the table below. (mb-* is left alone so inline
   alerts keep their gap to the grid.) */
.ev-surface .px-3 { padding-left: 0 !important; padding-right: 0 !important; }
.ev-surface .pt-1, .ev-surface .pt-3 { padding-top: 0 !important; }
.ev-surface .ml-4 { margin-left: 0 !important; }
.ev-surface .mr-3 { margin-right: 0 !important; }
.ev-surface .mt-3 { margin-top: 0 !important; }

/* One uniform 16px gap under every toolbar, whether it's the grid's own
   ToolBarContent or a bespoke row; centred items, consistent heights. */
.ev-surface .mud-table-toolbar {
    padding: 0 0 16px 0 !important;
    min-height: 0 !important;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.ev-surface .mud-table-toolbar .mud-button-root,
.ev-surface .mud-table-toolbar .mud-icon-button { height: 38px; }
.ev-surface .mud-file-upload { display: inline-flex; align-items: center; margin: 0 8px; }

/* Bespoke toolbars (OpportunityTable's MudStack, SalesNotes' MudItem) get
   the same 16px gap to the content below. */
.ev-surface .opportunity-table-fixed { margin-top: 16px !important; }
.ev-surface .mud-card > .mud-grid-item { margin: 0 0 16px 0 !important; }

/* AccountCommunicationsTable ships its own .comm-card frame + grey toolbar
   band — strip them so it sits inside the shared .ev-surface like the rest. */
.ev-surface .comm-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.ev-surface .comm-toolbar {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 0 16px 0 !important;
}

/* Header row — uppercase, muted, hairline underline. White (not grey) to
   match the Details cards; opaque so sticky headers don't bleed. */
.ev-surface thead th,
.ev-surface .mud-table-head .mud-table-cell {
    background: var(--ev-surface) !important;
    color: var(--ev-text-soft) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-top: none !important;
    border-bottom: 1px solid var(--ev-border) !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}

/* Only the sort-label gets the muted header treatment — NOT action buttons
   placed in a column's HeaderTemplate (e.g. "Generate" on Quotes, "+" on
   Tenders), which must keep their own button colours. */
.ev-surface thead .mud-table-sort-label,
.ev-surface thead .mud-table-sort-label .mud-typography {
    color: var(--ev-text-soft) !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
}

/* Body rows — hairline separators, comfortable padding, no side borders */
.ev-surface tbody td,
.ev-surface .mud-table-body .mud-table-cell {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ev-border) !important;
    padding: 9px 12px !important;
    font-size: 0.83rem !important;
    color: var(--ev-text);
}

.ev-surface tbody tr:last-child td,
.ev-surface .mud-table-body tr:last-child .mud-table-cell { border-bottom: none !important; }

/* Kill zebra striping */
.ev-surface .mud-table-striped tbody tr:nth-of-type(odd),
.ev-surface .mud-table-striped tbody tr:nth-of-type(odd) .mud-table-cell { background: transparent !important; }

/* Soft navy row hover */
.ev-surface tbody tr:hover,
.ev-surface tbody tr:hover td,
.ev-surface .mud-table-hover tbody tr:hover .mud-table-cell { background: var(--ev-primary-soft) !important; }

/* Real links inside grids → navy token (but not MudButtons rendered as
   anchors, which keep their button styling). */
.ev-surface tbody a:not(.mud-button-root),
.ev-surface tbody .mud-link { color: var(--ev-primary) !important; font-weight: 600; }

/* Pagination footer */
.ev-surface .mud-table-pagination { border-top: 1px solid var(--ev-border) !important; color: var(--ev-text-muted); }

/* In-grid "no records" alert */
.ev-surface .mud-alert { border-radius: 10px; }

/* ════════════════════════════════════════════════════════════════════
   Controls skin — make the MudBlazor buttons / search inputs / chips /
   icon buttons inside the tab components read like the .ev-* system,
   instead of stock MudBlazor. Scoped to .ev-root (these two pages only).
   NOTE: MudMenu/MudSelect popovers render through the global popover
   provider, OUTSIDE .ev-root, so their dropdown internals keep MudBlazor
   defaults — only the in-page trigger buttons are reskinned here.
   ════════════════════════════════════════════════════════════════════ */

/* Buttons */
.ev-root .mud-button-root {
    border-radius: 10px !important;
    text-transform: none !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
}

.ev-root .mud-button-root:hover { box-shadow: none !important; }
.ev-root .mud-button-filled-primary:hover { box-shadow: 0 4px 12px var(--ev-primary-ring) !important; }
.ev-root .mud-button-filled-success:hover { box-shadow: 0 4px 12px rgba(13, 148, 136, 0.28) !important; }

/* ── Re-map MudBlazor's semantic button colours onto the .ev palette ──
   navy primary + teal CTA + neutral ghost, instead of MudBlazor's
   teal/blue/pink mix. Status colours on alerts/stage chips are left
   alone so they keep their meaning. */
.ev-root .mud-button-filled-primary { background-color: var(--ev-primary) !important; color: #fff !important; }
html[data-theme="dark"] .ev-root .mud-button-filled-primary { color: #0f172a !important; }

.ev-root .mud-button-filled-success { background-color: var(--ev-cta) !important; color: #fff !important; }

.ev-root .mud-button-filled-secondary,
.ev-root .mud-button-filled-tertiary {
    background-color: var(--ev-primary-soft) !important;
    color: var(--ev-primary) !important;
}

/* Info-coloured utility buttons (Refresh / Filters) → neutral ghost */
.ev-root .mud-button-filled-info {
    background-color: var(--ev-surface) !important;
    color: var(--ev-text) !important;
    border: 1px solid var(--ev-border-strong) !important;
}
.ev-root .mud-button-filled-info .mud-icon-root { color: var(--ev-text-muted) !important; }

/* One-off inline-styled pink "Add Note" → navy (distinct from the teal
   "Add Attachment" beside it) */
.ev-root .mud-button-root[style*="EC407A"] { background-color: var(--ev-primary) !important; color: #fff !important; }
html[data-theme="dark"] .ev-root .mud-button-root[style*="EC407A"] { color: #0f172a !important; }

/* Filled icon buttons follow the same palette */
.ev-root .mud-icon-button.mud-button-filled-success { background-color: var(--ev-cta) !important; color: #fff !important; }
.ev-root .mud-icon-button.mud-button-filled-secondary {
    background-color: var(--ev-primary-soft) !important;
    color: var(--ev-primary) !important;
}
.ev-root .mud-icon-button.mud-button-filled-info {
    background-color: var(--ev-surface) !important;
    color: var(--ev-text-muted) !important;
    border: 1px solid var(--ev-border-strong) !important;
}

/* Outlined buttons → clean neutral "ghost" */
.ev-root .mud-button-outlined {
    border: 1px solid var(--ev-border-strong) !important;
    color: var(--ev-text) !important;
    background: var(--ev-surface) !important;
}

.ev-root .mud-button-outlined:hover {
    border-color: var(--ev-primary) !important;
    background: var(--ev-primary-soft) !important;
    color: var(--ev-primary) !important;
}

/* Icon buttons */
.ev-root .mud-icon-button { border-radius: 9px !important; box-shadow: none !important; }
.ev-root .mud-icon-button:hover { box-shadow: none !important; }

/* Chips → consistent pills */
.ev-root .mud-chip {
    border-radius: 999px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
}

/* Search / text fields in the grid toolbars → bordered, rounded, no underline */
.ev-surface .mud-input-control { margin-top: 0 !important; }

.ev-surface .mud-input-text {
    border: 1px solid var(--ev-border-strong);
    border-radius: 10px;
    background: var(--ev-surface);
    padding: 1px 10px;
    min-height: 38px;
    align-items: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ev-surface .mud-input-text.mud-focused,
.ev-surface .mud-input-text:focus-within {
    border-color: var(--ev-primary);
    box-shadow: 0 0 0 2px var(--ev-primary-ring);
}

.ev-surface .mud-input-text::before,
.ev-surface .mud-input-text::after { border-bottom: none !important; content: none !important; }

.ev-surface .mud-input-text input,
.ev-surface .mud-input-text .mud-input-slot { font-size: 0.84rem !important; }
.ev-surface .mud-input-text .mud-input-adornment .mud-icon-root { color: var(--ev-text-soft); }

/* ════════════════════════════════════════════════════════════════════
   Plain-HTML data tables — used by the rebuilt tab components (no
   MudBlazor). Tokens are global so these render correctly wherever the
   shared components appear.
   ════════════════════════════════════════════════════════════════════ */

/* Toolbar above a table */
.ev-tabletool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ev-tabletool-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Search box */
.ev-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px;
    min-width: 240px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border-strong);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ev-search:focus-within { border-color: var(--ev-primary); box-shadow: 0 0 0 2px var(--ev-primary-ring); }
.ev-search .material-icons { font-size: 1.1rem; color: var(--ev-text-soft); }
.ev-search input { border: none; outline: none; background: transparent; font: inherit; font-size: 0.84rem; color: var(--ev-text); flex: 1; min-width: 0; }
.ev-search-clear { border: none; background: none; cursor: pointer; color: var(--ev-text-soft); display: inline-flex; padding: 0; }
.ev-search-clear:hover { color: var(--ev-text); }
.ev-search-clear .material-icons { font-size: 1rem; }

/* Small + danger buttons, icon buttons */
.ev-btn-sm { padding: 8px 12px; font-size: 0.8rem; border-radius: 9px; }
.ev-btn-icon { padding-left: 9px; padding-right: 9px; }
.ev-btn-icon .material-icons { font-size: 1.15rem; }
.ev-btn-danger { background: var(--ev-danger); color: #fff; }
.ev-btn-danger:hover { background: #b91c1c; color: #fff; box-shadow: 0 4px 12px var(--ev-danger-soft); }

.ev-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 0;
    box-sizing: border-box;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ev-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ev-iconbtn:hover { background: var(--ev-primary-soft); color: var(--ev-primary); }
.ev-iconbtn:disabled { opacity: 0.5; cursor: not-allowed; }
.ev-iconbtn .material-icons { font-size: 1.2rem; line-height: 1; display: block; }
.ev-iconbtn-ghost { border-color: var(--ev-border-strong); background: var(--ev-surface); }

/* Uniform control heights inside a plain-HTML toolbar so buttons + icon
   buttons + search line up exactly. */
.ev-tabletool .ev-btn,
.ev-tabletool label.ev-btn,
.ev-tabletool .ev-iconbtn {
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}
.ev-tabletool .ev-iconbtn { width: 38px; }
.ev-card-actions .ev-iconbtn { width: 32px; height: 32px; }

/* Inline async spinner — inherits the button's text colour. */
.ev-spin {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ev-spin 0.6s linear infinite;
    vertical-align: middle;
}

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

/* Left-anchored dropdown panel (toolbar menus open below-left) */
.ev-menu-panel--left { right: auto; left: 0; }

/* Checkbox-style menu item (filters) */
.ev-menu-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.83rem;
    color: var(--ev-text);
}

.ev-menu-check:hover { background: var(--ev-primary-soft); }
.ev-menu-check input { width: 16px; height: 16px; accent-color: var(--ev-primary); cursor: pointer; }

/* The table itself */
.ev-table-scroll { overflow-x: auto; }
.ev-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }

.ev-table thead th {
    text-align: left;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ev-text-soft);
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--ev-border);
    white-space: nowrap;
    background: var(--ev-surface);
}

.ev-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ev-border);
    color: var(--ev-text);
    vertical-align: middle;
}

.ev-table tbody tr:last-child td { border-bottom: none; }
.ev-table tbody tr:hover td { background: var(--ev-primary-soft); }
.ev-table tbody tr.ev-row-next td { background: var(--ev-primary-soft); font-weight: 600; }
.ev-table .ev-td-center, .ev-table .ev-th-center { text-align: center; }
.ev-table a { color: var(--ev-primary); font-weight: 600; text-decoration: none; }
.ev-table a:hover { text-decoration: underline; }
/* Truncation utility. The base rule is unscoped so it also works outside a
   table (e.g. a flex row); inside .ev-table it additionally caps the width so
   one long cell cannot push the layout wide. */
.ev-ellipsis { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-table .ev-ellipsis { max-width: 210px; }

/* Sortable header button */
.ev-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ev-text-soft);
    padding: 0;
}

.ev-sort:hover { color: var(--ev-text); }
.ev-sort .material-icons { font-size: 0.95rem; opacity: 0; transition: opacity 0.12s ease; }
.ev-sort.is-sorted { color: var(--ev-primary); }
.ev-sort.is-sorted .material-icons { opacity: 1; }

/* Checkbox column */
.ev-table .ev-check-col { width: 36px; text-align: center; }
.ev-check { width: 16px; height: 16px; accent-color: var(--ev-primary); cursor: pointer; }

/* Empty state */
.ev-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 16px; color: var(--ev-text-soft); text-align: center; }
.ev-empty .material-icons { font-size: 2.2rem; opacity: 0.6; }
.ev-empty p { margin: 0; font-size: 0.9rem; }

/* Table chips / tags (status + alerts) */
.ev-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--ev-primary-soft);
    color: var(--ev-primary);
}

.ev-tag .material-icons { font-size: 0.92rem; }
.ev-tag--error { background: var(--ev-danger-soft); color: var(--ev-danger); }
.ev-tag--warn { background: var(--ev-warn-soft); color: var(--ev-warn); }
.ev-tag--success { background: var(--ev-success-soft); color: var(--ev-success); }
.ev-tag--info { background: var(--ev-primary-soft); color: var(--ev-primary); }
.ev-tag--violet { background: var(--ev-violet-soft); color: var(--ev-violet); }
.ev-tag--muted { background: var(--ev-surface-2); color: var(--ev-text-muted); border: 1px solid var(--ev-border); }

/* ── Recommended quote banner (quote comparison) ── */
.ev-recq { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; margin-top: 16px; border-radius: 14px; background: var(--ev-success-soft); border: 1px solid rgba(4, 120, 87, 0.22); }
.ev-recq-check { color: var(--ev-success); font-size: 1.75rem !important; }
.ev-recq-title { font-size: 1.05rem; font-weight: 700; color: var(--ev-text); }
.ev-recq-logo { height: 32px; max-width: 120px; object-fit: contain; }
.ev-recq-supplier { color: var(--ev-text); font-size: 0.92rem; }

/* ── Supplier ranking cell (quote comparison) ── */
.ev-supplier-rank { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ev-supplier-rank-logo { width: 100px; max-height: 40px; object-fit: contain; }

/* ─────────────────────────────  Responsive  ───────────────────────── */
@media (max-width: 960px) {
    .ev-details td:first-child { width: 38%; }
}

@media (max-width: 640px) {
    .ev-hero { padding: 16px; border-radius: 14px; gap: 16px; }
    .ev-actions { justify-content: flex-start; width: 100%; }
    .ev-btn { flex: 1 1 auto; justify-content: center; }
    .ev-title { font-size: 1.3rem; }
    .ev-avatar { width: 44px; height: 44px; border-radius: 13px; }
    .ev-avatar .material-icons { font-size: 23px; }
    .ev-surface { padding: 10px; border-radius: 14px; }
    .ev-tab { padding: 11px 10px; }
    .ev-details td { padding: 9px 6px !important; font-size: 0.82rem; }
    .ev-details td:first-child { width: 44%; padding-right: 8px !important; }
    .ev-menu, .ev-menu-panel { width: 100%; }
    .ev-menu-panel { right: auto; left: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   Home dashboard (partner landing page) — built on the ev- tokens so it
   inherits light/dark theming automatically.
   ════════════════════════════════════════════════════════════════════ */

.ev-sub-link { color: var(--ev-primary); font-weight: 700; text-decoration: none; }
.ev-sub-link:hover { text-decoration: underline; }

/* Circular avatars / faces (photo or coloured initials) */
.ev-photo {
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    width: 48px; height: 48px;
}
.ev-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-photo--initials { color: #fff; }
.ev-photo--ghost { background: var(--ev-surface-2); color: var(--ev-text-soft); border: 1px solid var(--ev-border); }
.ev-photo--ghost .material-icons,
.ev-photo--brand .material-icons { font-size: 26px; }
.ev-photo--brand { background: var(--ev-primary); color: #fff; }

/* Top contact boxes: Your IAM / Your BDM / Fidelity Energy */
.ev-contactgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.ev-contact {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 16px;
    box-shadow: var(--ev-shadow);
    padding: 14px 16px;
    transition: box-shadow .18s, border-color .18s;
}
.ev-contact:hover { box-shadow: var(--ev-shadow-pop); border-color: var(--ev-border-strong); }
.ev-contact--brand { background: linear-gradient(135deg, var(--ev-primary-soft), var(--ev-surface)); }
.ev-contact-eyebrow {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--ev-text-soft); margin-bottom: 10px;
}
.ev-contact-body { display: flex; gap: 12px; align-items: flex-start; }
.ev-contact-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-contact-name { font-size: 0.98rem; font-weight: 700; color: var(--ev-text); }
.ev-contact-muted { color: var(--ev-text-soft); font-weight: 600; }
.ev-contact-sub { font-size: 0.76rem; color: var(--ev-text-soft); }
.ev-contact-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 600; color: var(--ev-text-muted);
    text-decoration: none; max-width: 100%;
}
.ev-contact-link:hover { color: var(--ev-primary); }
.ev-contact-link .material-icons { font-size: 16px; color: var(--ev-text-soft); }
.ev-contact-link:hover .material-icons { color: var(--ev-primary); }
.ev-contact-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

/* KPI stat tiles */
.ev-statgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.ev-stat-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 16px;
    box-shadow: var(--ev-shadow);
    padding: 14px 16px;
}
.ev-stat-card-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center; font-size: 22px; flex: none;
}

/* Dashboard card grid — cards on the same row share the tallest card's height */
.ev-dashgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
.ev-dashgrid > .ev-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.ev-dashgrid > .ev-card > .ev-card-body { flex: 1 1 auto; }

/* tighter table + supporting bits for the dashboard cards */
.ev-table--tight tbody td { padding: 9px 6px; }
.ev-cell-right { text-align: right; white-space: nowrap; }
/* the thead default is left-aligned at higher specificity; headers explicitly
   marked right must sit over their right-aligned column values */
.ev-table thead th.ev-cell-right { text-align: right; }
.ev-rv-sub { font-size: 0.74rem; color: var(--ev-text-soft); margin-top: 2px; }

/* Recently visited list */
.ev-rv-list { display: flex; flex-direction: column; }
.ev-rv-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 6px; border-bottom: 1px solid var(--ev-border);
    text-decoration: none; color: var(--ev-text);
}
.ev-rv-item:last-child { border-bottom: none; }
.ev-rv-item:hover { background: var(--ev-primary-soft); border-radius: 8px; }
.ev-rv-icon { font-size: 20px; color: var(--ev-primary); flex: none; }
.ev-rv-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ev-rv-name { font-weight: 600; font-size: 0.86rem; }
.ev-rv-type { font-size: 0.7rem; color: var(--ev-text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.ev-rv-pin { font-size: 15px; color: var(--ev-warn); flex: none; }

/* Pipeline bars */
.ev-pipe { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.ev-pipe-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; gap: 8px; }
/* A tooltip wrapper around the stage label becomes the flex item, so it needs
   min-width:0 of its own or the label inside it will never truncate. */
.ev-pipe-head > .ev-tip { min-width: 0; }
.ev-pipe-stage { font-size: 0.82rem; font-weight: 600; color: var(--ev-text); min-width: 0; }
.ev-pipe-count { font-size: 0.82rem; font-weight: 800; color: var(--ev-primary); flex: none; }
.ev-pipe-track { height: 8px; background: var(--ev-surface-2); border-radius: 999px; overflow: hidden; }
.ev-pipe-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ev-primary), #3b82f6); }

/* Quick quote tiles */
.ev-quickgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ev-quick {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 16px 8px; border-radius: 12px;
    border: 1px solid var(--ev-border); background: var(--ev-surface-2);
    text-decoration: none; color: var(--ev-text); font-weight: 600; font-size: 0.82rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ev-quick:hover { border-color: var(--ev-primary); box-shadow: var(--ev-shadow); transform: translateY(-2px); }
.ev-quick .material-icons { font-size: 28px; }

/* Partner picker bar (staff preview / multi-partner users) */
.ev-partnerbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 14px;
    box-shadow: var(--ev-shadow);
    padding: 10px 14px;
    margin-bottom: 14px;
}
.ev-partnerbar > .material-icons { color: var(--ev-primary); font-size: 20px; }
.ev-partnerbar-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ev-text-soft);
}
.ev-partnerbar-select { max-width: 340px; }

/* Partner toggle chips (multi-partner users) */
.ev-partnerchips { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-partnerchip {
    border: 1px solid var(--ev-border-strong);
    background: var(--ev-surface);
    color: var(--ev-text-muted);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.ev-partnerchip:hover { border-color: var(--ev-primary); color: var(--ev-primary); background: var(--ev-primary-soft); }
.ev-partnerchip.is-active {
    background: var(--ev-primary);
    border-color: var(--ev-primary);
    color: #fff;
}

/* KPI card */
.ev-kpi-icon { font-size: 16px; vertical-align: -3px; margin-right: 5px; color: var(--ev-primary); }
.ev-pipe-fill--done { background: linear-gradient(90deg, var(--ev-success), #10b981) !important; }

/* Money value cell (Recently Won) */
.ev-money { font-weight: 700; color: var(--ev-text); white-space: nowrap; }

/* ══════════════════ Dashboard polish ══════════════════ */

/* Gradient hero (home only — leaves the shared .ev-hero untouched) */
.dash-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 28px;
    margin-bottom: 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
    color: #fff;
    box-shadow: 0 12px 30px rgba(30, 58, 138, 0.28);
}
.dash-hero::after {
    content: "";
    position: absolute; right: -60px; top: -70px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,0.16), rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.dash-hero-avatar {
    flex: none; width: 60px; height: 60px; border-radius: 18px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
}
.dash-hero-avatar .material-icons { font-size: 30px; color: #fff; }
.dash-hero-text { position: relative; z-index: 1; min-width: 0; }
.dash-hero-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.82; }
.dash-hero-title { margin: 3px 0 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.dash-hero-sub { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 0.9rem; opacity: 0.92; flex-wrap: wrap; }
.dash-hero-sub .material-icons { font-size: 16px; }
.dash-hero-sub a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.55); }
.dash-hero-sub .dot { opacity: 0.5; }

/* Section label between card groups */
.ev-section { display: flex; align-items: center; gap: 12px; margin: 22px 2px 12px; }
.ev-section .ev-section-title { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ev-text-soft); white-space: nowrap; }
.ev-section-rule { flex: 1; height: 1px; background: var(--ev-border); }

/* Header count pill on cards */
.ev-card-count {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 22px; padding: 0 7px; margin-left: 2px;
    border-radius: 999px;
    background: var(--ev-primary-soft); color: var(--ev-primary);
    font-size: 0.72rem; font-weight: 800;
}

/* Stat tiles: elevate + coloured accent bar */
.ev-statgrid { gap: 16px; }
.ev-stat-card { position: relative; overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s; }
.ev-stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ev-primary); }

/* A tile is sometimes the grid's direct child and sometimes sits inside a
   wrapper (EvTip renders a <span> around a tooltipped tile). Match both, or
   the accent bar silently falls back to --ev-primary on every tile because
   :nth-child counts against the wrapper rather than the grid. */
.ev-statgrid > :nth-child(2) .ev-stat-card::before,
.ev-statgrid > .ev-stat-card:nth-child(2)::before { background: var(--ev-cta); }
.ev-statgrid > :nth-child(3) .ev-stat-card::before,
.ev-statgrid > .ev-stat-card:nth-child(3)::before { background: var(--ev-warn); }
.ev-statgrid > :nth-child(4) .ev-stat-card::before,
.ev-statgrid > .ev-stat-card:nth-child(4)::before { background: var(--ev-danger); }

/* A wrapped tile must still fill its grid cell: the wrapper becomes the grid
   item, and the card inside it has no flex-grow of its own. */
.ev-statgrid > .ev-tip { display: flex; width: 100%; }
.ev-statgrid > .ev-tip > .ev-stat-card { flex: 1 1 auto; }
.ev-stat-card:hover { box-shadow: var(--ev-shadow-pop); transform: translateY(-2px); border-color: var(--ev-border-strong); }
.ev-stat-card .ev-stat-value { font-size: 1.75rem; line-height: 1.1; }
.ev-stat-card .ev-stat-label { margin-top: 2px; }

/* Center empty states inside equal-height cards */
.ev-dashgrid > .ev-card > .ev-card-body { display: flex; flex-direction: column; }
.ev-dashgrid .ev-card-body > .ev-empty { flex: 1; }

/* Subtle entrance */
@keyframes ev-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ev-dashgrid > .ev-card, .ev-contact, .ev-stat-card { animation: ev-rise .32s ease both; }

.ev-news { margin-top: 22px; }

/* ── FID-3132: freshness stamp + manual refresh (hero right-hand side) ── */
.dash-hero-tools {
    position: relative; z-index: 1;
    margin-left: auto; flex: none;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.dash-refresh-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.14);
    color: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.dash-refresh-btn:hover:not(:disabled) { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.6); }
.dash-refresh-btn:disabled { opacity: 0.6; cursor: progress; }
.dash-refresh-btn .material-icons { font-size: 17px; }
.dash-updated {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74rem; font-weight: 600; opacity: 0.85; white-space: nowrap;
}
.dash-updated .material-icons { font-size: 14px; }
.dash-updated.is-stale { color: #fde68a; opacity: 1; }
.dash-updated-refreshing { font-style: italic; opacity: 0.9; }
.dash-updated .ev-spin { width: 12px; height: 12px; }

/* ── FID-3198: "All tools" hero button + dialog ── */
.dash-hero-btnrow { display: flex; align-items: center; gap: 8px; }

.qt-modal { display: flex; position: fixed; inset: 0; z-index: 99990; align-items: center; justify-content: center; }
.qt-backdrop {
    position: absolute; inset: 0; z-index: 0;
    background: rgba(0,0,0,0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    animation: qtFade 0.25s ease both;
}
.qt-card {
    position: relative; z-index: 2;
    width: 560px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
    padding: 1.75rem 2rem;
    background: rgba(255,255,255,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,0.06); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.14);
    color: var(--ev-text);
    animation: qtSlideUp 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
.qt-close {
    position: absolute; top: 0.9rem; right: 0.9rem;
    display: grid; place-items: center; width: 32px; height: 32px;
    border: none; border-radius: 8px; background: transparent; color: var(--ev-text-soft);
    cursor: pointer; transition: background .15s, color .15s;
}
.qt-close:hover { background: rgba(0,0,0,0.06); color: var(--ev-text); }
.qt-close svg { width: 18px; height: 18px; }
.qt-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 500; }
.qt-title strong { font-weight: 800; }
.qt-group-title {
    display: flex; align-items: center; gap: 6px;
    margin: 18px 0 8px;
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ev-text-soft);
}
.qt-group-title .material-icons { font-size: 16px; }
.qt-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}
.qt-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--ev-border); border-radius: 12px;
    color: var(--ev-text); text-align: center; text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}
.qt-tile:hover {
    background: var(--ev-primary-soft); border-color: var(--ev-primary);
    color: var(--ev-primary); transform: translateY(-1px);
}
.qt-tile .material-icons { font-size: 24px; color: var(--ev-primary); }
.qt-tile-label { font-size: 0.76rem; font-weight: 600; line-height: 1.2; }

@keyframes qtFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qtSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── FID-3132: drill-through affordances ── */
/* "View all" link in a dashboard card header */
.ev-card-viewall {
    display: inline-flex; align-items: center; gap: 1px;
    font-size: 0.74rem; font-weight: 700; text-decoration: none;
    color: var(--ev-primary); white-space: nowrap;
}
.ev-card-viewall:hover { text-decoration: underline; color: var(--ev-primary); }
.ev-card-viewall .material-icons { font-size: 15px; }

/* Clickable stat tile — same card look, plus a chevron that wakes on hover */
a.ev-stat-card--link { text-decoration: none; color: inherit; cursor: pointer; }
a.ev-stat-card--link:hover { border-color: var(--ev-primary); }
.ev-stat-card-go { margin-left: auto; font-size: 20px; color: var(--ev-text-soft); opacity: 0; transition: opacity .15s, transform .15s; }
a.ev-stat-card--link:hover .ev-stat-card-go { opacity: 1; transform: translateX(2px); color: var(--ev-primary); }

/* ── FID-3132: /home/reports drill-through page ── */
.hr-context { margin-left: 8px; }
.hr-count { font-size: 0.78rem; font-weight: 600; color: var(--ev-text-soft); white-space: nowrap; }

@media (max-width: 760px) {
    .dash-hero { flex-wrap: wrap; }
    .dash-hero-tools { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; margin-left: 0; }
}

/* Responsive */
@media (max-width: 1100px) {
    .ev-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .ev-contactgrid { grid-template-columns: 1fr; }
    .ev-dashgrid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .ev-statgrid { grid-template-columns: 1fr; }
    .ev-quickgrid { grid-template-columns: 1fr; }
}

/* ===== Industry API Health dashboard (SysAdmin) =====
   Token-only colours so dark mode works; charts legitimately use ChartColors hex. */
.ev-autorefresh {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; color: var(--ev-text-muted); cursor: pointer; user-select: none;
}
.ev-autorefresh input { accent-color: var(--ev-primary); cursor: pointer; }

.ev-dep-latency { margin-left: 8px; color: var(--ev-text-muted); font-size: 0.8rem; }
.ev-dep-detail { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--ev-text-muted); word-break: break-word; line-height: 1.35; }

.ev-card-note { margin: 10px 2px 2px; font-size: 0.72rem; color: var(--ev-text-soft); line-height: 1.45; }
.ev-card-note code {
    background: var(--ev-surface-2); border: 1px solid var(--ev-border);
    border-radius: 5px; padding: 0 4px; font-size: 0.95em;
}

.ev-section-icon { color: var(--ev-primary); font-size: 20px; }
.ev-tabletool-group .ev-section-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ev-text); }

.ev-quota-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.ev-quota-row { display: flex; flex-direction: column; gap: 6px; }
.ev-quota-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-quota-name { font-size: 0.85rem; font-weight: 600; color: var(--ev-text); }
.ev-quota-val { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--ev-text-muted); }
.ev-quota-restrict { font-size: 16px; color: var(--ev-danger); }

.ev-quota-bar {
    position: relative; height: 8px; border-radius: 999px;
    background: var(--ev-surface-2); border: 1px solid var(--ev-border);
}
.ev-quota-bar--inline { width: 120px; display: inline-block; vertical-align: middle; height: 7px; }
.ev-quota-fill {
    position: absolute; top: -1px; left: 0; height: 100%; border-radius: 999px;
    transition: width 600ms cubic-bezier(.4, 0, .2, 1);
}
.ev-quota-fill--ok { background: var(--ev-success); }
.ev-quota-fill--warn { background: var(--ev-warn); }
.ev-quota-fill--danger { background: var(--ev-danger); }
.ev-quota-fill--muted { background: var(--ev-text-soft); }
.ev-quota-tick {
    position: absolute; top: -3px; left: 83.333%; /* 100% of limit on a 0–120% axis */
    width: 2px; height: 14px; background: var(--ev-border-strong); border-radius: 1px;
}
.ev-quota-bar--inline .ev-quota-tick { display: none; }

.ev-trends-tool { display: flex; align-items: center; gap: 14px; margin: 20px 0 10px; flex-wrap: wrap; }
.ev-field--inline { flex-direction: row; align-items: center; gap: 8px; padding: 0; }
.ev-field--inline .ev-field-label { margin: 0; }

/* Equal-height dashboard rows (replaces the masonry .ev-cardgrid so paired cards align). */
.eh-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-bottom: 14px; }
/* Space the Recent-activity surface off the standalone "Volume by method" card above it
   (standalone .ev-card / .ev-surface blocks carry no margin of their own). */
.eh-recent { margin-top: 14px; }
.eh-row > .ev-card { height: 100%; display: flex; flex-direction: column; }
.eh-row > .ev-card > .ev-card-body { flex: 1 1 auto; }
@media (max-width: 760px) { .eh-row { grid-template-columns: 1fr; } }

/* Today-stats tile strip — the dashboard's live pulse. */
.eh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px; margin: 16px 0; }
.eh-stat {
    position: relative; background: var(--ev-surface); border: 1px solid var(--ev-border);
    border-radius: 14px; padding: 14px 16px 14px 18px; box-shadow: var(--ev-shadow); overflow: hidden;
}
.eh-stat::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--ev-border-strong); }
.eh-stat--primary::before { background: var(--ev-primary); }
.eh-stat--violet::before { background: var(--ev-violet); }
.eh-stat--success::before { background: var(--ev-success); }
.eh-stat--warn::before { background: var(--ev-warn); }
.eh-stat--danger::before { background: var(--ev-danger); }
.eh-stat--muted::before { background: var(--ev-text-soft); }
.eh-stat-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ev-text-muted); }
.eh-stat-value { margin-top: 6px; font-size: 1.55rem; font-weight: 750; color: var(--ev-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.eh-stat-sub { margin-top: 3px; font-size: 0.7rem; color: var(--ev-text-soft); }

.ev-arg {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   Multi Quote tool (FID-3131) — .evq-* namespace so nothing leaks.
   Two-step stepper, quote settings strip, streaming offer rows and the
   per-supplier offer rail. Token-only colours (dark-mode aware).
   ════════════════════════════════════════════════════════════════════ */

/* ── Stepper ── */
.evq-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.evq-step {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 12px;
    border: 1px solid var(--ev-border);
    border-radius: 14px;
    background: var(--ev-surface);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    box-shadow: var(--ev-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.evq-step:hover { border-color: var(--ev-border-strong); }
.evq-step.is-active { border-color: var(--ev-primary); box-shadow: 0 0 0 2px var(--ev-primary-ring); }
.evq-step.is-locked { opacity: 0.6; }
.evq-step:disabled { cursor: not-allowed; opacity: 0.6; }

.evq-step-num {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    background: var(--ev-surface-2);
    color: var(--ev-text-muted);
    border: 1px solid var(--ev-border);
}

.evq-step.is-active .evq-step-num { background: var(--ev-primary); color: #fff; border-color: var(--ev-primary); }
html[data-theme="dark"] .evq-step.is-active .evq-step-num { color: #0f172a; }
.evq-step.is-done .evq-step-num { background: var(--ev-success-soft); color: var(--ev-success); border-color: transparent; }

.evq-step-text { display: flex; flex-direction: column; gap: 1px; }
.evq-step-label { font-size: 0.9rem; font-weight: 700; color: var(--ev-text); }
.evq-step-sub { font-size: 0.72rem; color: var(--ev-text-muted); }

.evq-step-connector { flex: none; width: 34px; height: 2px; border-radius: 2px; background: var(--ev-border-strong); }

/* ── Quote settings strip (step 1) ── */
.evq-settings-card { margin-bottom: 16px; }
.evq-settings-card:has(.evq-seg) { overflow: visible; }

.evq-settings {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    flex-wrap: wrap;
}

.evq-setting { min-width: 130px; }
.evq-setting-grow { flex: 1 1 260px; }

.evq-unit-input { position: relative; }
.evq-unit-input .ev-input { padding-right: 28px; max-width: 130px; }
.evq-unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--ev-text-soft);
    pointer-events: none;
}

.evq-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }

.evq-toggle-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ev-border-strong);
    background: var(--ev-surface);
    color: var(--ev-text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.evq-toggle-chip:hover { border-color: var(--ev-primary); color: var(--ev-primary); }
.evq-toggle-chip.is-on { background: var(--ev-primary); border-color: var(--ev-primary); color: #fff; }
html[data-theme="dark"] .evq-toggle-chip.is-on { color: #0f172a; }

/* Segmented control */
.evq-seg {
    display: inline-flex;
    border: 1px solid var(--ev-border-strong);
    border-radius: 11px;
    background: var(--ev-surface);
    padding: 3px;
    gap: 2px;
}

.evq-seg-btn {
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ev-text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.13s ease, color 0.13s ease;
}

.evq-seg-btn:hover:not(:disabled) { color: var(--ev-text); }
.evq-seg-btn.is-active { background: var(--ev-primary); color: #fff; }
html[data-theme="dark"] .evq-seg-btn.is-active { color: #0f172a; }
.evq-seg-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.evq-seg-count {
    display: inline-block;
    margin-left: 4px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--ev-surface-2);
    color: var(--ev-text-muted);
}

.evq-seg-btn.is-active .evq-seg-count { background: rgba(255, 255, 255, 0.22); color: inherit; }

/* ── Sticky-ish footer action bar (both steps) ── */
.evq-footbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 18px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 14px;
    box-shadow: var(--ev-shadow);
}

.evq-footbar-info { font-size: 0.85rem; color: var(--ev-text-muted); }
.evq-footbar-info b { color: var(--ev-text); }
.evq-footbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evq-footbar-sep { width: 1px; height: 24px; background: var(--ev-border-strong); margin: 0 4px; }
.evq-generate-btn { font-size: 0.9rem; padding: 11px 22px; }

/* ── Generation progress (step 2) ── */
.evq-progress {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--ev-shadow);
}

.evq-progress-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.evq-progress-title { font-weight: 700; font-size: 0.92rem; color: var(--ev-text); }
.evq-progress-meta { margin-left: auto; font-size: 0.8rem; color: var(--ev-text-muted); font-variant-numeric: tabular-nums; }

.evq-pulse {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ev-cta);
    box-shadow: 0 0 0 4px var(--ev-success-soft);
    animation: evq-pulse 1.5s ease-in-out infinite;
    flex: none;
}

@keyframes evq-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.evq-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--ev-surface-2);
    border: 1px solid var(--ev-border);
    margin-top: 12px;
    overflow: hidden;
}

.evq-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ev-primary), var(--ev-cta));
    transition: width 0.4s ease;
}

.evq-progress-sub { margin-top: 8px; font-size: 0.75rem; color: var(--ev-text-soft); }

/* ── Supplier offer rail (step 2) ── */
.evq-suppliers-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ev-text-muted);
    margin-bottom: 10px;
}

.evq-suppliers-head .material-icons { font-size: 1.1rem; }

.evq-suppliers {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin-bottom: 16px;
    scrollbar-width: thin;
}

.evq-supcard {
    flex: 0 0 auto;
    width: 215px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 13px 15px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 14px;
    box-shadow: var(--ev-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    animation: evq-rise 0.25s ease-out;
}

.evq-supcard:hover { border-color: var(--ev-border-strong); box-shadow: var(--ev-shadow-pop); }
.evq-supcard.is-applied { border-color: var(--ev-cta); box-shadow: 0 0 0 2px var(--ev-success-soft); }

.evq-supcard-top { display: flex; align-items: center; gap: 8px; min-height: 30px; }

.evq-supcard-logo {
    flex: none;
    width: 56px;
    height: 28px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--ev-border);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.evq-supcard-logo img { max-width: 50px; max-height: 24px; object-fit: contain; }

.evq-supcard-mixicon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--ev-primary-soft);
    color: var(--ev-primary);
    font-size: 18px;
}

.evq-supcard-name {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--ev-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.evq-supcard-top .ev-tag { margin-left: auto; flex: none; }
.evq-supcard-meta { font-size: 0.72rem; color: var(--ev-text-muted); min-height: 17px; }

.evq-coverage-full, .evq-coverage-part { display: inline-flex; align-items: center; gap: 4px; }
.evq-coverage-full { color: var(--ev-success); }
.evq-coverage-part { color: var(--ev-warn); }
.evq-coverage-full .material-icons, .evq-coverage-part .material-icons { font-size: 0.95rem; }

.evq-supcard-total {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ev-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.evq-supcard-total small { font-size: 0.7rem; font-weight: 600; color: var(--ev-text-soft); margin-left: 2px; }
.evq-supcard .ev-btn { align-self: stretch; justify-content: center; }

/* ── Offer rows (step 2 table) ── */
.evq-offers-table td { vertical-align: middle; }

.evq-row-site {
    display: block;
    font-size: 0.72rem;
    color: var(--ev-text-soft);
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evq-row-queued td { opacity: 0.55; }
.evq-row-off td { opacity: 0.55; }
.evq-row-failed td { background: var(--ev-danger-soft); }
.evq-row-quoting-row td { background: var(--ev-primary-soft); }

.evq-row-wait { font-size: 0.8rem; color: var(--ev-text-soft); font-style: italic; }
.evq-row-quoting { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ev-primary); font-weight: 600; }

tr.evq-row-quoting-row, .evq-supcard, tr.evq-row-failed { animation: evq-rise 0.25s ease-out; }

@keyframes evq-rise {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.evq-offer { display: inline-flex; align-items: center; gap: 9px; }

.evq-offer-logo {
    flex: none;
    width: 46px;
    height: 24px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--ev-border);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.evq-offer-logo img { max-width: 42px; max-height: 20px; object-fit: contain; }
.evq-offer-name { font-weight: 600; font-size: 0.83rem; }

.evq-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.evq-saving { color: var(--ev-success); font-weight: 700; }

/* ── Choose-offer dialog ── */
.evq-dlg-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.evq-dlg-title .material-icons { color: var(--ev-primary); }
.evq-dlg { padding-bottom: 0; }

.evq-dlg-site {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--ev-text-muted);
    margin-bottom: 12px;
}

.evq-dlg-site .material-icons { font-size: 1rem; }

.evq-dlg-term { margin-bottom: 18px; }

.evq-dlg-term-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ev-text-soft);
    margin-bottom: 6px;
}

.evq-dlg-table td { padding: 8px 10px; }
.evq-dlg-supcell { min-width: 170px; }
.evq-dlg-annual { font-weight: 700; }
.evq-dlg-annual small { font-weight: 500; color: var(--ev-text-soft); }
.evq-dlg-current td { background: var(--ev-success-soft); }

@media (max-width: 760px) {
    .evq-settings { gap: 14px; }
    .evq-footbar-actions { width: 100%; }
    .evq-footbar-actions .ev-btn { flex: 1 1 auto; justify-content: center; }
    .evq-step { flex: 1 1 auto; }
    .evq-step-connector { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Report viewer (shared ReportViewer shell) — the drill-through report
   chrome used by the home dashboard reports AND the account reports.
   ════════════════════════════════════════════════════════════════════ */

/* Labelled dropdown "pill" for the toolbar filter row. Replaces bare
   <select>s: each filter reads as "LABEL [ value ▾ ]" and the whole set
   wraps cleanly beside the search box. Matches the 38px search height. */
.ev-filterset { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ev-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 8px 0 12px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border-strong);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ev-filter:focus-within { border-color: var(--ev-primary); box-shadow: 0 0 0 2px var(--ev-primary-ring); }

.ev-filter-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ev-text-soft);
    white-space: nowrap;
}

.ev-filter select {
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ev-text);
    cursor: pointer;
    height: 100%;
    padding: 0 2px;
    max-width: 220px;
}

/* Quick date-range preset chips (This month / Last month / Quarter / YTD). */
.ev-presets { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ev-preset {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--ev-border-strong);
    background: var(--ev-surface);
    color: var(--ev-text-muted);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ev-preset:hover { border-color: var(--ev-primary); color: var(--ev-primary); }
.ev-preset.is-active { background: var(--ev-primary); border-color: var(--ev-primary); color: #fff; }
html[data-theme="dark"] .ev-preset.is-active { color: #0f172a; }
.ev-preset:disabled { opacity: 0.5; cursor: not-allowed; }

/* Simple responsive two-column grid (e.g. supplier map: list + add form). */
.ev-splitgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }

/* ev- content inside a MudDialog shell (Map Opportunity dialog). */
.ev-dlg-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; color: var(--ev-text); }
.ev-dlg-title .material-icons { color: var(--ev-primary); }
.ev-dlg-body { display: flex; flex-direction: column; gap: 8px; padding-bottom: 0; }
.ev-dlg-context { flex-wrap: wrap; gap: 8px; }
.ev-dlg-context-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ev-text-soft); margin-right: 4px; }
.ev-dlg-divider { height: 1px; background: var(--ev-border); margin: 14px 0 4px; }
.ev-table-click tbody tr { cursor: pointer; }
.ev-radio { font-size: 1.15rem; color: var(--ev-text-soft); }
.ev-radio.is-on { color: var(--ev-primary); }

/* Account report control panel (report picker + date filters + actions). */
.ev-report-panel { margin-bottom: 16px; }
.ev-report-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.ev-report-controls > .ev-field { flex: 1 1 240px; min-width: 190px; padding: 0; position: relative; }
/* The report-description hint hangs below its field without affecting the
   flex-end baseline, so every select/input/button sits on one line. */
.ev-report-controls > .ev-field > .ev-field-hint {
    position: absolute;
    top: 100%;
    left: 1px;
    right: 0;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ev-report-daterange { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ev-report-daterange .ev-field { padding: 0; }
.ev-report-daterange .ev-input { min-width: 150px; }
.ev-report-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-top: 2px; }
.ev-report-filters { display: flex; flex-direction: column; gap: 10px; }

/* Grouped report rows + subtotal aggregate chips (rebuilt from the old
   MudDataGrid GroupTemplate, now plain .ev-table markup). */
.ev-table tbody tr.ev-group-row td {
    background: var(--ev-surface-2);
    border-bottom: 1px solid var(--ev-border);
    padding: 9px 12px;
}

.ev-table tbody tr.ev-group-row:hover td { background: var(--ev-surface-2); }

.ev-group-cell { font-size: 0.82rem; }
.ev-group-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ev-group-label { font-weight: 700; color: var(--ev-primary); }
.ev-group-label .material-icons { font-size: 1rem; vertical-align: middle; margin-right: 2px; color: var(--ev-text-soft); }

.ev-agg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-agg-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    font-size: 0.72rem;
    color: var(--ev-text-muted);
    white-space: nowrap;
}

.ev-agg-chip b { color: var(--ev-text); font-weight: 700; }

@media (max-width: 640px) {
    .ev-report-actions { margin-left: 0; width: 100%; }
    .ev-report-actions .ev-btn { flex: 1 1 auto; justify-content: center; }
    .ev-filter select { max-width: 150px; }
}

/* ════════════════════════════════════════════════════════════════════
   Admin accounting pages (Commission / Invoices / Accounts Jobs) —
   period selector bar (shared MonthSelector), card footer strip and a
   plain-HTML pager. Token-only colours (dark-mode aware).
   ════════════════════════════════════════════════════════════════════ */

/* Labelled month-pill bar — replaces the old MudToggleGroup date tabs. */
.ev-periodbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 14px;
}

.ev-periodbar > .material-icons { color: var(--ev-primary); font-size: 19px; flex: none; }

.ev-periodbar-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ev-text-soft);
    white-space: nowrap;
    flex: none;
}

/* Chips scroll sideways on narrow screens instead of wrapping into a block. */
.ev-periodbar-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ev-periodbar-chips::-webkit-scrollbar { display: none; }

/* Action strip pinned under an .ev-card body (job cards). */
.ev-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--ev-border);
    background: var(--ev-surface-2);
}

/* Wide report tables (End User account reports): compact and nowrap so the
   many-column grids stay scannable, with the first column (Opp Id) pinned
   while the rest scrolls horizontally inside .ev-table-scroll. */
.ev-table--report thead th,
.ev-table--report tbody td {
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 0.78rem;
}

.ev-table--report thead th:first-child,
.ev-table--report tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--ev-surface);
}

.ev-table--report thead th:first-child { z-index: 3; }

/* ── Operations tools (Won & Passed / Objection / Registration tabs) ──
   Shared layout for the three tracker tools hosted on /Admin/Operations-Tools:
   a controls row (date range + search + help) beside the stat-tile strip,
   then the results table. */
.ot-top {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ot-controls {
    flex: 1 1 320px;
    min-width: 280px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.ot-controls .ev-field {
    padding: 0;
    flex: 1 1 140px;
    min-width: 130px;
}

.ot-controls .ev-btn,
.ot-controls .ev-iconbtn {
    height: 38px;
    box-sizing: border-box;
}

.ot-stats {
    flex: 2 1 540px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1100px) {
    .ot-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ot-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ot-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 16px;
    color: var(--ev-text-muted);
    font-size: 0.85rem;
}

.ot-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ev-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Supplier change arrow between the from → to columns */
.ot-arrow {
    font-size: 1.05rem;
    color: var(--ev-text-soft);
    vertical-align: middle;
}

/* Expanded job-history row (nested table under a meter group) */
.ev-table tbody tr.ot-history-row td {
    background: var(--ev-surface-2);
    padding: 12px 16px;
}

.ev-table tbody tr.ot-history-row:hover td { background: var(--ev-surface-2); }

.ot-history-title {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ev-text);
}

.ot-history-title .material-icons {
    font-size: 1rem;
    vertical-align: -2px;
    margin-right: 4px;
    color: var(--ev-text-soft);
}

/* ── Help-dialog content (operations tools "About this tool" dialogs) ──
   Rendered inside a MudDialog shell; tokens are :root-global so this works
   outside .ev-root. */
.hd {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px;
    color: var(--ev-text);
    font-family: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hd-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.hd-title .material-icons { color: var(--ev-primary); }

.hd-step {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--ev-border);
    border-radius: 12px;
    background: var(--ev-surface-2);
}

.hd-step-num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ev-primary);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
}

html[data-theme="dark"] .hd-step-num { color: #0f172a; }

.hd-step-body { min-width: 0; font-size: 0.85rem; }
.hd-step-title { margin: 0 0 3px; font-size: 0.85rem; font-weight: 700; color: var(--ev-text); }
.hd-step-body p { margin: 0; color: var(--ev-text-muted); line-height: 1.55; }
.hd-step-body p + p { margin-top: 6px; }

.hd-step-body code,
.hd-status code {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 5px;
    padding: 0 4px;
    font-size: 0.95em;
}

.hd-subhead {
    margin: 16px 0 8px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ev-text-soft);
}

/* Status legend row: tone-matched pill + meaning */
.hd-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 2px;
    font-size: 0.84rem;
    color: var(--ev-text-muted);
    line-height: 1.5;
}

.hd-status .ev-tag { flex: none; margin-top: 1px; }

/* Plain-HTML table pager. */
.ev-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 4px 2px;
    margin-top: 2px;
    border-top: 1px solid var(--ev-border);
    color: var(--ev-text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}