/* ===== metric-cards design tokens (auto-generated: fonts, sizes, colors) ===== */
:root {
    --mc-ff-1: var(--joolio-font-metric);
    --mc-fs-15: 15px;
    --mc-fs-11: 11px;
    --mc-fs-13: 13px;
    --mc-fs-10: 10px;
    --mc-fs-9: 9px;
    --mc-fs-14: 14px;
    --mc-fs-17: 17px;
    --mc-fs-12: 12px;
    --mc-fs-26: 26px;
    --mc-fs-29: 29px;
    --mc-fs-25: 25px;
    --mc-fs-19: 19px;
    --mc-fs-24: 24px;
    --mc-fs-22: 22px;
    --mc-fs-16: 16px;
    --mc-fs-18: 18px;
    --mc-fs-20: 20px;
    --mc-fs-23: 23px;
    --mc-fs-27: 27px;
    --mc-fs-30: 30px;
    --mc-fw-400: 400;
    --mc-fw-600: 600;
    --mc-fw-500: 500;
    --mc-fw-700: 700;
    --mc-lh-1_3: 1.3;
    --mc-lh-1_1: 1.1;
    --mc-lh-1_35: 1.35;
    --mc-lh-1: 1;
    --mc-lh-1_2: 1.2;
    --mc-lh-1_08: 1.08;
    --mc-lh-1_25: 1.25;
    --mc-lh-1_45: 1.45;
    --mc-lh-1_55: 1.55;
    --mc-ls-_01em: -.01em;
    --mc-ls-_12em: .12em;
    --mc-ls-_02em: -.02em;
    --mc-ls-_08em: .08em;
    --mc-ls-_2em: .2em;
    --mc-ls-_035em: -.035em;
    --mc-ls-_04em: .04em;
    --mc-ls-_03em: -.03em;
    --mc-ls-_02em-2: .02em;
    --mc-radius-22: 22px;
    --mc-radius-18: 18px;
    --mc-radius-999: 999px;
    --mc-radius-12: 12px;
    --mc-radius-24: 24px;
    --mc-radius-24-24-0-0: 24px 24px 0 0;
    --mc-radius-15: 15px;
    --mc-radius-28: 28px;
    --mc-radius-13: 13px;
    --mc-radius-20: 20px;
    --mc-radius-16: 16px;
    --mc-radius-26: 26px;
    --mc-radius-14: 14px;
    --mc-gap-16: 16px;
    --mc-gap-11: 11px;
    --mc-gap-6: 6px;
    --mc-gap-3: 3px;
    --mc-gap-12: 12px;
    --mc-gap-22: 22px;
    --mc-gap-13: 13px;
    --mc-gap-4: 4px;
    --mc-gap-10: 10px;
    --mc-gap-9: 9px;
    --mc-gap-18: 18px;
    --mc-gap-26: 26px;
    --mc-gap-14: 14px;
    --mc-gap-8: 8px;
    --mc-gap-7: 7px;
    --mc-pad-18-16: 18px 16px;
    --mc-pad-4: 4px;
    --mc-pad-14-14-10: 14px 14px 10px;
    --mc-pad-0-60: 0 60px;
    --mc-pad-12-14: 12px 14px;
    --mc-pad-10: 10px;
    --mc-pad-6-6: 6px 6px;
    --mc-pad-0-14-14: 0 14px 14px;
    --mc-pad-3-9: 3px 9px;
    --mc-pad-14-10: 14px 10px;
    --mc-pad-18: 18px;
    --mc-pad-4-10: 4px 10px;
    --mc-pad-24: 24px;
    --mc-pad-0-68: 0 68px;
    --mc-pad-14: 14px;
    --mc-pad-12: 12px;
    --mc-pad-16: 16px;
    --mc-pad-0-18-18: 0 18px 18px;
    --mc-pad-20-18: 20px 18px;
    --mc-pad-0-18: 0 18px;
    --mc-pad-14-10-6: 14px 10px 6px;
    --mc-pad-4-9: 4px 9px;
    --mc-pad-15: 15px;
    --mc-pad-4-8: 4px 8px;
    --mc-pad-14-15: 14px 15px;
    --mc-pad-0-4: 0 4px;
    --mc-pad-13: 13px;
    --mc-pad-10-11: 10px 11px;
    --mc-pad-12-13: 12px 13px;
    --mc-pad-8-10: 8px 10px;
    --mc-pad-12-16: 12px 16px;
    --mc-pad-11-13: 11px 13px;
    --mc-pad-18-17-17: 18px 17px 17px;
    --mc-pad-14-16: 14px 16px;
    --mc-mar-4-0-0: 4px 0 0;
    --mc-mar-8-0-0: 8px 0 0;
    --mc-mar-7-0-0: 7px 0 0;
    --mc-mar-3-0: 3px 0;
    --mc-mar-16-10-8: 16px 10px 8px;
    --mc-mar-16-12-8: 16px 12px 8px;
    --mc-mar-0-0-8: 0 0 8px;
    --mc-mar-4-12-8: 4px 12px 8px;
    --mc-mar-0-0-7: 0 0 7px;
    --mc-w-202: 202px;
    --mc-w-130: 130px;
    --mc-w-36: 36px;
    --mc-w-calc50pct---12: calc(50% - 12px);
    --mc-w-170: 170px;
    --mc-w-40: 40px;
    --mc-w-34: 34px;
    --mc-w-230: 230px;
    --mc-w-64: 64px;
    --mc-w-96: 96px;
    --mc-w-42: 42px;
    --mc-w-72: 72px;
    --mc-w-9: 9px;
    --mc-w-78: 78px;
    --mc-w-66: 66px;
    --mc-h-130: 130px;
    --mc-h-36: 36px;
    --mc-h-170: 170px;
    --mc-h-40: 40px;
    --mc-h-34: 34px;
    --mc-h-132: 132px;
    --mc-h-54: 54px;
    --mc-h-1: 1px;
    --mc-h-230: 230px;
    --mc-h-64: 64px;
    --mc-h-96: 96px;
    --mc-h-42: 42px;
    --mc-h-10: 10px;
    --mc-h-6: 6px;
    --mc-h-2: 2px;
    --mc-h-78: 78px;
    --mc-h-66: 66px;
    --mc-minw-180: 180px;
    --mc-minw-42: 42px;
    --mc-minw-260: 260px;
    --mc-minw-445: 445px;
    --mc-minw-64: 64px;
    --mc-minw-52: 52px;
    --mc-minw-50: 50px;
    --mc-minh-184: 184px;
    --mc-minh-58: 58px;
    --mc-minh-96: 96px;
    --mc-minh-20: 20px;
    --mc-minh-78: 78px;
    --mc-minh-23: 23px;
    --mc-minh-285: 285px;
    --mc-minh-154: 154px;
    --mc-minh-64: 64px;
    --mc-minh-70: 70px;
    --mc-minh-132: 132px;
    --mc-minh-260: 260px;
    --mc-minh-76: 76px;
    --mc-maxh-540: 540px;
    --mc-color-fff: #fff;
    --mc-color-dcebff: #dcebff;
    --mc-color-06101c: #06101c;
    --mc-color-b8c8df: #b8c8df;
    --mc-color-07111f: #07111f;
    --mc-color-f7fbff: #f7fbff;
    --mc-color-f5c76b: #f5c76b;
    --mc-color-edf4fb: #edf4fb;
    --mc-color-e6eef8: #e6eef8;
    --mc-z-2: 2;
    --mc-z-1: 1;
    --mc-z-5: 5;
    --mc-bg-1: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(244, 247, 252, .82)),
            radial-gradient(circle at 0 0, rgba(47, 109, 246, .10), transparent 38%);
    --mc-bg-3: rgba(255, 255, 255, .6);
    --mc-bg-4: rgba(93, 107, 133, .14);
    --mc-bg-6: linear-gradient(180deg, rgba(255,255,255,.145), rgba(255,255,255,.035));
    --mc-bg-7: rgba(245,199,107,.14);
    --mc-bg-8: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.025));
    --mc-bg-9: rgba(255,255,255,.075);
    --mc-bg-10: linear-gradient(90deg, transparent, rgba(245,199,107,.10), transparent), rgba(2,8,18,.2);
    --mc-bg-11: linear-gradient(90deg, transparent, rgba(245,199,107,.48), rgba(98,183,255,.28), transparent);
    --mc-bg-12: radial-gradient(circle at 50% 0, rgba(98,183,255,.06), transparent 52%), rgba(255,255,255,.045);
    --mc-bg-13: rgba(98,183,255,.12);
    --mc-bg-15: rgba(56,242,165,.54);
    --mc-bg-16: rgba(98,183,255,.46);
    --mc-bg-17: rgba(2,8,18,.28);
    --mc-bg-23: rgba(245,199,107,.2);
    --mc-bg-24: rgba(255,255,255,.028);
    --mc-bg-25: radial-gradient(circle at 100% 0, rgba(98,183,255,.12), transparent 34%),
            rgba(255,255,255,.032);
    --mc-bg-26: linear-gradient(90deg, transparent, rgba(245,199,107,.32), rgba(98,183,255,.22), transparent);
    --mc-bg-27: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
            rgba(2,8,18,.16);
    --mc-bg-28: rgba(255,255,255,.08);
    --mc-bg-29: linear-gradient(90deg, #27df91, #8affca);
    --mc-bg-30: linear-gradient(90deg, #f5c76b, #ff9f43);
    --mc-bg-31: linear-gradient(90deg, #ff5f76, #ff93a3);
    --mc-bg-32: linear-gradient(90deg, #9fb0c8, #d9e3f2);
    --mc-bg-33: rgba(2,8,18,.2);
    --mc-bg-34: rgba(255,255,255,.045);
    --mc-bg-35: rgba(255,255,255,.07);
    --mc-bg-36: radial-gradient(circle at 100% 0, rgba(98,183,255,.1), transparent 38%),
            rgba(255,255,255,.045);
    --mc-bg-37: linear-gradient(90deg, transparent, rgba(245,199,107,.54), transparent);
    --mc-bg-38: rgba(255,255,255,.05);
    --mc-bg-39: rgba(255,255,255,.035);
    --mc-bg-40: linear-gradient(90deg, transparent, rgba(245,199,107,.10), transparent),
            rgba(2,8,18,.2);
    --mc-bg-41: rgba(255,255,255,.04);
    --mc-bg-42: linear-gradient(180deg, rgba(245,199,107,.78), rgba(98,183,255,.62));
    --mc-bg-43: radial-gradient(circle at 100% 0, rgba(98,183,255,.1), transparent 42%),
            rgba(255,255,255,.045);
    --mc-bg-44: rgba(98,183,255,.16);
    --mc-bg-45: radial-gradient(circle at 50% 0, rgba(98,183,255,.06), transparent 52%),
            rgba(255,255,255,.045);
    --mc-bg-46: radial-gradient(circle at 12% 0, rgba(245, 199, 107, .12), transparent 28%),
        radial-gradient(circle at 96% 8%, rgba(56, 242, 165, .12), transparent 30%),
        linear-gradient(145deg, #07111f 0%, #0d1a2c 46%, #07111f 100%);
    --mc-bg-47: rgba(255, 255, 255, .055);
    --mc-bg-48: rgba(255, 255, 255, .045);
    --mc-bg-49: rgba(255, 255, 255, .55);
    --mc-shadow-1: 0 10px 30px rgba(18, 38, 78, .06);
    --mc-shadow-2: 0 24px 58px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10);
    --mc-shadow-3: 0 30px 72px rgba(0,0,0,.4), 0 0 34px rgba(245,199,107,.08), inset 0 1px 0 rgba(255,255,255,.14);
    --mc-shadow-9: inset 0 4px 0 rgba(255,255,255,.08);
    --mc-shadow-10: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 10px rgba(0,0,0,.10);
    --mc-shadow-11: 0 26px 64px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
    --mc-shadow-12: 0 18px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
    --mc-shadow-13: inset 0 -2px 0 rgba(56,242,165,.82);
    --mc-shadow-14: inset 0 -2px 0 rgba(255,191,82,.82);
    --mc-shadow-15: inset 0 -2px 0 rgba(255,95,118,.82);
    --mc-shadow-16: inset 0 -2px 0 rgba(174,187,208,.82);
    --mc-shadow-17: inset 0 1px 0 rgba(255,255,255,.08);
    --mc-shadow-18: 0 14px 26px rgba(0,0,0,.22);
    --mc-shadow-19: inset 0 1px 2px rgba(0,0,0,.24);
    --mc-shadow-20: 0 12px 28px rgba(0,0,0,.18);
    --mc-shadow-21: inset 0 1px 0 rgba(255,255,255,.075);
    --mc-shadow-22: 0 34px 80px rgba(0,0,0,.46), 0 0 0 1px rgba(245,199,107,.24), 0 0 38px rgba(245,199,107,.22), inset 0 1px 0 rgba(255,255,255,.16);
    --mc-shadow-23: inset 0 1px 0 rgba(255,255,255,.07);
    --mc-shadow-24: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 60px rgba(0, 0, 0, .22);
    --mc-shadow-25: inset 0 1px 0 rgba(255, 255, 255, .06);
    --mc-shadow-26: inset 0 1px 0 rgba(255, 255, 255, .7);
    --mc-tshadow-1: 0 10px 30px rgba(0, 0, 0, .35);
    --mc-border-2: 1px solid rgba(15, 34, 67, .12);
    --mc-border-3: 1px solid rgba(15, 34, 67, .10);
    --mc-border-6: 1px solid rgba(255,255,255,.13);
    --mc-border-7: 1px solid rgba(255,255,255,.16);
    --mc-border-8: 1px solid rgba(98,183,255,.18);
    --mc-border-9: 1px solid rgba(255,255,255,.11);
    --mc-border-10: 1px solid rgba(255,255,255,.07);
    --mc-border-11: 1px solid rgba(255,255,255,.10);
    --mc-border-12: 1px solid rgba(255,255,255,.075);
    --mc-border-13: 1px solid rgba(255,255,255,.1);
    --mc-border-14: 1px solid rgba(255, 255, 255, .11);
    --mc-border-15: 1px solid rgba(255, 255, 255, .10);
    --mc-borderb-1: 1px solid rgba(15, 34, 67, .07);
    --mc-borderb-2: 1px solid rgba(255,255,255,.08);
    --mc-borderb-3: 1px solid rgba(255,255,255,.065);
    --mc-bordert-1: 1px solid rgba(255,255,255,.08);
    --mc-borderc-1: rgba(255,255,255,.13);
    --mc-borderc-2: rgba(98,183,255,.18);
    --mc-borderc-3: rgba(255,191,82,.28);
    --mc-borderc-4: rgba(255,95,118,.30);
    --mc-borderc-5: rgba(174,187,208,.22);
    --mc-borderc-6: rgba(245,199,107,.28);
    --mc-borderc-7: rgba(245,199,107,.76);
}

/* ===== Queue Report metric cards (joolio-report-metrics) - moved from metric_cards/report_styles.blade.php ===== */
.joolio-report-metrics {
        --report-bg: linear-gradient(180deg, #f4f7fb 0%, #eef2f8 100%);
        --report-surface: rgba(255, 255, 255, .92);
        --report-surface-strong: #ffffff;
        --report-border: rgba(15, 34, 67, .10);
        --report-border-strong: rgba(15, 34, 67, .18);
        --report-text: #16243b;
        --report-muted: #5d6b85;
        --report-accent: #2f6df6;
        --report-accent-soft: rgba(47, 109, 246, .14);
        --report-gold: #c98a2b;
        --report-shadow: var(--mc-pad-0-18) var(--mc-w-40) rgba(18, 38, 78, .12);
        --report-shadow-hover: 0 var(--mc-fs-26) var(--mc-minh-58) rgba(18, 38, 78, .20);
        --report-ok: #1f9d6b;
        --report-ok-soft: rgba(31, 157, 107, .16);
        --report-warning: #c98a2b;
        --report-warning-soft: rgba(201, 138, 43, .18);
        --report-failed: #d73925;
        --report-failed-soft: rgba(215, 57, 37, .16);
        width: 100%;
        font-family: var(--mc-ff-1);
        color: var(--report-text);
        box-sizing: border-box;
    }

    .joolio-report-metrics *,
    .joolio-report-metrics *::before,
    .joolio-report-metrics *::after {
        box-sizing: border-box;
    }

    .joolio-report-metrics.report-metrics-surface {
        background: var(--report-bg);
        border-radius: var(--mc-gap-22) 0 var(--mc-gap-22) var(--mc-gap-22);
        padding: var(--mc-pad-18-16);
        border: 1px solid var(--report-border);
        box-shadow: var(--mc-shadow-1);
    }

    .report-metrics-row {
        display: flex;
        gap: var(--mc-gap-16);
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--mc-gap-4);
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .report-metrics-row.report-metrics-nowrap {
        flex-wrap: nowrap;
    }

    .report-metrics-contents {
        display: contents;
    }

    .report-metrics-row > .report-metric-card,
    .report-metrics-row > .report-metric-card-wrap,
    .report-metrics-contents > .report-metric-card-wrap {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }

    .report-metric-card-wrap {
        max-width: 100%;
    }

    .report-metric-card {
        position: relative;
        width: var(--mc-w-202);
        max-width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--report-border);
        border-radius: var(--mc-gap-18) 0 var(--mc-gap-18) var(--mc-gap-18);
        background:
            linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(244, 247, 252, .82)),
            radial-gradient(circle at 0 0, rgba(47, 109, 246, .10), transparent 38%);
        box-shadow:
            var(--report-shadow),
            inset 0 var(--mc-h-1) 0 rgba(255, 255, 255, .9),
            inset var(--mc-pad-0-4) 0 var(--report-accent-color, var(--report-accent));
        backdrop-filter: blur(var(--mc-gap-10));
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .report-metric-card::after {
        content: '';
        position: absolute;
        right: -44px;
        bottom: -58px;
        width: var(--mc-w-130);
        height: var(--mc-w-130);
        border-radius: var(--mc-radius-999);
        background: radial-gradient(circle, var(--report-accent-color, var(--report-accent)), transparent 70%);
        opacity: .10;
        pointer-events: none;
    }

    .report-metric-card:hover {
        transform: translateY(-3px);
        border-color: var(--report-border-strong);
        box-shadow:
            var(--report-shadow-hover),
            0 0 var(--mc-fs-26) rgba(47, 109, 246, .10),
            inset 0 var(--mc-h-1) 0 rgba(255, 255, 255, .95),
            inset var(--mc-pad-0-4) 0 var(--report-accent-color, var(--report-accent));
    }

    .report-metric-card.report-metric-card-gauge {
        width: var(--mc-w-202);
        min-height: var(--mc-minh-184);
    }

    .report-metric-header {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) var(--mc-w-34);
        align-items: center;
        gap: var(--mc-gap-11);
        min-height: var(--mc-minh-58);
        padding: var(--mc-pad-14-14-10);
        border-bottom: var(--mc-borderb-1);
    }

    .report-metric-icon {
        justify-self: start;
        width: var(--mc-w-36);
        height: var(--mc-w-36);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: var(--mc-border-2);
        border-radius: var(--mc-fs-12);
        color: var(--report-accent-color, var(--report-accent));
        background: var(--report-accent-soft, rgba(47, 109, 246, .12));
        font-size: var(--mc-fs-16);
    }

    .report-metric-icon.health-lux-has-info {
        cursor: help;
    }

    .report-metric-icon .abbr-cnt::before,
    .report-metric-icon .abbr-avg::before {
        font-family: inherit;
        font-style: normal;
        font-size: var(--mc-fs-12);
        font-weight: var(--mc-fw-400);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .report-metric-icon .abbr-cnt::before { content: 'cnt'; }
    .report-metric-icon .abbr-avg::before { content: 'avg'; }

    .report-metric-title {
        margin: 0;
        min-width: 0;
        max-width: 100%;
        justify-self: center;
        text-align: center;
        font-size: var(--mc-fs-14) !important;
        font-weight: var(--mc-fw-400) !important;
        line-height: var(--mc-lh-1_3) !important;
        letter-spacing: normal;
        color: var(--report-text);
        display: -webkit-box;
        -webkit-line-clamp: var(--mc-z-2);
        line-clamp: var(--mc-z-2);
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .report-metric-icon-last {
        justify-self: end;
    }

    .report-metric-header {
        position: relative;
        display: flex;
        align-items: center;
        min-height: var(--mc-minh-58);
        padding: var(--mc-pad-14-14-10);
        border-bottom: var(--mc-borderb-1);
    }
    .report-metric-icon,
    .report-metric-icon.report-metric-icon-last {
        position: absolute;
        left: var(--mc-fs-14);
        top: 50%;
        transform: translateY(-50%);
        z-index: var(--mc-z-2);
    }
    .report-metric-title {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        margin: 0;
        padding: var(--mc-pad-0-60);
        text-align: center !important;
        font-size: var(--mc-fs-14) !important;
        font-weight: var(--mc-fw-400) !important;
        line-height: var(--mc-lh-1_3) !important;
        letter-spacing: normal;
        color: var(--report-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: initial;
    }

    .report-metric-header:not(:has(.report-metric-status-pill)) .report-metric-title {
        left: calc(var(--mc-fs-14) + var(--mc-w-36));
        right: var(--mc-gap-14);
        padding: 0;
        width: auto;
        justify-self: stretch;
    }

    .report-metric-value {
        position: relative;
        z-index: var(--mc-z-1);
        flex: var(--mc-z-1) var(--mc-z-1) auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--mc-gap-6);
        padding: var(--mc-pad-12-14);
        color: var(--report-text);
        text-align: center;
    }

    .report-metric-value-primary {
        font-size: var(--mc-fs-14);
        font-weight: var(--mc-fw-400);
        line-height: var(--mc-lh-1_1);
        letter-spacing: var(--mc-ls-_01em);
        font-variant-numeric: tabular-nums;
    }

    .report-metric-rows {
        position: relative;
        z-index: var(--mc-z-1);
        flex: var(--mc-z-1) var(--mc-z-1) auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--mc-gap-6);
        padding: var(--mc-gap-10);
        align-content: center;
    }

    .report-metric-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--mc-gap-3);
        min-width: 0;
        padding: var(--mc-pad-6-6);
        border: var(--mc-border-3);
        border-radius: var(--mc-fs-12);
        background: var(--mc-bg-3);
    }

    .report-metric-row span {
        color: var(--report-muted);
        font-size: var(--mc-fs-11);
        font-weight: var(--mc-fw-400);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .report-metric-row strong {
        color: var(--report-text);
        font-size: var(--mc-fs-14);
        font-weight: var(--mc-fw-400);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--mc-ls-_01em);
    }

    .report-metric-caption {
        position: relative;
        z-index: var(--mc-z-1);
        padding: var(--mc-pad-0-14-14);
        color: var(--report-muted);
        font-size: var(--mc-fs-11);
        font-weight: var(--mc-fw-400);
        text-align: center;
    }

    .report-metric-caption > span,
    .report-metric-caption > small {
        display: block;
    }

    .report-metric-gauge {
        position: relative;
        z-index: var(--mc-z-1);
        width: 100%;
        flex: var(--mc-z-1) var(--mc-z-1) auto;
        min-height: var(--mc-h-96);
        margin: var(--mc-mar-4-0-0);
    }

    .report-metric-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--mc-radius-20);
        padding: var(--mc-pad-3-9);
        border: 1px solid var(--report-border-strong);
        border-radius: var(--mc-radius-999);
        font-size: var(--mc-fs-10);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_12em);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .report-metric-status-pill-ok { color: var(--report-ok); background: var(--report-ok-soft); }
    .report-metric-status-pill-warning { color: var(--report-warning); background: var(--report-warning-soft); }
    .report-metric-status-pill-failed { color: var(--report-failed); background: var(--report-failed-soft); }
    .report-metric-status-pill-unknown { color: var(--report-muted); background: var(--mc-bg-4); }

    .report-metric-card.status-ok { --report-accent-color: var(--report-ok); }
    .report-metric-card.status-warning { --report-accent-color: var(--report-warning); }
    .report-metric-card.status-failed { --report-accent-color: var(--report-failed); }

    @media (max-width: 575.98px) {
        .joolio-report-metrics.report-metrics-surface { padding: var(--mc-pad-14-10); }
        .report-metrics-row {
            flex-wrap: wrap;
            overflow-x: visible;
            gap: var(--mc-fs-12);
            justify-content: center;
        }
        .report-metrics-row.report-metrics-nowrap { flex-wrap: wrap; }
        .report-metrics-row > .report-metric-card,
        .report-metrics-row > .report-metric-card-wrap,
        .report-metrics-contents > .report-metric-card-wrap {
            flex: var(--mc-z-1) var(--mc-z-1) var(--mc-w-calc50pct---12);
            width: var(--mc-w-calc50pct---12);
        }
        .report-metrics-row > .report-metric-card-wrap > .report-metric-card,
        .report-metrics-contents > .report-metric-card-wrap > .report-metric-card { width: 100%; }
    }

    @media (max-width: 420px) {
        .report-metrics-row > .report-metric-card,
        .report-metrics-row > .report-metric-card-wrap,
        .report-metrics-contents > .report-metric-card-wrap {
            flex: var(--mc-z-1) var(--mc-z-1) 100%;
            width: 100%;
        }
        .report-metrics-row > .report-metric-card-wrap > .report-metric-card,
        .report-metrics-contents > .report-metric-card-wrap > .report-metric-card { width: 100%; }
    }

