/* =========================
   TOP BAR (compact, dark)
   ========================= */
.topbar{ background:#343434; color:#fff; }

/* Remove container padding if you haven’t already */
.topbar .container-fluid{ padding-right:0!important; padding-left:0!important; }

/* Two-column layout:
   - column 1: left stack (controls row + search row)
   - column 2: speed bands spanning both rows */
.topbar-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.5rem;
  align-items:stretch;         /* let speed bands stretch full height */
}

/* Left side = two stacked rows */
.topbar-left{
  display:grid;
  grid-template-rows:auto auto;
  row-gap:.35rem;              /* tiny gap between rows */
  align-items:center;
}

/* Row containers (for clarity) */
.topbar-row{ display:block; }

/* Row 1: inline controls */
.topbar-controls{
  display:flex; align-items:center; gap:.4rem;
}

/* Row 2: search — stays left, fixed visual width */
.topbar-search .input-container{
  display:flex; align-items:center; padding:0; margin:0;
  background:#fff; color:#000; border-radius:.65rem;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.topbar-search .input-container .form-control{
  /* width:340px; max-width:380px; */
  height:36px; font-size:16px; border:1px solid #ccc; border-radius:.5rem;
}

/* Speed bands: occupy column 2 and span both rows (full bar height) */
.topbar-grid #speedBands{
  grid-column:2;
  grid-row:1 / -1;
  align-self:stretch;
  width:100%;
}

#speedBands {
  box-sizing: border-box;
  transition: height .2s ease; /* smooth resize */
}

/* Help button shouldn’t push content on wrap */
.topbar .help-icon{ margin-left:0!important; }

/* Opacity (short slider + icons) */
.transparency-control{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.topbar .opacity-range{
  flex:0 0 auto; width:80px; max-width:80px; min-width:80px;
  margin:0; padding:0; height:auto;
}
.opacity-range::-webkit-slider-runnable-track,
.opacity-range::-moz-range-track{
  background:#fff; height:6px; border-radius:3px; box-shadow:none;
}
.opacity-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-4px;
  border-radius:50%; background:#14a1ff; border:2px solid #fff; cursor:pointer;
}
.opacity-range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:#14a1ff; border:2px solid #fff; cursor:pointer;
}
.opacity-icon{ display:inline-flex; width:18px; height:18px; line-height:0; }
.opacity-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;   /* scale the PNG correctly */
  line-height: 0;        /* no extra spacing */
}

