/* ======================================================================
   Capability Map viewport — mockup-aligned visual redesign.
   Vars mirror demo_pages/static/mockups/capability-map-heatmap.html.
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

.vcm-root,
.vcm-modal-backdrop,
.vcm-overrides-panel,
.vcm-dropdown,
.vcm-popover,
.cma-backdrop {
    --vcm-bg:          #020e18;
    --vcm-surface:     #050f1a;
    --vcm-topbar:      #040d16;
    --vcm-border:      #0c2133;
    --vcm-border-soft: #081828;

    --vcm-text:        #c5d9e8;
    --vcm-text-dim:    #5a8aaa;
    --vcm-text-muted:  #3a5a72;
    --vcm-accent:      #7dd3fc;
    --vcm-accent-dim:  #0f3a55;

    --vcm-green:       #16a34a;
    --vcm-green-glow:  rgba(22,163,74,.18);
    --vcm-purple:      #AA6ADA;
    --vcm-purple-glow: rgba(170,106,218,.18);

    --vcm-locked-bg:     #071523;
    --vcm-locked-text:   #5a8aaa;
    --vcm-locked-border: #0e2438;

    /* Simplified usage palette (2026 refactor):
         high_use     = green (absorbs old medium_use)
         low_use      = gray  (absorbs old not_in_use)
         overuse      = red
         not_measured = green with question-mark overlay
       Legacy --vcm-medium / --vcm-notuse kept as aliases for any lingering
       references. */
    --vcm-high:     #16a34a;
    --vcm-low:      #E89B4A;
    --vcm-overuse:  #D56B7C;
    --vcm-medium:   var(--vcm-high);
    --vcm-notuse:   var(--vcm-low);

    --vcm-cell-w:   148px;
    --vcm-cell-min: 28px;
    --vcm-cell-max: 68px;
    --vcm-gap:      3px;
    --vcm-col-gap:  7px;
    --vcm-zoom:     1;
}

.vcm-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--vcm-bg);
    color: var(--vcm-text);
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}


.vcm-root *, .vcm-root *::before, .vcm-root *::after {
    box-sizing: border-box;
}

/* ── TOPBAR ── */
.vcm-topbar {
    background: var(--vcm-topbar);
    border-bottom: 1px solid var(--vcm-border);
    padding: 0.6rem 1rem;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.vcm-info { min-width: 0; }
.vcm-acct-name {
    font-size: calc(1.8rem * var(--vcm-zoom));
    font-weight: 600;
    color: #deeef8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vcm-acct-meta {
    font-size: 0.7rem;
    color: var(--vcm-text-muted);
    margin-top: 1px;
}
.vcm-tb-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}
.vcm-topbar:hover .vcm-tb-right {
    opacity: 1;
}