/* ===== Legacy health-lux metric cards (moved from metric_cards/styles.blade.php) ===== */
.health-lux-dashboard,
    .joolio-lux-dashboard {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        --health-lux-bg: var(--mc-color-07111f);
        --health-lux-surface: rgba(12, 24, 43, .82);
        --health-lux-surface-strong: rgba(17, 32, 57, .96);
        --health-lux-border: rgba(213, 225, 255, .15);
        --health-lux-border-strong: rgba(245, 199, 107, .35);
        --health-lux-text: #eef5ff;
        --health-lux-muted: #9baec8;
        --health-lux-ok: #38f2a5;
        --health-lux-ok-soft: rgba(56, 242, 165, .18);
        --health-lux-warning: #ffbf52;
        --health-lux-warning-soft: rgba(255, 191, 82, .2);
        --health-lux-failed: #ff5f76;
        --health-lux-failed-soft: rgba(255, 95, 118, .2);
        --health-lux-unknown: #aebbd0;
        --health-lux-unknown-soft: rgba(174, 187, 208, .18);
        --health-lux-blue: #62b7ff;
        --health-lux-gold: var(--mc-color-f5c76b);
        color: var(--health-lux-text);
        font-family: var(--mc-ff-1);
        width: 100%;
    }

    .health-lux-dashboard *,
    .health-lux-dashboard *::before,
    .health-lux-dashboard *::after,
    .joolio-lux-dashboard *,
    .joolio-lux-dashboard *::before,
    .joolio-lux-dashboard *::after {
        box-sizing: border-box;
    }

    .health-lux-gauge-grid,
    .health-lux-detail-grid { display: grid; gap: var(--mc-gap-22); }
    .health-lux-gauge-grid { grid-template-columns: repeat(auto-fit, minmax(var(--mc-h-230), 1fr)); }
    .health-lux-detail-grid { grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); padding-top: var(--mc-gap-6); padding-bottom: var(--mc-gap-8); }
    .health-lux-grid-item { min-width: 0; max-width: 100%; position: relative; padding-top: var(--mc-gap-4); }
    .health-lux-grid-item:hover { z-index: var(--mc-z-5); }

    .health-lux-card {
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--health-lux-border);
        border-radius: var(--mc-radius-24) 0 var(--mc-radius-24) var(--mc-radius-24);
        background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.032)), radial-gradient(circle at 0 0, rgba(245,199,107,.14), transparent 34%), var(--health-lux-surface);
        box-shadow: var(--mc-shadow-2);
        backdrop-filter: blur(var(--mc-fs-14));
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .health-lux-card:hover { transform: translateY(-2px); border-color: var(--health-lux-border-strong); box-shadow: var(--mc-shadow-3); }
    .health-lux-card:hover .health-lux-card-header { background: var(--mc-bg-6); }
    .health-lux-card::after { content: ''; position: absolute; right: -56px; bottom: -84px; width: var(--mc-h-170); height: var(--mc-h-170); border-radius: var(--mc-radius-999); background: var(--mc-bg-7); filter: blur(var(--mc-fs-19)); pointer-events: none; }

    .health-lux-card-header { display: grid; grid-template-columns: var(--mc-h-42) minmax(0, 1fr) auto; align-items: center; gap: var(--mc-gap-13); min-height: var(--mc-h-78); padding: var(--mc-gap-18); border-radius: var(--mc-radius-24) 0 0 0; border-bottom: var(--mc-borderb-2); background: var(--mc-bg-8); position: relative; z-index: var(--mc-z-1); }
    .health-lux-card.health-lux-no-pill .health-lux-card-header { grid-template-columns: var(--mc-h-42) minmax(0, 1fr) var(--mc-h-42); }
    .health-lux-card-icon { justify-self: start; width: var(--mc-w-40); height: var(--mc-w-40); display: inline-flex; align-items: center; justify-content: center; border: var(--mc-border-6); border-radius: var(--mc-fs-15); color: var(--mc-color-fff); background: var(--mc-bg-9); }
    .health-lux-card-icon.health-lux-has-info { cursor: help; }
    .health-lux-card-title { margin: 0; min-width: 0; max-width: 100%; justify-self: center; overflow: hidden; font-size: var(--mc-fs-15) !important; font-weight: var(--mc-fw-400) !important; letter-spacing: normal; line-height: var(--mc-lh-1_35); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .health-lux-gauge-card .health-lux-card-title { white-space: nowrap; overflow: visible; text-overflow: clip; }

    .health-lux-card-header:has(.health-lux-card-icon-spacer) .health-lux-card-title {
        grid-column: var(--mc-z-2) / 4;
        justify-self: stretch;
        text-align: start;
    }
    .health-lux-card-header:has(.health-lux-card-icon-spacer) .health-lux-card-icon-spacer {
        display: none;
    }
    .dashboard-lux-monitor-panel .health-lux-card-header .health-lux-card-title {
        grid-column: auto;
        justify-self: center;
        text-align: center;
    }
    .dashboard-lux-monitor-panel .health-lux-card-header .health-lux-card-icon-spacer {
        display: inline;
    }

    .health-lux-status-pill { display: inline-flex; align-items: center; justify-content: center; justify-self: end; min-height: var(--mc-minh-23); padding: var(--mc-pad-4-10); border: var(--mc-border-7); border-radius: var(--mc-radius-999); font-size: var(--mc-fs-11); font-weight: var(--mc-fw-400); letter-spacing: var(--mc-ls-_12em); line-height: var(--mc-z-1); text-transform: uppercase; white-space: nowrap; }
    .health-lux-status-pill-ok { color: var(--health-lux-ok); background: var(--health-lux-ok-soft); }
    .health-lux-status-pill-warning { color: var(--health-lux-warning); background: var(--health-lux-warning-soft); }
    .health-lux-status-pill-failed { color: var(--health-lux-failed); background: var(--health-lux-failed-soft); }
    .health-lux-status-pill-unknown { color: var(--health-lux-unknown); background: var(--health-lux-unknown-soft); }
    .health-lux-card.health-lux-status-ok .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-ok); }
    .health-lux-card.health-lux-status-warning .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-warning); }
    .health-lux-card.health-lux-status-failed .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-failed); }
    .health-lux-card.health-lux-status-unknown .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-unknown); }
    .health-lux-card.health-lux-has-accent .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-accent-color); }
    .queue-monitor-lux-dashboard.health-lux-dashboard { background: #4d4d4d; padding: var(--mc-radius-24); border-radius: var(--mc-radius-28) 0 var(--mc-radius-28) var(--mc-radius-28); }
    .queue-monitor-lux-dashboard .health-lux-card.health-lux-has-accent .health-lux-card-icon { border-color: var(--mc-borderc-1) !important; }
    .queue-monitor-lux-dashboard .health-lux-card-title { white-space: normal !important; overflow-wrap: break-word !important; overflow: visible !important; grid-column: var(--mc-z-2); justify-self: center; }
    .queue-monitor-lux-dashboard .health-lux-gauge-grid { grid-template-columns: repeat(auto-fit, minmax(var(--mc-h-230), 1fr)); }
    .queue-monitor-lux-dashboard .health-lux-card.health-lux-has-accent .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-accent-color) !important; }
    .queue-monitor-lux-dashboard .health-lux-card-header { box-shadow: var(--mc-shadow-9); }
    .queue-monitor-lux-dashboard .health-lux-card-icon-spacer { grid-column: var(--mc-z-1); }
    .queue-monitor-lux-dashboard .health-lux-card-icon { position: absolute; left: var(--mc-gap-18); top: 50%; transform: translateY(-50%); grid-column: auto; justify-self: start; z-index: var(--mc-z-2); }

    .dashboard-lux-monitor-panel .health-lux-card-header:not(:has(.health-lux-status-pill)),
    .queue-monitor-lux-dashboard .health-lux-card-header:not(:has(.health-lux-status-pill)) {
        position: relative;
    }
    .dashboard-lux-monitor-panel .health-lux-card-header:not(:has(.health-lux-status-pill)) .health-lux-card-icon,
    .queue-monitor-lux-dashboard .health-lux-card-header:not(:has(.health-lux-status-pill)) .health-lux-card-icon {
        position: absolute;
        left: var(--mc-gap-18);
        top: 50%;
        transform: translateY(-50%);
        z-index: var(--mc-z-2);
    }
    .dashboard-lux-monitor-panel .health-lux-card-header:not(:has(.health-lux-status-pill)) .health-lux-card-title,
    .queue-monitor-lux-dashboard .health-lux-card-header:not(:has(.health-lux-status-pill)) .health-lux-card-title {
        position: absolute;
        left: calc(var(--mc-gap-18) + var(--mc-w-40));
        right: var(--mc-gap-14);
        top: 50%;
        transform: translateY(-50%);
        display: block;
        margin: 0;
        padding: 0;
        width: auto;
        justify-self: stretch;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-overflow: ellipsis;
        -webkit-line-clamp: initial;
    }
    .dashboard-lux-monitor-panel .health-lux-card-header:not(:has(.health-lux-status-pill)) .health-lux-card-icon-spacer,
    .queue-monitor-lux-dashboard .health-lux-card-header:not(:has(.health-lux-status-pill)) .health-lux-card-icon-spacer {
        display: none;
    }

    .health-lux-gauge-card { min-height: var(--mc-minh-285); }
    .health-lux-simple-card .health-lux-gauge-load-grid { flex: var(--mc-z-1) var(--mc-z-1) auto; align-content: center; }
    .health-lux-compact-card { min-height: var(--mc-minh-154); min-width: var(--mc-minw-180); }
    .health-lux-compact-card .health-lux-card-header { min-height: var(--mc-h-64); padding: var(--mc-fs-14); grid-template-columns: var(--mc-w-36) minmax(0, 1fr); }
    .health-lux-compact-card .health-lux-card-title { font-size: var(--mc-fs-15) !important; white-space: normal; overflow-wrap: break-word; word-break: normal; }
    .health-lux-compact-card .health-lux-card-icon { width: var(--mc-w-34); height: var(--mc-w-34); border-radius: var(--mc-gap-13); }
    .health-lux-compact-card .health-lux-text-metric { min-height: var(--mc-minh-70); padding: var(--mc-fs-12); font-size: var(--mc-fs-18); }
    .health-lux-compact-card .health-lux-card-caption { padding-bottom: var(--mc-fs-12); }

    .health-echart-gauge { position: relative; z-index: var(--mc-z-1); width: 100%; height: var(--mc-minh-132); margin: var(--mc-mar-8-0-0); }
    .health-lux-text-metric { position: relative; z-index: var(--mc-z-1); flex: var(--mc-z-1) var(--mc-z-1) auto; min-height: var(--mc-minh-132); display: flex; align-items: center; justify-content: center; padding: var(--mc-gap-16); color: var(--mc-color-fff); font-size: var(--mc-fs-18); font-weight: var(--mc-fw-400); text-align: center; }
    .health-lux-text-metric-inner { display: flex; flex-direction: column; align-items: center; gap: var(--mc-gap-4); }
    .health-lux-card-caption { position: relative; z-index: var(--mc-z-1); padding: var(--mc-pad-0-18-18); color: var(--health-lux-muted); font-size: var(--mc-fs-13); font-weight: var(--mc-fw-400); text-align: center; }
    .health-lux-card-caption > span,
    .health-lux-card-caption > small { display: block; }

    .health-lux-card-body { position: relative; z-index: var(--mc-z-1); flex: var(--mc-z-1) var(--mc-z-1) auto; padding: var(--mc-pad-20-18); display: flex; flex-direction: column; gap: var(--mc-gap-16); }
    .health-lux-card-footer { position: relative; z-index: var(--mc-z-1); flex: 0 0 var(--mc-h-54); height: var(--mc-h-54); display: flex; align-items: center; justify-content: center; padding: var(--mc-pad-0-18); border-top: var(--mc-borderb-2); background: var(--mc-bg-10); color: var(--health-lux-muted); font-size: var(--mc-fs-13); font-weight: var(--mc-fw-400); line-height: var(--mc-lh-1_2); text-align: center; }
    .health-lux-card-footer::before { content: ''; position: absolute; top: -1px; left: var(--mc-gap-18); right: var(--mc-gap-18); height: var(--mc-h-1); background: var(--mc-bg-11); }
    .health-lux-card-footer .health-lux-live-time { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }

    .health-lux-gauge-load-grid { position: relative; z-index: var(--mc-z-1); min-height: var(--mc-minh-132); display: grid; grid-template-columns: 1fr; gap: var(--mc-gap-10); align-items: stretch; padding: var(--mc-pad-14-10-6); }
    .health-lux-simple-card .health-lux-gauge-load-grid { grid-template-columns: 1fr; }
    .health-dashboard-panel .health-lux-gauge-load-grid { grid-auto-rows: 1fr; }
    .health-lux-gauge-load-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mc-gap-10); min-width: 0; border: var(--mc-border-8); border-radius: var(--mc-gap-18) 0 var(--mc-gap-18) var(--mc-gap-18); background: var(--mc-bg-12); box-shadow: var(--mc-shadow-10); }
    .health-lux-gauge-load-card span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--mc-h-42); padding: var(--mc-pad-4-9); border-radius: var(--mc-radius-999); color: var(--mc-color-dcebff); background: var(--mc-bg-13); font-size: var(--mc-fs-11); font-weight: var(--mc-fw-400); letter-spacing: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
    .health-lux-card-title,
    .health-lux-card-caption,
    .health-lux-gauge-load-card span,
    .health-lux-text-metric { unicode-bidi: plaintext; }
    .health-lux-gauge-load-card strong { color: var(--mc-color-fff); font-size: var(--mc-fs-13); font-weight: var(--mc-fw-400); font-variant-numeric: tabular-nums; letter-spacing: var(--mc-ls-_02em); unicode-bidi: isolate; }

    .health-lux-time-counter { display: block; margin-top: 5px; color: var(--health-lux-gold); font-size: var(--mc-fs-11); font-weight: var(--mc-fw-400); letter-spacing: var(--mc-ls-_08em); line-height: var(--mc-lh-1_35); text-transform: uppercase; white-space: nowrap; }
    .health-dashboard-panel .health-lux-clickable-card,
    .health-dashboard-panel .health-lux-detail-card { cursor: pointer; }
    .health-lux-clickable-card:focus-visible,
    .health-lux-detail-card:focus-visible { outline: var(--mc-h-2) solid var(--health-lux-gold); outline-offset: var(--mc-gap-3); }

    @media (max-width: 575.98px) {
        .health-lux-card-title { font-size: var(--mc-fs-15) !important; }
        .health-lux-card-header { grid-template-columns: var(--mc-w-36) minmax(0, 1fr) auto; gap: var(--mc-gap-9); min-height: var(--mc-minh-70); padding: var(--mc-fs-15); }
        .health-lux-card.health-lux-no-pill .health-lux-card-header { grid-template-columns: var(--mc-w-36) minmax(0, 1fr) var(--mc-w-36); }
        .health-lux-card-icon { width: var(--mc-w-34); height: var(--mc-w-34); border-radius: var(--mc-gap-13); }
        .health-lux-status-pill { padding: var(--mc-pad-4-8); font-size: var(--mc-fs-10); letter-spacing: var(--mc-ls-_08em); }
        .health-lux-gauge-load-grid { grid-template-columns: 1fr; min-height: 0; }
        .health-lux-gauge-grid,
        .health-lux-detail-grid { grid-template-columns: 1fr; gap: var(--mc-gap-18); }
        .queue-monitor-lux-dashboard .health-lux-gauge-grid { grid-template-columns: 1fr; }
        .queue-monitor-lux-dashboard .health-lux-card-header { grid-template-columns: var(--mc-w-34) minmax(0, 1fr) var(--mc-w-34); gap: var(--mc-gap-9); min-height: var(--mc-minh-70); padding: var(--mc-fs-15); }
    }

