/* =========================================================
   Secure-VPN Heatmap UI v5.2
   Presentation-only — existing dashboard.js remains untouched
   ========================================================= */

.heatmap-page{
  background:#06111d;
  color:#e9f4ff;
}

.heatmap-page *{
  box-sizing:border-box;
}


/* ================= HEADER ================= */

.heatmap-page .topbar{
  min-height:74px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 28px;
}

.heatmap-page .topbar .brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:210px;
  text-decoration:none;
}

.heatmap-page .brand-mark-wrap{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:11px;
}

.heatmap-page .brand-mark{
  display:block;
  width:42px !important;
  height:42px !important;
  max-width:42px !important;
  object-fit:cover;
}

.heatmap-page .topbar .brand>span:last-child{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.heatmap-page .topbar .brand b{
  font-size:16px;
  white-space:nowrap;
}

.heatmap-page .topbar .brand small{
  margin-top:4px;
  font-size:9px;
  white-space:nowrap;
}

.heatmap-page .topbar .nav{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  min-width:0;
}

.heatmap-page .worker-health{
  flex:0 0 auto;
  min-width:220px;
  max-width:260px;
  display:grid !important;
  grid-template-columns:8px max-content;
  grid-template-areas:
    "dot state"
    ". time";
  justify-content:end;
  align-items:center;
  column-gap:8px;
  row-gap:2px;
  text-align:right;
}

.heatmap-page .worker-health>i{
  grid-area:dot;
  position:static !important;
  width:8px !important;
  height:8px !important;
  margin:0 !important;
}

.heatmap-page .worker-health>span{
  grid-area:state;
  position:static !important;
  white-space:nowrap;
  font-size:11px;
}

.heatmap-page .worker-health>small{
  grid-area:time;
  position:static !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
  white-space:nowrap;
  font-size:9px;
}


/* ================= MAIN LAYOUT ================= */

.heatmap-page .page-shell{
  width:min(1540px,calc(100% - 40px));
  margin:0 auto;
  padding:34px 0 72px;
  display:grid !important;
  grid-template-columns:280px minmax(0,1fr) !important;
  gap:18px !important;
  align-items:start;
}

.heatmap-page .sidebar{
  position:sticky;
  top:90px;
  min-width:0 !important;
  width:auto !important;
  padding:18px !important;
  border:1px solid rgba(86,139,176,.25) !important;
  border-radius:17px !important;
  background:
    linear-gradient(
      160deg,
      rgba(13,34,52,.98),
      rgba(7,20,33,.98)
    ) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.20);
}

.heatmap-page .dashboard{
  min-width:0;
}


/* ================= FILTERS ================= */

.heatmap-page .filter-group{
  margin:0 0 14px !important;
}

.heatmap-page .filter-group label{
  display:block;
  margin-bottom:7px;
  color:#83a0b6 !important;
  font-size:10px !important;
  font-weight:800;
}

.heatmap-page .filter-group .ico{
  display:inline-flex;
  width:17px;
  color:#65e4dd;
}

.heatmap-page .select-wrap{
  width:100%;
}

.heatmap-page .select-wrap select,
.heatmap-page #owned-provider-select{
  width:100%;
  min-height:43px;
  padding:0 37px 0 12px;
  border:1px solid #1e3e56 !important;
  border-radius:9px !important;
  outline:none;
  background:#071724 !important;
  color:#e4f1fb !important;
  font:inherit;
}

.heatmap-page .select-wrap select:focus,
.heatmap-page #owned-provider-select:focus{
  border-color:#3ddfd8 !important;
  box-shadow:0 0 0 3px rgba(61,223,216,.08);
}

.heatmap-page #update-btn{
  width:100%;
  min-height:44px;
  margin-top:3px;
  border:1px solid rgba(67,229,220,.52) !important;
  border-radius:9px !important;
  background:
    linear-gradient(180deg,#164157,#103044) !important;
  color:#cafffb !important;
  font-weight:800;
}


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

.heatmap-page .help{
  margin-top:20px !important;
  padding-top:18px;
  border-top:1px solid #19374d;
}

