/* ════════════════════════════════════════════════════════════════
   components.css — HireYT shared component library (.ds-*)
   Pairs with public/js/ui.js (UI.* factories). Light theme, warm
   neutrals, single orange accent. Used on every refactored page.
   ════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────── */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;
  border-radius:6px;font-size:13px;font-weight:500;font-family:var(--font);line-height:1;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;text-decoration:none}
.ds-btn svg{width:15px;height:15px}
.ds-btn--primary{background:var(--accent);color:#fff}
.ds-btn--primary:hover{background:var(--accent-hover)}
.ds-btn--secondary{background:var(--content-bg);border-color:var(--ds-border);color:var(--text-secondary)}
.ds-btn--secondary:hover{border-color:var(--border-hover);color:var(--text-primary)}
.ds-btn--ghost{background:transparent;color:var(--text-secondary)}
.ds-btn--ghost:hover{color:var(--text-primary);background:var(--row-hover)}
.ds-btn--sm{height:26px;padding:0 9px;font-size:12px}
.ds-btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Status Pill (the ONE pill — dot + label, tint bg, dark text) ─ */
.ds-pill{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:6px;
  font-size:11px;font-weight:500;line-height:1;white-space:nowrap;border:1px solid transparent}
.ds-pill .ds-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.ds-pill--success{color:var(--st-success);background:var(--st-success-bg);border-color:var(--st-success-bd)}
.ds-pill--warning{color:var(--st-warning);background:var(--st-warning-bg);border-color:var(--st-warning-bd)}
.ds-pill--danger {color:var(--st-danger); background:var(--st-danger-bg); border-color:var(--st-danger-bd)}
.ds-pill--neutral{color:var(--st-neutral);background:var(--st-neutral-bg);border-color:var(--st-neutral-bd)}
.ds-pill--accent {color:var(--accent);    background:var(--accent-tint);  border-color:var(--accent-tint-border)}

/* ── Filter chips / toolbar ──────────────────────────────────── */
.ds-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ds-toolbar__spacer{margin-left:auto}
.ds-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:6px;
  font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;border:1px solid var(--ds-border);
  background:var(--content-bg);color:var(--text-secondary);transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.ds-chip:hover{border-color:var(--border-hover);color:var(--text-primary)}
.ds-chip--active{background:var(--accent-tint);border-color:var(--accent-tint-border);color:var(--accent)}
.ds-chip__caret{opacity:.45;font-size:9px}
.ds-chip__x{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:inherit;
  cursor:pointer;font-size:14px;line-height:1;padding:0;margin-left:1px;opacity:.7}
.ds-chip__x:hover{opacity:1}

/* ── Page header ─────────────────────────────────────────────── */
.ds-page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.ds-page-header__l{display:flex;align-items:baseline;gap:8px;min-width:0}
.ds-page-header__l h1{font-size:18px;font-weight:600;color:var(--text-primary);margin:0;letter-spacing:-.01em}
.ds-page-header__count{font-size:13px;color:var(--text-faint);white-space:nowrap}
.ds-page-header__r{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── KPI cards ───────────────────────────────────────────────── */
.ds-kpi-row{display:grid;gap:12px;margin-bottom:12px}
.ds-kpi-row--hero{grid-template-columns:repeat(3,1fr)}
.ds-kpi-row--sec{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ds-kpi{background:var(--content-bg);border:1px solid var(--ds-border);border-radius:6px;padding:16px}
.ds-kpi__label{font-size:11px;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.ds-kpi__value{font-size:24px;font-weight:500;color:var(--text-primary);margin-top:6px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ds-kpi--hero .ds-kpi__value{font-size:32px}
.ds-kpi__delta{font-size:12px;font-weight:500;margin-left:8px}
.ds-kpi__delta--up{color:var(--st-success)}
.ds-kpi__delta--down{color:var(--st-danger)}

/* ── DataTable ───────────────────────────────────────────────── */
.ds-table-wrap{border:1px solid var(--ds-border);border-radius:6px;background:var(--content-bg);overflow:hidden}
.ds-table-scroll{overflow:auto;max-height:calc(100vh - 230px)}
.ds-table{width:100%;border-collapse:collapse;font-size:13px}
.ds-table thead th{position:sticky;top:0;z-index:1;background:var(--content-bg);text-align:left;
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text-faint);
  padding:0 12px;height:38px;border-bottom:1px solid var(--ds-border);white-space:nowrap;user-select:none}
.ds-table thead th.ds-sortable{cursor:pointer}
.ds-table thead th.ds-sortable:hover{color:var(--text-secondary)}
.ds-table thead th .ds-caret{margin-left:4px;opacity:.35;font-size:9px}
.ds-table thead th.ds-sorted{color:var(--text-secondary)}
.ds-table thead th.ds-sorted .ds-caret{opacity:1;color:var(--accent)}
.ds-table tbody td{padding:0 12px;height:40px;border-top:1px solid var(--row-divider);color:var(--text-primary);vertical-align:middle}
.ds-table tbody tr:first-child td{border-top:none}
.ds-table tbody tr:hover{background:var(--row-hover)}
.ds-table--compact tbody td{height:36px}
.ds-table .ds-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-col-check{width:38px;text-align:center}
.ds-col-check input,.ds-table tbody .ds-col-check input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;margin:0}
.ds-name{font-size:13px;font-weight:500;color:var(--text-primary);line-height:1.3}
.ds-name__sub{font-size:11px;color:var(--text-faint);line-height:1.3}
.ds-col-edit{width:34px;text-align:right}
.ds-row-edit{opacity:0;transition:opacity .12s;color:var(--text-faint);background:none;border:none;cursor:pointer;padding:4px;display:inline-flex}
.ds-table tbody tr:hover .ds-row-edit{opacity:1}
.ds-row-edit:hover{color:var(--accent)}
.ds-table__empty{padding:48px 20px;text-align:center;color:var(--text-secondary);font-size:13px}

/* ── Table footer / pagination ───────────────────────────────── */
.ds-table-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-top:1px solid var(--ds-border);font-size:12px;color:var(--text-secondary)}
.ds-pagination{display:flex;gap:6px}
.ds-pagination button{height:26px;min-width:26px;padding:0 8px;border:1px solid var(--ds-border);background:var(--content-bg);
  border-radius:6px;font-size:12px;color:var(--text-secondary);cursor:pointer;font-family:var(--font)}
.ds-pagination button:hover:not(:disabled){border-color:var(--border-hover);color:var(--text-primary)}
.ds-pagination button:disabled{opacity:.4;cursor:not-allowed}

/* ── Select (toolbar dropdowns) ─────────────────────────────── */
.ds-select{height:30px;padding:0 8px;border:1px solid var(--ds-border);border-radius:6px;
  font-size:12px;font-family:var(--font);color:var(--text-primary);background:var(--content-bg);
  cursor:pointer;outline:none;transition:border-color .15s}
.ds-select:hover{border-color:var(--border-hover)}
.ds-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint)}

/* ── Bulk action bar ─────────────────────────────────────────── */
.ds-bulkbar{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:10px;
  background:var(--accent-tint);border:1px solid var(--accent-tint-border);border-radius:6px;
  font-size:13px;flex-wrap:wrap}

/* ── Density toggle ──────────────────────────────────────────── */
.ds-density{display:inline-flex;border:1px solid var(--ds-border);border-radius:6px;overflow:hidden;height:30px}
.ds-density button{border:none;background:var(--content-bg);color:var(--text-faint);padding:0 9px;font-size:12px;cursor:pointer;font-family:var(--font)}
.ds-density button.active{background:var(--accent-tint);color:var(--accent)}