/* ===== Dashboard Health Monitor wallboard styles (moved from health_dashboard_content.blade.php) ===== */
.health-lux-dashboard {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        --health-lux-bg: var(--mc-color-07111f);
        --health-lux-surface: rgba(12, 24, 43, .82);
        --health-lux-surface-strong: rgba(17, 32, 57, .96);
        --health-lux-border: rgba(213, 225, 255, .15);
        --health-lux-border-strong: rgba(245, 199, 107, .35);
        --health-lux-text: #eef5ff;
        --health-lux-muted: #9baec8;
        --health-lux-ok: #38f2a5;
        --health-lux-ok-soft: rgba(56, 242, 165, .18);
        --health-lux-warning: #ffbf52;
        --health-lux-warning-soft: rgba(255, 191, 82, .2);
        --health-lux-failed: #ff5f76;
        --health-lux-failed-soft: rgba(255, 95, 118, .2);
        --health-lux-unknown: #aebbd0;
        --health-lux-unknown-soft: rgba(174, 187, 208, .18);
        --health-lux-blue: #62b7ff;
        --health-lux-gold: var(--mc-color-f5c76b);
        color: var(--health-lux-text);
        font-family: var(--mc-ff-1);
        width: 100%;
    }

    .health-lux-dashboard *,
    .health-lux-dashboard *::before,
    .health-lux-dashboard *::after {
        box-sizing: border-box;
    }

    .health-lux-hero {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--mc-fs-26);
        padding: var(--mc-radius-24);
        margin-bottom: var(--mc-radius-24);
        border: 1px solid var(--health-lux-border);
        border-radius: var(--mc-radius-28) 0 var(--mc-radius-28) var(--mc-radius-28);
        background:
            linear-gradient(145deg, rgba(255,255,255,.11), var(--mc-bg-39)),
            radial-gradient(circle at 8% 0, rgba(245,199,107,.18), transparent 30%),
            radial-gradient(circle at 96% 15%, rgba(56,242,165,.15), transparent 32%),
            var(--health-lux-surface);
        box-shadow: var(--mc-shadow-11);
        backdrop-filter: blur(var(--mc-fs-14));
    }

    .health-lux-orb {
        position: absolute;
        width: var(--mc-h-230);
        height: var(--mc-h-230);
        border-radius: var(--mc-radius-999);
        filter: blur(30px);
        opacity: .42;
        pointer-events: none;
    }

    .health-lux-orb-one { right: -88px; top: -112px; background: var(--mc-bg-15); }
    .health-lux-orb-two { left: 30%; bottom: -165px; background: var(--mc-bg-16); }

    .health-lux-hero-main,
    .health-lux-count-grid,
    .health-lux-section-heading,
    .health-lux-card-header,
    .health-lux-group-heading,
    .health-lux-stat-grid,
    .health-lux-summary-grid,
    .health-lux-meta-list > div {
        position: relative;
        z-index: var(--mc-z-1);
    }

    .health-lux-hero-main {
        display: flex;
        align-items: center;
        gap: var(--mc-gap-18);
        min-width: var(--mc-minh-260);
        padding-left: 110px;
    }

    .health-lux-hero-status {
        width: var(--mc-h-64);
        height: var(--mc-h-64);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border-radius: var(--mc-gap-22);
        color: var(--mc-color-06101c);
        font-size: var(--mc-fs-27);
        box-shadow: var(--mc-shadow-12);
    }

    .health-lux-eyebrow {
        display: block;
        color: var(--health-lux-gold);
        font-size: var(--mc-fs-12);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_2em);
        margin-bottom: var(--mc-gap-9);
        text-transform: uppercase;
    }

    .health-lux-hero-copy {
        text-align: left;
    }

    .health-lux-hero-copy h3,
    .health-lux-section-heading h3,
    .health-lux-card-title {
        color: var(--mc-color-fff);
        margin: 0;
        font-family: inherit;
    }

    /* Golden header text for Health & Queue monitor metric cards */
    .health-lux-dashboard .health-lux-card-title {
        color: var(--health-lux-gold) !important;
    }

    .health-lux-hero-copy h3 {
        font-size: var(--mc-fs-30) !important;
        font-weight: var(--mc-fw-400) !important;
        letter-spacing: var(--mc-ls-_035em);
        line-height: var(--mc-lh-1_08);
    }

    .health-lux-hero-copy p {
        color: var(--health-lux-muted);
        margin: var(--mc-mar-7-0-0);
        font-size: var(--mc-fs-14);
        font-weight: var(--mc-fw-400);
    }

    .health-lux-count-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(86px, 1fr));
        gap: var(--mc-fs-14);
        min-width: var(--mc-minw-445);
    }

    .health-lux-count-card {
        padding: var(--mc-pad-14-15);
        border: var(--mc-border-9);
        border-radius: var(--mc-radius-20) 0 var(--mc-radius-20) var(--mc-radius-20);
        background: var(--mc-bg-17);
        text-align: center;
    }

    .health-lux-count-card strong {
        display: block;
        color: var(--mc-color-fff);
        font-size: var(--mc-fs-26);
        font-weight: var(--mc-fw-400);
        line-height: var(--mc-z-1);
    }

    .health-lux-count-card span {
        display: block;
        color: var(--health-lux-muted);
        font-size: var(--mc-fs-12);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_08em);
        margin-top: var(--mc-gap-7);
        text-transform: uppercase;
    }

    .health-lux-count-card.health-lux-status-ok { box-shadow: var(--mc-shadow-13); }
    .health-lux-count-card.health-lux-status-warning { box-shadow: var(--mc-shadow-14); }
    .health-lux-count-card.health-lux-status-failed { box-shadow: var(--mc-shadow-15); }
    .health-lux-count-card.health-lux-status-unknown { box-shadow: var(--mc-shadow-16); }

    .health-lux-tone-ok { background: linear-gradient(135deg, var(--health-lux-ok), #8affca); color: var(--mc-color-06101c); }
    .health-lux-tone-warning { background: linear-gradient(135deg, var(--health-lux-warning), #ff9f43); color: var(--mc-color-06101c); }
    .health-lux-tone-failed { background: linear-gradient(135deg, var(--health-lux-failed), #ff94a4); color: var(--mc-color-06101c); }
    .health-lux-tone-unknown { background: linear-gradient(135deg, var(--health-lux-unknown), #d9e3f2); color: var(--mc-color-06101c); }

    .health-lux-joolix-loader {
        position: absolute;
        top: var(--mc-radius-24);
        left: var(--mc-radius-24);
        z-index: var(--mc-z-2);
    }
    .health-lux-joolix-loader img {
        width: var(--mc-h-96);
        height: var(--mc-h-96);
        object-fit: contain;
        filter: drop-shadow(var(--mc-pad-0-4) var(--mc-fs-12) rgba(0,0,0,.4));
    }

    .health-lux-status-text-ok { color: var(--health-lux-ok) !important; }
    .health-lux-status-text-warning { color: var(--health-lux-warning) !important; }
    .health-lux-status-text-failed { color: var(--health-lux-failed) !important; }
    .health-lux-status-text-unknown { color: var(--health-lux-unknown) !important; }

    .health-lux-section {
        margin-top: var(--mc-gap-22);
    }

    .health-lux-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--mc-gap-18);
        margin-bottom: var(--mc-gap-16);
        padding: var(--mc-pad-0-4);
    }

    .health-lux-section-heading h3 {
        font-size: var(--mc-fs-20) !important;
        font-weight: var(--mc-fw-400) !important;
        letter-spacing: var(--mc-ls-_04em);
        text-transform: uppercase;
    }

    .health-lux-section-heading span {
        color: var(--health-lux-muted);
        font-size: var(--mc-fs-13);
        font-weight: var(--mc-fw-400);
    }

    .health-lux-gauge-grid,
    .health-lux-detail-grid {
        display: grid;
        gap: var(--mc-gap-22);
    }

    .health-lux-gauge-grid {
        grid-template-columns: repeat(auto-fit, minmax(var(--mc-h-230), 1fr));
    }

    .health-lux-detail-grid {
        grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
        padding-top: var(--mc-gap-6);
        padding-bottom: var(--mc-gap-8);
    }

    .health-lux-grid-item {
        min-width: 0;
        position: relative;
        padding-top: var(--mc-gap-4);
    }

    .health-lux-grid-item:hover {
        z-index: var(--mc-z-5);
    }

    .health-lux-card {
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--health-lux-border);
        border-radius: var(--mc-radius-24) 0 var(--mc-radius-24) var(--mc-radius-24);
        background:
            linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.032)),
            radial-gradient(circle at 0 0, var(--mc-bg-7), transparent 34%),
            var(--health-lux-surface);
        box-shadow: var(--mc-shadow-2);
        backdrop-filter: blur(var(--mc-fs-14));
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .health-lux-card:hover {
        transform: translateY(-2px);
        border-color: var(--health-lux-border-strong);
        box-shadow: var(--mc-shadow-3);
    }

    .health-lux-card:hover .health-lux-card-header {
        background: var(--mc-bg-6);
    }

    .health-lux-card:hover::after {
        background: var(--mc-bg-23);
    }

    .health-lux-card::after {
        content: '';
        position: absolute;
        right: -56px;
        bottom: -84px;
        width: var(--mc-h-170);
        height: var(--mc-h-170);
        border-radius: var(--mc-radius-999);
        background: var(--mc-bg-7);
        filter: blur(var(--mc-fs-19));
        pointer-events: none;
    }

    .health-lux-card-header {
        display: grid;
        grid-template-columns: var(--mc-h-42) minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--mc-gap-13);
        min-height: var(--mc-h-78);
        padding: var(--mc-gap-18);
        border-radius: var(--mc-radius-24) 0 0 0;
        border-bottom: var(--mc-borderb-2);
        background: var(--mc-bg-8);
    }

    .health-lux-card-icon {
        justify-self: start;
        width: var(--mc-w-40);
        height: var(--mc-w-40);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: var(--mc-border-6);
        border-radius: var(--mc-fs-15);
        color: var(--mc-color-fff);
        background: var(--mc-bg-9);
    }

    .health-lux-card-title {
        min-width: 0;
        max-width: 100%;
        justify-self: center;
        overflow: hidden;
        font-size: var(--mc-fs-15) !important;
        font-weight: var(--mc-fw-400) !important;
        letter-spacing: var(--mc-ls-_01em);
        line-height: var(--mc-lh-1_25);
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .health-lux-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: end;
        min-height: var(--mc-minh-23);
        padding: var(--mc-pad-4-10);
        border: var(--mc-border-7);
        border-radius: var(--mc-radius-999);
        font-size: var(--mc-fs-11);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_12em);
        line-height: var(--mc-z-1);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .health-lux-status-pill-ok { color: var(--health-lux-ok); background: var(--health-lux-ok-soft); }
    .health-lux-status-pill-warning { color: var(--health-lux-warning); background: var(--health-lux-warning-soft); }
    .health-lux-status-pill-failed { color: var(--health-lux-failed); background: var(--health-lux-failed-soft); }
    .health-lux-status-pill-unknown { color: var(--health-lux-unknown); background: var(--health-lux-unknown-soft); }

.health-lux-card.health-lux-status-ok .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-ok); }
.health-lux-card.health-lux-status-warning .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-warning); }
.health-lux-card.health-lux-status-failed .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-failed); }
.health-lux-card.health-lux-status-unknown .health-lux-card-header { box-shadow: inset 0 4px 0 var(--health-lux-unknown); }

    .health-lux-gauge-card {
        min-height: var(--mc-minh-260);
    }

    .health-lux-gauge-card .health-lux-card-title {
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
    }

    .health-echart-gauge {
        position: relative;
        z-index: var(--mc-z-1);
        width: 100%;
        height: var(--mc-minh-132);
        margin: var(--mc-mar-8-0-0);
    }

    .health-dashboard-panel .health-lux-clickable-card .health-echart-gauge,
    .health-dashboard-panel .health-lux-clickable-card .health-echart-gauge canvas {
        cursor: pointer !important;
    }

    .health-lux-text-metric {
        position: relative;
        z-index: var(--mc-z-1);
        min-height: var(--mc-minh-132);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--mc-gap-16);
        color: var(--mc-color-fff);
        font-size: var(--mc-fs-18);
        font-weight: var(--mc-fw-400);
        text-align: center;
    }

    .health-lux-text-metric-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--mc-gap-4);
    }

    .health-lux-card-caption {
        position: relative;
        z-index: var(--mc-z-1);
        padding: var(--mc-pad-0-18-18);
        color: var(--health-lux-muted);
        font-size: var(--mc-fs-13);
        font-weight: var(--mc-fw-400);
        text-align: center;
    }

    .health-lux-card-caption > span,
    .health-lux-card-caption > small {
        display: block;
    }

    .health-lux-card-body {
        position: relative;
        z-index: var(--mc-z-1);
        flex: var(--mc-z-1) var(--mc-z-1) auto;
        padding: var(--mc-pad-20-18);
        display: flex;
        flex-direction: column;
        gap: var(--mc-gap-16);
    }

    .health-lux-data-group {
        position: relative;
        z-index: var(--mc-z-1);
        padding: var(--mc-fs-15);
        border: var(--mc-border-10);
        border-radius: var(--mc-gap-18);
        background: var(--mc-bg-24);
    }

    .health-lux-related-group {
        border-color: var(--mc-borderc-2);
        background:
            radial-gradient(circle at 100% 0, var(--mc-bg-13), transparent 34%),
            rgba(255,255,255,.032);
    }

    .health-lux-data-group + .health-lux-data-group {
        margin-top: var(--mc-fs-14);
    }

    .health-lux-group-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--mc-fs-12);
        margin-bottom: 0;
    }

    .health-lux-group-heading span,
    .health-lux-stat-grid span,
    .health-lux-summary-grid span,
    .health-lux-meta-list span {
        color: var(--health-lux-muted);
        font-size: var(--mc-fs-12);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_08em);
        text-transform: uppercase;
    }

    .health-lux-group-heading strong,
    .health-lux-stat-grid strong,
    .health-lux-summary-grid strong,
    .health-lux-meta-list strong {
        color: var(--mc-color-fff);
        font-size: var(--mc-fs-14);
        font-weight: var(--mc-fw-400);
    }

    .health-lux-divider {
        height: var(--mc-h-1);
        margin: var(--mc-mar-3-0);
        background: var(--mc-bg-26);
    }

    .health-lux-problem-headline {
        display: grid;
        grid-template-columns: var(--mc-h-42) minmax(0, 1fr);
        gap: var(--mc-fs-12);
        align-items: center;
        padding: var(--mc-gap-13);
        border: var(--mc-border-11);
        border-radius: var(--mc-gap-18);
        background:
            linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
            rgba(var(--mc-z-2),8,18,.16);
        box-shadow: var(--mc-shadow-17);
    }

    .health-lux-problem-warning { border-color: var(--mc-borderc-3); }
    .health-lux-problem-failed { border-color: var(--mc-borderc-4); }
    .health-lux-problem-unknown { border-color: var(--mc-borderc-5); }

    .health-lux-problem-icon {
        width: var(--mc-h-42);
        height: var(--mc-h-42);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--mc-fs-15);
        box-shadow: var(--mc-shadow-18);
    }

    .health-lux-problem-headline strong {
        display: block;
        color: var(--mc-color-fff);
        font-size: var(--mc-fs-14);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_12em);
        text-transform: uppercase;
    }

    .health-lux-problem-headline p {
        color: var(--health-lux-muted);
        direction: ltr;
        font-size: var(--mc-fs-13);
        font-weight: var(--mc-fw-400);
        line-height: var(--mc-lh-1_45);
        margin: var(--mc-mar-4-0-0);
        text-align: left;
        unicode-bidi: plaintext;
    }

    .health-lux-related-title {
        display: inline-flex;
        align-items: center;
        gap: var(--mc-gap-8);
    }

    .health-lux-related-title i {
        color: var(--health-lux-blue);
    }

    .health-lux-card-body > .health-lux-divider:first-child {
        display: none;
    }

    .health-lux-meter,
    .health-lux-mini-meter {
        display: block;
        overflow: hidden;
        background: var(--mc-bg-28);
        box-shadow: var(--mc-shadow-19);
    }

    .health-lux-meter {
        height: var(--mc-gap-10);
        border-radius: var(--mc-radius-999);
    }

    .health-lux-meter-fill,
    .health-lux-mini-meter i {
        display: block;
        height: 100%;
        border-radius: var(--mc-radius-999);
    }

    .health-lux-mini-meter {
        width: var(--mc-w-72);
        height: var(--mc-gap-6);
        border-radius: var(--mc-radius-999);
        margin-top: 5px;
        margin-left: auto;
    }

    .health-lux-fill-ok { background: var(--mc-bg-29); }
    .health-lux-fill-warning { background: var(--mc-bg-30); }
    .health-lux-fill-failed { background: var(--mc-bg-31); }
    .health-lux-fill-unknown { background: var(--mc-bg-32); }

    .health-lux-table-wrap {
        overflow-x: auto;
        border: var(--mc-border-10);
        border-radius: var(--mc-gap-16);
        background: var(--mc-bg-33);
    }

    .health-lux-table-spaced {
        margin-top: var(--mc-fs-12);
    }

    .health-lux-table {
        width: 100%;
        border-collapse: collapse;
        color: var(--health-lux-text);
        font-family: inherit;
    }

    .health-lux-table th,
    .health-lux-table td {
        padding: var(--mc-pad-10-11);
        border-bottom: var(--mc-borderb-3);
        font-size: var(--mc-fs-13);
        vertical-align: middle;
        white-space: nowrap;
    }

    .health-lux-table th {
        color: var(--mc-color-b8c8df);
        font-size: var(--mc-fs-11);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_08em);
        text-transform: uppercase;
    }

    .health-lux-table tbody tr:hover {
        background: var(--mc-bg-34);
    }

    .health-lux-table tbody tr,
    .health-lux-chip,
    .health-lux-stat-grid > div,
    .health-lux-summary-grid > div,
    .health-lux-meta-list > div,
    .health-lux-count-card {
        transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .health-dashboard-panel .health-lux-clickable-card,
    .health-dashboard-panel .health-lux-count-card,
    .health-dashboard-panel .health-lux-detail-card {
        cursor: pointer;
    }

    .health-lux-clickable-card:focus-visible,
    .health-lux-count-card:focus-visible,
    .health-lux-detail-card:focus-visible {
        outline: var(--mc-h-2) solid var(--health-lux-gold);
        outline-offset: var(--mc-gap-3);
    }

    .health-lux-table tbody tr:hover {
        transform: translateX(var(--mc-h-2));
    }

    .health-lux-chip:hover,
    .health-lux-stat-grid > div:hover,
    .health-lux-summary-grid > div:hover,
    .health-lux-meta-list > div:hover,
    .health-lux-count-card:hover {
        border-color: var(--mc-borderc-6);
        background: var(--mc-bg-35);
        box-shadow: var(--mc-shadow-20);
        transform: translateY(-1px);
    }

    .health-lux-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .health-lux-text-left { text-align: left; }
    .health-lux-text-right { text-align: right; }
    .health-lux-muted { display: block; color: var(--health-lux-muted); font-size: var(--mc-fs-11); margin-top: var(--mc-h-2); }
    .health-lux-process-name { display: block; color: var(--mc-color-fff); }

    .health-lux-stat-grid {
        display: grid;
        grid-template-columns: repeat(var(--mc-z-2), minmax(0, 1fr));
        gap: var(--mc-gap-10);
    }

    .health-lux-summary-grid {
        display: grid;
        grid-template-columns: repeat(var(--mc-z-2), minmax(0, 1fr));
        gap: var(--mc-gap-10);
    }

    .health-lux-stat-grid > div,
    .health-lux-summary-grid > div,
    .health-lux-meta-list > div {
        position: relative;
        overflow: hidden;
        min-width: 0;
        min-height: var(--mc-minh-76);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--mc-pad-12-13);
        border: var(--mc-border-12);
        border-radius: var(--mc-fs-15);
        background:
            radial-gradient(circle at 100% 0, rgba(98,183,255,.1), transparent 38%),
            var(--mc-bg-34);
        box-shadow: var(--mc-shadow-21);
    }

    .health-lux-stat-grid > div::after,
    .health-lux-summary-grid > div::after,
    .health-lux-meta-list > div::after {
        content: '';
        position: absolute;
        inset: auto var(--mc-fs-12) 0;
        height: var(--mc-h-2);
        border-radius: var(--mc-radius-999);
        background: var(--mc-bg-37);
        opacity: .5;
    }

    .health-lux-stat-grid strong,
    .health-lux-summary-grid strong,
    .health-lux-meta-list strong {
        display: block;
        overflow: hidden;
        margin-top: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .health-lux-time-counter {
        display: block;
        margin-top: 5px;
        color: var(--health-lux-gold);
        font-size: var(--mc-fs-11);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_08em);
        line-height: var(--mc-lh-1_35);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .health-lux-stat-grid .health-lux-time-counter,
    .health-lux-summary-grid .health-lux-time-counter,
    .health-lux-meta-list .health-lux-time-counter {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .health-lux-card-focus {
        border-color: var(--mc-borderc-7) !important;
        box-shadow: var(--mc-shadow-22) !important;
        animation: health-lux-focus-pulse 1.25s ease-out var(--mc-z-1);
    }

    @keyframes health-lux-focus-pulse {
        0% { transform: scale(.992); }
        42% { transform: scale(1.012); }
        100% { transform: scale(var(--mc-z-1)); }
    }

    .health-lux-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--mc-gap-9);
    }

    .health-lux-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--mc-gap-7);
        max-width: 100%;
        padding: var(--mc-pad-8-10);
        border-radius: var(--mc-radius-999);
        border: var(--mc-border-13);
        color: var(--mc-color-fff);
        font-size: var(--mc-fs-13);
        font-weight: var(--mc-fw-400);
        background: var(--mc-bg-38);
    }

    .health-lux-chip b {
        font-size: var(--mc-fs-10);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_08em);
    }

    .health-lux-chip-ok b { color: var(--health-lux-ok); }
    .health-lux-chip-warning b { color: var(--health-lux-warning); }
    .health-lux-chip-failed b { color: var(--health-lux-failed); }

    .health-lux-connection-state {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--mc-gap-10);
        min-height: var(--mc-minh-76);
        border-radius: var(--mc-gap-18);
        font-size: var(--mc-fs-15);
        font-weight: var(--mc-fw-400);
    }

    .health-lux-summary,
    .health-lux-alert,
    .health-lux-empty {
        direction: ltr;
        margin: 0;
        border-radius: var(--mc-gap-16);
        font-size: var(--mc-fs-14);
        line-height: var(--mc-lh-1_55);
        text-align: left;
        unicode-bidi: plaintext;
    }

    .health-lux-summary {
        padding: var(--mc-gap-13);
        color: var(--mc-color-fff);
        background: var(--mc-bg-34);
    }

    .health-lux-alert {
        padding: var(--mc-pad-12-13);
        border: var(--mc-border-13);
        color: var(--health-lux-text);
    }

    .health-lux-alert-ok { background: var(--health-lux-ok-soft); }
    .health-lux-alert-warning { background: var(--health-lux-warning-soft); }
    .health-lux-alert-failed { background: var(--health-lux-failed-soft); }
    .health-lux-alert-unknown { background: var(--health-lux-unknown-soft); }

    .health-lux-empty {
        padding: var(--mc-fs-12);
        color: var(--health-lux-muted);
        background: var(--mc-bg-39);
    }

    .health-lux-data-group > * + *,
    .health-lux-related-group > * + * {
        margin-top: var(--mc-gap-13);
    }

    .health-lux-card-footer {
        position: relative;
        z-index: var(--mc-z-1);
        flex: 0 0 var(--mc-h-54);
        height: var(--mc-h-54);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--mc-pad-0-18);
        border-top: var(--mc-borderb-2);
        background:
            linear-gradient(90deg, transparent, rgba(245,199,107,.10), transparent),
            var(--mc-bg-33);
        color: var(--health-lux-muted);
        font-size: var(--mc-fs-13);
        font-weight: var(--mc-fw-400);
        line-height: var(--mc-lh-1_2);
        text-align: center;
    }

    .health-lux-card-footer::before {
        content: '';
        position: absolute;
        top: -1px;
        left: var(--mc-gap-18);
        right: var(--mc-gap-18);
        height: var(--mc-h-1);
        background: var(--mc-bg-11);
    }

    .health-lux-card-footer .health-lux-live-time {
        overflow: hidden;
        max-width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .health-lux-scroll {
        max-height: var(--mc-maxh-540);
        overflow-y: auto;
        padding-right: var(--mc-gap-10);
    }

    .health-lux-scroll::-webkit-scrollbar { width: var(--mc-gap-9); }
    .health-lux-scroll::-webkit-scrollbar-track { background: var(--mc-bg-41); border-radius: var(--mc-radius-999); }
    .health-lux-scroll::-webkit-scrollbar-thumb { background: var(--mc-bg-42); border-radius: var(--mc-radius-999); }

    /* Icon hints that a description tooltip (native title) is available */
    .health-lux-card-icon.health-lux-has-info {
        cursor: help;
    }

    /* CPU Load inside a Live Resource gauge ΓÇö 3 lines, same footprint as a gauge */
    .health-lux-gauge-load {
        min-height: var(--mc-minh-132);
        padding: var(--mc-pad-12-16);
    }

    .health-lux-gauge-load-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--mc-gap-10);
        width: 100%;
    }

    .health-lux-gauge-load-row {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: var(--mc-gap-9);
    }

    .health-lux-gauge-load-row strong {
        min-width: var(--mc-h-64);
        color: var(--mc-color-fff);
        font-size: var(--mc-fs-14);
        font-weight: var(--mc-fw-400);
        font-variant-numeric: tabular-nums;
        text-align: right;
        line-height: var(--mc-lh-1_1);
    }

    .health-lux-gauge-load-row span {
        min-width: var(--mc-minw-52);
        color: var(--health-lux-muted);
        font-size: var(--mc-fs-13);
        font-weight: var(--mc-fw-400);
        text-align: left;
    }

    /* CPU Load ΓÇö one window per row */
    .health-lux-load-rows {
        display: flex;
        flex-direction: column;
        gap: var(--mc-gap-9);
    }

    .health-lux-load-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--mc-fs-12);
        padding: var(--mc-pad-11-13);
        border: var(--mc-border-12);
        border-radius: var(--mc-gap-13);
        background:
            radial-gradient(circle at 100% 0, rgba(98,183,255,.1), transparent 42%),
            var(--mc-bg-34);
        box-shadow: var(--mc-shadow-23);
    }

    .health-lux-load-window {
        display: inline-flex;
        align-items: center;
        gap: var(--mc-gap-9);
        min-width: 0;
        color: var(--health-lux-muted);
        font-size: var(--mc-fs-13);
        font-weight: var(--mc-fw-400);
    }

    .health-lux-load-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--mc-minw-50);
        padding: var(--mc-pad-4-9);
        border-radius: var(--mc-radius-999);
        background: var(--mc-bg-44);
        color: var(--health-lux-blue);
        font-size: var(--mc-fs-11);
        font-weight: var(--mc-fw-400);
        letter-spacing: var(--mc-ls-_04em);
        white-space: nowrap;
    }

    .health-lux-load-value {
        color: var(--mc-color-fff);
        font-size: var(--mc-fs-13);
        font-weight: var(--mc-fw-400);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .health-lux-gauge-load-grid {
        position: relative;
        z-index: var(--mc-z-1);
        min-height: var(--mc-minh-132);
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--mc-gap-10);
        align-items: stretch;
        padding: var(--mc-pad-14-10-6);
    }

    .health-lux-gauge-load-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--mc-gap-10);
        min-width: 0;
        border: var(--mc-border-8);
        border-radius: var(--mc-gap-18) 0 var(--mc-gap-18) var(--mc-gap-18);
        background:
            radial-gradient(circle at 50% 0, rgba(98,183,255,.06), transparent 52%),
            var(--mc-bg-34);
        box-shadow: var(--mc-shadow-10);
    }

    .health-lux-gauge-load-card span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--mc-h-42);
        padding: var(--mc-pad-4-9);
        border-radius: var(--mc-radius-999);
        color: var(--mc-color-dcebff);
        background: var(--mc-bg-13);
        font-size: var(--mc-fs-11);
        font-weight: var(--mc-fw-400);
        letter-spacing: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    .health-lux-gauge-load-card strong {
        color: var(--mc-color-fff);
        font-size: var(--mc-fs-13);
        font-weight: var(--mc-fw-400);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--mc-ls-_02em);
    }

    @media (max-width: 991.98px) {
        .health-lux-hero {
            align-items: stretch;
            flex-direction: column;
        }

        .health-lux-joolix-loader {
            top: var(--mc-gap-18);
            left: var(--mc-gap-18);
        }

        .health-lux-joolix-loader img {
            width: var(--mc-h-78);
            height: var(--mc-h-78);
        }

        .health-lux-hero-main {
            padding-left: 88px;
        }

        .health-lux-count-grid {
            min-width: 0;
            width: 100%;
        }
    }

    @media (max-width: 575.98px) {
        .health-lux-hero {
            padding: var(--mc-pad-18-17-17);
            border-radius: var(--mc-gap-22);
        }

        .health-lux-joolix-loader {
            top: var(--mc-fs-14);
            left: 50%;
            transform: translateX(-50%);
        }

        .health-lux-joolix-loader img {
            width: var(--mc-h-66);
            height: var(--mc-h-66);
        }

        .health-lux-hero-main {
            align-items: center;
            flex-direction: column;
            gap: var(--mc-fs-12);
            min-width: 0;
            padding-left: 0;
            padding-top: var(--mc-minh-76);
            text-align: center;
        }

        .health-lux-hero-copy {
            text-align: center;
        }

        .health-lux-hero-copy h3 {
            font-size: var(--mc-fs-25) !important;
        }

        .health-lux-card-title {
            font-size: var(--mc-fs-15) !important;
        }

        .health-lux-card-header {
            grid-template-columns: var(--mc-w-36) minmax(0, 1fr) auto;
            gap: var(--mc-gap-9);
            min-height: var(--mc-minh-70);
            padding: var(--mc-fs-15);
        }

        .health-lux-card-icon {
            width: var(--mc-w-34);
            height: var(--mc-w-34);
            border-radius: var(--mc-gap-13);
        }

        .health-lux-status-pill {
            padding: var(--mc-pad-4-8);
            font-size: var(--mc-fs-10);
            letter-spacing: var(--mc-ls-_08em);
        }

        .health-lux-count-grid,
        .health-lux-stat-grid,
        .health-lux-summary-grid {
            grid-template-columns: 1fr;
        }

        .health-lux-count-grid {
            grid-template-columns: repeat(var(--mc-z-2), minmax(0, 1fr));
        }

        .health-lux-gauge-load-grid {
            grid-template-columns: 1fr;
            min-height: 0;
        }

        .health-lux-gauge-grid,
        .health-lux-detail-grid {
            grid-template-columns: 1fr;
            gap: var(--mc-gap-18);
        }

        .health-lux-section-heading {
            align-items: flex-start;
            flex-direction: column;
        }
    }

