/* ============================== LIST-SPECIFIC =========================== */

/* Compact KPI row above the listing. */
.mg-list-kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-bottom:var(--sp-4);
}
.mg-list-kpis .tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px var(--sp-4);
}
.mg-list-kpis .lbl{
  font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--t-muted);margin-bottom:3px;
}
.mg-list-kpis .val{
  font-size:18px;font-weight:800;color:var(--t-strong);font-family:var(--font);
}
.mg-list-kpis .delta{font-size:10.5px;color:var(--t-muted);margin-left:6px;font-weight:500}
.mg-list-kpis .delta.up{color:#6ee7b7}
.mg-list-kpis .delta.down{color:#fda4af}

/* Listing table. */
.mg-tbl-wrap{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.mg-tbl{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13px;
}
.mg-tbl thead th{
  background:var(--bg-soft);
  padding:10px 12px;text-align:left;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--t-muted);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.mg-tbl thead th.sortable{cursor:pointer;user-select:none}
.mg-tbl thead th.sortable:hover{color:var(--t-strong)}
.mg-tbl thead th.sortable .sort-icn{
  display:inline-block;margin-left:4px;color:var(--t-subtle);font-size:9px;vertical-align:1px;
}
.mg-tbl thead th.sorted-asc .sort-icn,.mg-tbl thead th.sorted-desc .sort-icn{color:var(--c-primary)}
.mg-tbl thead th:first-child{padding-left:14px}
.mg-tbl thead th:last-child{padding-right:14px;text-align:right}

.mg-tbl tbody td{
  padding:11px 12px;border-bottom:1px solid var(--line-soft);
  color:var(--t);vertical-align:middle;
}
.mg-tbl tbody td:first-child{padding-left:14px}
.mg-tbl tbody td:last-child{padding-right:14px;text-align:right;white-space:nowrap}
.mg-tbl tbody tr:last-child td{border-bottom:none}
.mg-tbl tbody tr:hover td{background:var(--surface-elevated)}
.mg-tbl tbody tr.is-selected td{background:var(--c-primary-bg)}

.mg-tbl .ck{width:36px}
.mg-tbl .ck input{accent-color:var(--c-primary);width:16px;height:16px;cursor:pointer}

.mg-tbl .row-title{
  display:flex;align-items:center;gap:10px;
}
.mg-tbl .row-title .thumb{
  width:36px;height:36px;border-radius:var(--r-sm);flex-shrink:0;
  background:linear-gradient(135deg,rgba(34,211,238,.25),rgba(99,102,241,.25));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--t-muted);font-family:var(--font-mono);font-weight:600;
  border:1px solid var(--line-soft);
}
.mg-tbl .row-title .info{min-width:0}
.mg-tbl .row-title a{color:var(--t-strong);text-decoration:none;font-weight:700;display:block;font-size:13px}
.mg-tbl .row-title a:hover{color:var(--c-primary-l)}
.mg-tbl .row-title .sub{font-size:11px;color:var(--t-muted);margin-top:1px;font-weight:500}

.mg-tbl .author{
  display:inline-flex;align-items:center;gap:8px;
}
.mg-tbl .author .av{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--c-primary-d),var(--c-primary));
  color:var(--c-950);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:10px;
}
.mg-tbl .when{
  font-size:11.5px;color:var(--t-muted);font-variant-numeric:tabular-nums;font-weight:500;
}
.mg-tbl .when strong{color:var(--t);font-weight:600}

.mg-tbl .ops{display:inline-flex;gap:4px}
.mg-tbl .ops button,.mg-tbl .ops a{
  background:transparent;border:1px solid transparent;color:var(--t-muted);
  width:30px;height:30px;border-radius:var(--r-sm);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;
  transition:var(--t-fast);text-decoration:none;
}
.mg-tbl .ops button:hover,.mg-tbl .ops a:hover{background:var(--surface-elevated);color:var(--t-strong);border-color:var(--line)}
.mg-tbl .ops .danger:hover{background:var(--c-danger-bg);color:var(--c-danger);border-color:rgba(244,63,94,.3)}

/* Pagination. */
.mg-pagination{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:10px var(--sp-4);border-top:1px solid var(--line);background:var(--bg-soft);
  font-size:12px;color:var(--t-muted);flex-wrap:wrap;
}
.mg-pagination .meta{font-weight:500}
.mg-pagination .meta strong{color:var(--t-strong);font-weight:700}
.mg-pagination .pager{margin:0}
.mg-pagination .visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.mg-pagination .pager__items{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;
  margin:0;padding:0;list-style:none;
}
.mg-pagination .pager__item{margin:0;padding:0;list-style:none}
.mg-pagination .pager__item a,
.mg-pagination .pager__item--current span,
.mg-pagination .pager__item--ellipsis{
  min-width:32px;height:32px;padding:0 10px;
  background:var(--surface);border:1px solid var(--line);color:var(--t);
  border-radius:var(--r-sm);font-family:var(--font);font-size:12px;font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:var(--t-fast);
}
.mg-pagination .pager__item a:hover{border-color:var(--c-primary);color:var(--c-primary-l)}
.mg-pagination .pager__item a:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.mg-pagination .pager__item--current span{background:var(--c-primary);color:var(--c-950);border-color:var(--c-primary)}
.mg-pagination .pager__item--ellipsis{
  min-width:24px;padding:0 4px;background:transparent;border-color:transparent;color:var(--t-muted);
}
.mg-pagination .per-page{display:flex;align-items:center;gap:6px}
.mg-pagination .per-page select{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:5px 8px;font-size:12px;font-family:var(--font);color:var(--t-strong);
}
@media (max-width:900px){
  .mg-pagination{justify-content:center}
  .mg-pagination .meta,.mg-pagination .per-page{width:100%;justify-content:center;text-align:center}
}
@media (max-width:640px){
  .mg-pagination .pager__item--first,
  .mg-pagination .pager__item--last{display:none}
}

/* Empty state. */
.mg-empty{
  padding:var(--sp-9) var(--sp-6);text-align:center;
}
.mg-empty .ic{font-size:42px;color:var(--c-primary);margin-bottom:var(--sp-3)}
.mg-empty h3{font-size:16px;font-weight:800;color:var(--t-strong);margin:0 0 6px;letter-spacing:-.2px}
.mg-empty p{font-size:13px;color:var(--t-muted);margin:0 0 var(--sp-4);line-height:1.5;max-width:380px;margin-left:auto;margin-right:auto}
.mg-empty .actions{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* Responsive */
@media (max-width:1024px){
  .mg-list-kpis{grid-template-columns:repeat(2,1fr)}
  .mg-tbl{font-size:12.5px}
  .mg-tbl .row-title .thumb{display:none}
}
@media (max-width:768px){
  .mg-tbl thead{display:none}
  .mg-tbl tbody td{display:block;border:none;padding:6px 14px}
  .mg-tbl tbody tr{display:block;border-bottom:1px solid var(--line);padding:var(--sp-3) 0}
  .mg-tbl tbody td:before{
    content:attr(data-label);display:block;
    font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    color:var(--t-muted);margin-bottom:4px;
  }
  .mg-tbl tbody td:last-child{text-align:left;padding-top:8px}
}