.heatmap-page .help h2{
  margin:0 0 11px;
  font-size:13px;
}

.heatmap-page .help>p{
  color:#718da2 !important;
  font-size:10px !important;
  line-height:1.6;
}

.heatmap-page .legend{
  display:grid;
  gap:5px;
  margin:13px 0 !important;
  padding:0 !important;
}

.heatmap-page .legend li{
  min-height:30px;
  padding:5px 7px !important;
  border:1px solid rgba(42,76,100,.55);
  border-radius:7px;
  background:#071824;
  font-size:9px !important;
}

.heatmap-page .qc-note{
  margin-top:12px !important;
  padding:10px !important;
  border:1px solid rgba(57,205,196,.15);
  border-radius:8px;
  background:#081b29;
}


/* ================= PAGE TITLE ================= */

.heatmap-page .page-title-row{
  position:relative;
  min-height:190px;
  display:flex !important;
  justify-content:space-between;
  align-items:center !important;
  gap:30px;
  margin:0 0 18px !important;
  padding:34px 36px !important;
  overflow:hidden;
  border:1px solid rgba(87,140,177,.26);
  border-radius:20px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(54,222,213,.12),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(13,36,55,.97),
      rgba(7,20,34,.98)
    );
  box-shadow:0 22px 55px rgba(0,0,0,.18);
}

.heatmap-page .page-title-row:before{
  content:"LIVE PERFORMANCE MAP";
  position:absolute;
  top:25px;
  left:36px;
  color:#67e6df;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.heatmap-page .page-title-row h1{
  margin:21px 0 8px;
  font-size:clamp(36px,4vw,58px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.heatmap-page .page-title-row p{
  max-width:770px;
  margin:0;
  color:#92aabe;
  font-size:14px;
  line-height:1.65;
}

.heatmap-page .metric-note{
  flex:0 0 auto;
  max-width:245px;
  padding:11px 14px !important;
  border:1px solid rgba(66,222,212,.23);
  border-radius:999px !important;
  background:#092130 !important;
  color:#77e9e3 !important;
  font-size:10px !important;
  text-align:center;
}


/* ================= WARNINGS ================= */

.heatmap-page .api-warning,
.heatmap-page .worker-stale-warning,
.heatmap-page .demo-warning,
.heatmap-page .geo-worker-recommendation{
  margin:0 0 12px !important;
  padding:13px 15px !important;
  border-radius:10px !important;
}


/* ================= FIND / OPTIMIZE ================= */

.heatmap-page .vpn-goal-card{
  margin:0 0 18px !important;
  padding:20px !important;
  border:1px solid rgba(86,139,176,.24) !important;
  border-radius:17px !important;
  background:
    linear-gradient(
      145deg,
      rgba(13,34,52,.97),
      rgba(7,20,34,.98)
    ) !important;
}

.heatmap-page .vpn-goal-tabs{
  display:inline-flex;
  gap:5px;
  padding:5px;
  border:1px solid #1b3a50;
  border-radius:11px;
  background:#071724;
}

.heatmap-page .vpn-goal-tab{
  min-height:36px;
  padding:0 13px !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:#7290a6 !important;
  font-size:10px;
  font-weight:800;
}

.heatmap-page .vpn-goal-tab.active{
  background:#11344a !important;
  color:#77ece5 !important;
}

.heatmap-page .vpn-goal-panel{
  padding-top:17px;
}

.heatmap-page .vpn-goal-panel h2{
  margin:0 0 7px;
  font-size:18px;
}

.heatmap-page .vpn-goal-panel>p{
  max-width:850px;
  margin:0;
  color:#7591a6;
  font-size:11px;
  line-height:1.6;
}

.heatmap-page .optimize-controls{
  margin-top:14px;
}

.heatmap-page .optimize-field{
  max-width:360px;
}

.heatmap-page .optimize-field label{
  display:block;
  margin-bottom:7px;
  color:#7d9aaf;
  font-size:10px;
}


/* ================= RECOMMENDATIONS ================= */

.heatmap-page .auto-best-recommendation,
.heatmap-page .buyer-offer-result,
.heatmap-page .optimize-result{
  margin:0 0 16px !important;
  border-radius:14px !important;
}


/* ================= HEATMAP CARD ================= */

.heatmap-page .heatmap-card{
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  border:1px solid rgba(87,140,177,.27) !important;
  border-radius:18px !important;
  background:#081a28 !important;
  box-shadow:0 24px 58px rgba(0,0,0,.20);
}

.heatmap-page .heatmap-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  padding:21px 23px !important;
  border-bottom:1px solid #1a384e;
  background:
    linear-gradient(
      90deg,
      rgba(15,47,65,.65),
      rgba(7,24,37,.6)
    );
}

.heatmap-page .provider-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.heatmap-page .provider-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:31px;
  height:31px;
  border:1px solid #27516a;
  border-radius:8px;
  background:#0d3043;
  color:#6ceae3;
}