/* ===== Dashboard Health/Queue Monitor shared panel shell ===== */
.dashboard-box-body > .dashboard-lux-monitor-panel {
    margin-top: var(--mc-gap-16);
}

.dashboard-lux-monitor-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--mc-fs-26) 0 var(--mc-fs-26) var(--mc-fs-26);
    padding: var(--mc-gap-18);
    font-family: var(--mc-ff-1);
    background: #4d4d4d;
    box-shadow: var(--mc-shadow-24);
}

.dashboard-lux-monitor-panel.queue-dashboard-panel {
    background: transparent;
    box-shadow: none;
}

.dashboard-lux-monitor-panel.queue-dashboard-panel > .fullscreen-title {
    color: var(--mc-color-07111f);
    text-shadow: none;
}

.dashboard-lux-monitor-panel > .fullscreen-title {
    color: var(--mc-color-f7fbff);
    font-size: var(--mc-fs-23) !important;
    font-weight: var(--mc-fw-400) !important;
    letter-spacing: var(--mc-ls-_03em);
    margin-bottom: 0;
    text-shadow: var(--mc-tshadow-1);
}

.dashboard-lux-monitor-panel .collapse-handler {
    color: var(--mc-color-f5c76b) !important;
    font-weight: var(--mc-fw-400);
    letter-spacing: var(--mc-ls-_04em);
    text-transform: uppercase;
}