/* Zoom control */
.vcm-zoom-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--vcm-border);
    border-radius: 5px;
    overflow: hidden;
}
.vcm-zoom-btn {
    width: 24px;
    height: 26px;
    background: var(--vcm-surface);
    color: var(--vcm-text-dim);
    border: none;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    flex-shrink: 0;
}
.vcm-zoom-btn:hover { background: #0a2035; color: var(--vcm-accent); }
.vcm-zoom-label {
    padding: 0 0.4rem;
    background: var(--vcm-surface);
    color: var(--vcm-text-muted);
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
    border-left: 1px solid var(--vcm-border);
    border-right: 1px solid var(--vcm-border);
    height: 26px;
    display: flex;
    align-items: center;
    min-width: 36px;
    justify-content: center;
}

/* Tab group (Simple / Detailed / Details) */
.vcm-tg {
    display: flex;
    border: 1px solid var(--vcm-border);
    border-radius: 5px;
    overflow: hidden;
}
.vcm-tg-btn {
    padding: 0.28rem 0.75rem;
    background: var(--vcm-surface);
    color: var(--vcm-text-muted);
    border: none;
    border-right: 1px solid var(--vcm-border);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
}
.vcm-tg-btn:last-child { border-right: none; }
.vcm-tg-btn.on { background: var(--vcm-accent-dim); color: var(--vcm-accent); }
.vcm-tg-btn:hover:not(.on) { background: #0a2035; color: var(--vcm-text); }

/* Buttons */
.vcm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.75rem;
    background: var(--vcm-surface);
    border: 1px solid var(--vcm-border);
    border-radius: 5px;
    color: var(--vcm-text-dim);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
}
.vcm-btn:hover { background: #0a2035; color: var(--vcm-text); }
.vcm-btn-primary {
    background: #09304e;
    border-color: #1a5478;
    color: var(--vcm-accent);
}
.vcm-btn-primary:hover { background: #0c3d61; color: var(--vcm-accent); }

.vcm-icon-btn {
    width: 28px; height: 28px;
    padding: 0;
    background: var(--vcm-surface);
    border: 1px solid var(--vcm-border);
    border-radius: 5px;
    color: var(--vcm-text-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all .12s;
}
.vcm-icon-btn:hover { background: #0a2035; color: var(--vcm-accent); }
.vcm-icon-btn .vcm-badge-count {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--vcm-purple);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── LEGEND ── */
.vcm-legend-bar {
    background: var(--vcm-topbar);
    border-bottom: 1px solid var(--vcm-border-soft);
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.vcm-leg-title {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vcm-text-muted);
}
.vcm-leg-items {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    align-items: center;
}
.vcm-leg-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: calc(0.68rem * var(--vcm-zoom));
    color: var(--vcm-text-dim);
}
.vcm-leg-swatch {
    width: calc(32px * var(--vcm-zoom));
    height: calc(14px * var(--vcm-zoom));
    border-radius: 3px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(9px * var(--vcm-zoom));
}
.vcm-leg-swatch.green   { background: var(--vcm-green); color: rgba(255,255,255,.8); }
.vcm-leg-swatch.purple  { background: var(--vcm-purple); }
.vcm-leg-swatch.locked  { background: var(--vcm-locked-bg); border: 1px solid var(--vcm-locked-border); }

/* ── MAP AREA ── */
.vcm-map-area {
    flex: 1;
    overflow: auto;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
}
.vcm-map-area::-webkit-scrollbar { width: 6px; height: 6px; }
.vcm-map-area::-webkit-scrollbar-track { background: var(--vcm-bg); }
.vcm-map-area::-webkit-scrollbar-thumb { background: #0d2233; border-radius: 3px; }

.vcm-map-inner {
    max-width: 1800px;
    width: 100%;
    margin: auto;
}

.vcm-contract-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
}

.vcm-section-label {
    font-size: calc(0.6rem * var(--vcm-zoom));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vcm-accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.vcm-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--vcm-accent-dim), transparent);
}

/* ── INDUSTRY CARD ── */
.vcm-industry-card {
    background: var(--vcm-surface);
    border: 1px solid var(--vcm-border-soft);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: var(--vcm-col-gap);
}
.vcm-industry-tiles {
    display: flex;
    gap: var(--vcm-gap);
    padding: var(--vcm-gap);
    min-height: 48px;
    align-items: stretch;
}
.vcm-industry-tiles .vcm-cell {
    flex: 1;
    min-width: 0;
    font-size: calc(0.92rem * var(--vcm-zoom));
    font-weight: 600;
}

/* ── COLUMN GRID ── */
.vcm-col-grid {
    display: flex;
    gap: var(--vcm-col-gap);
    align-items: stretch;
}
.vcm-col-stack {
    display: flex;
    flex-direction: column;
    gap: var(--vcm-col-gap);
    flex: 1 1 0;
    min-width: 0;
}

/* ── GROUP CARD ── */
.vcm-group-card {
    background: var(--vcm-surface);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vcm-group-hdr {
    padding: calc(0.2rem * var(--vcm-zoom)) calc(0.75rem * var(--vcm-zoom)) calc(0.15rem * var(--vcm-zoom));
    font-size: calc(0.8rem * var(--vcm-zoom) * var(--vcm-group-title-scale, 1));
    font-weight: 700;
    color: var(--vcm-green);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(22, 163, 74, 0.35);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(0.4rem * var(--vcm-zoom));
}
.vcm-group-hdr-icon {
    height: calc(32px * var(--vcm-zoom) * var(--vcm-group-title-scale, 1));
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.vcm-group-tiles {
    display: flex;
    flex-direction: column;
    gap: var(--vcm-gap);
    padding: var(--vcm-gap);
    flex: 1;
}
.vcm-group-tiles.two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
}

/* ── CELL ── */
.vcm-cell {
    min-height: var(--vcm-cell-min);
    flex: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 calc(8px * var(--vcm-zoom));
    gap: calc(5px * var(--vcm-zoom));
    font-size: calc(0.76rem * var(--vcm-zoom) * var(--vcm-product-name-scale, 1));
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .1s, box-shadow .1s;
    user-select: none;
}
.vcm-cell-name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.vcm-cell-badges {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    position: absolute;
    right: calc(8px * var(--vcm-zoom));
}
.vcm-badge-sparkle {
    display: flex;
    align-items: center;
}
.vcm-cell-badges .vcm-badge-sparkle svg {
    width: calc(22px * var(--vcm-zoom));
    height: auto;
}
.vcm-leg-swatch .vcm-badge-sparkle svg {
    width: calc(14px * var(--vcm-zoom));
    height: auto;
}
.vcm-badge-upgrade {
    font-size: calc(22px * var(--vcm-zoom));
    color: rgba(255,255,255,.75);
}

/* Simple-mode licensed (green) */
.vcm-cell.licensed {
    background: var(--vcm-green);
    color: #fff;
}
.vcm-cell.licensed:hover {
    transform: translateY(-1px);
}

/* Detailed-mode usage tiers (simplified 2026 palette) */
.vcm-cell.status-high_use { background: var(--vcm-high); color: #fff; }
.vcm-cell.status-low_use { background: var(--vcm-low); color: #fff; }
.vcm-cell.status-overuse { background: var(--vcm-overuse); color: #fff; }
.vcm-cell.status-not_measured { background: var(--vcm-high); color: #fff; }
/* Legacy status values still accepted by selector so in-flight pages without a
   fresh migration pass (rare) don't go transparent. They collapse into the
   visual of the new bucket. */
.vcm-cell.status-medium_use { background: var(--vcm-high); color: #fff; }
.vcm-cell.status-not_in_use { background: var(--vcm-low); color: #fff; }
.vcm-cell.status-high_use:hover,
.vcm-cell.status-low_use:hover,
.vcm-cell.status-overuse:hover,
.vcm-cell.status-not_measured:hover,
.vcm-cell.status-medium_use:hover,
.vcm-cell.status-not_in_use:hover {
    transform: translateY(-1px);
}

/* Not-measured badge (FA question mark) painted over the licensed green */
.vcm-badge-not-measured {
    color: rgba(255,255,255,.9);
    font-size: 11px;
    line-height: 1;
}

/* Legend swatch variant — green base with question-mark overlay, mirrors
   the cell treatment. */
.vcm-leg-swatch.not-measured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Proposed */
.vcm-cell.proposed {
    background: var(--vcm-purple);
    color: #fff;
}
.vcm-cell.proposed:hover {
    transform: translateY(-1px);
}

/* Not licensed */
.vcm-cell.not_licensed {
    background: var(--vcm-locked-bg);
    border: 1px solid var(--vcm-locked-border);
    color: var(--vcm-locked-text);
}
.vcm-cell.not_licensed:hover { border-color: #183d57; color: #6ba0bc; }

/* overridden cells render identically to non-overridden — the overrides panel icon is the sole indicator */

/* ── TILE DROPDOWN ── */
.vcm-dropdown {
    position: absolute;
    z-index: 1000;
    min-width: 200px;
    background: #081828;
    border: 1px solid var(--vcm-border);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    padding: 4px;
    font-size: 0.72rem;
    animation: vcm-fadeIn .12s ease;
}
@keyframes vcm-fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.vcm-dd-section {
    padding: 4px 6px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vcm-text-muted);
    border-top: 1px solid var(--vcm-border);
    margin-top: 2px;
}
.vcm-dd-section:first-child { border-top: none; margin-top: 0; }

.vcm-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: #ffffff;
    transition: background .1s;
}
.vcm-dd-item:hover { background: #0a2035; }
.vcm-dd-item.selected { background: var(--vcm-accent-dim); color: var(--vcm-accent); }
.vcm-dd-item.revert { color: #f87171; }

.vcm-dd-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── SECTIONS POPOVER ── */
.vcm-popover {
    position: absolute;
    z-index: 1000;
    min-width: 220px;
    background: #081828;
    border: 1px solid var(--vcm-border);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    padding: 10px;
    animation: vcm-fadeIn .12s ease;
}
.vcm-popover-title {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vcm-text-muted);
    margin-bottom: 6px;
}
.vcm-popover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 0.74rem;
    color: var(--vcm-text);
    cursor: pointer;
}
.vcm-popover-row input[type="checkbox"] {
    accent-color: var(--vcm-accent);
}
.vcm-sizing-popover {
    min-width: 260px;
}
.vcm-sizing-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 0.74rem;
    color: var(--vcm-text);
}
.vcm-sizing-row .vcm-sizing-label {
    flex: 1;
}
.vcm-sizing-row .vcm-zoom-label {
    min-width: 44px;
    text-align: center;
    font-size: 0.72rem;
}

/* ── EXPORT MENU (shared by capability-map + roadmap) ── */
.dp-export-menu {
    min-width: 160px;
    padding: 4px;
}
.dp-export-menu-item {
    display: block;
    width: 100%;
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--vcm-text);
    font-family: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    transition: background .1s;
}
.dp-export-menu-item:hover {
    background: #0a2035;
    color: var(--vcm-accent);
}

/* ── OVERRIDES PANEL ── */
.vcm-overrides-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    height: 100vh;
    background: var(--vcm-surface);
    border-left: 1px solid var(--vcm-border);
    box-shadow: -10px 0 40px rgba(0,0,0,0.4);
    z-index: 999;
    display: flex;
    flex-direction: column;
    animation: vcm-slideLeft .2s ease;
}
@keyframes vcm-slideLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }

.vcm-panel-hdr {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--vcm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.vcm-panel-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #deeef8;
}
.vcm-panel-close {
    background: #0a2035;
    border: 1px solid var(--vcm-border);
    color: var(--vcm-text);
    padding: 5px 10px;
    font-size: 0.72rem;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.vcm-panel-close:hover { background: #0f2b45; color: var(--vcm-accent); }
.vcm-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.vcm-panel-empty {
    color: var(--vcm-text-muted);
    font-size: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
}
.vcm-override-row {
    background: #071523;
    border: 1px solid var(--vcm-border);
    border-radius: 5px;
    padding: 0.5rem;
    margin-bottom: 0.4rem;
}
.vcm-override-row-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.vcm-override-tile {
    font-size: 0.76rem;
    font-weight: 600;
    color: #deeef8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vcm-override-state {
    font-size: 0.64rem;
    color: var(--vcm-text-dim);
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 2px;
}
.vcm-override-state .vcm-leg-swatch { width: 14px; height: 10px; }
.vcm-override-note {
    width: 100%;
    margin-top: 6px;
    padding: 4px 6px;
    font-family: inherit;
    font-size: 0.7rem;
    background: #020e18;
    border: 1px solid var(--vcm-border);
    border-radius: 4px;
    color: var(--vcm-text);
    resize: vertical;
    min-height: 28px;
}
.vcm-override-revert {
    background: transparent;
    border: 1px solid #7f1d1d;
    color: #f87171;
    padding: 2px 8px;
    font-size: 0.66rem;
    border-radius: 4px;
    cursor: pointer;
}
.vcm-override-revert:hover { background: #7f1d1d; color: #fff; }

/* ── LOAD MODAL ── */
.vcm-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vcm-modal {
    background: var(--vcm-surface);
    border: 1px solid var(--vcm-border);
    border-radius: 8px;
    padding: 1.2rem;
    min-width: 380px;
    max-width: 460px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.6);
}
.vcm-modal h3 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    color: #deeef8;
    font-weight: 600;
}
.vcm-modal label {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: var(--vcm-text-dim);
}
.vcm-input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.4rem 0.55rem;
    background: #020e18;
    border: 1px solid var(--vcm-border);
    border-radius: 4px;
    color: var(--vcm-text);
    font-family: inherit;
    font-size: 0.8rem;
}
.vcm-input:focus {
    outline: none;
    border-color: var(--vcm-accent);
}

/* ======================================================================
   Admin taxonomy modal (capability-map-admin.js)
   ====================================================================== */

.cma-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
}
.cma-modal {
    background: #050f1a;
    border: 1px solid #0c2133;
    border-radius: 10px;
    width: 1100px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 80px rgba(0,0,0,0.6);
    color: #c5d9e8;
}
.cma-hdr {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #0c2133;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.cma-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #deeef8;
    flex: 1;
}
.cma-hdr-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.cma-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #5a8aaa;
    cursor: pointer;
    margin-right: 0.4rem;
}
.cma-btn {
    padding: 0.32rem 0.75rem;
    background: #040d16;
    border: 1px solid #0c2133;
    border-radius: 5px;
    color: #5a8aaa;
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all .12s;
}
.cma-btn:hover { background: #0a2035; color: #c5d9e8; }
.cma-btn-primary { background: #09304e; border-color: #1a5478; color: #7dd3fc; }
.cma-btn-primary:hover { background: #0c3d61; color: #7dd3fc; }
.cma-btn-small {
    padding: 0.22rem 0.55rem;
    font-size: 0.68rem;
}

.cma-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 1px;
    background: #0c2133;
}
.cma-col {
    background: #050f1a;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.cma-col-groups { flex: 0 0 340px; }
.cma-col-products { flex: 1; min-width: 0; }

.cma-pane-hdr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #0c2133;
    background: #040d16;
    position: sticky;
    top: 0;
    z-index: 1;
}
.cma-pane-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4a7a96;
    flex: 1;
}
.cma-pane-title-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.cma-pane-title-input {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: #deeef8;
    padding: 2px 0;
    outline: none;
    border-bottom: 1px dashed transparent;
}
.cma-pane-title-input:hover, .cma-pane-title-input:focus {
    border-bottom-color: #1e3a5f;
}
.cma-pane-meta {
    font-size: 0.68rem;
    color: #5a8aaa;
}
.cma-pane-meta code {
    background: #020e18;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.66rem;
    color: #7dd3fc;
}
.cma-inline-select {
    background: #020e18;
    color: #c5d9e8;
    border: 1px solid #0c2133;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.66rem;
    padding: 1px 4px;
    cursor: pointer;
}

.cma-list, .cma-plist {
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cma-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #071523;
    border: 1px solid #0c2133;
    border-radius: 5px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background .1s;
}
.cma-row:hover { background: #0a2035; }
.cma-row.selected { background: var(--vcm-accent-dim, #0f3a55); border-color: #1a5478; }
.cma-row.selected .cma-row-label { color: #7dd3fc; }
.cma-row.deleted { opacity: 0.45; }
.cma-row.inactive .cma-row-label { color: #5a8aaa; font-style: italic; }

.cma-row-label {
    flex: 1;
    color: #deeef8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cma-arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cma-arrow {
    width: 18px;
    height: 12px;
    border: none;
    background: transparent;
    color: #5a8aaa;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border-radius: 2px;
}
.cma-arrow:hover:not(.disabled):not(:disabled) { background: #0a2035; color: #7dd3fc; }
.cma-arrow.disabled { opacity: 0.25; cursor: not-allowed; }

.cma-count {
    background: #020e18;
    color: #7dd3fc;
    font-size: 0.66rem;
    font-weight: 600;
    min-width: 22px;
    height: 18px;
    border-radius: 9px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cma-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.cma-switch input { opacity: 0; width: 0; height: 0; }
.cma-switch-slider {
    position: absolute;
    inset: 0;
    background: #1e293b;
    border-radius: 14px;
    transition: .15s;
}
.cma-switch-slider::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 10px; height: 10px;
    background: #5a8aaa;
    border-radius: 50%;
    transition: .15s;
}
.cma-switch input:checked + .cma-switch-slider { background: #09304e; }
.cma-switch input:checked + .cma-switch-slider::before {
    transform: translateX(14px);
    background: #7dd3fc;
}
.cma-switch input:disabled + .cma-switch-slider { opacity: 0.4; cursor: not-allowed; }

.cma-icon-btn {
    width: 24px; height: 24px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #5a8aaa;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 0;
    flex-shrink: 0;
}
.cma-icon-btn:hover { background: #0a2035; color: #ef4444; border-color: #0c2133; }

.cma-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #5a8aaa;
    font-size: 0.78rem;
}

.cma-prow {
    background: #071523;
    border: 1px solid #0c2133;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cma-prow.deleted { opacity: 0.4; }
.cma-prow.inactive { background: #05101c; }

.cma-prow-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cma-prod-name {
    flex: 1;
    background: transparent;
    border: 1px dashed transparent;
    color: #deeef8;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 3px;
    min-width: 0;
}
.cma-prod-name:hover, .cma-prod-name:focus {
    border-color: #1e3a5f;
    outline: none;
}
.cma-prod-id {
    background: #020e18;
    color: #5a8aaa;
    font-size: 0.64rem;
    padding: 2px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.cma-move {
    max-width: 120px;
}

.cma-hints {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding-left: 34px;
}
.cma-hint {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.66rem;
    color: #5a8aaa;
}
.cma-hint input {
    background: #020e18;
    border: 1px solid #0c2133;
    border-radius: 3px;
    color: #c5d9e8;
    font-family: inherit;
    font-size: 0.7rem;
    padding: 3px 6px;
}
.cma-hint input:focus {
    outline: none;
    border-color: #1a5478;
}
.cma-hint--check {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: #9bb3c4;
}
.cma-hint--check input[type="checkbox"] {
    margin: 0;
    accent-color: #3b82f6;
}
.cma-flags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    grid-column: 1 / -1;
}
.cma-flag-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    color: #5a8aaa;
    cursor: pointer;
    user-select: none;
}
.cma-flag-toggle input[type="checkbox"] {
    accent-color: #1a5478;
    cursor: pointer;
}

.cma-icon-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 4px;
}
.cma-icon-preview {
    height: 28px;
    width: auto;
    object-fit: contain;
    border-radius: 3px;
    border: 1px solid #0c2133;
    background: #020e18;
    padding: 2px;
}
.cma-btn-danger { border-color: #7f1d1d; color: #f87171; }
.cma-btn-danger:hover { background: #7f1d1d; color: #fff; }

/* Industry Workflows section */
.cma-industry-section {
    flex-shrink: 0;
    border-top: 1px solid #0c2133;
    background: #050f1a;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.cma-industry-hdr {
    padding: 0.45rem 1rem;
    border-bottom: 1px solid #0c2133;
    display: flex;
    align-items: center;
    background: #040d17;
}
.cma-industry-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #7dd3fc;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cma-industry-cols {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 1px;
    background: #0c2133;
}
.cma-industry-col {
    flex: 1;
    background: #050f1a;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cma-imap-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #091825;
}
.cma-imap-row:hover { background: #071420; }
.cma-imap-industry {
    flex: 0 0 160px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #c5d9e8;
    font-size: 0.8rem;
    padding: 2px 6px;
    font-family: inherit;
}
.cma-imap-industry:hover, .cma-imap-industry:focus {
    background: #071420;
    border-color: #1a5478;
    outline: none;
}
.cma-imap-checks {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    padding-top: 3px;
}
.cma-imap-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #8aafc8;
    cursor: pointer;
    white-space: nowrap;
}
.cma-imap-check input[type="checkbox"] { cursor: pointer; accent-color: #1a5478; }
.cma-imap-check:hover { color: #c5d9e8; }

@media (max-width: 900px) {
    .cma-hints { grid-template-columns: 1fr; }
    .cma-col-groups { flex: 0 0 240px; }
}

/* View tabs in admin header */
.cma-view-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0.75rem;
}
.cma-view-tab {
    background: transparent;
    border: 1px solid #0c2133;
    color: #8aafc8;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
}
.cma-view-tab:hover { background: #0a2035; color: #c5d9e8; }
.cma-view-tab.active {
    background: #09304e;
    border-color: #1a5478;
    color: #7dd3fc;
}

/* Detailed view body */
.cma-detailed-body {
    display: block;
    padding: 0.75rem 1rem;
    overflow-y: auto;
}
.cma-detailed-grouplist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cma-detailed-group {
    background: #061420;
    border: 1px solid #0c2133;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
}
.cma-detailed-group-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.4rem;
}
.cma-detailed-prodlist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.cma-detailed-product {
    background: #040e18;
    border: 1px solid #0c2133;
    border-radius: 5px;
    padding: 0.45rem 0.6rem;
}
.cma-detailed-caplist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 0.4rem;
    padding-left: 1.25rem;
}
.cma-cap-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #06101c;
    border: 1px solid #0a1b2a;
    border-radius: 4px;
    padding: 3px 6px;
}
.cma-cap-display {
    flex: 0 0 220px;
    background: transparent;
    border: 1px solid transparent;
    color: #c5d9e8;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
}
.cma-cap-display:hover, .cma-cap-display:focus {
    border-color: #1a5478;
    background: #04101c;
    outline: none;
}
.cma-cap-hints {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: #8aafc8;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.72rem;
}
.cma-cap-hints:hover, .cma-cap-hints:focus {
    border-color: #1a5478;
    background: #04101c;
    color: #c5d9e8;
    outline: none;
}
.cma-detailed-addprod {
    display: flex;
    gap: 6px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #0c2133;
}
.cma-detailed-addprod-input {
    flex: 1;
    background: #040e18;
    border: 1px solid #0c2133;
    color: #c5d9e8;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
}
.cma-detailed-addprod-input:focus {
    outline: none;
    border-color: #1a5478;
}
.cma-detailed-addcap {
    margin-top: 0.4rem;
    margin-left: 1.25rem;
}

/* -----------------------------------------------------------------------
   Mapping results table (shown in load modal after data push)
   ----------------------------------------------------------------------- */
.vcm-map-results-scroll {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--vcm-border);
    border-radius: 6px;
    margin-bottom: 0.25rem;
}
.vcm-map-results-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}
.vcm-map-results-tbl thead th {
    position: sticky;
    top: 0;
    background: #071523;
    color: var(--vcm-text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--vcm-border);
    text-align: left;
}
.vcm-map-results-tbl tbody tr {
    border-bottom: 1px solid var(--vcm-border-soft);
}
.vcm-map-results-tbl tbody tr:last-child {
    border-bottom: none;
}
.vcm-map-results-tbl tbody td {
    padding: 0.38rem 0.6rem;
    color: var(--vcm-text);
    vertical-align: middle;
}
.vcm-map-null-row td {
    color: var(--vcm-text-muted);
}
.vcm-map-tile-name {
    display: block;
    font-weight: 500;
    color: var(--vcm-accent);
}
.vcm-map-tile-id {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    color: var(--vcm-text-dim);
    margin-top: 1px;
}
.vcm-map-ai-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--vcm-purple-glow);
    color: #a78bfa;
    border: 1px solid var(--vcm-purple);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.06em;
}
.vcm-map-no-match {
    color: var(--vcm-text-muted);
    font-style: italic;
}
.vcm-map-results-summary {
    font-size: 0.72rem;
    color: var(--vcm-text-dim);
    margin: 0 0 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.4rem;
}
.vcm-map-warn { color: #f59e0b; }
.vcm-map-hint {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
    color: var(--vcm-text-muted);
    font-style: italic;
}
/* Tile & tier selects inside the mapping table */
.vcm-map-tile-sel,
.vcm-map-tier-sel {
    background: #071523;
    border: 1px solid var(--vcm-border);
    border-radius: 4px;
    color: var(--vcm-text);
    font-size: 0.7rem;
    padding: 0.2rem 0.35rem;
    cursor: pointer;
    outline: none;
    width: 100%;
    max-width: 320px;
}
.vcm-map-tile-sel:focus,
.vcm-map-tier-sel:focus { border-color: var(--vcm-accent); }
.vcm-map-tier-sel { max-width: 90px; }
.vcm-map-ai-cb {
    width: 14px;
    height: 14px;
    accent-color: var(--vcm-purple);
    cursor: pointer;
}
.vcm-map-results-tbl thead th:last-child {
    width: 36px;
    text-align: center;
}

/* ── Mapping results popup v2 — tabbed, wide, matched/unmatched sections ── */
.vcm-modal.vcm-mapping-modal {
    max-width: min(1240px, 96vw);
    width: min(1240px, 96vw);
    min-width: 820px;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
.vcm-mr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.5rem;
}
.vcm-mr-header h3 { margin: 0; }
.vcm-mr-tabs {
    display: inline-flex;
    background: #071523;
    border: 1px solid var(--vcm-border);
    border-radius: 6px;
    overflow: hidden;
}
.vcm-mr-tab {
    background: transparent;
    border: none;
    color: var(--vcm-text-dim);
    padding: 0.42rem 0.9rem;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.vcm-mr-tab.on {
    background: var(--vcm-accent-dim);
    color: var(--vcm-accent);
}
.vcm-mr-summary {
    font-size: 0.72rem;
    color: var(--vcm-text-dim);
    margin-bottom: 0.5rem;
}
.vcm-mr-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--vcm-border);
    border-radius: 6px;
    background: #050f1a;
}
.vcm-mr-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-shrink: 0;
}
.vcm-mr-footer .vcm-btn { flex: 1; }

/* Column widths — capability column gets the lion's share so the dropdown
   isn't squished. Usage column fits both the "used/purchased" text and the
   status-override select stacked vertically. */
.vcm-mr-col-product    { width: 22%; }
.vcm-mr-col-tile       { width: 34%; }
.vcm-mr-col-usage      { width: 22%; }
.vcm-mr-col-tier       { width: 12%; }
.vcm-mr-col-ai         { width: 8%;  }
.vcm-mr-col-ent-product { width: 22%; }
.vcm-mr-col-ent-name    { width: 22%; }
.vcm-mr-col-ent-cap     { width: 48%; }
.vcm-mr-col-ent-actions { width: 8%;  }

/* Overrides the narrow default on the capability / tile select inside this
   popup — dropdowns fill their cell. */
.vcm-mapping-modal .vcm-mr-tile-sel,
.vcm-mapping-modal .vcm-mr-cap-sel {
    max-width: none;
    width: 100%;
}

/* Section headers (Matched / Unmatched) */
.vcm-mr-section td {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0.6rem !important;
}
.vcm-mr-section--matched td {
    background: rgba(22, 163, 74, 0.12);
    color: #4ade80;
    border-bottom: 1px solid rgba(22, 163, 74, 0.3);
}
.vcm-mr-section--unmatched td {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

/* Product row — inline badges for contract-only / orphan */
.vcm-mr-prow-name { margin-right: 6px; }
.vcm-mr-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.vcm-mr-badge--contract    { background: #1e3a8a; color: #bfdbfe; }
.vcm-mr-badge--orphan      { background: #78350f; color: #fde68a; }
.vcm-mr-badge--entitlement { background: #14532d; color: #bbf7d0; }

/* Alias list — other source-product names that resolve to the same tile as
   the primary row. Shown stacked beneath the primary name. */
.vcm-mr-prow-aliases {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vcm-mr-prow-alias {
    font-size: 0.68rem;
    color: var(--vcm-text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
}
.vcm-mr-alias-arrow {
    color: var(--vcm-text-muted);
    flex-shrink: 0;
}
.vcm-mr-alias-tag {
    font-size: 0.58rem;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 3px;
    background: #0a2035;
    color: var(--vcm-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vcm-mr-alias-tag--contract    { background: #1e3a8a; color: #bfdbfe; }
.vcm-mr-alias-tag--orphan      { background: #78350f; color: #fde68a; }
.vcm-mr-alias-tag--entitlement { background: #14532d; color: #bbf7d0; }

.vcm-mr-prow--unmatched { } /* visual via section header; row itself stays neutral */

.vcm-mr-empty {
    color: var(--vcm-text-muted);
    font-style: italic;
    text-align: center;
    padding: 1rem !important;
}

.vcm-mr-actions {
    text-align: center;
    white-space: nowrap;
}
.vcm-mr-iconbtn {
    background: #071523;
    border: 1px solid var(--vcm-border);
    color: var(--vcm-text-dim);
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0 2px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}
.vcm-mr-iconbtn:hover { background: #0a2035; color: var(--vcm-accent); }

/* Usage cell: `used/purchased` on top, status-override select below. */
.vcm-mr-usage-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap;
}
.vcm-mr-usage-text {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: var(--vcm-text);
}
.vcm-mr-usage--overage { color: #f87171; font-weight: 600; }
.vcm-mr-usage--none { color: var(--vcm-text-muted); font-family: inherit; }
.vcm-mr-status-sel {
    background: #071523;
    border: 1px solid var(--vcm-border);
    border-radius: 4px;
    color: var(--vcm-text);
    font-size: 0.68rem;
    padding: 0.15rem 0.3rem;
    cursor: pointer;
    outline: none;
    width: 100%;
    font-family: inherit;
}
.vcm-mr-status-sel:focus { border-color: var(--vcm-accent); }


/* Details (coming soon) panel */
.vcm-details-placeholder {
    padding: 3rem 1rem;
    text-align: center;
    background: var(--vcm-surface);
    border: 1px dashed var(--vcm-border);
    border-radius: 8px;
    color: var(--vcm-text-dim);
}
.vcm-details-placeholder h3 {
    font-size: 1rem;
    color: var(--vcm-accent);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.vcm-details-placeholder p {
    font-size: 0.8rem;
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Entitlements view: full viewport width, tight side padding */
.vcm-map-area.vcm-map-area--entitlements {
    padding: 0.35rem 0.4rem;
}
.vcm-map-inner.vcm-map-inner--entitlements {
    max-width: none;
    width: 100%;
}

/* ── ENTITLEMENTS VIEW ──
   Layout model: each row is a 12-track CSS grid (via inline
   grid-template-columns: repeat(12, 1fr)). Every group card spans
   `internalCols` grid tracks (via inline grid-column: span N), and each card
   internally subdivides into exactly N equal tracks. Because the outer grid
   and inner grid share the same 1/12-row unit, every internal column in every
   card has identical width.

   Heights: outer row is `align-items: stretch` so all cards in a row match the
   tallest one. Each card's .vcm-ent-cols takes `flex: 1 1 auto` to fill card
   height; each .vcm-ent-col stretches to card height; capability cells inside
   flex:1 to equalize across the full row. Product headers are fixed height. */
.vcm-ent-row-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--vcm-col-gap);
}
.vcm-ent-row {
    display: grid;
    /* grid-template-columns set inline to repeat(12, 1fr) */
    gap: var(--vcm-col-gap);
    align-items: stretch;
}
.vcm-ent-group-card {
    /* grid-column: span N set inline; override base vcm-group-card flex:1 */
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vcm-ent-cols {
    display: grid;
    /* grid-template-columns: repeat(N, 1fr) set inline so internal tracks
       match the row's 1/12 width exactly */
    gap: var(--vcm-gap);
    padding: var(--vcm-gap);
    flex: 1 1 auto;
    min-height: 0;
}
.vcm-ent-col {
    display: flex;
    flex-direction: column;
    gap: var(--vcm-gap);
    min-width: 0;
    min-height: 0;
}
.vcm-ent-product-block {
    display: flex;
    flex-direction: column;
    gap: var(--vcm-gap);
    min-width: 0;
    min-height: 0;
}
.vcm-ent-pair-slot {
    display: flex;
    flex-direction: column;
    gap: var(--vcm-gap);
    min-width: 0;
    min-height: 0;
}
.vcm-ent-product-caps {
    display: grid;
    gap: var(--vcm-gap);
    flex: 1 1 auto;
    min-height: 0;
}
.vcm-ent-product-header {
    font-size: calc(0.62rem * var(--vcm-zoom) * var(--vcm-product-name-scale, 1));
    font-weight: 700;
    color: #cfe3f5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: calc(3px * var(--vcm-zoom)) calc(4px * var(--vcm-zoom));
    border-bottom: calc(2px * var(--vcm-zoom)) solid rgba(22, 163, 74, 0.85);
    text-align: center;
    line-height: 1.2;
    flex: 0 0 auto;
}
.vcm-ent-product-header + .vcm-ent-product-header,
.vcm-ent-cell + .vcm-ent-product-header {
    /* Subsequent product headers inside the same column get extra top spacing */
    margin-top: calc(2px * var(--vcm-zoom));
}
.vcm-ent-empty {
    font-size: 0.7rem;
    color: var(--vcm-text-muted);
    font-style: italic;
    padding: 0.5rem;
}
.vcm-ent-group-card .vcm-group-hdr {
    font-size: calc(1.05rem * var(--vcm-zoom) * var(--vcm-group-title-scale, 1));
    padding: calc(0.35rem * var(--vcm-zoom)) calc(0.75rem * var(--vcm-zoom)) calc(0.3rem * var(--vcm-zoom));
}
.vcm-ent-cell {
    min-height: var(--vcm-cell-min);
    flex: 1 1 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(3px * var(--vcm-zoom)) calc(6px * var(--vcm-zoom));
    font-size: calc(0.68rem * var(--vcm-zoom) * var(--vcm-ent-name-scale, 1));
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .1s, box-shadow .1s, filter .1s;
    user-select: none;
    text-align: center;
}
.vcm-ent-cell .vcm-cell-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    width: 100%;
}
.vcm-ent-cell:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.vcm-ent-cell--owned {
    background: var(--vcm-green);
    color: #fff;
    box-shadow: 0 1px 6px var(--vcm-green-glow);
}
.vcm-ent-cell--not-owned {
    background: var(--vcm-locked-bg);
    color: var(--vcm-locked-text);
}
.vcm-ent-cell--proposed {
    background: var(--vcm-purple);
    color: #fff;
    box-shadow: 0 1px 6px var(--vcm-purple-glow);
}
/* Entitlement cells: no override visual indicator — the toolbar override
   count is the sole way to see overrides in this view. */

/* ======================================================================
   Propose Solution modal (viewport-capability-map-proposals.js)
   ====================================================================== */

.vcm-proposals-modal {
    min-width: 640px;
    max-width: 820px;
    width: 90vw;
    max-height: 82vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.vcm-proposals-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.2rem 0.75rem;
    border-bottom: 1px solid var(--vcm-border);
    flex-shrink: 0;
}
.vcm-proposals-hdr h3 { margin: 0; font-size: 1rem; color: #deeef8; font-weight: 600; }
.vcm-proposals-close {
    background: none; border: none; color: var(--vcm-text-dim);
    cursor: pointer; font-size: 1rem; padding: 0.1rem 0.3rem; line-height: 1; border-radius: 3px;
}
.vcm-proposals-close:hover { color: var(--vcm-text); background: rgba(255,255,255,0.06); }

.vcm-proposals-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.vcm-proposals-left {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.75rem 0.75rem 1.2rem;
    border-right: 1px solid var(--vcm-border);
    min-width: 0;
}
.vcm-proposals-right {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1.2rem 0.75rem 0.75rem;
    min-width: 0;
}
.vcm-proposals-col-label {
    font-size: 0.68rem;
    color: var(--vcm-text-dim);
    margin-bottom: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.vcm-proposals-search { margin-bottom: 0.5rem; flex-shrink: 0; }

.vcm-proposals-results {
    flex: 1;
    overflow-y: auto;
    margin-right: -0.25rem;
    padding-right: 0.25rem;
}
.vcm-proposals-result-row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}
.vcm-proposals-result-row:hover { background: rgba(125,211,252,0.05); }
.vcm-proposals-result-row--checked { background: rgba(125,211,252,0.04); }
.vcm-proposals-cb { margin-top: 0.18rem; flex-shrink: 0; cursor: pointer; accent-color: var(--vcm-accent); }
.vcm-proposals-result-info { min-width: 0; }
.vcm-proposals-result-name { font-size: 0.82rem; color: var(--vcm-text); }
.vcm-proposals-result-hints { font-size: 0.69rem; color: var(--vcm-text-dim); margin-top: 0.08rem; }

.vcm-proposals-sel-list {
    flex: 1;
    overflow-y: auto;
    margin-right: -0.25rem;
    padding-right: 0.25rem;
}
.vcm-proposals-sel-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.4rem;
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--vcm-text);
}
.vcm-proposals-sel-row:hover { background: rgba(125,211,252,0.05); }
.vcm-proposals-sel-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vcm-proposals-sel-remove {
    background: none; border: none; color: var(--vcm-text-dim);
    cursor: pointer; font-size: 0.72rem; padding: 0.1rem 0.28rem;
    flex-shrink: 0; border-radius: 3px; line-height: 1;
}
.vcm-proposals-sel-remove:hover { background: rgba(248,113,113,0.15); color: #f87171; }

.vcm-proposals-empty {
    font-size: 0.75rem;
    color: var(--vcm-text-dim);
    text-align: center;
    padding: 1.2rem 0;
}

.vcm-proposals-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border-top: 1px solid var(--vcm-border);
    flex-shrink: 0;
}
.vcm-proposals-err {
    font-size: 0.72rem;
    color: #f87171;
    flex: 1;
    text-align: right;
}

/* Summary state */
.vcm-proposals-summary-line {
    font-size: 0.75rem;
    color: var(--vcm-text-dim);
    padding: 0.5rem 1.2rem 0.25rem;
    flex-shrink: 0;
}
.vcm-proposals-summary-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.2rem 0.5rem;
    min-height: 0;
}
.vcm-proposals-summary-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.vcm-proposals-summary-tbl th {
    text-align: left;
    font-size: 0.68rem;
    color: var(--vcm-text-dim);
    font-weight: 600;
    border-bottom: 1px solid var(--vcm-border);
    padding: 0.3rem 0.5rem;
    position: sticky;
    top: 0;
    background: var(--vcm-surface);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vcm-proposals-srow td {
    padding: 0.32rem 0.5rem;
    border-bottom: 1px solid rgba(14,36,56,0.5);
    color: var(--vcm-text);
    vertical-align: middle;
}
.vcm-proposals-srow--nomatch td { color: var(--vcm-text-dim); }
.vcm-proposals-nomatch { font-style: italic; }

.vcm-proposals-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.69rem;
    font-weight: 500;
    white-space: nowrap;
}
.vcm-proposals-badge--proposed { background: rgba(170,106,218,0.2); color: #c084fc; }
.vcm-proposals-badge--skipped  { background: rgba(90,138,170,0.1);  color: var(--vcm-text-dim); }
.vcm-proposals-new-badge {
    display: inline-block;
    padding: 0.05rem 0.28rem;
    border-radius: 3px;
    font-size: 0.63rem;
    font-weight: 600;
    background: rgba(50,173,238,0.18);
    color: var(--vcm-accent);
    margin-left: 0.3rem;
    vertical-align: middle;
}

.vcm-proposals-loading {
    font-size: 0.8rem;
    color: var(--vcm-text-dim);
    padding: 2rem 1.2rem;
    text-align: center;
}
.vcm-proposals-hint {
    font-size: 0.7rem;
    color: var(--vcm-text-muted);
    margin-bottom: 0.35rem;
}
.vcm-proposals-cap-note {
    font-size: 0.67rem;
    color: var(--vcm-text-dim);
    margin-top: 0.15rem;
}