/* ===========================================================
   QuakeMap24 - Heatmap UI
   Depends on: home.css (map container + leaflet theme)
   =========================================================== */

:root{
  --hm-panel-bg: rgba(14,16,22,.60);
  --hm-border: rgba(255,255,255,.10);

  --hm-ctl-w: min(420px, calc(100vw - 20px));
  --hm-ctl-radius: 18px;

  --hm-mobile-h: 56vh;
}

/* ===========================================================
   Heatmap Controls Panel
   =========================================================== */
.qmk-hmctl{
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 10px;
  z-index: 900;

  width: var(--hm-ctl-w);
  max-width: var(--hm-ctl-w);

  border-radius: var(--hm-ctl-radius);
  background: var(--hm-panel-bg);
  border: 1px solid var(--hm-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);

  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.qmk-hmctl.is-closed{ display:none !important; }

.qmk-hmctl__head{
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(14,16,22,.45);
}
.qmk-hmctl__headrow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.qmk-hmctl__title{
  font-weight: 950;
  letter-spacing: .2px;
  color: #fff;
  font-size: 14px;
  line-height: 1.15;
}
.qmk-hmctl__sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(255,255,255,.72);
}

.qmk-hmctl__section{
  padding: 10px 12px;
}
.qmk-hmctl__section + .qmk-hmctl__section{
  border-top: 1px solid rgba(255,255,255,.08);
}

.qmk-hmctl__label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.72);
  margin-bottom: 8px;
  letter-spacing: .2px;
}

.qmk-hmctl__note{
  margin-top: 8px;
  font-size: 12px;
  opacity: .65;
  color: #fff;
}

/* Seg buttons wrapper */
.qmk-hmctl__seg{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Actions */
.qmk-hmctl__actions{
  padding: 12px;
  display:flex;
  gap: 10px;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(14,16,22,.45);
}
.qmk-hmctl__actions .qmk-chip{ flex: 1 1 auto; }

/* ===========================================================
   Legend
   =========================================================== */
.qmk-hmlegend{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.qmk-hmlegend__row{
  display:flex;
  align-items:center;
  gap: 10px;
}
.qmk-hmlegend__label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.72);
  min-width: 34px;
}
.qmk-hmlegend__bar{
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg,
      rgba(80,140,255,.80),
      rgba(72,255,170,.80),
      rgba(255,220,90,.85),
      rgba(255,80,80,.85)
    );
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.qmk-hmlegend__meta{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.qmk-hmlegend__meta strong{
  color: rgba(255,255,255,.92);
  font-weight: 950;
}

/* ===========================================================
   Mobile layout: controls become bottom sheet
   =========================================================== */
@media (max-width: 980px){
  .qmk-hmctl{
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    height: var(--hm-mobile-h);
    border-radius: 18px;
  }

  .qmk-hmctl__head{
    position: relative;
    padding-top: 18px;
  }
  .qmk-hmctl__head::before{
    content:"";
    position:absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
  }
}

/* Extra small phones */
@media (max-width: 520px){
  .qmk-hmctl__section{ padding: 10px; }
  .qmk-hmctl__actions{ padding: 10px; }
  .qmk-hmlegend{ padding: 10px; }
}