/* ============================================================
   Charts – three-panel shell (inside the slides-style .app rail)
   ============================================================ */

.charts-app-body {
  height: 100vh;
  overflow: hidden;
}

/* The .app and .rail styles come from slides.css.
   We override the active-item accent to charts color. */
.rail-item[data-active="true"]::before {
  background: var(--acc-charts) !important;
}

/* ── Shell: two columns (center + right inspector) inside .main ── */
.charts-shell {
  display: grid;
  grid-template-columns: 1fr 264px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

/* ── Panel base ── */
.charts-panel {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* ── Center panel ── */
.charts-panel-center {
  background: var(--bg, #0d0f14);
  padding: 20px;
  gap: 16px;
}

/* Editable chart name — header style */
.cc-chart-name-input {
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg, #eef0f4);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  min-width: 120px;
  flex: 1;
  line-height: 1.2;
  /* looks like text until interacted with */
  caret-color: var(--acc-charts, #6366f1);
}
.cc-chart-name-input::placeholder {
  color: var(--fg-dim, #3a3f50);
}
/* subtle underline only on focus */
.cc-chart-name-input:focus {
  border-bottom: 2px solid var(--acc-charts, #6366f1);
  padding-bottom: 2px;
}

/* Export dropdown */
.cc-export-wrap {
  position: relative;
}
.cc-export-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cc-export-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  background: var(--bg-elev, #14171f);
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  flex-direction: column;
  gap: 1px;
}
/* hidden attribute is overridden by display:flex — use this instead */
.cc-export-menu:not([hidden]) {
  display: flex;
}
.cc-export-item {
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  padding: 7px 10px;
  border-radius: 5px;
  border: none;
  background: none;
  color: var(--fg-mute, #9aa3b2);
  cursor: pointer;
  transition: background 100ms, color 100ms;
  white-space: nowrap;
}
.cc-export-item:hover {
  background: var(--hover, rgba(255,255,255,0.06));
  color: var(--fg, #eef0f4);
}
.cc-export-divider {
  height: 1px;
  background: var(--line, rgba(255,255,255,0.07));
  margin: 3px 4px;
}

.cc-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 6px;
  align-items: center;
}

.cc-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cc-project-select {
  font-size: 12px;
  padding: 4px 8px;
}

.cc-date-input {
  font-size: 12px;
  padding: 4px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg-mute);
  cursor: pointer;
  outline: none;
}
.cc-date-input:focus { border-color: var(--accent); color: var(--fg); }

.cc-chart-wrap {
  height: 280px;
  position: relative;
}

/* ── Library section (bottom of center) ── */
.cc-library-section {
  padding-top: 4px;
}

.cc-library-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cc-library-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-mute, #5c6474);
  flex: 1;
}

.cc-load-select {
  font-size: 12px;
  padding: 4px 8px;
  max-width: 200px;
}

/* Override grid layout for library tiles — use wrapping flex in center panel */
.charts-panel-center .chart-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* ── Right panel: tabbed inspector ── */

.ci-panel {
  padding: 0 !important;
  overflow: hidden;
}

.ci-tabs {
  display: flex;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.07));
  flex-shrink: 0;
}
.ci-tab {
  flex: 1;
  padding: 12px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-mute, #5c6474);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: color 120ms, border-color 120ms;
}
.ci-tab:hover { color: var(--fg, #eef0f4); }
.ci-tab.active {
  color: var(--fg, #eef0f4);
  border-bottom-color: var(--acc-charts, #6366f1);
}

.ci-pane {
  display: none;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.ci-pane.active { display: flex; }

/* Comments pane */
#ci-pane-comments {
  gap: 0;
  padding: 0;
}

.cc-notes-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-notes-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-mute, #5c6474);
  margin: 0;
}

.cc-note-card {
  background: var(--bg-elev, #14171f);
  border: 1px solid var(--line, rgba(255,255,255,0.07));
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-note-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc-charts, #6366f1), #3b82f6);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cc-note-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg, #eef0f4);
  flex: 1;
}

.cc-note-time {
  font-size: 10.5px;
  color: var(--fg-dim, #3a3f50);
}

.cc-note-delete {
  background: none;
  border: none;
  color: var(--fg-dim, #3a3f50);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
  transition: color 100ms, background 100ms;
}
.cc-note-delete:hover {
  color: #f87171;
  background: rgba(248,113,113,0.1);
}

.cc-note-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-mute, #9aa3b2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Composer */
.cc-notes-composer {
  flex-shrink: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--line, rgba(255,255,255,0.07));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-notes-input {
  font: inherit;
  font-size: 12.5px;
  color: var(--fg, #eef0f4);
  background: var(--bg-elev, #14171f);
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
  resize: none;
  line-height: 1.5;
  transition: border-color 150ms;
}
.cc-notes-input:focus {
  border-color: var(--acc-charts, #6366f1);
}
.cc-notes-input::placeholder {
  color: var(--fg-dim, #3a3f50);
}

.cc-notes-submit {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  align-self: flex-end;
  padding: 5px 16px;
  border-radius: 6px;
  border: none;
  background: var(--acc-charts, #6366f1);
  color: #fff;
  cursor: pointer;
  transition: opacity 150ms;
}
.cc-notes-submit:hover { opacity: 0.85; }

/* ── Right panel: inspector ── */
.charts-panel-right {
  background: var(--bg-soft, #14171f);
  border-left: 1px solid var(--line, rgba(255,255,255,0.07));
  padding: 16px;
  gap: 0;
}

.insp-section {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.insp-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.insp-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-mute, #5c6474);
  margin-bottom: 10px;
}

.insp-select {
  width: 100%;
  font-size: 12.5px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

.insp-stack-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fg-mute, #9aa3b2);
  cursor: pointer;
  user-select: none;
  margin-top: 4px;
}

.insp-field {
  margin-bottom: 10px;
}

.insp-field:last-child {
  margin-bottom: 0;
}

.insp-field-label {
  display: block;
  font-size: 11px;
  color: var(--fg-mute, #5c6474);
  margin-bottom: 4px;
}

.insp-colors {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: none;
}

.insp-colors .color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.charts-panel-right .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* cp-select used on small selects in toolbar */
.cp-select {
  font: inherit;
  font-size: 12px;
  color: var(--text, #eef0f4);
  background: var(--surface-2, #1b1f2a);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 5px 8px;
  outline: none;
  cursor: pointer;
}
.cp-select:focus {
  border-color: var(--acc-charts, #6366f1);
}

/* ── Chart tile overrides ── */

/* Footer: stack name above actions */
.charts-panel-center .chart-tile-footer {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  align-items: stretch;
}

.charts-panel-center .chart-tile-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg, #eef0f4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: none;
  width: 100%;
}

.charts-panel-center .chart-tile-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  opacity: 1;
  flex-wrap: nowrap;
}

/* Compact tile action buttons */
.chart-tile-btn {
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--fg-mute, #9aa3b2);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  white-space: nowrap;
}
.chart-tile-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--fg, #eef0f4);
}
.chart-tile-btn-del:hover {
  background: rgba(248,113,113,0.12);
  color: #f87171;
  border-color: rgba(248,113,113,0.3);
}

/* Compact team selector */
.chart-tile-team-sel {
  font: inherit;
  font-size: 11px;
  color: var(--fg-mute, #9aa3b2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 3px 6px;
  outline: none;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-tile-team-sel:focus {
  border-color: var(--acc-charts, #6366f1);
}

/* Responsive */
@media (max-width: 720px) {
  .charts-shell {
    grid-template-columns: 1fr;
  }
  .charts-panel-right {
    display: none;
  }
}

@media (max-width: 700px) {
  /* Layout */
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }

  /* Chart toolbar: wrap actions */
  .chart-toolbar { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .cc-chart-name-input { width: 100%; min-width: 0; }
  .toolbar-controls { flex-wrap: wrap; gap: 6px; }

  /* Tighter panel padding */
  .charts-panel-center { padding: 0; }

  /* Chart library grid: single column on very narrow */
  .chart-library { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Bottom padding for nav bar */
  body::after { content: ''; display: block; height: 60px; }
}

/* Bottom nav (mobile only) */
.mobile-bottom-nav { display: none; }
@media (max-width: 700px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: var(--bg-elev);
    border-top: 1px solid var(--line);
    z-index: 100;
    align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 12px; gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--fg-mute);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radius-xs, 6px);
    transition: color .15s;
    min-width: 56px; flex-shrink: 0;
    text-align: center;
  }
  .mobile-nav-item[data-active] { color: var(--acc-charts, #f97316); }
  .mobile-nav-item svg { flex-shrink: 0; }
}