/* assets/css/app.css — page layout */

:root {
  --bg: #f7f7fa;
  --panel: #ffffff;
  --border: #e2e2ea;
  --ink: #1c1c20;
  --muted: #6e6e78;
  --accent: #0072B2;
  --accent-hover: #005a8e;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
}

.topbar {
  display: flex; align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  height: 44px;
}
.brand { font-weight: 600; font-size: 15px; }
.dataset-name { color: var(--muted); flex: 1; font-family: ui-monospace, monospace; font-size: 12px; }

.toolbar { display: flex; gap: 8px; align-items: center; }
.btn, .toolbar details > summary, .menu a, button {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px; line-height: 1.4; cursor: pointer; text-decoration: none;
  vertical-align: middle;
}
.btn:hover, button:hover, .toolbar details > summary:hover { border-color: var(--accent); }

.menu { position: relative; }
.menu > ul {
  position: absolute; top: 100%; right: 0; z-index: 10;
  list-style: none; margin: 4px 0 0; padding: 4px 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  min-width: 180px;
}
.menu > ul li a {
  display: block; padding: 6px 14px; border: 0; border-radius: 0; font-size: 12px;
}
.menu > ul li a:hover { background: var(--bg); }
.menu > ul li.menu-sep {
  height: 1px; background: var(--border); margin: 4px 0;
  padding: 0; border: 0; list-style: none;
  font-size: 0; line-height: 0;
  pointer-events: none;
}

.layout {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  height: calc(100vh - 44px);
}

.panel {
  background: var(--panel);
  padding: 14px 14px 30px;
  overflow-y: auto;
}
.panel.left  { border-right: 1px solid var(--border); }
.panel.right { border-left: 1px solid var(--border); }

h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
     color: var(--muted); margin: 0 0 8px; font-weight: 600; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
     color: var(--muted); margin: 16px 0 6px; font-weight: 600; }

.kv { display: flex; justify-content: space-between; padding: 2px 0; }
.kv .k { color: var(--muted); }
.kv .v { font-family: ui-monospace, monospace; }

label { display: block; margin: 4px 0; }
label.row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 6px;
}
label.row > span:first-child { color: var(--ink); }
label.row > .num {
  font-family: ui-monospace, monospace; font-size: 11px;
  min-width: 30px; text-align: right; color: var(--muted);
}
input[type=number], input[type=text], select {
  width: 100%; padding: 3px 6px;
  border: 1px solid var(--border); border-radius: 3px;
  font-size: 12px; background: white;
}
input[type=range] { width: 100px; }
input[type=checkbox] { margin-right: 4px; }

.hint { color: var(--muted); font-size: 11px; margin: 2px 0 6px; }

.preview-wrap { max-height: 220px; overflow: auto;
                border: 1px solid var(--border); border-radius: 3px; }
#preview { border-collapse: collapse; font-size: 11px; width: 100%; }
#preview th, #preview td {
  padding: 2px 6px; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
#preview th { background: var(--bg); position: sticky; top: 0; }

.canvas {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  padding: 16px; overflow: auto;
  background: var(--bg);
}
#plotHost { display: block; background: white;
            border: 1px solid var(--border); border-radius: 4px;
            width: max-content; max-width: 100%; }
.status { color: var(--muted); font-size: 11px; padding: 6px 2px 0; }

.stats-block { margin-top: 18px; background: var(--panel);
               border: 1px solid var(--border); border-radius: 4px;
               padding: 12px 14px; }
.stats-block h2 { margin-top: 0; }

.data-block { margin-top: 18px; background: var(--panel);
              border: 1px solid var(--border); border-radius: 4px;
              padding: 12px 14px; }
.data-block-header { display: flex; align-items: center;
                     justify-content: space-between; gap: 12px;
                     margin-bottom: 8px; flex-wrap: wrap; }