.dashboard-lux-monitor-panel .dashboard-kpi-filters-container {
    border: var(--mc-border-14);
    border-radius: var(--mc-gap-18);
    margin-top: var(--mc-gap-10);
    padding: var(--mc-fs-12) !important;
    background: var(--mc-bg-47);
    backdrop-filter: blur(var(--mc-fs-12));
}

.dashboard-lux-monitor-panel .download-content-pdf {
    margin-left: 0;
    margin-right: 0;
}

.queue-dashboard-panel .short-dates-container,
.queue-dashboard-panel .dashboard-kpi-filters-container,
.queue-dashboard-panel .download-content-pdf {
    position: relative;
    z-index: var(--mc-z-1);
}

/* Health/Queue wallboard typography: softer weights and less glaring whites. */
.dashboard-lux-monitor-panel .health-lux-dashboard {
    --health-lux-text: var(--mc-color-e6eef8);
    --health-lux-muted: #9aa9bd;
    color: var(--health-lux-text);
}

.dashboard-lux-monitor-panel .health-lux-hero-copy h3,
.dashboard-lux-monitor-panel .health-lux-section-heading h3,
.dashboard-lux-monitor-panel .health-lux-card-title,
.dashboard-lux-monitor-panel .health-lux-text-metric,
.dashboard-lux-monitor-panel .health-lux-count-card strong,
.dashboard-lux-monitor-panel .health-lux-gauge-load-card strong,
.dashboard-lux-monitor-panel .health-lux-nested-card-value {
    color: var(--mc-color-edf4fb);
    font-weight: var(--mc-fw-400) !important;
    letter-spacing: normal;
    text-shadow: none;
}

