/* ============================================================================
   UNIFIED CARD / BOX HOVER — one interaction language across the whole app.

   card-hover.js tags every card-shaped element with a `data-uhover` attribute
   ("" = brand blue, or green|amber|red for status cards). Each hovers with a
   small lift, a soft coloured drop-shadow "fade" and a light outline/border.

   Cross-platform fix: the "light only the innermost hovered card" refinement
   uses :has(). Browsers WITHOUT :has() support get a plain fallback (via
   @supports) so the hover animation STILL WORKS everywhere — previously every
   rule depended on :has(), so on any engine lacking it the whole effect
   silently vanished (it only appeared on browsers that support :has()).
   ============================================================================ */

:is(main.app-main, [data-uhover-scope]) [data-uhover] {
    transition: transform .16s ease, box-shadow .16s ease,
                border-color .16s ease, background-color .16s ease;
}

/* ---- Browsers WITH :has() — light only the innermost hovered card ---------- */
@supports selector(:has(*)) {
    :is(main.app-main, [data-uhover-scope]) [data-uhover]:hover:not(:has([data-uhover]:hover)) {
        transform: translateY(-2px) !important;
        outline: 1.5px solid rgba(37, 99, 235, .25) !important;
        outline-offset: -1px !important;
        border-color: rgba(37, 99, 235, .25) !important;
        box-shadow: 0 16px 34px -18px rgba(37, 99, 235, .58) !important;
        /* A tiny brightness lift so COLOURED/filled cards (blue CTA panels, etc.) visibly
           respond too — the blue outline+glow alone is invisible on a blue card. No-op on white. */
        filter: brightness(1.06) !important;
        position: relative;
        z-index: 1;
    }
    :is(main.app-main, [data-uhover-scope]) [data-uhover="green"]:hover:not(:has([data-uhover]:hover)) {
        outline-color: rgba(22, 163, 74, .25) !important;
        border-color: rgba(22, 163, 74, .25) !important;
        box-shadow: 0 16px 34px -18px rgba(22, 163, 74, .58) !important;
    }
    :is(main.app-main, [data-uhover-scope]) [data-uhover="amber"]:hover:not(:has([data-uhover]:hover)) {
        outline-color: rgba(217, 119, 6, .28) !important;
        border-color: rgba(217, 119, 6, .28) !important;
        box-shadow: 0 16px 34px -18px rgba(217, 119, 6, .58) !important;
    }
    :is(main.app-main, [data-uhover-scope]) [data-uhover="red"]:hover:not(:has([data-uhover]:hover)) {
        outline-color: rgba(220, 38, 38, .25) !important;
        border-color: rgba(220, 38, 38, .25) !important;
        box-shadow: 0 16px 34px -18px rgba(220, 38, 38, .58) !important;
    }
}

/* ---- Fallback for browsers WITHOUT :has() — same look, lights any hovered
        card (nested cards are rare, so the loss of "innermost-only" is fine) --- */
@supports not selector(:has(*)) {
    :is(main.app-main, [data-uhover-scope]) [data-uhover]:hover {
        transform: translateY(-2px) !important;
        outline: 1.5px solid rgba(37, 99, 235, .25) !important;
        outline-offset: -1px !important;
        border-color: rgba(37, 99, 235, .25) !important;
        box-shadow: 0 16px 34px -18px rgba(37, 99, 235, .58) !important;
        filter: brightness(1.06) !important;
        position: relative;
        z-index: 1;
    }
    :is(main.app-main, [data-uhover-scope]) [data-uhover="green"]:hover {
        outline-color: rgba(22, 163, 74, .25) !important;
        border-color: rgba(22, 163, 74, .25) !important;
        box-shadow: 0 16px 34px -18px rgba(22, 163, 74, .58) !important;
    }
    :is(main.app-main, [data-uhover-scope]) [data-uhover="amber"]:hover {
        outline-color: rgba(217, 119, 6, .28) !important;
        border-color: rgba(217, 119, 6, .28) !important;
        box-shadow: 0 16px 34px -18px rgba(217, 119, 6, .58) !important;
    }
    :is(main.app-main, [data-uhover-scope]) [data-uhover="red"]:hover {
        outline-color: rgba(220, 38, 38, .25) !important;
        border-color: rgba(220, 38, 38, .25) !important;
        box-shadow: 0 16px 34px -18px rgba(220, 38, 38, .58) !important;
    }
}

/* Explicit safety for the quote-pipeline "won" stage — :has()-independent so it
   always lights green even if the data-uhover read lands late. */
:is(main.app-main, [data-uhover-scope]) .mq-stage-won:hover {
    transform: translateY(-2px) !important;
    outline: 1.5px solid rgba(22, 163, 74, .25) !important; outline-offset: -1px !important;
    border-color: rgba(22, 163, 74, .25) !important;
    box-shadow: 0 16px 34px -18px rgba(22, 163, 74, .58) !important;
    position: relative; z-index: 1;
}

/* Table rows: an accent bar + tint reads better than an outline */
:is(main.app-main, [data-uhover-scope]) .vm-table-row { transition: background-color .14s ease, box-shadow .14s ease; }
:is(main.app-main, [data-uhover-scope]) .vm-table-row:hover { background-color: #f6faff !important; box-shadow: inset 3px 0 0 rgba(37,99,235,.3) !important; }
:is(main.app-main, [data-uhover-scope]) .vm-table-row.vm-row-warning:hover { background-color: #fffbeb !important; box-shadow: inset 3px 0 0 rgba(217,119,6,.3) !important; }
:is(main.app-main, [data-uhover-scope]) .vm-table-row.vm-row-danger:hover { background-color: #fef2f2 !important; box-shadow: inset 3px 0 0 rgba(220,38,38,.3) !important; }