/* === NBA v15 – 2-pane layout ======================================= */
.nba-filters{display:flex;gap:.7rem;margin:0 0 .8rem}
.nba-filters select{font:inherit;padding:.3rem .6rem}

#nba-mywrap   {height:55vh;overflow:auto;border:1px solid #e2e8f0;border-radius:8px;background:#fff}
#nba-mytbl    {width:100%;border-collapse:collapse}
#nba-mytbl th {text-align:left;font-weight:600;padding:.6rem;border-bottom:2px solid #e5e7eb}
#nba-mytbl td {padding:.55rem .6rem;border-bottom:1px solid #f1f1f1;font-size:14px}
#nba-mytbl tr:hover{background:#f9fafb}

.nba-pill   {border-radius:12px;padding:2px 8px;font-size:12px;color:#fff}
.pill-high  {background:#ff6b6b}.pill-medium{background:#fbbf24;color:#000}.pill-low{background:#4ade80}

#nba-aiwrap {margin-top:1.2rem}
.nba-ai-card{border:1px solid #d1d5db;border-radius:6px;padding:.5rem .7rem;margin:.35rem 0;
             display:flex;justify-content:space-between;align-items:center;cursor:grab}
.nba-ai-card:hover{box-shadow:0 2px 6px rgba(0,0,0,.08)}
.nba-ai-card button{background:var(--blue);color:#fff;border:none;padding:2px 8px;border-radius:6px;cursor:pointer}

.nba-tag{background:#e2e8f0;border-radius:10px;padding:0 6px;font-size:12px;margin-left:4px;cursor:pointer}

/* simple scroll bar */
#nba-mywrap::-webkit-scrollbar,#nba-aiwrap::-webkit-scrollbar{width:6px}
#nba-mywrap::-webkit-scrollbar-thumb,#nba-aiwrap::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* wider centred modal */
#nba-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:1000}
#nba-pane {background:#fff;border-radius:8px;max-width:540px;width:90%;padding:1.4rem;box-shadow:0 8px 24px rgba(0,0,0,.2);max-height:90vh;overflow:auto}
#nba-pane label{display:block;margin:.9rem 0 .4rem;font-weight:600;font-size:14px}
#nba-pane input,#nba-pane textarea,#nba-pane select{width:100%;padding:.5rem;border:1px solid #d1d5db;border-radius:6px;font:inherit}
#nba-pane textarea{min-height:90px;resize:vertical}

/* place at end of nba.css */
.nba-filters{display:flex;gap:.6rem;margin-bottom:.4rem;align-items:center}
#nba-add-btn{margin-left:auto}

/* layout */
.nba-top            { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
#nba-user-wrap      { height:45vh; overflow-y:auto; border:1px solid #dbe1ea; border-radius:4px; }
#nba-user-table     { width:100%; border-collapse:collapse; }
#nba-user-table th  { position:sticky; top:0; background:#dfe9ff; font-weight:600; }

.chk-col            { width:40px; }

.sec                { margin:14px 0 4px; font-size:15px; font-weight:600; }

/* pills & AI cards (same colours as before) */
.pill               { padding:2px 6px; border-radius:4px; font-size:11px; text-transform:capitalize; color:#fff }
.pil-h              { background:#e83d4a; }      /* high   */
.pil-m              { background:#d39b19; }      /* medium */
.pil-l              { background:#28a765; }      /* low    */

.nba-ai-card        { border:1px solid #dbe1ea; border-radius:4px; padding:4px 8px;
                      margin:2px 0; display:flex; justify-content:space-between; cursor:grab }
.nba-ai-card:hover  { background:#f5f7fb; }

#nba-user-table td:nth-child(2){ max-width:260px; }

/* priority colours */
.pill{padding:2px 8px;border-radius:8px;font-size:12px;color:#fff;text-transform:capitalize}
.pill.high   {background:#d9534f}
.pill.medium {background:#f0ad4e}
.pill.low    {background:#5cb85c}

/* fixed height for user table */
#nba-user-wrap{max-height:45vh;overflow-y:auto}

/* align Add-task button text */
#nba-add-btn{white-space:nowrap}

/* AI promote / status buttons */
tbody button{all:unset;cursor:pointer;padding:2px 6px;border-radius:4px;font-size:12px}
tbody button[data-act="done"], tbody button[data-act="undone"]{background:#2e6da4;color:#fff}
tbody button[data-act="import"]{background:#5bc0de;color:#fff}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2000}
.modal .card{background:#fff;border-radius:6px;max-width:480px;width:92%;padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.modal .btn-row{display:flex;gap:.6rem;flex-wrap:wrap}

/* keep Add-task text single-line on narrow screens */
#nba-add-btn{white-space:nowrap;min-width:94px;text-align:center}

/* status + promote buttons */
.status-btn, .import-btn{
  border:none; border-radius:4px; font-size:12px; padding:2px 8px; cursor:pointer;
  color:#fff; background:#0d6efd;
}
.status-btn.done{ background:#6c757d; }
.import-btn     { background:#20c997; }

/* ───────── Equal column widths for USER & AI tables ───────── */

/* We’ll target every <th>/<td> in the same ordinal position       */
/* across both #nba-user-table and #nba-model-table (class “alt”). */

#nba-user-table th:nth-child(1),
#nba-user-table td:nth-child(1),
#nba-model-table th:nth-child(1),
#nba-model-table td:nth-child(1){ width:28%; }   /* Title */

#nba-user-table th:nth-child(2),
#nba-user-table td:nth-child(2),
#nba-model-table th:nth-child(2),
#nba-model-table td:nth-child(2){ width:30%; }   /* Description */

#nba-user-table th:nth-child(3),
#nba-user-table td:nth-child(3),
#nba-model-table th:nth-child(3),
#nba-model-table td:nth-child(3){ width:10%; }   /* Priority pill */

#nba-user-table th:nth-child(4),
#nba-user-table td:nth-child(4),
#nba-model-table th:nth-child(4),
#nba-model-table td:nth-child(4){ width:16%; }   /* Tags */

#nba-user-table th:nth-child(5),
#nba-user-table td:nth-child(5),
#nba-model-table th:nth-child(5),
#nba-model-table td:nth-child(5){ width:10%; }   /* Due date */

#nba-user-table th:nth-child(6),
#nba-user-table td:nth-child(6),
#nba-model-table th:nth-child(6),
#nba-model-table td:nth-child(6){ width:6%;  text-align:center; } /* Status / Promote */

/* ─────────────────────────────────────────────────────────────
   NBA polish (non-destructive) — add at the end of nba.css
   Uses --brand if present, otherwise falls back to #0ea5e9.
   ───────────────────────────────────────────────────────────── */

:root { --nba-brand: var(--brand, #0ea5e9); --nba-line:#e2e8f0; --nba-ink:#0f172a; }

/* Top bar / filters */
.nba-top{ display:flex; gap:12px; align-items:center; margin:10px 0 8px; }
.nba-top select, .nba-top input{
  border:1px solid var(--nba-line); border-radius:10px; padding:8px 10px; font:inherit; height:36px;
  box-shadow:0 1px 0 rgba(2,6,23,.04) inset; background:#fff;
}
#nba-add-btn{
  height:36px; padding:6px 12px; border:1px solid var(--nba-brand); background:var(--nba-brand);
  color:#fff; border-radius:10px; font-weight:600; cursor:pointer; box-shadow:0 1px 0 rgba(2,6,23,.04) inset;
}
#nba-add-btn:hover{ filter:brightness(0.98); transform:translateY(-1px); transition:transform .08s ease; }

/* Scrollable panes look like cards */
#nba-user-wrap,
#nba-model-wrap,
#nba-mywrap{
  position:relative;
  border:1px solid var(--nba-line); border-radius:14px; background:#fff;
  box-shadow:0 6px 24px rgba(2,6,23,.08), 0 2px 6px rgba(2,6,23,.05);
  overflow:auto;
}

/* Tables */
#nba-user-table, #nba-model-table, #nba-mytbl{ width:100%; border-collapse:collapse; font-size:14px; }
#nba-user-table thead th,
#nba-model-table thead th,
#nba-mytbl thead th{
  position:sticky; top:0; z-index:2;
  background:#fff; color:#334155; font-weight:800; text-align:left;
  padding:8px; border-bottom:1px solid var(--nba-line);
}
#nba-user-wrap.scrolled thead th,
#nba-model-wrap.scrolled thead th,
#nba-mywrap.scrolled thead th{ box-shadow:0 10px 14px -12px rgba(2,6,23,.35); }

#nba-user-table tbody td,
#nba-model-table tbody td,
#nba-mytbl tbody td{
  padding:10px; border-bottom:1px solid #f1f5f9;
}
#nba-user-table tbody tr:hover td,
#nba-model-table tbody tr:hover td,
#nba-mytbl tbody tr:hover td{ background:#f6fbff; }

/* Chips / tags */
.nba-tag{
  background:#f8fafc; border:1px solid var(--nba-line); color:#334155;
  padding:2px 8px; font-size:12px; border-radius:999px; cursor:pointer; user-select:none;
}
.nba-tag:hover{ transform:translateY(-1px); transition:transform .08s ease; }

/* Priority pills (keep your classes, just tidy shape/weight) */
.pill, .pil-h, .pil-m, .pil-l{
  border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; text-transform:capitalize;
}
.pill.high   { background:#e83d4a; }
.pill.medium { background:#d39b19; color:#111; }
.pill.low    { background:#28a765; }

/* Row action buttons */
.status-btn, .import-btn{
  border:none; border-radius:10px; padding:6px 10px; font-size:12px; cursor:pointer;
  color:#fff; background:var(--nba-brand); box-shadow:0 1px 0 rgba(2,6,23,.04) inset;
}
.status-btn.done{ background:#64748b; }
.import-btn{ background:#20c997; }
.status-btn:hover, .import-btn:hover{ transform:translateY(-1px); filter:brightness(1.02); transition:transform .08s ease; }

/* Drag & drop feedback (SortableJS) */
.sortable-ghost  { opacity:.5; }
.sortable-chosen { background:#f1f5ff !important; }

/* Modal refinements */
.modal{ background:rgba(2,6,23,.45); }
.modal .card{
  border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.28);
  padding:1rem 1.1rem; gap:.9rem;
}
.modal .card label{ font-weight:700; font-size:13px; color:var(--nba-ink); }
.modal .card input, .modal .card textarea, .modal .card select{
  border:1px solid var(--nba-line); border-radius:10px; padding:10px; font:inherit; background:#fff;
  box-shadow:0 1px 0 rgba(2,6,23,.04) inset;
}
.modal .btn-row .btn{
  background:var(--nba-brand); color:#fff; border:1px solid var(--nba-brand);
  border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600;
}
.modal .btn-row .btn-outline{
  background:#fff; color:#0f172a; border:1px solid var(--nba-line);
  border-radius:10px; padding:8px 12px; cursor:pointer;
}
.modal .btn-row .btn:hover, .modal .btn-row .btn-outline:hover{ transform:translateY(-1px); transition:transform .08s ease; }

/* Subtle custom scrollbars */
#nba-user-wrap::-webkit-scrollbar,
#nba-model-wrap::-webkit-scrollbar,
#nba-mywrap::-webkit-scrollbar{ width:8px; height:8px; }
#nba-user-wrap::-webkit-scrollbar-thumb,
#nba-model-wrap::-webkit-scrollbar-thumb,
#nba-mywrap::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }

/* ── NBA tables: make the two headers visually distinct ─────────── */

/* ── NBA tables: unified header + clear separation ───────── */

/* Set this to whatever your side panel/header color is */
:root{
  --nba-pane: color-mix(in srgb, var(--brand) 78%, #0f172a 22%); /* fallback if you don't have a panel color */
}

#nba-user-wrap,
#nba-model-wrap{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 18px rgba(2,6,23,.06);
  overflow:auto;                 /* keeps sticky header inside */
}

/* Same header styling for BOTH tables */
#nba-user-table thead th,
#nba-model-table thead th{
  position:sticky; top:0;
  background:var(--nba-pane);
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  border-bottom:1px solid color-mix(in srgb, #000 10%, transparent);
}

/* Rounded top corners for the header row */
#nba-user-table thead th:first-child,
#nba-model-table thead th:first-child{ border-top-left-radius:10px; }
#nba-user-table thead th:last-child,
#nba-model-table thead th:last-child { border-top-right-radius:10px; }

/* Subtle shadow under the header while scrolling each pane */
#nba-user-wrap.scrolled thead th,
#nba-model-wrap.scrolled thead th{
  box-shadow:0 10px 14px -12px rgba(2,6,23,.35);
}

/* Give the second table breathing room so you see the break */
#nba-model-wrap{ margin-top:14px; }

/* Optional: beef up the section label for extra separation */
.sec{
  margin:14px 0 8px;
  font-weight:800;
}