/* ---- sidebar TEST badge (used only by the temporary «Карта — тест» link) ---- */
.slink-badge{
  margin-left:auto; font-size:9px; font-weight:800; letter-spacing:.03em; color:#fff;
  background:#e08a2e; border-radius:5px; padding:2px 5px; line-height:1; flex-shrink:0;
}

/* ================================================================
   TEMPORARY TEST STYLES — «Карта — тест» tab only.
   See docs/reports/branch-map-v2-test-report.md. Fully isolated under
   the .mt-* / .analytical-region prefixes — safe to delete this whole
   file (and its <link> in index.html) when the tab is retired; no other
   page references these classes.
   All colors read theme CSS variables (css/theme.css) except the
   data-driven region fill (set inline per metric in JS) and the fixed
   brand-green mock color ramp, which are intentionally theme-invariant.
   ================================================================ */

.mt-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.mt-title{ font-size:20px; font-weight:700; color:var(--c-ink); margin:0 0 2px; }
.mt-version{ font-size:12px; font-weight:400; color:var(--c-text-3); margin-left:6px; }
.mt-subtitle{ font-size:12px; color:var(--c-text-2); max-width:640px; }
.mt-badge-test{ background:rgba(240,176,64,.16); color:#a06b0a; font-weight:700; flex-shrink:0; }

.mt-grid{ display:grid; grid-template-columns:2.1fr 1fr; gap:16px; align-items:stretch; margin-top:14px; }
.mt-map-card, .mt-list-card{ display:flex; flex-direction:column; padding:16px; position:relative; }
.mt-hidden{ display:none; }

.mt-map-wrap{ position:relative; overflow:hidden; border-radius:10px; background:var(--c-bg); min-height:360px; }
.mt-svg{ width:100%; height:auto; display:block; user-select:none; }

/* ---- region base + interaction states ---- */
.analytical-region{ cursor:pointer; }
.analytical-region path{ fill:inherit; stroke:rgba(0,0,0,.16); stroke-width:.5; transition:stroke-width .2s ease; }
.analytical-region{ transition:opacity .28s ease, filter .28s ease; }

.mt-svg.branch-hovering .analytical-region:not(.branch-hover){ opacity:.22; }
.analytical-region.branch-hover,
.analytical-region.region-hover,
.analytical-region.selected{
  filter:brightness(1.10) drop-shadow(0 0 5px rgba(77,179,77,.55));
}
.analytical-region.branch-hover path,
.analytical-region.region-hover path,
.analytical-region.selected path{ stroke:var(--c-ink); stroke-width:1.3; }

.analytical-region.level2-dim{ opacity:.05; pointer-events:none; }

/* ---- tooltip ---- */
.mt-tooltip{
  position:absolute; display:none; z-index:20; pointer-events:none;
  background:var(--c-dark); color:#fff; border-radius:9px; padding:10px 12px;
  font-size:12px; min-width:150px; max-width:220px; box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.mt-tip-title{ font-weight:700; margin-bottom:6px; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.14); }
.mt-tip-row{ display:flex; justify-content:space-between; gap:12px; font-size:11px; color:rgba(255,255,255,.75); }
.mt-tip-row b{ color:#fff; }

/* ---- back button / branch label ---- */
.mt-back-btn{
  position:absolute; top:22px; left:22px; z-index:5; display:inline-flex; align-items:center; gap:6px;
  background:var(--c-white); border:1.5px solid var(--c-border); border-radius:8px; padding:7px 12px;
  font-size:12px; font-weight:600; color:var(--c-ink); cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:transform .15s, box-shadow .15s;
}
.mt-back-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.mt-back-btn svg{ width:15px; height:15px; }
.mt-branch-label{
  position:absolute; top:22px; right:22px; z-index:5; background:var(--c-dark); color:#fff;
  font-size:12px; font-weight:600; padding:7px 13px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.2);
}

/* ---- legend ---- */
.mt-legend{ display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--c-surface-2); flex-wrap:wrap; }
.mt-legend-label{ font-size:11px; color:var(--c-text-2); white-space:nowrap; }
.mt-legend-bar{ flex:1; min-width:80px; max-width:200px; height:8px; border-radius:4px; }
.mt-legend-zone{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--c-ink); }
.mt-legend-zone i{ width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ---- side list ---- */
.mt-list-title{ font-size:14px; font-weight:700; color:var(--c-ink); margin-bottom:10px; }
.mt-list-body{ flex:1; overflow-y:auto; min-height:0; max-height:520px; }
.mt-list-row{
  display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; margin-bottom:3px;
  cursor:pointer; transition:background .18s, transform .18s;
}
.mt-list-row:hover, .mt-list-row.hover-sync{ background:var(--c-hover-accent); transform:translateX(2px); }
.mt-list-row.sel{ background:var(--c-hover-accent); outline:1.5px solid var(--c-brand); }
.mt-list-rank{ font-size:10px; color:var(--c-text-3); width:16px; text-align:right; flex-shrink:0; }
.mt-list-name{ flex:1; font-size:12px; color:var(--c-ink); }
.mt-list-sub{ font-size:10px; color:var(--c-text-3); flex-shrink:0; }
.mt-list-val{ font-size:12px; font-weight:700; color:var(--c-ink); flex-shrink:0; }

/* ---- selected-region panel ---- */
.mt-sel-panel{ background:var(--c-hover-accent); border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.mt-sel-title{ font-size:13px; font-weight:700; color:var(--c-ink); margin-bottom:6px; }
.mt-sel-row{ display:flex; justify-content:space-between; font-size:11px; color:var(--c-text-2); }
.mt-sel-row b{ color:var(--c-ink); font-size:12px; }

/* ---- mobile preview card (tap-to-select, explicit open button) ---- */
.mt-preview-card{
  margin-top:12px; background:var(--c-white); border:1.5px solid var(--c-border); border-radius:10px;
  padding:12px 14px; animation:mtFadeIn .2s ease;
}
.mt-preview-title{ font-size:14px; font-weight:700; color:var(--c-ink); margin-bottom:6px; }
.mt-preview-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--c-text-2); padding:2px 0; }
.mt-preview-row b{ color:var(--c-ink); }
.mt-open-btn{
  width:100%; margin-top:10px; padding:10px; border:none; border-radius:8px; background:var(--c-brand);
  color:#fff; font-size:13px; font-weight:700; cursor:pointer; transition:background .15s;
}
.mt-open-btn:hover{ background:var(--c-brand-d); }
@keyframes mtFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ---- mobile Карта|Список toggle ---- */
.mt-mobile-toggle{ display:flex; gap:6px; margin:10px 0; }
.mt-mobile-toggle button{
  flex:1; padding:9px; border-radius:8px; border:1.5px solid var(--c-border); background:var(--c-white);
  font-size:12px; font-weight:600; color:var(--c-text-2); cursor:pointer;
}
.mt-mobile-toggle button.active{ background:var(--c-dark); border-color:var(--c-dark); color:#fff; }

/* ---- validation error card ---- */
.mt-error-card{ border:1.5px solid #e05050; padding:20px; }
.mt-error-title{ font-size:15px; font-weight:700; color:#e05050; margin-bottom:10px; }
.mt-error-list{ margin:0; padding-left:20px; font-size:13px; color:var(--c-ink); line-height:1.7; }

/* ================================================================
   Responsive — mobile (≤767.98px, same threshold as the rest of the app)
   ================================================================ */
@media (max-width:767.98px){
  .mt-grid{ grid-template-columns:1fr; gap:12px; }
  .mt-map-wrap{ min-height:260px; }
  .mt-back-btn{ top:12px; left:12px; padding:6px 10px; font-size:11px; }
  .mt-branch-label{ top:12px; right:12px; font-size:11px; padding:6px 10px; }
  .mt-list-body{ max-height:360px; }
}