.dashboard-lux-monitor-panel .health-lux-card-caption,
.dashboard-lux-monitor-panel .health-lux-card-footer,
.dashboard-lux-monitor-panel .health-lux-section-heading span,
.dashboard-lux-monitor-panel .health-lux-hero-copy p,
.dashboard-lux-monitor-panel .health-lux-count-card span {
    color: var(--health-lux-muted);
    font-weight: var(--mc-fw-400);
    letter-spacing: normal;
}

.dashboard-lux-monitor-panel .health-lux-status-pill,
.dashboard-lux-monitor-panel .health-lux-time-counter,
.dashboard-lux-monitor-panel .collapse-handler {
    font-weight: var(--mc-fw-400);
    letter-spacing: var(--mc-ls-_04em);
}

/* Health/Queue detail card inner text softening */
.dashboard-lux-monitor-panel .health-lux-group-heading span,
.dashboard-lux-monitor-panel .health-lux-stat-grid span,
.dashboard-lux-monitor-panel .health-lux-summary-grid span,
.dashboard-lux-monitor-panel .health-lux-meta-list span,
.dashboard-lux-monitor-panel .health-lux-load-window {
    font-weight: var(--mc-fw-400);
    letter-spacing: var(--mc-ls-_04em);
}

.dashboard-lux-monitor-panel .health-lux-group-heading strong,
.dashboard-lux-monitor-panel .health-lux-stat-grid strong,
.dashboard-lux-monitor-panel .health-lux-summary-grid strong,
.dashboard-lux-monitor-panel .health-lux-meta-list strong,
.dashboard-lux-monitor-panel .health-lux-summary,
.dashboard-lux-monitor-panel .health-lux-process-name,
.dashboard-lux-monitor-panel .health-lux-problem-headline strong,
.dashboard-lux-monitor-panel .health-lux-chip,
.dashboard-lux-monitor-panel .health-lux-load-value {
    color: var(--mc-color-edf4fb);
    font-weight: var(--mc-fw-400);
    letter-spacing: normal;
    text-shadow: none;
}

