/* ==========================================================================
   Krio Workforce OS — data tables
   ========================================================================== */

.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
table.kw-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:720px; font-size:12.8px }
table.kw-table.wide{ min-width:1080px }
table.kw-table.narrow{ min-width:560px }

.kw-table thead th{
  position:sticky; top:0; z-index:2; background:var(--surface-2); color:var(--muted);
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 14px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line);
}
.kw-table thead th.sortable{ cursor:pointer; user-select:none }
.kw-table thead th.sortable:hover{ color:var(--ink) }
.kw-table thead th .sort-ic{ opacity:.35; margin-left:4px; font-size:10px }
.kw-table thead th.sorted .sort-ic{ opacity:1; color:var(--brand) }
.kw-table thead th.num-col,.kw-table td.num-col{ text-align:right }
.kw-table thead th.center,.kw-table td.center{ text-align:center }

.kw-table tbody td{
  padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle;
}
.kw-table tbody tr:hover td{ background:var(--surface-2) }
.kw-table tbody tr:last-child td{ border-bottom:0 }
.kw-table tbody tr.clickable{ cursor:pointer }
.kw-table td .cell-emp{ display:flex; align-items:center; gap:10px; min-width:0 }
.kw-table td .cell-emp strong{ font-size:12.8px; color:var(--ink); display:block; white-space:nowrap }
.kw-table td .cell-emp small{ font-size:10.5px; color:var(--muted); font-family:var(--mono) }
.kw-table td.strong{ color:var(--ink); font-weight:600 }
.kw-table .row-actions{ display:flex; gap:4px; justify-content:flex-end }
.kw-table .row-actions .icon-btn{ width:28px; height:28px; font-size:13px; border-radius:7px }
.kw-table .row-actions .icon-btn:hover{ background:var(--brand-soft); color:var(--brand) }

.table-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.table-toolbar .tt-title{ font-size:13.5px; font-weight:650 }
.table-toolbar .tt-sub{ font-size:11.5px; color:var(--muted) }

.table-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:11px 16px; border-top:1px solid var(--line); font-size:12px; color:var(--muted);
}
.pager{ display:flex; gap:4px; align-items:center; flex-wrap:wrap }
.pager button{
  min-width:30px; height:30px; padding:0 8px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); font-size:12px; font-family:var(--mono);
}
.pager button:hover:not(:disabled){ border-color:var(--brand); color:var(--brand) }
.pager button.active{ background:var(--brand); border-color:var(--brand); color:#fff }
.pager button:disabled{ opacity:.4; cursor:not-allowed }

.bar-cell{ display:flex; align-items:center; gap:9px; min-width:118px }
.bar-cell .progress-kw{ flex:1; min-width:52px }
.bar-cell .num{ font-size:11.5px; width:40px; text-align:right }

.mini-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted) }
.mini-legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px }