/* Tabs side-by-side */
.tab-btn-inline{ display:flex; align-items:center; gap:6px; }
.tab-btn{ line-height:1.2; }
.tab-btn.active, .tab-btn:hover{ background:#14a1ff; color:#061018; }

/* Bands component (unchanged visuals, now just fills the grid cell) */
:root{ --band-min-h: 88px; }
.speed-bands-inline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0; margin:0; padding:0;
  border:1px solid rgba(0,0,0,.7);
  border-radius:0; overflow:hidden;
  height:100%;                    /* stretch within the grid cell */
}
.speed-bands-inline .speed-band{
  margin:0; border:0;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  min-height:var(--band-min-h);
  text-align:center; font-family:Arial, sans-serif;
  transition:filter .15s ease, opacity .15s ease, background .15s ease;
}
.speed-bands-inline .speed-band + .speed-band{
  border-left:1px solid rgba(0,0,0,.35);
}
.speed-bands-inline .speed-band.band-off{
  filter:none;
  opacity:0.55;
  background:#c9c9c9!important;
  color:#444!important;
}
.speed-bands-inline .speed-band.band-off .band-lines,
.speed-bands-inline .speed-band.band-off .band-uses,
.speed-bands-inline .speed-band.band-off .signal-bars{
  color:#444!important;
}
.speed-bands-inline .speed-band.band-off .band-title{
  text-decoration: line-through;
  color:#333!important;
}
.speed-bands-inline .band-sep{
  margin:6px 0 4px; border:0; height:1px; background:rgba(0,0,0,.25);
}
html[data-theme="dark"] .speed-bands-inline .band-sep{ background:rgba(255,255,255,.25); }
.speed-bands-inline .band-title{ margin:0; font-weight:700; font-size:1.25rem; line-height:1.1; }
.speed-bands-inline .band-lines{ margin:2px 0; font-size:.85rem; line-height:1.2; }
.speed-bands-inline .band-lines span{ margin:0; display: block;}
.speed-bands-inline .band-uses{ margin:0; font-weight:700; font-size:.80rem; }
.very-poor-download{ font-size:.85rem; }
.speed-bands-inline .very-poor{ background:#ffd9d9; color:#b10000; }
.speed-bands-inline .poor     { background:#ffe7cd; color:#a35400; }
.speed-bands-inline .fair     { background:#d8f8d8; color:#0a6a2a; }
.speed-bands-inline .good     { background:#d9e7ff; color:#174a99; }
.speed-bands-inline .very-good{ background:#f1d6ff; color:#7b0090; }

/* Mobile: compress speed bands to a slim, single-row chip bar */
@media (max-width: 900px){
  .speed-bands-inline{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    /* gap:4px; */
    align-items:center;
    padding:6px 8px;
  }
  .speed-bands-inline .speed-band{
    min-height:32px;
    padding:4px 2px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.2;
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:none;
  }
  .speed-bands-inline .band-title{
    margin:0;
    font-size:13px;
    font-weight:700;
    line-height:1.1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
  }
  .speed-bands-inline .band-lines,
  .speed-bands-inline .band-uses,
  .speed-bands-inline .band-checkbox,
  .speed-bands-inline .band-icon,
  .speed-bands-inline svg,
  .speed-bands-inline img,
  .speed-bands-inline .fa,
  .speed-bands-inline .fas,
  .speed-bands-inline .far,
  .speed-bands-inline [class*="fa-"]{
    display:none!important;
  }

  .operator-switch{
    width: fit-content !important;
    height: 50px !important;
}

}

/* Responsive tweak: if you ever stack columns, let bands go full width under */
@media (max-width:992px){
  .topbar-grid{ grid-template-columns:1fr; row-gap:.35rem; }
  .topbar-grid #speedBands{ grid-column:1; grid-row:auto; }
}

/* =========================
   MAPS / LAYOUT (unchanged)
   ========================= */
.map-container{ position:relative; width:100%; height:330px; overflow:hidden; }
/* .gm-style .gm-bundled-control { display:none!important; } */
.gmnoprint .gm-style-mtc-bbw{ left:0!important; }
.performance-map,.signal-map{ position:absolute; inset:0; width:100%; height:100%; }
.min-w-0{ min-width:0; }

/* label strip on map tiles */
.overlay{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.45); color:#fff;
  padding:6px 10px; font-size:14px;
}

/* =========================
   DARK MODE
   ========================= */
html[data-theme="dark"], html[data-theme="dark"] body{ background:#0f1115; color:#e8eaed; }
html[data-theme="dark"] .topbar{ background:#0f1115; }
html[data-theme="dark"] .topbar-search .input-container{
  background:#13161c; color:#e8eaed; border:1px solid #2a2f3a;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
html[data-theme="dark"] .topbar-search .form-control{
  background:#0f1115; color:#e8eaed; border:1px solid #2a2f3a;
}
html[data-theme="dark"] .speed-bands-inline{ border-color:rgba(255,255,255,.45); }
html[data-theme="dark"] .speed-band + .speed-band{ border-left-color:rgba(255,255,255,.35); }
@media (max-width:991.98px){
  html[data-theme="dark"] .speed-band{ border-top-color:rgba(255,255,255,.35); }
}
html[data-theme="dark"] .very-poor{ background:#402022; color:#ffd7d7; }
html[data-theme="dark"] .poor{ background:#3f2a1a; color:#ffd8b2; }
html[data-theme="dark"] .fair{ background:#2b3a2b; color:#c9f7c9; }
html[data-theme="dark"] .good{ background:#1e2940; color:#cfe0ff; }
html[data-theme="dark"] .very-good{ background:#3a1b3f; color:#e7c5ef; }

/* ============ PERF PANEL — LIGHT/DARK READABLE ============ */
.perf-panel{
  background:#fff; color:#111; border:1px solid #ddd; border-radius:.5rem;
  padding:.75rem; margin-top:.75rem;
}
.perf-toolbar{
  display:flex; gap:.5rem; align-items:center; justify-content:space-between;
  margin-bottom:.5rem;
}
#perfSearch{ max-width:260px; }
#perfTable{ width:100%; border-collapse:separate; border-spacing:0; }
#perfTable td,#perfTable th{
  font-size:.88rem; line-height:1.35; vertical-align:middle; padding:.5rem .6rem;
}
#perfTable thead th{
  position:sticky; top:0; z-index:1;
  background:#f7f7f9; color:#222; border-bottom:1px solid #e5e7eb;
  cursor:pointer; white-space:nowrap;
}
#perfTable tbody tr{ border-bottom:1px solid #eee; }
#perfTable tbody tr:nth-child(even){ background:#fafbfc!important; color:#111; }
#perfTable tbody tr:nth-child(odd){ background:#fff!important; color:#111; }
#perfTable tbody tr:hover{ background:#fffbe6; }
.badge-status{ padding:.2rem .5rem; border-radius:.35rem; font-size:.72rem; font-weight:600; }
.badge-running{ background:#0b5ed7; color:#fff; }
.badge-done{ background:#198754; color:#fff; }
.badge-error{ background:#dc3545; color:#fff; }
#perfTable .global-row{ background:#fffce8!important; color:#8b0000; font-weight:600; }
html[data-theme="dark"] .perf-panel{ background:#171a21; color:#e8eaed; border-color:#2a2f3a; }
html[data-theme="dark"] #perfTable thead th{ background:#1f242e; color:#e8eaed; border-bottom-color:#2a2f3a; }
html[data-theme="dark"] #perfTable tbody tr:nth-child(even){ background:#1a1f28!important; color:#e8eaed; }
html[data-theme="dark"] #perfTable tbody tr:nth-child(odd){ background:#171a21!important; color:#e8eaed; }
html[data-theme="dark"] #perfTable tbody tr:hover{ background:#232a36; }
html[data-theme="dark"] .badge-running{ background:#0d6efd; color:#fff; }
html[data-theme="dark"] .badge-done{ background:#2ea043; color:#fff; }
html[data-theme="dark"] .badge-error{ background:#f85149; color:#fff; }

/* --- map expansion system --- */
.map-expand-ctrl{
  position:absolute; top:8px; right:8px; z-index:5;
  width:28px!important; height:28px!important; line-height:26px;
  text-align:center; border-radius:14px;
  background:rgba(0,0,0,.65); color:#fff; font-weight:700;
  cursor:pointer; user-select:none;
}
.tab-content .map-container.hidden-when-expanded{ display:none!important; }
.tab-content .map-container.expanded{
  grid-column:1 / -1; grid-row:1 / -1; position:relative; z-index:4;
}
.map-container.expanded .overlay{ height:7%; width:22.5%!important; }

.operator-switch{
  display:none;
  position:absolute;
  top:8px; left:50%; transform:translateX(-50%);
  z-index:5;
  height:40px;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  width: min(520px, calc(100% - 16px));
  background:rgba(48,52,56,0.85);
  border-radius:22px;
  overflow:hidden;
}
.map-container.expanded .operator-switch{ display:flex; }
.op-btn{
  flex:1 1 0;
  padding:6px 10px;
  border-radius:16px;
  font-weight:800;
  font-size:13px;
  border:0;
  background:transparent;
  color:#f5f5f5;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease, color .15s ease, transform .12s ease;
  white-space:nowrap;
  line-height:1.1;
  text-align:center;
}
.op-btn.is-active{
  background:#0b73ff; color:#fff; transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.op-btn.is-inactive{ background:#fff; color:rgba(94,93,93,1); box-shadow:none; transform:none; }
html[data-theme="dark"] .op-btn{ background:rgba(23,26,33,.92); color:#e8eaed; border-color:rgba(255,255,255,.18); }

/* Mobile menu */
.mobile-menu-btn{
  position:relative;
  width:32px; height:32px;
  border:1px solid rgba(0,0,0,0.35); border-radius:6px;
  background:#2c2f34; color:#fff; font-size:18px; line-height:30px;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  cursor:pointer;
  transition:background .15s ease, transform .12s ease;
  display:none; /* hidden on desktop */
}
.mobile-menu-btn:hover{ background:#3a3f45; transform:translateY(-1px); }
.topbar .mobile-menu-btn{
  flex:0 0 32px;
  align-self:center;
  margin-left:4px;
}
.mobile-menu{
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  width:100vw;
  height:100vh;
  z-index:2147482000; /* ensure below modal overlays */
  display:none;
}
.mobile-menu.open{ display:block; }
.mobile-menu.lowered{ z-index:1000; }
.mobile-menu__backdrop{
  position:fixed; top:0; right:0; bottom:0; left:0;
  background:rgba(12,18,28,.55);
  backdrop-filter:blur(2px);
}
.mobile-menu__panel{
  position:fixed;
  top:0;
  right:0;
  width:320px;
  max-width:90vw;
  height:100vh;
  background:#fff;
  box-shadow:-12px 0 32px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  padding:1.5rem 1.25rem;
  gap:1rem;
  overflow-y:auto;
}
.mobile-menu__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mobile-menu__header h2{ margin:0; font-size:18px; font-weight:700; color:#222; }
.mobile-menu__close{
  border:0; background:transparent; font-size:20px; cursor:pointer; color:#444;
}
.mobile-menu__body{ display:flex; flex-direction:column; gap:10px; }
.mobile-menu__link{
  display:block; padding:12px 14px; border:1px solid #e5e5e5; border-radius:10px;
  background:#f5f6f8; color:#222; font-weight:700; text-decoration:none; text-align:left;
}
.mobile-menu__link--section{ background:#eef1f5; }
.mobile-menu__section{ padding:8px 2px 0 2px; color:#333; }
.mobile-menu__text{ margin:0; font-size:14px; line-height:1.4; }

/* Hide footer */
.footer-container{ display:none !important; }

/* Optional debug overlay for menu visibility (kept hidden) */
.mobile-menu-debug{
  display:none;
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  z-index:2147483600;
  background:rgba(0,0,0,0.75);
  color:#fff;
  align-items:center;
  justify-content:center;
  font-size:20px;
  text-align:center;
  padding:20px;
}
.mobile-menu-debug.show{ display:flex; }

@media (max-width: 900px){
  .mobile-menu-btn{ display:flex; }
}

/* =========================
   TABS + MAP GRID (2×2)
   ========================= */
.tab-content{ display:none !important; }

.tab-content.active{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 768px){
  .tab-content.active{
    grid-template-columns: 1fr;   /* stack maps on small screens */
  }
}

/* Show both panels during boot so Maps can lay out */
html.booting .tab-content{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  visibility:hidden; opacity:0; pointer-events:none;
}

@media (max-width: 900px){
  .tab-content.active,
  html.booting .tab-content{
    grid-template-columns: 1fr;
  }
}

/* Ensure each map fills its tile */
.performance-map, .signal-map{
  position:absolute; inset:0; width:100%; height:100%;
}

/* Position the small per-band checkbox */
.speed-bands-inline .speed-band { position: relative; }
.speed-bands-inline .band-checkbox {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
}
.speed-bands-inline .band-checkbox input[type="checkbox"]{
  width: 14px;
  height: 14px;
  accent-color: #14a1ff; /* matches your brand blue */
  cursor: pointer;
}

#perfPanel{ display:none !important; }

#tileActivity {
  max-height: 300px;       /* fixed height */
  overflow-y: auto;        /* vertical scroll bar */
  border: 1px solid #ccc;  /* optional border */
  display: block;          /* ensure block scroll container */
}

#tileActivity table {
  width: 100%;
  border-collapse: collapse;
}

#tileActivity th,
#tileActivity td {
  padding: 4px 6px;
  font-size: 13px;
  border-bottom: 1px solid #eee;
  white-space: nowrap; /* prevent wrapping */
}

.emoji-btn {
  background: none;     /* remove blue background */
  border: none;         /* remove border */
  font-size: 1.65rem;      /* make emoji big */
  cursor: pointer;      /* show pointer on hover */
  padding: 0;           /* remove extra spacing */
  line-height: 1;
}
.emoji-btn:focus {
  outline: none;        /* remove focus ring */
}

/* Center the reCAPTCHA modal on mobile */
@media (max-width: 900px) {
  #captchaModal .modal-dialog {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #captchaModal .modal-content {
    margin: 0 auto;
    width: auto;
    max-width: 90%;
  }
}