/* rs-table — shared accessible table component (Wave 2).
   Progressive enhancement: applied to any <table data-rs-table> by /assets/rs-table.js. */

.rs-tblwrap{position:relative;overflow:auto;max-height:min(72vh,880px);border:1px solid var(--pha-hairline,#dbe1e9);border-radius:10px;-webkit-overflow-scrolling:touch;background:var(--pha-surface,#fff)}
.rs-tblwrap:focus-visible{outline:2px solid var(--pha-blue,#1d5fd8);outline-offset:2px}
/* visible horizontal-scroll affordance: edge fades toggled by JS */
.rs-tblwrap::before,.rs-tblwrap::after{content:"";position:sticky;top:0;display:block;height:0;z-index:3}
.rs-tblwrap.rs-can-right{box-shadow:inset -18px 0 14px -14px rgba(15,30,60,.28)}
.rs-tblwrap.rs-can-left{box-shadow:inset 18px 0 14px -14px rgba(15,30,60,.28)}
.rs-tblwrap.rs-can-left.rs-can-right{box-shadow:inset 18px 0 14px -14px rgba(15,30,60,.28),inset -18px 0 14px -14px rgba(15,30,60,.28)}
.rs-scroll-hint{position:absolute;right:8px;top:6px;z-index:4;font:600 10.5px/1 ui-monospace,monospace;letter-spacing:.06em;color:#51607a;background:rgba(255,255,255,.92);border:1px solid var(--pha-hairline,#dbe1e9);border-radius:999px;padding:5px 9px;pointer-events:none}
.rs-tblwrap:not(.rs-can-right) .rs-scroll-hint{display:none}

table[data-rs-table]{border-collapse:collapse;width:100%}
table[data-rs-table] caption{caption-side:top;text-align:left;font:600 12.5px/1.5 Inter,system-ui;color:var(--pha-text-muted,#5a6b85);padding:10px 12px 6px}
table[data-rs-table] thead th{position:sticky;top:0;z-index:2;background:var(--pha-surface-alt,#f4f6f9);box-shadow:0 1px 0 var(--pha-hairline-strong,#c7d0dc)}
table[data-rs-table] thead th{padding:0}
table[data-rs-table] thead th.rs-plain{padding:9px 12px}
.rs-sortbtn{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;padding:9px 12px;margin:0;border:0;background:transparent;cursor:pointer;font:inherit;color:inherit;text-align:inherit;letter-spacing:inherit;text-transform:inherit;white-space:inherit}
th.num .rs-sortbtn,th.n .rs-sortbtn{justify-content:flex-end;text-align:right}
.rs-sortbtn:hover{color:var(--pha-blue,#1d5fd8)}
.rs-sortbtn:focus-visible{outline:2px solid var(--pha-blue,#1d5fd8);outline-offset:-2px}
.rs-sortbtn .rs-arrow{font-size:9px;line-height:1;opacity:.45}
th[aria-sort="ascending"] .rs-sortbtn .rs-arrow,th[aria-sort="descending"] .rs-sortbtn .rs-arrow{opacity:1;color:var(--pha-blue,#1d5fd8)}

.rs-tblmeta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font:500 12px/1.5 Inter,system-ui;color:var(--pha-text-muted,#5a6b85);padding:8px 2px 0}
.rs-tblmeta b{font-variant-numeric:tabular-nums;color:inherit}
.rs-tblmeta .rs-asof{font:inherit}

/* Wave 4 (2026-08-31): opt-in sticky first column — set data-rs-sticky-first on the
   table. Built for the portal #/admin roles matrix (min-width 960px inside a ~784px
   main column at 1024px viewport, first column previously scrolled away with the rest).
   Pure CSS; the component JS needs no change. */
table[data-rs-table][data-rs-sticky-first] thead th:first-child,
table[data-rs-table][data-rs-sticky-first] tbody td:first-child{position:sticky;left:0;background:var(--pha-surface,#fff)}
table[data-rs-table][data-rs-sticky-first] tbody td:first-child{z-index:1;box-shadow:1px 0 0 var(--pha-hairline,#dbe1e9)}
table[data-rs-table][data-rs-sticky-first] thead th:first-child{z-index:3;background:var(--pha-surface-alt,#f4f6f9)}

@media (max-width:640px){
  .rs-tblwrap{max-height:70vh;border-radius:8px}
  table[data-rs-table]{font-size:12.5px}
  table[data-rs-table] td,table[data-rs-table] th .rs-sortbtn,table[data-rs-table] thead th.rs-plain{padding:8px 9px}
}
@media print{.rs-tblwrap{max-height:none;overflow:visible;box-shadow:none}.rs-scroll-hint{display:none}}