/* OctoCharts - style.css */
:root {
  --bg: #0e0f14;
  --bg-panel: #131722;
  --bg-elevated: #1a1e29;
  --border: #2a2e39;
  --text: #d1d4dc;
  --text-dim: #868993;
  --accent: #2962ff;
  --accent-hover: #4577ff;
  --danger: #f23645;
  --pump: #26a69a;
  --dump: #ef5350;
}

body.light-theme {
  --bg: #f5f6f8;
  --bg-panel: #ffffff;
  --bg-elevated: #ffffff;
  --border: #e0e3eb;
  --text: #131722;
  --text-dim: #6a6d78;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

button {
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
}
button:hover { border-color: var(--accent); }
button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.hidden { display: none !important; }

/* ---------------- Header / toolbar ---------------- */
#app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.tb-field {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.tb-field select, .tb-field input {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  width: 68px;
}

#menu-toggle { display: none; }

/* ---------------- Main layout ---------------- */
/* --content-h is set from JS to window.innerHeight minus the header's
   real measured height, so this never grows past the viewport and
   produces a second, page-level scrollbar alongside the grid's own
   internal one. calc(100vh - 52px) is only a fallback for the brief
   moment before JS runs. */
html, body { overflow: hidden; }
#app-main {
  display: flex;
  align-items: stretch;
  max-height: var(--content-h, calc(100vh - 52px));
  overflow: hidden;
}

.chart-grid {
  flex: 1;
  display: grid;
  gap: 4px;
  padding: 4px;
  align-content: start;
}

.empty-grid-hint, .tv-load-warning {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-dim);
  padding: 40px;
}

.chart-cell {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-panel);
  min-width: 0;
}
.chart-cell.active { border-color: var(--accent); }
.chart-cell.pinned { border-color: #ffb300; }
.chart-cell.dragging { opacity: 0.4; }
.chart-cell.drop-target { outline: 2px dashed var(--accent); }

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.chart-symbol {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-actions { display: flex; gap: 2px; flex-shrink: 0; }
.icon-btn {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  border: none;
}
.icon-btn:hover { background: var(--border); border-radius: 3px; }

.drag-handle {
  padding: 3px 6px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-elevated);
  text-align: center;
  cursor: grab;
}

.chart-body { flex: 1; min-height: 0; }

body.small-buttons button { padding: 3px 8px; font-size: 11px; }

/* ---------------- Side panels (Rapid Movers / Profiles) ---------------- */
.side-panel {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  padding: 12px;
  overflow-y: auto;
  max-height: var(--content-h, calc(100vh - 52px));
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.panel-header h3 { margin: 0; font-size: 14px; }
.panel-note { font-size: 11px; color: var(--text-dim); margin: 0 0 10px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.field input, .field select {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
}
.field.hidden { display: none; }

.checkline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}

.panel-actions { display: flex; gap: 8px; margin: 8px 0; }
.panel-actions input[type=text] {
  flex: 1;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
}
.panel-status { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }

.movers-list, .profiles-list { display: flex; flex-direction: column; gap: 4px; }
.movers-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--bg-elevated);
  font-size: 12px;
}
.movers-row.pump .mv-pct { color: var(--pump); }
.movers-row.dump .mv-pct { color: var(--dump); }
.movers-empty { color: var(--text-dim); font-size: 12px; padding: 8px 0; }

.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  border-radius: 4px;
  background: var(--bg-elevated);
  flex-wrap: wrap;
  gap: 4px;
}
.profile-name { font-size: 13px; font-weight: 600; }
.profile-actions { display: flex; gap: 6px; }

.text-btn {
  background: none;
  border: none;
  color: var(--accent);
  padding: 2px 4px;
  font-size: 12px;
  text-decoration: none;
}
.text-btn:hover { text-decoration: underline; }

.primary-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.primary-btn:hover { background: var(--accent-hover); }
.secondary-btn { background: var(--bg-elevated); }
.danger-btn { background: transparent; color: var(--danger); border-color: var(--danger); }
.danger-btn:hover { background: var(--danger); color: #fff; }

/* ---------------- Modals ---------------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 15px; }
.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  padding: 2px 6px;
}
.modal-body { padding: 16px; overflow-y: auto; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.hint { font-size: 12px; color: var(--text-dim); margin-top: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
}
.chip-btn:hover { border-color: var(--accent); }

.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px 10px;
  max-height: 260px;
  overflow-y: auto;
}
.checklist.disabled { opacity: 0.4; pointer-events: none; }
.checklist-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }

.radio-row { display: flex; gap: 16px; margin-bottom: 10px; font-size: 13px; }

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: 6px;
  min-height: 64px;
}
.theme-swatch:hover { border-color: var(--accent); }
.theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.theme-dots { display: flex; gap: 4px; }
.theme-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.theme-label {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 3px;
  /* Solid backdrop (rather than relying on text color alone) keeps the
     label readable regardless of how light or dark the theme's own
     background swatch color is (e.g. Classic Light is near-white). */
}

.share-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  #menu-toggle { display: inline-block; }
  .toolbar {
    display: none;
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    z-index: 60;
  }
  .toolbar.open { display: flex; }
  .tb-field select, .tb-field input { width: 100%; }

  /* Stacked mobile layout: let the whole page scroll as one unit instead
     of nesting independently-scrolling regions, which is simpler to use
     on a touch screen than the desktop's split grid/panel scrolling. */
  #app-main { flex-direction: column; max-height: none; overflow-y: auto; }
  .side-panel { width: 100%; max-height: 60vh; border-left: none; border-top: 1px solid var(--border); }
}