.dashboard-lux-monitor-panel .health-lux-problem-headline p,
.dashboard-lux-monitor-panel .health-lux-table th {
    color: var(--health-lux-muted);
    font-weight: var(--mc-fw-400);
    letter-spacing: var(--mc-ls-_04em);
}

.dashboard-lux-monitor-panel .health-lux-table td {
    color: var(--mc-color-e6eef8);
}

.dashboard-lux-monitor-panel .health-lux-chip {
    font-weight: var(--mc-fw-400);
    letter-spacing: normal;
}

/* Remove gap between top-scroller and report metric content */
.report-metrics-surface > .overflow-x-auto {
    margin-bottom: 0 !important;
}

/* Minimal nested card inside a small metric card */
.health-lux-nested-card {
    flex: var(--mc-z-1) var(--mc-z-1) auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: var(--mc-mar-16-10-8);
    padding: var(--mc-pad-14-16);
    border: var(--mc-border-15);
    border-radius: var(--mc-gap-16) 0 var(--mc-gap-16) var(--mc-gap-16);
    background: var(--mc-bg-48);
    box-shadow: var(--mc-shadow-25);
}

.report-metric-nested-card {
    margin: var(--mc-mar-16-12-8);
    padding: var(--mc-pad-11-13);
    border: var(--mc-border-3);
    border-radius: var(--mc-fs-14) 0 var(--mc-fs-14) var(--mc-fs-14);
    background: var(--mc-bg-49);
    box-shadow: var(--mc-shadow-26);
}

