.beacon-page main {
  max-width: 1100px;
  margin: 16px auto;
}
.beacon-page header { margin-bottom: 12px; }
.beacon-page h1 { font-size: clamp(24px, 4vw, 30px); }
.beacon-page .retail-back-nav { margin-bottom: 12px; }
.beacon-page .usage { margin-top: 4px; }
.beacon-page .small, .beacon-page .usage { font-size: 13px; color: #536378; }
.beacon-page .store-picker { width: min(100%, 320px); font-weight: 600; }

.beacon-panel {
  margin: 8px 0;
  border: 1px solid #d7e2dc;
  border-radius: 12px;
  background: #fff;
}
.beacon-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  gap: 12px;
  padding: 9px 16px;
  list-style: none;
  color: #17473d;
  font-weight: 650;
  cursor: pointer;
}
.beacon-panel > summary::-webkit-details-marker { display: none; }
.beacon-panel > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.beacon-panel[open] > summary::after { transform: rotate(225deg); }
.beacon-panel > summary:hover,
.beacon-panel[open] > summary { background: #edf5f0; border-radius: 11px; }
.beacon-page :is(summary, select, button, .record-list):focus-visible {
  outline: 2px solid #227d69;
  outline-offset: 2px;
}

.panel-body { padding: 8px 16px 14px; }
.panel-body > p { margin: 4px 0 8px; }
.beacon-page .row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
.beacon-page .row label { flex: 1 1 140px; min-width: 0; }
.beacon-page .panel-tools { align-items: center; }
.beacon-page .panel-tools p { margin: 0; }
.beacon-page form { max-width: none; }
.beacon-page label { margin: 6px 0; }
.beacon-page select,
.beacon-page input:not([type="checkbox"]) {
  display: block;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #bac8cd;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
}
.beacon-page input[type="checkbox"] { display: inline; width: auto; accent-color: #246455; }
.beacon-page button {
  min-height: 40px;
  padding: 7px 12px;
  background: #1b584b;
  font-size: 14px;
  font-weight: 600;
}
.beacon-page button.secondary { background: #eaf2ee; color: #17473d; }
.beacon-page button:not(:disabled):hover { filter: brightness(.94); }
.beacon-page .record-list { max-height: min(480px, 55vh); overflow: auto; }
.beacon-page article { padding: 9px 0; border-bottom: 1px solid #e4ebe7; overflow-wrap: anywhere; }
.beacon-page article:last-child { border-bottom: 0; }
.beacon-page article p { margin: 2px 0; font-size: 14px; }
.beacon-page article details { margin: 4px 0; }
.beacon-page .review-fields { align-items: center; }
.beacon-page .review-fields label { flex-basis: 220px; }
.beacon-page summary { cursor: pointer; }
.beacon-page .pill { display: inline-block; padding: 2px 8px; border-radius: 14px; background: #fff0c9; color: #765315; font-size: 12px; }
.beacon-page #message { position: sticky; bottom: 12px; padding: 8px 12px; border-radius: 8px; background: #fff0c9; }
.beacon-page #message:empty { display: none; }


/* Customer reporting takes priority; configuration remains available below. */
.beacon-page .report-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.beacon-page h2{font-size:17px;margin:10px 0}
.beacon-page .visit-report{margin:12px 0;padding:14px 16px;background:#fff;border:1px solid #d7e2dc;border-radius:12px}
.beacon-page .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 12px}
.beacon-page .metric{padding:10px 14px;background:#f0f6f3;border-radius:8px;display:flex;flex-direction:column;gap:3px}
.beacon-page .metric strong{font-size:26px;color:#17473d;line-height:1.2}
.beacon-page .metric small{color:#536378}
.beacon-page .trend{display:grid;grid-template-columns:1fr 1fr;gap:5px 24px;margin:10px 0}
.beacon-page .trend-day{display:grid;grid-template-columns:45px 1fr 48px 48px;gap:8px;align-items:center;font-size:12px}
.beacon-page .bar-track{background:#edf2f0;height:10px;border-radius:3px;overflow:hidden}
.beacon-page .bar{height:100%;background:#287c67}
.beacon-page .customer-row{padding:0}
.beacon-page .customer-row>details{margin:0}
.beacon-page .customer-summary{display:grid;grid-template-columns:minmax(110px,1fr) 100px minmax(120px,1fr) 190px 110px;gap:12px;align-items:center;min-height:44px;padding:6px 8px;list-style:none;font-size:13px}
.beacon-page .customer-summary:hover{background:#f0f6f3}
.beacon-page .customer-summary::-webkit-details-marker{display:none}
.beacon-page .customer-detail{padding:10px 14px;background:#f7f9f8;border-top:1px solid #e4ebe7}
.beacon-page .secondary-heading{margin-top:24px;color:#536378}
.beacon-page .customers .panel-tools{justify-content:space-between;margin-bottom:8px}
@media(max-width:760px){
 .beacon-page .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .beacon-page .trend{grid-template-columns:1fr}
 .beacon-page .customer-summary{grid-template-columns:minmax(0,1fr) 100px;gap:5px 8px}
 .beacon-page .customer-summary>span:nth-child(4){font-size:12px}
 .beacon-page .customer-summary .pill{grid-column:2;grid-row:1}
 .beacon-page .visit-report{padding:12px}
}


/* Keep equipment and diagnostic controls dense without hiding their status. */
.beacon-page .equipment-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.beacon-page .equipment-grid>.beacon-panel{margin:0;min-width:0}
.beacon-page .equipment-grid .panel-body{padding:10px 14px}
.beacon-page .status-tag{display:inline-block;background:#e7f3ed;color:#195b47;border-radius:5px;padding:3px 7px;font-size:12px;font-weight:500;white-space:normal}
.beacon-page .status-tag.muted{background:#f1f2f4;color:#596375}
.beacon-page .equipment-grid>.beacon-panel>summary .status-tag{margin-left:auto}
.beacon-page .equipment-grid>.beacon-panel>summary:after{flex-shrink:0}
.beacon-page .device-heading{display:flex;align-items:center;gap:8px}
.beacon-page .device-heading strong{flex:1;min-width:0}
.beacon-page .setup-help{margin-bottom:10px;font-size:13px}
.beacon-page #editor{border-top:1px solid #d7e2dc;margin-top:10px;padding-top:10px}
.beacon-page #editor>summary{color:#195b47;font-weight:600;min-height:36px}
.beacon-page .diagnostic-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.beacon-page .diagnostic-tools label{min-width:0;font-size:13px}
.beacon-page .diagnostic-record{padding:0}
.beacon-page .diagnostic-record>details{margin:0}
.beacon-page .diagnostic-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;padding:10px 2px;list-style:none;align-items:center;font-size:14px}
.beacon-page .diagnostic-summary::-webkit-details-marker{display:none}
.beacon-page .detail-hint{font-size:12px;color:#195b47;text-align:right}
.beacon-page .diagnostic-detail{padding:10px;background:#f4f8f6;border-radius:6px}
.beacon-page #device-form>.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.beacon-page #device-form label{min-width:0}
.beacon-page #uuid{font-size:14px}
@media(max-width:760px){
 .beacon-page .equipment-grid{grid-template-columns:minmax(0,1fr);gap:8px}
 .beacon-page .equipment-grid>.beacon-panel>summary{padding:10px 12px;gap:8px;font-size:15px}
 .beacon-page .equipment-grid .panel-body{padding:8px 12px 12px}
 .beacon-page .equipment-grid input:not([type=checkbox]),.beacon-page .equipment-grid select{font-size:16px;min-height:44px}
 .beacon-page .equipment-grid button{min-height:44px}
 .beacon-page .equipment-grid .record-list{max-height:440px}
 .beacon-page .diagnostic-tools{grid-template-columns:minmax(0,1fr)}
}

.beacon-page .insight-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.beacon-page .insight-layout h3{font-size:14px;margin:8px 0}
.beacon-page .frequency-chips{display:flex;flex-wrap:wrap;gap:8px}
.beacon-page .frequency-chips span{background:#edf5f0;border-radius:6px;padding:8px;font-size:13px}
.beacon-page .frequency-chips b{margin-left:8px}
.beacon-page .region-bar{display:grid;grid-template-columns:minmax(80px,1fr) 2fr 40px;gap:8px;align-items:center;font-size:13px;margin:8px 0;overflow-wrap:anywhere}
.beacon-page .recommendation-note{font-size:13px;margin-top:10px}
@media(max-width:760px){.beacon-page .insight-layout{grid-template-columns:1fr;gap:8px}}