/* Play management page — reuses style.css tokens (rail, btn, topbar). */

body.plays-body { overflow: hidden; }

/* folders sidebar */
#folder-list { display: flex; flex-direction: column; gap: 2px; }
.folder-row {
  display: flex; align-items: center;
  border-radius: 4px;
}
.folder-row.active { background: var(--board-2); }
.folder-btn {
  flex: 1; text-align: left;
  font-family: var(--font-body); font-size: 14px;
  color: var(--chalk-dim);
  background: none; border: none; cursor: pointer;
  padding: 7px 10px;
}
.folder-row.active .folder-btn { color: var(--chalk); }
.folder-btn:hover { color: var(--chalk); }
.folder-del {
  background: none; border: none; cursor: pointer;
  color: #5a6a67; font-size: 12px; padding: 6px 8px;
}
.folder-del:hover { color: var(--red); }

.folder-add { display: flex; gap: 6px; margin-top: 10px; }
.folder-add input {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 13px;
  padding: 7px 9px; color: var(--chalk);
  background: var(--board-2); border: 1px solid var(--line); border-radius: 4px;
}
.folder-add input:focus { outline: none; border-color: var(--amber); }

/* heading + sort */
#plays-heading {
  flex: 1;
  font-family: var(--font-display); font-size: 26px;
  letter-spacing: .05em; color: var(--chalk);
}
.sort-control { display: flex; align-items: center; gap: 8px; }
.sort-control span {
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: .12em; color: var(--chalk-dim);
}
#sort-select {
  font-family: var(--font-body); font-size: 13px;
  padding: 8px 10px; color: var(--chalk);
  background: var(--board-2); border: 1px solid var(--line); border-radius: 4px;
}

/* table */
#plays-wrap { flex: 1; overflow-y: auto; padding: 16px 20px; }
#plays-table { width: 100%; border-collapse: collapse; }
#plays-table thead th {
  text-align: left;
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: .12em; color: var(--chalk-dim);
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
#plays-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: 14px; vertical-align: middle;
}
#plays-table .play-name { font-weight: 600; color: var(--chalk); }
#plays-table .muted { color: var(--chalk-dim); }
#plays-table .cap { text-transform: capitalize; }
#plays-table tbody tr:hover { background: rgba(255,255,255,.02); }

.folder-select {
  font-family: var(--font-body); font-size: 13px;
  padding: 5px 8px; color: var(--chalk);
  background: var(--board-2); border: 1px solid var(--line); border-radius: 4px;
  max-width: 160px;
}
.actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn.danger:hover { color: var(--red); border-color: var(--red); }

.empty {
  margin: 60px auto; max-width: 420px; text-align: center;
  color: var(--chalk-dim); font-size: 15px;
}