.heatmap-page .provider-line strong{
  font-size:14px;
}

.heatmap-page .heatmap-head p{
  margin:7px 0 0 !important;
  color:#6f8da2 !important;
  font-size:10px !important;
}

.heatmap-page .last-updated{
  flex:0 0 auto;
  min-width:150px;
}

.heatmap-page .last-updated small{
  color:#668399 !important;
}

.heatmap-page .last-updated b{
  color:#c6d9e6 !important;
  font-size:10px;
}

.heatmap-page .qc-pill{
  display:inline-flex;
  padding:4px 7px;
  border:1px solid rgba(55,220,144,.23);
  border-radius:999px;
  background:rgba(28,119,76,.15);
  color:#5de99f;
  font-size:8px;
  font-weight:900;
}


/* ================= TABLE ================= */

.heatmap-page .heatmap-scroll{
  max-width:100%;
  overflow:auto;
}

.heatmap-page .heatmap-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.heatmap-page .heatmap-table th{
  padding:12px 10px !important;
  border-right:1px solid rgba(39,72,94,.45);
  border-bottom:1px solid #1c3a4f;
  background:#071724;
  color:#7593a8 !important;
  font-size:9px !important;
  font-weight:800;
}

.heatmap-page .heatmap-table td{
  border-right:1px solid rgba(39,72,94,.35);
  border-bottom:1px solid rgba(39,72,94,.35);
  font-size:10px;
}

/* Intentionally no cell background override:
   existing retention colors remain untouched. */

.heatmap-page .destination-head{
  position:sticky;
  left:0;
  z-index:4;
}


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

.heatmap-page .summary-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  margin-top:17px !important;
}

.heatmap-page .summary-grid>.card{
  min-height:260px;
  padding:21px !important;
  border:1px solid rgba(84,136,171,.24) !important;
  border-radius:16px !important;
  background:
    linear-gradient(
      145deg,
      rgba(12,33,50,.97),
      rgba(7,20,34,.98)
    ) !important;
}

.heatmap-page .summary-grid h2{
  margin:0;
  font-size:18px;
  letter-spacing:-.02em;
}

.heatmap-page .summary-grid>section>p{
  color:#708da2 !important;
  font-size:10px !important;
}

.heatmap-page .summary-explainer{
  padding:10px !important;
  border:1px solid #19374c;
  border-radius:8px;
  background:#071824;
  line-height:1.55;
}

.heatmap-page .summary-grid ol{
  margin-top:14px !important;
}

.heatmap-page .summary-grid ol li{
  margin:5px 0;
}

.heatmap-page .detail-card{
  position:relative;
}

.heatmap-page .detail-card .close{
  position:absolute;
  top:15px;
  right:15px;
  border-radius:7px;
}

.heatmap-page .detail-title{
  margin-top:10px;
  color:#70e8e1;
  font-size:12px;
  font-weight:800;
}

.heatmap-page .detail-card dl{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 16px;
  margin-top:16px;
}

