/*
 * Secure-VPN Heatmap light cleanup v8
 * Visual-only. No JS/API/DOM/data changes.
 */

/* =========================================================
   SIDEBAR HELP
   ========================================================= */

body.heatmap-page #heatmap .sidebar .help {
    background: #eef5fb !important;
    background-image: none !important;
    border-top: 1px solid #d3e0eb !important;
    color: #334a62 !important;
}

body.heatmap-page #heatmap .sidebar .help h2 {
    color: #17324d !important;
    font-size: 14px !important;
}

body.heatmap-page #heatmap .sidebar .help h2 span {
    background: #d5e4f1 !important;
    color: #17324d !important;
}

body.heatmap-page #heatmap .sidebar .help > p {
    color: #60758b !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
}


/* =========================================================
   HEATMAP LEGEND
   ========================================================= */

body.heatmap-page #heatmap .sidebar .help ul.legend {
    gap: 6px !important;
}

body.heatmap-page #heatmap .sidebar .help ul.legend > li {
    min-height: 32px !important;
    padding: 6px 9px !important;

    background: #ffffff !important;
    background-image: none !important;

    border: 1px solid #ccdbe7 !important;
    border-radius: 8px !important;

    color: #40566d !important;

    font-size: 10px !important;

    box-shadow:
        0 1px 2px rgba(23,50,77,.025) !important;
}

body.heatmap-page #heatmap .sidebar .help ul.legend > li:nth-child(even) {
    background: #f4f8fc !important;
}

body.heatmap-page #heatmap .sidebar .help ul.legend > li span {
    color: #40566d !important;
    font-weight: 600 !important;
}

body.heatmap-page #heatmap .sidebar .help ul.legend > li b {
    color: #718399 !important;
    font-weight: 600 !important;
}

/* keep the actual meaning colors */
body.heatmap-page #heatmap .legend .l-excellent {
    background: #00d982 !important;
}

body.heatmap-page #heatmap .legend .l-good {
    background: #84dc3c !important;
}

body.heatmap-page #heatmap .legend .l-fair {
    background: #ffca2f !important;
}

body.heatmap-page #heatmap .legend .l-poor {
    background: #ff7543 !important;
}

body.heatmap-page #heatmap .legend .l-very-poor {
    background: #eb3651 !important;
}

body.heatmap-page #heatmap .legend .l-empty {
    background: #91a5b8 !important;
}

body.heatmap-page #heatmap .legend .l-low-confidence {
    background:
      repeating-linear-gradient(
        135deg,
        #607a92 0 4px,
        #9cafbf 4px 8px
      ) !important;
}


/* =========================================================
   QUALITY NOTE
   ========================================================= */

body.heatmap-page #heatmap .sidebar .help .qc-note {
    margin-top: 13px !important;
    padding: 11px 12px !important;

    background: #dfeef8 !important;
    background-image: none !important;

    border: 1px solid #bfd4e4 !important;
    border-left: 3px solid #214b70 !important;

    border-radius: 8px !important;

    color: #526a81 !important;

    font-size: 10px !important;
    line-height: 1.65 !important;
}


/* =========================================================
   SUMMARY CARDS
   ========================================================= */

body.heatmap-page #heatmap .summary-grid > .card {
    background: #ffffff !important;
    background-image: none !important;

    border: 1px solid #d1deea !important;

    box-shadow:
        0 7px 22px rgba(23,50,77,.045) !important;
}

body.heatmap-page #heatmap .summary-grid h2 {
    color: #17324d !important;
    -webkit-text-fill-color: #17324d !important;
}

body.heatmap-page #heatmap .summary-grid > section > p {
    color: #718399 !important;
    font-size: 11px !important;
}


/* the dark strips visible in your screenshot */
body.heatmap-page #heatmap .summary-grid .summary-explainer {
    padding: 10px 12px !important;

    background: #eaf3fa !important;
    background-image: none !important;

    border: 1px solid #cadce9 !important;
    border-left: 3px solid #214b70 !important;

    border-radius: 8px !important;

    color: #526a81 !important;

    font-size: 11px !important;
    line-height: 1.55 !important;
}

body.heatmap-page #heatmap .summary-grid .summary-explainer b {
    color: #17324d !important;
    -webkit-text-fill-color: #17324d !important;
}


/* =========================================================
   BEST / WORST RESULT ROWS
   ========================================================= */

body.heatmap-page #heatmap .summary-card ol {
    gap: 7px !important;
}

body.heatmap-page #heatmap .summary-card ol > li {
    padding: 5px 7px !important;

    background: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;

    color: #40566d !important;
}

body.heatmap-page #heatmap .summary-card ol > li:nth-child(even) {
    background: #f5f8fb !important;
}

body.heatmap-page #heatmap .summary-card li .rank {
    background: #214b70 !important;
    color: #ffffff !important;
}

body.heatmap-page #heatmap .summary-card li .summary-n {
    background: #edf4fa !important;

    border: 1px solid #cad9e5 !important;

    color: #60758b !important;
}

body.heatmap-page #heatmap .summary-card li .summary-n.confidence-high {
    background: #e7f7f1 !important;
    border-color: #9bd8c5 !important;
    color: #087859 !important;
}

body.heatmap-page #heatmap .summary-card li .summary-n.confidence-moderate {
    background: #edf4fb !important;
    border-color: #bfd4e6 !important;
    color: #41627d !important;
}

body.heatmap-page #heatmap .summary-card li .summary-n.confidence-low {
    background: #fff6e8 !important;
    border-color: #ecd0a5 !important;
    color: #946018 !important;
}


/* =========================================================
   DETAIL PANEL
   ========================================================= */

body.heatmap-page #heatmap .detail-card {
    background: #ffffff !important;
    background-image: none !important;

    color: #172033 !important;
}

body.heatmap-page #heatmap .detail-card h2 {
    color: #17324d !important;
}

body.heatmap-page #heatmap .detail-card .detail-title {
    color: #0f8f88 !important;
    font-size: 12px !important;
}

body.heatmap-page #heatmap .detail-card dl > div {
    border-bottom: 1px solid #d3dee8 !important;
}

body.heatmap-page #heatmap .detail-card dt {
    color: #718399 !important;
    font-size: 9px !important;
}

body.heatmap-page #heatmap .detail-card dd {
    color: #29405a !important;
    font-size: 10px !important;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

body.heatmap-page #heatmap .detail-card .close {
    color: #7890a5 !important;
}

body.heatmap-page #heatmap .detail-card .close:hover {
    background: #eef4fa !important;
    color: #17324d !important;
}


/* =========================================================
   KEEP THE ACTUAL HEATMAP DATA COLORS
   ========================================================= */

/*
 * Do NOT turn the matrix white.
 * Green/yellow/orange/red are data visualization,
 * not legacy theme colors.
 */

body.heatmap-page .heatmap-table .hm-excellent {
    background: #29d26f !important;
}

body.heatmap-page .heatmap-table .hm-good {
    background: #7fdb3f !important;
}

body.heatmap-page .heatmap-table .hm-fair {
    background: #ffd438 !important;
}

body.heatmap-page .heatmap-table .hm-poor {
    background: #ff7543 !important;
    color: #ffffff !important;
}

body.heatmap-page .heatmap-table .hm-very-poor {
    background: #e93651 !important;
    color: #ffffff !important;
}

body.heatmap-page .heatmap-table .hm-empty {
    background: #dce5ec !important;
    color: #7890a5 !important;
}