/* ---------- v2.2 responsive admin pages ---------- */
/* stat tiles: labels may wrap instead of spilling out of the card */
.stat span{white-space:normal;overflow-wrap:anywhere}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
/* page header buttons wrap neatly */
.ph-a{flex-wrap:wrap}
/* tables: no hidden actions on wide screens */
.t td.acts{width:1%}
.t td,.t th{overflow-wrap:normal}
/* course list: full width, compact title cell */
.crs-list{margin-bottom:18px}
.crs-cell{min-width:260px}.crs-cell .person{align-items:center}.crs-cell .sub{max-width:44ch}
.crs-cats{max-width:560px}
/* split layouts (table + side panel) only sit side by side on really wide screens */
@media (max-width:1680px){.split.s300:has(> section.card.pad0 .t),.split:has(> section.card.pad0 .t){grid-template-columns:minmax(0,1fr)}}

/* whenever a table's box is narrow (phones, tablets, narrow dashboard cards) every row becomes a card */
.tw{container-type:inline-size}
@container (max-width:720px){
  .t-stack,.t-stack tbody,.t-stack tr,.t-stack td{display:block;width:100%}
  .t-stack thead{display:none}
  .card.pad0 .t-stack{padding:10px}
  .t-stack tr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 14px;margin:0 0 10px;box-shadow:0 6px 16px -14px rgba(20,35,58,.4)}
  .t-stack tr:last-child{margin-bottom:0}
  .t-stack td,.card.pad0 .t-stack td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--line2);text-align:right;min-width:0!important;white-space:normal}
  .t-stack td:last-child{border-bottom:0}
  .t-stack td:before{content:attr(data-label);flex:none;max-width:45%;text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--faint)}
  .t-stack td[data-label=""]:before{display:none}
  .t-stack td:first-child{display:block;text-align:left;padding:10px 0;font-size:14px}
  .t-stack td:first-child:before{display:none}
  .t-stack td.t-empty{display:none}
  .t.t-stack td.acts{width:100%}
  .t-stack td.acts{justify-content:flex-end;flex-wrap:wrap;padding-top:10px}.t-stack td.acts:before{display:none}.t-stack td.acts>*{margin:0 0 0 6px}
  .t-stack td[colspan]{display:block;text-align:center}.t-stack td[colspan]:before{display:none}
  .t-stack .person{justify-content:flex-start;text-align:left}
  .t-stack td>.sub,.t-stack td .person .sub{white-space:normal}
  .card.pad0 .t-stack .person small{max-width:none;white-space:normal}
  .crs-cell{min-width:0}.crs-cell .sub{max-width:none}
}
@media (max-width:760px){.crs-cats{max-width:none}.filters{flex-wrap:wrap}.filters .ig.search{flex:1 1 100%}}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{padding:12px}.stat b{font-size:1.2rem}}
@media (max-width:340px){.stats{grid-template-columns:minmax(0,1fr)}}
/* mid-size tables: tighter cells so they fit without a scrollbar */
@container (min-width:721px) and (max-width:1060px){.t th,.t td,.card.pad0 .t th,.card.pad0 .t td{padding-left:7px;padding-right:7px}.t th{white-space:normal}.t{font-size:12.5px}}
@media (max-width:760px){.g12{grid-template-columns:minmax(0,1fr)!important}}