.heatmap-page .detail-card dl>div{
  padding:8px 0;
  border-bottom:1px solid rgba(43,74,95,.45);
}

.heatmap-page .detail-card dt{
  color:#647f94;
  font-size:8px;
}

.heatmap-page .detail-card dd{
  margin:4px 0 0;
  color:#a9bfce;
  font-size:10px;
  word-break:break-word;
}


/* ================= TIP ================= */

.heatmap-page .tip{
  margin-top:15px !important;
  padding:14px 17px !important;
  border:1px solid rgba(67,182,181,.20) !important;
  border-radius:12px !important;
  background:#081b29 !important;
  color:#7995a9 !important;
  font-size:10px;
}

.heatmap-page .tip a{
  color:#6ce9e2;
}


/* ================= SEO / METHODOLOGY ================= */

.heatmap-page .seo-copy{
  margin-top:17px !important;
  padding:26px !important;
  border:1px solid rgba(84,136,171,.24) !important;
  border-radius:18px !important;
  background:
    linear-gradient(
      145deg,
      rgba(12,33,50,.97),
      rgba(7,20,34,.98)
    ) !important;
}

.heatmap-page .seo-copy h2{
  margin-top:0;
  font-size:22px;
}

.heatmap-page .seo-copy>p{
  color:#7995a9;
  font-size:11px;
  line-height:1.65;
}

.heatmap-page .seo-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px;
}

.heatmap-page .seo-columns>div{
  padding:16px;
  border:1px solid #19374c;
  border-radius:11px;
  background:#071824;
}

.heatmap-page .seo-columns h3{
  margin:0 0 7px;
  font-size:13px;
}

.heatmap-page .seo-columns p{
  margin:0;
  color:#6d899f;
  font-size:10px;
  line-height:1.6;
}


/* ================= RESPONSIVE ================= */

@media(max-width:1180px){

  .heatmap-page .page-shell{
    grid-template-columns:1fr !important;
  }

  .heatmap-page .sidebar{
    position:static;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
  }

  .heatmap-page .sidebar .help{
    grid-column:1/-1;
  }

  .heatmap-page #update-btn{
    align-self:end;
  }

  .heatmap-page .topbar .worker-health{
    display:none !important;
  }

}


@media(max-width:760px){

  .heatmap-page .page-shell{
    width:min(100% - 24px,1540px);
    padding-top:20px;
  }

  .heatmap-page .sidebar{
    grid-template-columns:1fr;
  }

  .heatmap-page .page-title-row{
    display:block !important;
    min-height:auto;
    padding:30px 22px !important;
  }

  .heatmap-page .page-title-row:before{
    left:22px;
  }

  .heatmap-page .page-title-row h1{
    font-size:38px;
  }

  .heatmap-page .metric-note{
    display:inline-flex;
    margin-top:17px;
  }

  .heatmap-page .heatmap-head{
    display:block;
  }

  .heatmap-page .last-updated{
    margin-top:14px;
  }

  .heatmap-page .summary-grid{
    grid-template-columns:1fr !important;
  }

  .heatmap-page .detail-card dl{
    grid-template-columns:1fr;
  }

  .heatmap-page .seo-columns{
    grid-template-columns:1fr;
  }

}


/* Heatmap select text clipping fix v5.2.1 */
.heatmap-page .select-wrap{
  overflow:visible !important;
  padding:0 !important;
}

.heatmap-page .select-wrap select,
.heatmap-page #owned-provider-select{
  padding-left:14px !important;
  text-indent:0 !important;
  transform:none !important;
  margin-left:0 !important;
}

/* Final heatmap select fix v5.2.2 */

.heatmap-page .select-wrap::before{
  content:none !important;
  display:none !important;
}

.heatmap-page .select-wrap{
  position:relative !important;
  overflow:visible !important;
  border-left:0 !important;
}

.heatmap-page .select-wrap select{
  padding-left:14px !important;
  padding-right:36px !important;
  text-indent:0 !important;
  margin:0 !important;
}

.heatmap-page .filter-group:first-child .select-wrap{
  border-left:0 !important;
}