.data-block h2 { margin: 0; }
.data-block-actions { display: flex; gap: 8px; align-items: center; }
.data-block .hint { color: var(--muted); font-size: 11px; }
.data-wrap { max-height: 360px; overflow: auto;
             border: 1px solid var(--border); border-radius: 3px; }
#dataTable { border-collapse: collapse; font-size: 12px; width: 100%; }
#dataTable th, #dataTable td {
  padding: 0; margin: 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  min-width: 80px; max-width: 240px;
}
#dataTable th:last-child, #dataTable td:last-child { border-right: 0; }
#dataTable th {
  background: var(--bg); position: sticky; top: 0;
  font-weight: 600; text-align: left;
  color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
#dataTable th .coltype { font-weight: 400; color: #999; font-size: 10px;
                         margin-left: 4px; }
#dataTable th.sortable { cursor: pointer; user-select: none; }
#dataTable th.sortable:hover { background: #f0f4f8; }
#dataTable th .sort-ind {
  font-size: 10px; color: #999; margin-left: 4px; display: inline-block;
  min-width: 10px; text-align: center;
}
#dataTable th.sort-active .sort-ind { color: var(--accent); }
#dataTable td {
  font-family: ui-monospace, "SF Mono", Menlo, consolas, monospace;
}
#dataTable td[contenteditable], #dataTable th[contenteditable] {
  padding: 4px 8px; min-height: 22px;
  outline: none; cursor: text;
}
#dataTable td:focus, #dataTable th:focus {
  background: #fffbe8;
  box-shadow: inset 0 0 0 2px var(--accent);
}
#dataTable td.numeric { text-align: right; }
#dataTable .row-actions {
  width: 44px; min-width: 44px; max-width: 44px;
  border-right: 0; padding: 0;
  background: var(--bg); position: sticky; left: 0;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
#dataTable .row-actions input[type=checkbox] {
  margin: 0; cursor: pointer;
}
#dataTable .row-actions button {
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted); padding: 0 4px; font-size: 14px;
  border-radius: 0; line-height: 1;
}
#dataTable .row-actions button:hover { color: #c00; }
#dataTable tr.row-selected td { background: #eef4ff; }
#dataTable tr.row-selected .row-actions { background: #e3edff; }

.tooltip {
  position: fixed; z-index: 100;
  pointer-events: none;
  background: rgba(28, 28, 32, 0.95);
  color: #fff;
  padding: 6px 9px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
  font-family: ui-monospace, "SF Mono", Menlo, consolas, monospace;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  max-width: 320px;
}
.tooltip[hidden] { display: none; }
.tooltip .ttip-title { color: #9ad9ff; font-weight: 600; }
.tooltip .ttip-row   { display: flex; justify-content: space-between; gap: 12px; }
.tooltip .ttip-key   { color: #c8c8d0; }

.stats-wrap { max-height: 220px; overflow: auto;
              border: 1px solid var(--border); border-radius: 3px; }
#statsTable { border-collapse: collapse; font-size: 11px; width: 100%; }
#statsTable th, #statsTable td {
  padding: 2px 6px; text-align: right;
  border-bottom: 1px solid var(--border); font-family: ui-monospace, monospace;
}
#statsTable th { background: var(--bg); position: sticky; top: 0; }
#statsTable th:first-child, #statsTable td:first-child { text-align: left; }

dialog {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 18px; min-width: 320px;
  background: var(--panel); color: var(--ink);
}
dialog::backdrop { background: rgba(0,0,0,0.3); }
dialog label { display: block; margin: 8px 0; }
dialog textarea {
  width: 100%; min-height: 200px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  border: 1px solid var(--border); border-radius: 3px;
  padding: 6px;
  resize: vertical;
}
dialog p.hint { color: var(--muted); font-size: 11px; margin: 4px 0 8px; }
dialog menu { display: flex; gap: 8px; justify-content: flex-end; margin: 12px 0 0; padding: 0; }