/*
 * Histriphy Studio React shell.
 *
 * 21.0.10 intentionally reuses the proven Classic Studio visual language from
 * assets/css/builder.css + builder-v46.css.  This file only contains React-only
 * glue and the verified large-geometry edit overlay.  The goal is that the
 * engine migration is visually invisible to the user.
 */

.histriphy-studio-react {
  margin: 0;
}

.histriphy-studio-fatal {
  margin: 24px auto;
  max-width: 520px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--bad-1, #ef6b6b) 45%, transparent);
  border-radius: 8px;
  background: var(--n3, #151513);
  color: var(--ink, #ece9e2);
  font: 500 .78rem/1.5 var(--font-body, system-ui, sans-serif);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.histriphy-studio-fatal button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border, #3a372f);
  border-radius: 7px;
  background: var(--gold, #efb443);
  color: #15120d;
  font: 700 .75rem/1 var(--font-body, system-ui, sans-serif);
  cursor: pointer;
}

/* React uses the same buttons as Classic but native disabled states need a
   predictable visual treatment because there is no legacy JS toggling classes. */
.histriphy-studio-react button:disabled,
.histriphy-studio-react select:disabled,
.histriphy-studio-react input:disabled {
  cursor: not-allowed;
}
.histriphy-studio-react .geo-builder-operation-grid > button:disabled,
.histriphy-studio-react .geo-builder-operation-button:disabled,
.histriphy-studio-react .geo-builder-layer-actions button:disabled,
.histriphy-studio-react .geo-builder-top-button:disabled,
.histriphy-studio-react .geo-builder-export-button:disabled,
.histriphy-studio-react .geo-builder-submit-button:disabled {
  opacity: .38;
}

/* The React root owns the same fixed draft card; do not allow the old React
   preview CSS to turn it into an in-map rectangle. */
.histriphy-studio-react + .geo-builder-draft-banner,
.histriphy-studio-react .geo-builder-draft-banner {
  box-sizing: border-box;
}

/* Make the React-generated basemap panel obey the Classic hidden/open model. */
.histriphy-studio-react .geo-builder-basemap-panel:not(.is-open) {
  pointer-events: none;
}

/* Background metrics are deliberately non-blocking.  Keep placeholder values
   stable so the inspector does not jump while the worker returns. */
.histriphy-studio-react .geo-builder-inspector-grid strong,
.histriphy-studio-react .geo-builder-layer-name span {
  font-variant-numeric: tabular-nums;
}

/* 21.0.8/21.0.9 Large Geometry Edit — verified performance path.  The vertex
   overlay is a single canvas ABOVE the normal Leaflet polygon and below map
   controls.  It never receives pointer events and never restyles the polygon. */
.geo-builder-map .histriphy-edit-vertex-overlay {
  pointer-events: none !important;
  z-index: 650;
}
.geo-builder-map .geo-builder-large-edit-preview {
  pointer-events: none !important;
  vector-effect: non-scaling-stroke;
  stroke: var(--gold-soft, #f0c264) !important;
  stroke-width: 1.75px !important;
  stroke-dasharray: 5 6 !important;
  stroke-linecap: round;
  fill: none !important;
}
:root[data-theme="light"] .geo-builder-map .geo-builder-large-edit-preview {
  stroke: #9a6818 !important;
}

/* ========================================================================== 
   21.0.12 — professional right workspace panel
   --------------------------------------------------------------------------
   The React engine is stable; this pass makes the Layers / Operations /
   Project console behave like a real editor panel instead of a tall stack of
   disconnected controls.  No map or geometry rendering rules live here.
   ========================================================================== */
.histriphy-studio-react .geo-builder-sidebar {
  min-width: 0;
  overflow: hidden;
}
.histriphy-studio-react .geo-builder-tabs {
  flex: 0 0 auto;
}
.histriphy-studio-react .geo-builder-tab-panel {
  min-height: 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.histriphy-studio-react .geo-builder-tab-panel[data-builder-panel="layers"].is-active {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.histriphy-studio-react .geo-builder-layer-list {
  min-height: 0;
  max-height: min(34vh, 340px);
  flex: 0 1 auto;
  scrollbar-gutter: stable;
}
.histriphy-studio-react .geo-builder-layer-list.is-empty {
  min-height: 150px;
}
.histriphy-studio-react .geo-builder-layer-list.is-populated {
  min-height: 0;
}
.histriphy-studio-react .geo-builder-layer-actions {
  flex: 0 0 auto;
  margin-top: 10px;
}
.histriphy-studio-react .geo-builder-inspector {
  flex: 0 0 auto;
  margin-top: 14px;
  padding-top: 14px;
}
.histriphy-studio-react .geo-builder-inspector-grid > div {
  min-width: 0;
}
.histriphy-studio-react .geo-builder-inspector-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.histriphy-studio-react .geo-builder-layer-row {
  min-height: 52px;
}
.histriphy-studio-react .geo-builder-layer-row .geo-builder-layer-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A 300px panel is a much better balance at iPad/compact-desktop widths than
   the old 260px React default.  The existing separator remains draggable and
   can still hide the panel entirely when the map needs maximum room. */
@media (min-width: 821px) and (max-width: 1100px) {
  .histriphy-studio-react { --side: 300px; }
  .histriphy-studio-react .geo-builder-tab-panel { padding-inline: 14px !important; }
  .histriphy-studio-react .geo-builder-layer-list { max-height: min(31vh, 300px); }
}
@media (min-width: 700px) and (max-width: 820px) {
  .histriphy-studio-react { --side: 260px; }
  .histriphy-studio-react .geo-builder-layer-list { max-height: min(28vh, 250px); }
  .histriphy-studio-react .geo-builder-inspector-grid > div { min-height: 54px; padding: 9px; }
}
@media (min-width: 1101px) {
  .histriphy-studio-react { --side: 330px; }
  .histriphy-studio-react .geo-builder-layer-list { max-height: min(38vh, 420px); }
}


/* 21.3.18: transient Country Select overlay only. */
.histriphy-country-select-canvas{position:absolute;inset:0;z-index:450;pointer-events:none}
.histriphy-country-select-tooltip{position:absolute;z-index:610;pointer-events:none;padding:5px 8px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--border);border-radius:5px;background:var(--bg-card);color:var(--ink);font:600 11px/1.3 var(--font-body);box-shadow:0 3px 10px rgba(0,0,0,.14)}
.histriphy-country-select-tooltip[hidden]{display:none}
.histriphy-country-select-active{cursor:crosshair}
.histriphy-country-select-hint{pointer-events:none;padding-right:12px!important}