/* ---------- Global layout: full-height app, three stacked bands ---------- */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f4f4f1;
}


body {
  display: flex;
  flex-direction: column;
}

/* ---------- Toolbar ---------- */

#toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: #ffffff;
  color: #1a1a1a;
  border-bottom: 1px solid #dedede;
  flex: 0 0 auto;
  font-family: inherit;
}

#app-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.4px;
  margin-right: 6px;
  white-space: nowrap;
}

.toolbar-group {
  display: flex;
  gap: 6px;
}

#actions {
  margin-left: auto;   /* pushes Calculate/export group to the right edge */
}

.tool-btn {
  padding: 6px 12px;
  border: 1px solid #c9a85c;
  border-radius: 3px;
  background: #ffd797;
  color: #000;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

.tool-btn:hover {
  background: #f5c97a;
}

.tool-btn.primary {
  background: #c1c10c;
  border-color: #a0a008;
  color: #000;
  font-weight: 700;
}

.tool-btn.primary:hover {
  background: #aaaa0a;
}

#btn-sensitivity {
  background: #c1840c;
  color: #000;
  border-color: #a06a08;
}

#btn-sensitivity:hover {
  background: #a87009;
}

#btn-select {
  background: #c8ccd8;
  color: #000;
  border-color: #a8acc0;
}

#btn-select:hover {
  background: #b4b8cc;
}

#btn-select.active {
  background: #6870a0;
  border-color: #505880;
  color: #fff;
}

#btn-connect {
  background: #8ecfc8;
  color: #000;
  border-color: #60b0a8;
}

#btn-connect:hover {
  background: #70bfb8;
}

#btn-connect.active {
  background: #3d9990;
  border-color: #2d7870;
  color: #fff;
}

#btn-arrange,
#btn-fit {
  background: #a8c8e8;
  color: #000;
  border-color: #7aaac8;
}

#btn-arrange:hover,
#btn-fit:hover {
  background: #8fb8dc;
}

#btn-delete {
  background: #c14c0c;
  color: #000;
  border-color: #9e3c08;
}

#btn-delete:hover {
  background: #a83f0a;
}

#btn-export-png,
#btn-export-csv,
#btn-export-json,
#btn-import-json {
  background: #a8d4b0;
  color: #000;
  border-color: #7ab888;
}

#btn-export-png:hover,
#btn-export-csv:hover,
#btn-export-json:hover,
#btn-import-json:hover {
  background: #8fc49a;
}

/* Visual state for mode toggles (Connect and Sensitivity use this) */
.tool-btn.active {
  background: #a2682c;
  border-color: #c08038;
}

/* ---------- Sensitivity settings strip ---------- */

#sensitivity-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  background: #efefeb;
  border-bottom: 1px solid #dcdcd8;
  flex: 0 0 auto;
  font-size: 13px;
}

#sensitivity-bar[hidden] {
  display: none;
}

#sensitivity-bar label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #555558;
}

#sensitivity-bar select,
#sensitivity-bar input {
  padding: 4px 6px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
  background: #ffffff;
  color: #1a1a1a;
}

#sensitivity-bar input {
  width: 80px;
}

#sens-hint {
  color: #888888;
  font-size: 12px;
  font-style: italic;
}

/* ---------- Workspace: canvas + properties panel ---------- */

#workspace {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;   /* lets the canvas shrink properly inside flexbox */
}

#canvas {
  flex: 1 1 auto;
  background: #f8f8f6;
  position: relative;
  /* subtle grid so empty canvas reads as a drawing surface */
  background-image:
    linear-gradient(#e4e4e0 1px, transparent 1px),
    linear-gradient(90deg, #e4e4e0 1px, transparent 1px);
  background-size: 24px 24px;
}

#canvas-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

#canvas-hint span {
  font-size: 13px;
  color: #aaaaaa;
  background: rgba(248,248,246,0.85);
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px dashed #cccccc;
}

#canvas-hint.hidden {
  display: none;
}

#properties {
  flex: 0 0 280px;
  border-left: 1px solid #dcdcd8;
  background: #f5f5f2;
  padding: 14px;
  overflow-y: auto;
}

#properties h2 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #000;
}

#prop-empty {
  color: #888888;
}

#prop-form label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  color: #555558;
}

#prop-form input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
  background: #ffffff;
  color: #1a1a1a;
}

#prop-type-note {
  font-size: 12px;
  color: #888888;
}

/* ---------- Structure outline ---------- */

#structure {
  margin-top: 18px;
  border-top: 1px solid #dcdcd8;
  padding-top: 10px;
}

.structure-empty {
  color: #888888;
  font-size: 13px;
}

#structure-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 16px;
}

#structure-tree > ul {
  padding-left: 0;
}

#structure-tree li {
  margin: 2px 0;
}

.struct-item {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12.5px;
  cursor: pointer;
}

.struct-item:hover {
  filter: brightness(0.94);
  background: #efefeb;
}

.struct-gate {
  font-weight: bold;
}

.struct-section {
  margin: 10px 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555558;
}

.struct-section.warn {
  color: #a33a2a;
}

.struct-note {
  color: #888888;
  font-style: italic;
}

/* ---------- Results bar ---------- */

#results {
  flex: 0 0 auto;
  max-height: 38vh;
  overflow-y: auto;
  border-top: 1px solid #dcdcd8;
  background: #f5f5f2;
  padding: 10px 14px;
}

.results-placeholder {
  color: #888888;
}

#results-summary {
  font-size: 14px;
  margin-bottom: 8px;
}

/* Top-event summary: title + cards */

.summary-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}

.summary-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.summary-card {
  background: #ffffff;
  border: 1px solid #dcdcd8;
  border-radius: 3px;
  padding: 8px 14px;
  min-width: 150px;
}

.summary-card .value {
  font-size: 18px;
  font-weight: 700;
}

.summary-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555558;
  margin-top: 2px;
}

.summary-card.primary {
  border-color: #4a5d3a;
  border-width: 2px;
}

#results-detail {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

#results-detail section {
  flex: 1 1 50%;
}

#results-detail h3 {
  margin: 6px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #000;
}

.results-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.results-table-wrap th,
.results-table-wrap td {
  border: 1px solid #dcdcd8;
  padding: 4px 8px;
  text-align: left;
}

.results-table-wrap th {
  background: #efefeb;
}

/* ---------- Sensitivity output ---------- */

#sensitivity-output h3 {
  margin: 6px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555558;
}

.sens-chart {
  background: #ffffff;
  border: 1px solid #dcdcd8;
  border-radius: 3px;
  padding: 8px;
  margin: 8px 0;
  max-width: 720px;
}

.sens-flex {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.sens-flex > div {
  flex: 1 1 360px;
}

/* ---------- Error display in the results bar ---------- */

.results-errors {
  color: #a33a2a;
  margin: 0;
  padding-left: 20px;
}

.results-errors li {
  margin-bottom: 2px;
}
/* ---------- Results collapse toggle ---------- */

#results {
  position: relative;
}

.results-toggle {
  position: absolute;
  top: 8px;
  right: 14px;
  padding: 3px 10px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background: #ffffff;
  color: #555558;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}

.results-toggle:hover {
  background: #efefeb;
}

#results.results-invisible {
  display: none;
}

/* Collapsed: hide all content, keep only the thin strip + button. */
#results.collapsed {
  padding-top: 6px;
  padding-bottom: 6px;
  min-height: 34px;
}

#results.collapsed #results-summary,
#results.collapsed #results-detail,
#results.collapsed #sensitivity-output {
  display: none;
}