.health-lux-nested-card-label {
    margin: var(--mc-mar-0-0-8);
    font-size: var(--mc-fs-13);
    font-weight: var(--mc-fw-400);
    letter-spacing: var(--mc-ls-_02em-2);
    color: var(--health-lux-muted);
}

.health-lux-nested-card-rows {
    display: flex;
    flex-direction: column;
    gap: var(--mc-gap-7);
}

.health-lux-nested-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--mc-fs-14);
}

.health-lux-nested-card-row span {
    color: var(--health-lux-muted);
    font-size: var(--mc-fs-13);
    font-weight: var(--mc-fw-400);
}

.health-lux-nested-card-value {
    color: var(--mc-color-edf4fb);
    font-size: var(--mc-fs-15);
    font-weight: var(--mc-fw-400);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mc-ls-_01em);
    white-space: nowrap;
    flex-shrink: 0;
}

.report-metric-nested-card {
    margin: var(--mc-mar-4-12-8);
    padding: var(--mc-pad-11-13);
    border: var(--mc-border-3);
    border-radius: var(--mc-fs-14) 0 var(--mc-fs-14) var(--mc-fs-14);
    background: var(--mc-bg-49);
    box-shadow: var(--mc-shadow-26);
}

.report-metric-nested-card-label {
    margin: var(--mc-mar-0-0-7);
    font-size: var(--mc-fs-13);
    font-weight: var(--mc-fw-400);
    color: var(--report-muted);
}

.report-metric-nested-card-rows {
    display: flex;
    flex-direction: column;
    gap: var(--mc-gap-6);
}

.report-metric-nested-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--mc-fs-14);
}

.report-metric-nested-card-row span {
    color: var(--report-muted);
    font-size: var(--mc-fs-13);
    font-weight: var(--mc-fw-400);
}

.report-metric-nested-card-value {
    color: var(--report-text);
    font-size: var(--mc-fs-14);
    font-weight: var(--mc-fw-400);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mc-ls-_01em);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== FORCE report metric cards visible (debug fix) ===== */
.joolio-report-metrics .report-metric-card-wrap { display: block !important; }
.joolio-report-metrics .report-metric-card { display: flex !important; opacity: 1 !important; visibility: visible !important; background: #ffffff !important; }
.joolio-report-metrics .report-metric-header,
.joolio-report-metrics .report-metric-title,
.joolio-report-metrics .report-metric-value,
.joolio-report-metrics .report-metric-value-primary,
.joolio-report-metrics .report-metric-caption,
.joolio-report-metrics .report-metric-rows,
.joolio-report-metrics .report-metric-row,
.joolio-report-metrics .report-metric-row strong,
.joolio-report-metrics .report-metric-row span { opacity: 1 !important; visibility: visible !important; color: #16243b !important; }