/* ════════════════════════════════════════════════════════════════════
   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 .mud-theme-dark ancestor
   class that MudThemeProvider toggles.
   ════════════════════════════════════════════════════════════════════ */

/* Design tokens are global (:root) so the plain-HTML .ev-* controls work
   anywhere the shared table components render, not only inside .ev-root. */
:root {
    --ev-surface: #ffffff;
    --ev-surface-2: #f8fafc;
    --ev-bg: #f9fafb;
    --ev-border: #e8ebf0;
    --ev-border-strong: #d6dae2;
    --ev-text: #1f2937;
    --ev-text-muted: #6b7280;
    --ev-text-soft: #9ca3af;
    --ev-primary: #1e3a8a;
    --ev-primary-hover: #152c6b;
    --ev-primary-soft: #eef3ff;
    --ev-primary-ring: rgba(30, 58, 138, 0.14);
    --ev-cta: #00897b;
    --ev-cta-hover: #00796b;
    --ev-danger: #dc2626;
    --ev-danger-soft: rgba(239, 68, 68, 0.1);
    --ev-warn: #b45309;
    --ev-warn-soft: rgba(245, 158, 11, 0.13);
    --ev-success: #047857;
    --ev-success-soft: rgba(0, 137, 123, 0.12);
    --ev-violet: #7c3aed;
    --ev-violet-soft: rgba(124, 58, 237, 0.12);
    --ev-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
    --ev-shadow-pop: 0 12px 34px rgba(15, 23, 42, 0.16);
}

.mud-theme-dark {
    --ev-surface: #1e293b;
    --ev-surface-2: #18233a;
    --ev-bg: #0f172a;
    --ev-border: #2c3a52;
    --ev-border-strong: #3a4a66;
    --ev-text: #f1f5f9;
    --ev-text-muted: #94a3b8;
    --ev-text-soft: #6b7c96;
    --ev-primary: #60a5fa;
    --ev-primary-hover: #93c5fd;
    --ev-primary-soft: rgba(96, 165, 250, 0.14);
    --ev-primary-ring: rgba(96, 165, 250, 0.25);
    --ev-cta: #0d9488;
    --ev-cta-hover: #0f766e;
    --ev-danger: #fca5a5;
    --ev-danger-soft: rgba(239, 68, 68, 0.16);
    --ev-warn: #fcd34d;
    --ev-warn-soft: rgba(245, 158, 11, 0.16);
    --ev-success: #6ee7b7;
    --ev-success-soft: rgba(16, 185, 129, 0.18);
    --ev-violet: #c4b5fd;
    --ev-violet-soft: rgba(124, 58, 237, 0.22);
    --ev-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.32);
    --ev-shadow-pop: 0 12px 34px rgba(0, 0, 0, 0.5);
}

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

/* ─────────────────────────────  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; }

.mud-theme-dark .ev-chip--success,
.mud-theme-dark .ev-chip--won { color: #6ee7b7; }
.mud-theme-dark .ev-chip--lost { color: #fca5a5; }
.mud-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); }
.mud-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; }
.mud-theme-dark .ev-btn-primary, .mud-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); }

/* 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); }
.mud-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-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; }

.ev-sk-grid { column-gap: 14px; column-count: 2; }
.ev-sk-card { width: 100%; border-radius: 16px; margin-bottom: 14px; break-inside: avoid; }

@media (min-width: 1500px) { .ev-sk-grid { column-count: 3; } }
@media (max-width: 760px) { .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(--mud-palette-background)); 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.
   ════════════════════════════════════════════════════════════════════ */
/* Masonry-style columns: cards of differing heights pack tightly down each
   column instead of leaving big gaps (or stretching across one wide row).
   2 columns by default, 3 on very wide screens, 1 on mobile. */
.ev-cardgrid {
    column-gap: 14px;
    column-count: 2;
}

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

@media (min-width: 1500px) {
    .ev-cardgrid { column-count: 3; }
}

@media (max-width: 760px) {
    .ev-cardgrid { column-count: 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-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) ──────────────────── */
.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; }
.mud-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; }
.mud-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; }
.ev-table .ev-ellipsis { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 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; }
}