/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* Copyright (C) 2024-2026 Philippe Naveau — contact@perfshop.io */
/* PerfShop — Scripts UI — https://perfshop.io */

/**
 * components.css — Reusable atomic widgets.
 *
 * Loaded AFTER layout.css. Holds the runner pill, drop zone, sidebar
 * tree nodes + drag-and-drop highlight, tab bar, result bar + status
 * badges, artifact links, commits + runs rows.
 */

/* ── Runner pill (header status) ──────────────────────────────────── */
.runner-pill {
  display:       flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 10px;
  border-radius: 20px;
  font-family:   var(--mono);
  font-size:     .7rem;
  font-weight:   600;
  border:        1px solid;
}
.runner-up   { background: rgba(46, 213, 115, .1); border-color: rgba(46, 213, 115, .35); color: #2ed573; }
.runner-down { background: rgba(255, 71, 87, .1); border-color: rgba(255, 71, 87, .35); color: #ff4757; }

.runner-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.runner-dot.up   { background: #2ed573; animation: blink 2s ease-in-out infinite; }
.runner-dot.down { background: #ff4757; }

/* ── Sidebar drop zone ────────────────────────────────────────────── */
.drop-zone {
  border:        2px dashed var(--border);
  border-radius: 8px;
  padding:       8px;
  text-align:    center;
  font-size:     .72rem;
  color:         var(--text2);
  cursor:        pointer;
  transition:    all .2s;
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--accent);
  color:        var(--accent);
  background:   rgba(102, 126, 234, .05);
}

/* ── Sidebar tree ─────────────────────────────────────────────────── */
.tree-node {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 8px;
  border-radius: 6px;
  cursor:        pointer;
  border:        1px solid transparent;
  font-size:     .8rem;
  transition:    all .12s;
  user-select:   none;
}
.tree-node:hover { background: rgba(255, 255, 255, .04); border-color: var(--border); }
.tree-node[draggable="true"]:hover  { cursor: grab; }
.tree-node[draggable="true"]:active { cursor: grabbing; }
.tree-folder.drag-over {
  background:    rgba(102, 126, 234, .18);
  border:        1px solid rgba(102, 126, 234, .5);
  border-radius: 4px;
}
.tree-node.selected { background: rgba(102, 126, 234, .12); border-color: rgba(102, 126, 234, .3); }
.tree-node.dir-node { font-weight: 600; color: var(--text2); }

.node-icon { font-size: .85rem; flex-shrink: 0; }
.node-name {
  flex:          1;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  font-family:   var(--mono);
}
.node-ext {
  font-size:     .6rem;
  padding:       1px 5px;
  border-radius: 3px;
  font-family:   var(--mono);
  font-weight:   700;
  flex-shrink:   0;
}
.ext-robot  { background: rgba(46, 213, 115, .12); color: var(--success); border: 1px solid rgba(46, 213, 115, .25); }
.ext-pytest { background: rgba(102, 126, 234, .12); color: var(--accent); border: 1px solid rgba(102, 126, 234, .25); }

.node-actions { display: none; gap: 2px; flex-shrink: 0; }
.tree-node:hover .node-actions { display: flex; }
.node-btn {
  background:    transparent;
  border:        none;
  color:         var(--text2);
  cursor:        pointer;
  padding:       2px 4px;
  border-radius: 4px;
  font-size:     .75rem;
  line-height:   1;
  transition:    all .1s;
}
.node-btn:hover        { background: rgba(255, 255, 255, .1); color: var(--text); }
.node-btn.danger:hover { background: rgba(255, 71, 87, .15);  color: var(--danger); }

.tree-children { padding-left: 14px; }

/* ── Bottom panel — tabs / result / artifacts / commits / runs ────── */
.tab-bar { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tab-btn {
  padding:       7px 14px;
  font-size:     .75rem;
  font-weight:   600;
  cursor:        pointer;
  border:        none;
  background:    transparent;
  color:         var(--text2);
  border-bottom: 2px solid transparent;
  transition:    all .15s;
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-pane       { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.tab-pane.active { display: flex; }

.result-bar {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       6px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink:   0;
}
.result-artifacts {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 14px;
  border-bottom: 1px solid var(--border);
  background:    var(--surface);
  flex-shrink:   0;
  flex-wrap:     wrap;
  font-size:     .72rem;
  font-family:   var(--mono);
}
.result-artifacts .artifact-label { color: var(--text2); margin-right: 4px; }
.result-artifacts .artifact-link {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  padding:         3px 8px;
  border:          1px solid var(--border);
  border-radius:   6px;
  background:      var(--surface2);
  color:           var(--text);
  text-decoration: none;
  transition:      border-color .15s, background .15s;
}
.result-artifacts .artifact-link:hover { border-color: var(--accent); background: var(--bg); }
.result-artifacts .artifact-dl {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  border:          1px solid var(--border);
  border-radius:   6px;
  background:      var(--surface2);
  color:           var(--text2);
  text-decoration: none;
  cursor:          pointer;
  transition:      border-color .15s, color .15s;
}
.result-artifacts .artifact-dl:hover { border-color: var(--accent); color: var(--text); }

.result-badge {
  font-size:     .7rem;
  padding:       2px 9px;
  border-radius: 9px;
  font-family:   var(--mono);
  font-weight:   600;
}
.rb-idle    { background: rgba(120, 120, 160, .1); color: var(--text2);  border: 1px solid rgba(120, 120, 160, .3); }
.rb-running { background: rgba(255, 165, 2, .12); color: var(--warning); border: 1px solid rgba(255, 165, 2, .3); }
.rb-passed  { background: rgba(46, 213, 115, .12); color: var(--success); border: 1px solid rgba(46, 213, 115, .3); }
.rb-failed  { background: rgba(255, 71, 87, .12); color: var(--danger);  border: 1px solid rgba(255, 71, 87, .3); }
.rb-error   { background: rgba(255, 71, 87, .12); color: var(--danger);  border: 1px solid rgba(255, 71, 87, .3); }
.result-time { font-size: .7rem; color: var(--text2); font-family: var(--mono); margin-left: auto; }

#resultPre {
  flex:          1;
  overflow-y:    auto;
  padding:       8px 14px;
  font-size:     .72rem;
  font-family:   var(--mono);
  white-space:   pre-wrap;
  word-break:    break-all;
  color:         var(--text);
  background:    var(--bg);
}

/* ── Commits + runs rows ──────────────────────────────────────────── */
.commits-scroll { flex: 1; overflow-y: auto; }
.commit-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       6px 14px;
  border-bottom: 1px solid rgba(42, 42, 64, .4);
}
.commit-row:last-child { border-bottom: none; }
.commit-sha { font-family: var(--mono); font-size: .7rem; color: var(--accent); flex-shrink: 0; width: 48px; }
.commit-msg {
  flex:          1;
  font-size:     .77rem;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.commit-date { font-size: .66rem; color: var(--text2); flex-shrink: 0; }

.runs-scroll { flex: 1; overflow-y: auto; }
.run-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 14px;
  border-bottom: 1px solid rgba(42, 42, 64, .4);
  cursor:        pointer;
  transition:    background .1s;
}
.run-row:hover       { background: rgba(255, 255, 255, .03); }
.run-row:last-child  { border-bottom: none; }

.run-badge {
  font-size:     .65rem;
  padding:       2px 7px;
  border-radius: 8px;
  font-family:   var(--mono);
  font-weight:   700;
  flex-shrink:   0;
  min-width:     46px;
  text-align:    center;
}
.rb-passed-sm { background: rgba(46, 213, 115, .12); color: var(--success); border: 1px solid rgba(46, 213, 115, .3); }
.rb-failed-sm { background: rgba(255, 71, 87, .12); color: var(--danger);  border: 1px solid rgba(255, 71, 87, .3); }
.rb-error-sm  { background: rgba(255, 71, 87, .08); color: var(--danger);  border: 1px solid rgba(255, 71, 87, .2); }

.run-script {
  flex:          1;
  font-size:     .76rem;
  font-family:   var(--mono);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.run-meta {
  font-size:   .65rem;
  color:       var(--text2);
  flex-shrink: 0;
  text-align:  right;
  line-height: 1.4;
  white-space: pre;
}