:root{
  color-scheme:dark;

--bg:#0b0f14;
  --panel:#131b26;
  --panel-2:#192330;
  --panel-3:#212e3d;
  --line:#253140;
  --line-2:#334759;

--txt:#e6edf3;
  --muted:#9aabbf;
  --muted-2:#8296ad;

--accent:#3b82f6;
  --accent-2:#60a5fa;
  --accent-soft:rgba(59,130,246,.12);
  --accent-line:rgba(59,130,246,.38);
  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;

--border:var(--line); --border-strong:var(--line-2);
  --bg-2:var(--panel-2); --bg-3:var(--panel-3); --bg-hover:var(--panel-3);

--hx1:var(--txt); --hx2:var(--txt); --hx3:var(--txt);
  --hx4:var(--txt); --hx5:var(--txt); --hx6:var(--txt);

--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp:var(--sp-2);

--r-sm:6px; --r:9px; --r-lg:12px; --r-pill:999px;

--sh-1:0 1px 2px rgba(0,0,0,.28);
  --sh-2:0 6px 20px rgba(0,0,0,.36);
  --sh-3:0 20px 56px rgba(0,0,0,.55);
  --shadow:var(--sh-2);

--fs-xs:11px; --fs-sm:12.5px; --fs-md:13px;
  --fs-base:13.5px; --fs-lg:15px; --fs-xl:17px; --fs-2xl:20px;

--row-h:34px;
  --ctl-h:34px;
  --btn-h:32px;
  --btn-sm-h:28px;
  --hdr-h:52px;
  --sb-w:10px;

/* PATCH (operator report — 2026-09 "table's header is not correctly
   hard sticky, it is transparent and visually disturbing while
   scrolling"): the sticky <thead> pixels were bleeding data rows
   because every value below used to carry an alpha channel that
   composited with whatever tbody row was scrolling underneath. All
   three of --th-bg / --th-bg-id / --zebra now use FULLY OPAQUE hex
   values (no rgba/alpha) so the header cell can never mix with a
   moving row's paint. --hover keeps a subtle blue tint but is now
   solid too. --z-thead is well above --z-stickycol so a horizontal
   sticky column (col-id / col-act) still passes UNDER the sticky
   header at scroll intersections rather than punching through it. */
  --th-bg:#0f1a28;
  --th-bg-id:#132132;
  --zebra:#131c28;
  --hover:#1a2a44;

/* PATCH (2026-09 hard-sticky header): lift the header well above hover/
   zebra rows so nothing paints through it while scrolling. */
  --z-thead:60; --z-stickycol:30; --z-bulk:70; --z-header:80;
  --z-fab:90; --z-modal:900; --z-toast:1000; --z-tip:1200; --z-progress:1500;
}

*{box-sizing:border-box}
html{scrollbar-gutter:stable}
html,body{margin:0}
body{
  font:var(--fs-base)/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 480px at 12% -12%,rgba(59,130,246,.07),transparent 62%),var(--bg);
  color:var(--txt);min-height:100vh;
  -webkit-font-smoothing:antialiased;
  scroll-padding-top:calc(var(--hdr-h) + var(--sp-3));
}
body.centered{display:grid;place-items:center}
body.modal-open{overflow:hidden}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:.1px}
h1{font-size:var(--fs-xl)}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-base)}
code,.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
code{
  background:var(--th-bg);border:1px solid var(--line);
  padding:1px 5px;border-radius:4px;font-size:.92em;
}

[hidden]{display:none!important}

*{scrollbar-width:thin;scrollbar-color:#3d5570 transparent}
::-webkit-scrollbar{width:var(--sb-w);height:var(--sb-w)}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:#3a4d63;border-radius:var(--r-pill);
  border:2px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:#4a6280;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

.app-header{
  position:sticky;top:0;z-index:var(--z-header);
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  min-height:var(--hdr-h);
  padding:var(--sp-2) clamp(var(--sp-3),2vw,var(--sp-5));
  background:rgba(19,27,38,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .16s ease;
}
body.is-scrolled .app-header{box-shadow:0 6px 20px rgba(0,0,0,.42)}
.app-header h1{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-lg);font-weight:600;letter-spacing:.1px;
  text-shadow:none;margin-right:var(--sp-1);
}
.app-header h1::before{
  content:"";width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.16);
}
.app-header button.ghost.small{
  background:rgba(255,255,255,.035);border-color:var(--line);
  color:var(--muted);font-weight:500;
}
.app-header button.ghost.small:hover:not(:disabled){
  background:var(--panel-3);color:var(--txt);border-color:var(--line-2);
}

.view{
  padding:var(--sp-4) clamp(var(--sp-3),2vw,var(--sp-5)) calc(var(--sp-6) + 44px);
  max-width:1420px;margin:0 auto;
}
.view:focus{outline:none}
/* R16: full-height view — table fills the viewport (no card wrapper) */
.view--full{
  padding:var(--sp-2) clamp(var(--sp-3),2vw,var(--sp-5)) var(--sp-2);
  max-width:100%;
  --tw-max:calc(100dvh - var(--hdr-h) - 24px);
}
@supports not (height:100dvh){
  .view--full{--tw-max:calc(100vh - var(--hdr-h) - 24px)}
}
.login{max-width:420px;margin:6vh auto}

#app{transition:opacity .18s ease}
#app.booting{opacity:0;visibility:hidden}

button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--btn-h);padding:0 var(--sp-3);
  background:linear-gradient(180deg,#3d84f7,#2563eb);
  color:#fff;border:1px solid transparent;border-radius:var(--r-sm);
  font:inherit;font-size:var(--fs-base);font-weight:550;line-height:1;
  white-space:nowrap;cursor:pointer;
  transition:background .14s,border-color .14s,filter .14s,transform .06s;
}
button:hover:not(:disabled){filter:brightness(1.08)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}
button.ghost{
  background:var(--th-bg);border-color:var(--line);color:var(--txt);
  font-weight:500;
}
button.ghost:hover:not(:disabled){
  background:var(--panel-3);border-color:var(--line-2);filter:none;
}
button.danger{background:linear-gradient(180deg,#ef4444,#c11f1f)}
button.danger.ghost{
  background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.34);color:#fca5a5;
}
button.warn{background:linear-gradient(180deg,#f0a12a,#b45309);color:#16202b}
button.small{
  min-height:var(--btn-sm-h);padding:0 10px;
  font-size:var(--fs-md);gap:5px;
}
button.icon{padding:0 var(--sp-2)}
button.full-width{width:100%}

button.toggle{
  min-height:var(--btn-sm-h);padding:0 var(--sp-3) 0 10px;gap:6px;
  border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.1px;text-transform:none;
  background:var(--panel-3);color:var(--txt);border-color:var(--line-2);
}
button.toggle::before{
  content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--muted);
}
button.toggle.on{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.42);color:#9de8b8}
button.toggle.on::before{background:var(--ok);box-shadow:0 0 5px rgba(34,197,94,.6)}
button.toggle.off{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.32);color:#fca5a5}
button.toggle.off::before{background:var(--err)}
button.toggle:hover:not(:disabled){filter:brightness(1.1)}

button.is-busy{position:relative;color:transparent!important;pointer-events:none}
button.is-busy::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:13px;height:13px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:spin .7s linear infinite;
}

input,select,textarea{
  width:100%;min-height:var(--ctl-h);
  padding:7px 10px;
  background:var(--th-bg);border:1px solid var(--line);color:var(--txt);
  border-radius:var(--r-sm);font:inherit;font-size:var(--fs-base);
  transition:border-color .14s,box-shadow .14s,background .14s;
}
textarea{min-height:calc(var(--ctl-h) * 2);line-height:1.5;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted-2);opacity:.75}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){
  border-color:var(--line-2);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
select{cursor:pointer}

input[type=checkbox],input[type=radio]{
  width:15px;height:15px;min-height:0;margin:0;flex:none;
  accent-color:var(--accent);cursor:pointer;
}
input[type=file]{padding:4px 6px;cursor:pointer;font-size:var(--fs-md)}
input[type=file]::file-selector-button{
  margin-right:var(--sp-2);padding:4px 10px;
  background:var(--panel-3);color:var(--txt);border:1px solid var(--line-2);
  border-radius:var(--r-sm);font:inherit;font-size:var(--fs-md);cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:var(--accent);border-color:var(--accent);color:#fff}

label{
  display:block;margin:0 0 5px;
  font-size:var(--fs-sm);font-weight:550;color:var(--muted);
  letter-spacing:.02em;
}
.inline-lbl{
  margin:0;white-space:nowrap;
  font-size:var(--fs-xs);font-weight:650;color:var(--muted-2);
  text-transform:uppercase;letter-spacing:.06em;
}
.req{color:var(--err)}
.hint{margin:5px 0 0;color:var(--muted-2);font-size:var(--fs-sm);line-height:1.45}
.w-auto{width:auto;min-width:150px}
.w-mid{width:auto;max-width:220px}
.w-narrow{width:auto;max-width:130px}
.file-pick{flex:1 1 200px;min-width:170px;margin:0}

.fld-switch{display:flex;flex-direction:column;justify-content:flex-end}
.switch{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);width:100%;min-height:var(--ctl-h);
  margin:0;padding:0 10px;cursor:pointer;user-select:none;
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-base);font-weight:500;color:var(--txt);
  transition:border-color .14s,background .14s;
}
.switch:hover{border-color:var(--line-2);background:var(--panel-3)}
.switch-text{display:flex;flex-direction:column;min-width:0;flex:1}
.switch-label{
  font-size:var(--fs-base);font-weight:500;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.switch-state{
  font-size:var(--fs-xs);font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2);transition:color .16s;
}
.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.switch-track{
  position:relative;flex:none;width:34px;height:20px;
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:var(--r-pill);
  transition:background .16s,border-color .16s;
}
.switch-track::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:var(--muted);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  transition:transform .16s,background .16s;
}
.switch:has(input:checked){border-color:rgba(34,197,94,.38);background:rgba(34,197,94,.06)}
.switch:has(input:checked) .switch-state{color:#86efac}
.switch input:checked+.switch-track{background:rgba(34,197,94,.42);border-color:var(--ok)}
.switch input:checked+.switch-track::after{transform:translateX(14px);background:#fff}
.switch input:focus-visible+.switch-track{box-shadow:0 0 0 3px rgba(96,165,250,.32)}
.switch input:disabled+.switch-track{opacity:.5}
.switch:has(input:disabled){opacity:.6;cursor:not-allowed}
.switch.inline-switch{
  width:auto;min-height:var(--btn-sm-h);padding:0 10px;gap:var(--sp-2);
  font-size:var(--fs-md);
}
.switch.inline-switch .switch-track{width:28px;height:16px}
.switch.inline-switch .switch-track::after{width:11px;height:11px;top:1.5px;left:1.5px}
.switch.inline-switch input:checked+.switch-track::after{transform:translateX(12px)}

.check-row{display:flex;flex-wrap:wrap;gap:5px}
.chip-check{
  display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer;
  padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--th-bg);font-size:var(--fs-md);font-weight:500;color:var(--muted);
  transition:background .12s,border-color .12s,color .12s;
}
.chip-check:hover{border-color:var(--line-2);color:var(--txt)}
.chip-check input{width:13px;height:13px}
.chip-check:has(input:checked){
  background:var(--accent-soft);border-color:var(--accent-line);color:var(--txt);
}

.badge{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:var(--r-pill);
  background:var(--th-bg);border:1px solid var(--line);
  font-size:var(--fs-md);color:var(--muted);
}
.pill{
  display:inline-block;
  padding:2px 8px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--th-bg);color:var(--muted);
  font-size:var(--fs-sm);font-weight:550;line-height:1.5;letter-spacing:.01em;
}
.pill.on{color:#86efac;border-color:rgba(34,197,94,.34);background:rgba(34,197,94,.10)}
.pill.off{color:#fca5a5;border-color:rgba(239,68,68,.32);background:rgba(239,68,68,.10)}
.pill.warn{color:#fcd34d;border-color:rgba(245,158,11,.34);background:rgba(245,158,11,.10)}
.pill.info{color:#93c5fd;border-color:var(--accent-line);background:var(--accent-soft)}
.pill.folder{color:#c4b5fd;border-color:rgba(139,92,246,.34);background:rgba(139,92,246,.10)}
.pill.count{
  color:#67e8f9;border-color:rgba(6,182,212,.34);background:rgba(6,182,212,.10);
  font-variant-numeric:tabular-nums;
}
.pill.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:500}
.pill.small{padding:1px 6px;font-size:var(--fs-xs)}
.pill.small-pill{padding:0 6px;font-size:var(--fs-xs);margin-left:var(--sp-1);vertical-align:middle}
.pill-plaintext{
  display:inline-block;padding:2px 8px;border-radius:var(--r-pill);
  background:rgba(127,29,29,.9);border:1px solid #7f1d1d;color:#fff;
  font-size:var(--fs-sm);font-weight:650;
}
.pill-row{
  display:flex;flex-wrap:wrap;gap:var(--sp-1);
  padding:var(--sp-2);max-height:180px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
}
.pill-row .pill{margin:0}
.tok-list{display:flex;flex-wrap:wrap;gap:var(--sp-1);max-width:none}

.info-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;min-height:22px;padding:0;vertical-align:middle;
  border-radius:50%;background:var(--panel-3);border:1px solid var(--line-2);
  color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:700;line-height:1;
  cursor:help;
}
.info-i:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.info-i:focus:not(:focus-visible){outline:none}

progress{
  width:100%;height:6px;border:0;border-radius:var(--r-pill);
  background:var(--th-bg);overflow:hidden;margin-bottom:0;
}
progress:not(.hide){margin-bottom:var(--sp-2)}
progress::-webkit-progress-bar{background:var(--th-bg)}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
progress::-moz-progress-bar{background:var(--accent)}

.card{
  margin-bottom:var(--sp-4);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
}
.card-head{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.012);
}
.card-head h2{
  flex:1 1 220px;display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-lg);font-weight:600;color:var(--txt);letter-spacing:.08px;
}
.card-head h2::before{content:none}
.card-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.card-body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}

.form-section{
  margin:0 0 var(--sp-3);
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.form-section:last-child{margin-bottom:0}
.form-section > .fs-head{
  display:grid;grid-template-columns:auto auto 1fr auto;
  align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3) var(--sp-2) 10px;
  background:rgba(255,255,255,.022);
  border-bottom:1px solid var(--line);
  border-left:2px solid var(--accent);
}
.form-section > .fs-head .fs-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:var(--r-pill);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent-2);font-size:var(--fs-xs);font-weight:700;line-height:1;
}
.form-section > .fs-head .fs-icon{font-size:var(--fs-base);line-height:1}
.form-section > .fs-head .fs-title{
  font-size:var(--fs-base);font-weight:650;color:var(--txt);
  letter-spacing:.06px;text-transform:none;
}
.form-section > .fs-head .fs-tools{
  grid-column:4;display:flex;align-items:center;gap:var(--sp-2);
}
.form-section > .fs-head .fs-desc{
  grid-column:3 / -1;grid-row:2;margin:2px 0 0;
  color:var(--muted);font-size:var(--fs-sm);font-weight:400;line-height:1.45;
}
.form-section > .fs-body{padding:var(--sp-3)}
.form-section > .fs-body > .form-grid{margin:0}
.form-section > .fs-body > .form-actions{margin-top:var(--sp-3)}
.form-section > .fs-body > table.grid,
.form-section > .fs-body > .table-wrap{margin:0}
.dlg .form-section{box-shadow:none}

.sub-section{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.sub-section:first-child{margin-top:0;padding-top:0;border-top:0}
.ss-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.ss-title{
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
}
.ss-tools{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.ss-desc{margin:0 0 var(--sp-2);color:var(--muted-2);font-size:var(--fs-sm);line-height:1.45}
.ss-body{margin:0}

.form-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-3);
}
.form-grid .span-1{grid-column:span 1}
.form-grid .span-2{grid-column:span 2}
.form-grid .span-3{grid-column:span 3}
.form-grid .span-4{grid-column:span 4}
.fld{min-width:0}
.form-actions{
  margin-top:var(--sp-3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
}
.form-grid + .form-actions{margin-top:var(--sp-4)}
.form-error{
  margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-3);
  background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.34);
  border-radius:var(--r-sm);color:#fca5a5;font-size:var(--fs-md);
}

.tabs{
  display:flex;flex-wrap:wrap;gap:var(--sp-1);
  width:min(calc(100% - 2 * clamp(var(--sp-3),2vw,var(--sp-5))),1420px);
  margin:var(--sp-3) auto 0;padding:5px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.tabs button{
  min-height:30px;padding:0 var(--sp-3);
  background:transparent;border-color:transparent;color:var(--muted);
  border-radius:var(--r-sm);font-size:var(--fs-base);font-weight:500;
}
.tabs button:hover:not(.active){background:var(--th-bg);color:var(--txt);filter:none}
.tabs button.active{
  background:linear-gradient(180deg,#3d84f7,#2563eb);color:#fff;font-weight:600;
}
.subtabs{
  display:flex;flex-wrap:wrap;gap:2px;width:fit-content;
  margin-bottom:var(--sp-3);padding:3px;
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r);
}
.subtabs button{
  min-height:28px;padding:0 var(--sp-3);
  background:transparent;border-color:transparent;color:var(--muted);
  border-radius:var(--r-sm);font-size:var(--fs-md);font-weight:500;
}
.subtabs button:hover:not(.active){color:var(--txt);filter:none}
.subtabs button.active{
  background:var(--panel-3);color:var(--txt);
  box-shadow:inset 0 0 0 1px var(--line-2);
}

.dc{
  margin:0 0 var(--sp-3);
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.dc-head{display:flex;align-items:center;gap:var(--sp-2);border-left:2px solid var(--accent)}
.dc-toggle{
  all:unset;box-sizing:border-box;flex:1;
  display:flex;align-items:center;gap:var(--sp-2);
  min-height:32px;padding:var(--sp-2) var(--sp-3);
  font:inherit;color:inherit;cursor:pointer;
}
.dc-toggle:hover{background:rgba(255,255,255,.028)}
.dc-toggle:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}
.dc-caret{
  display:inline-block;flex:none;font-size:9px;color:var(--accent-2);
  transition:transform .16s ease;
}
.dc.is-open .dc-caret{transform:rotate(90deg)}
.dc-icon{flex:none;font-size:var(--fs-base);line-height:1}
.dc-title{font-size:var(--fs-base);font-weight:650;letter-spacing:.06px}
.dc-badge{margin-left:var(--sp-1)}
.dc-badge.on{color:#fcd34d;border-color:rgba(245,158,11,.34);background:rgba(245,158,11,.12)}
.dc-tools{display:flex;align-items:center;gap:var(--sp-2);padding-right:var(--sp-3)}
.dc-desc{
  margin:0;padding:0 var(--sp-3) var(--sp-2);
  color:var(--muted);font-size:var(--fs-sm);line-height:1.45;
}
.dc-body{padding:var(--sp-3);border-top:1px solid var(--line);animation:dcIn .14s ease}
.dc:not(.is-open) .dc-head{border-bottom-color:transparent}
.dc-bar{display:inline-flex;align-items:center;gap:var(--sp-1)}
@keyframes dcIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.folders-cell{display:inline-flex;align-items:center;gap:var(--sp-1);flex-wrap:nowrap}
.folders-cell .pill.folder{
  display:inline-flex;align-items:center;gap:var(--sp-1);white-space:nowrap;
}
.folders-cell .pill.folder .muted{opacity:.6}
.count-chip{
  min-height:var(--btn-sm-h);padding:0 10px;gap:6px;
  background:var(--panel-3);border-color:var(--line-2);color:var(--txt);
  border-radius:var(--r-pill);font-size:var(--fs-md);font-weight:500;max-width:100%;
}
.count-chip:hover:not(:disabled){
  background:var(--accent);border-color:var(--accent);color:#fff;filter:none;
}
.count-chip .chip-n{
  padding:0 6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);font-weight:700;font-variant-numeric:tabular-nums;
}
.count-chip:hover:not(:disabled) .chip-n{background:rgba(0,0,0,.22)}
.count-chip .chip-caret{opacity:.6;font-size:8px}
.chip-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.chip-list li{
  display:flex;align-items:center;gap:var(--sp-3);padding:6px var(--sp-3);
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r-sm);
}
.chip-list .ci-idx{
  min-width:18px;color:var(--muted-2);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
}
.chip-list .ci-main{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-list .ci-perms{display:inline-flex;gap:3px;flex:none}

.table-wrap{
  position:relative;margin:0;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--th-bg);
  scroll-margin-top:calc(var(--hdr-h) + var(--sp-3));
  overflow-x:auto;overflow-y:auto;
  max-height:var(--tw-max, calc(100dvh - var(--hdr-h) - 176px));
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;

  -webkit-overflow-scrolling:touch;

  scrollbar-color:var(--muted-2) transparent;
  /* PATCH (2026-09 hard-sticky header): `contain:paint` keeps the
     sticky <th>s' paint bounded to this wrap so they cannot bleed
     across the rounded corner of the parent .card. NB: intentionally
     no `transform` / `will-change:transform` here — either would
     promote the wrap to a containing block and quietly disable
     `position:sticky` on its <th> children in some browsers. */
  contain:paint;
}
.table-wrap::-webkit-scrollbar{height:12px;width:12px}
.table-wrap::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);border-radius:8px;
  border:2px solid transparent;background-clip:content-box;
}
.table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.55);background-clip:content-box;border:2px solid transparent}
.table-wrap::-webkit-scrollbar-track{background:transparent}
@supports not (height:100dvh){
  .table-wrap{max-height:var(--tw-max, calc(100vh - var(--hdr-h) - 176px))}
}
.table-wrap :focus-visible{outline-offset:-2px}
table.grid{
  width:max-content;min-width:100%;table-layout:auto;
  border-collapse:separate;border-spacing:0;
  background:transparent;
}
table.grid th,table.grid td{
  text-align:left;vertical-align:middle;
  padding:7px var(--sp-3);
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  font-size:var(--fs-md);
}
table.grid th:last-child,table.grid td:last-child{border-right:0}
/* PATCH (operator report — 2026-09 "table's header is not correctly
   hard sticky, it is transparent and visually disturbing while
   scrolling"):
   Fully rewritten so the header stays a solid, opaque bar at every
   scroll offset in every browser:
     1. `.table-wrap` is the scroll container (max-height + overflow
        auto). Its containing card no longer clips it (see .card
        override below), so the browser can promote the sticky <th>
        cells to their own layer instead of dropping them.
     2. Every <th> repeats its opaque colour on FOUR sub-layers
        (background, background-color, backgroundImage: linear-gradient
        of the same solid colour, and a ::before opaque overlay) so no
        alpha-blended shorthand can leak the moving row underneath.
     3. z-index (--z-thead) is bumped above every horizontally-sticky
        column so a sticky first/last column passes UNDER the header at
        the top-left / top-right intersections instead of punching
        through it.
     4. The <thead> and its <tr> also paint solid — Safari sometimes
        ignores per-cell backgrounds under position:sticky unless the
        parent row/thead also paints.
     5. A firm bottom shadow makes the pinned/scrolling boundary
        unmistakable even before the user starts to scroll. */
table.grid thead{
  background:var(--th-bg);
  background-color:var(--th-bg);
}
table.grid thead tr{background:var(--th-bg);background-color:var(--th-bg)}
table.grid th{
  position:sticky;
  top:0;
  z-index:var(--z-thead);
  background:var(--th-bg);
  background-color:var(--th-bg);
  background-image:linear-gradient(var(--th-bg),var(--th-bg));
  /* Audited: muted light grey / desaturated blue header text and clean border */
  color:var(--muted);
  font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  box-shadow:
    inset 0 -1px 0 var(--line-2),
    0 6px 10px -6px rgba(0,0,0,.75),
    0 1px 0 var(--line-2);
  backdrop-filter:none;
  isolation:isolate;
}
/* Second opaque layer as a ::before pseudo — belt & braces: any browser
   that fails to paint <th>'s own solid background under position:sticky
   (Safari WebKit bug on some GPU paths) still sees this filled layer. */
table.grid th::before{
  content:"";position:absolute;inset:0;
  background:var(--th-bg);background-color:var(--th-bg);
  z-index:-1;pointer-events:none;
}
table.grid thead tr:first-child th:first-child{border-top-left-radius:calc(var(--r) - 1px)}
table.grid thead tr:first-child th:last-child{border-top-right-radius:calc(var(--r) - 1px)}
table.grid td{color:var(--txt);line-height:1.45}
table.grid tbody tr{transition:background .12s ease}

table.grid tbody tr:nth-child(even) td{background:transparent}
table.grid tbody tr.is-alt > td{background:var(--zebra)}
table.grid tbody tr:hover td{background:var(--hover)}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums}
table.grid td.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:var(--fs-sm)}
table.grid tr.row-muted{opacity:.6}
table.grid tr.row-empty td{padding:0;border:0;background:var(--panel)}
table.grid tr.row-blocked{opacity:.58}
table.grid tr.row-blocked td:first-child::after{
  content:'blocked';margin-left:6px;padding:0 6px;
  border:1px solid currentColor;border-radius:var(--r-pill);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;
}

table.grid col.c-sel{width:38px}
table.grid .col-sel{width:38px;text-align:center;white-space:nowrap;overflow:visible}
table.grid .col-sel input{width:15px;height:15px;margin:0}
table.grid .col-grow{min-width:0}

table.grid td.col-grow{overflow:visible;text-overflow:clip;white-space:nowrap;max-width:none}
table.grid .col-fit{width:1%;white-space:nowrap}
table.grid .col-act{width:1%;white-space:nowrap;overflow:visible;text-align:right}
table.grid td.wrap{white-space:nowrap;max-width:none;overflow:visible;text-overflow:clip}
table.grid td .tok-list{max-width:none}

table.grid td,table.grid th{white-space:nowrap;vertical-align:middle;overflow:visible}
table.grid td.wrap{white-space:nowrap}
table.grid td.cell-stack{white-space:normal;overflow:visible}
table.grid td.cell-stack .stack > *{white-space:nowrap;overflow:visible;text-overflow:clip;min-width:0}

table.grid.compact,table.grid.compact.autofit{width:max-content;min-width:100%;table-layout:auto}
table.grid.compact th,table.grid.compact td{padding:7px var(--sp-3);max-width:none}
table.grid.compact td .row{gap:var(--sp-1);flex-wrap:nowrap}
table.grid.compact td button.small{min-height:26px;padding:0 9px;font-size:var(--fs-sm)}
table.grid.compact td .pill{font-size:var(--fs-sm)}

/* All columns scroll horizontally together; only the header row sticks vertically. */
table.grid th,table.grid td{left:auto!important;right:auto!important}
table.grid tbody td{position:static!important}

table.grid td.col-id,table.grid th.col-id{min-width:14ch;white-space:nowrap}
table.grid td.col-grow{max-width:none}

table.grid td.cell-stack{white-space:normal}
table.grid td.col-grow.cell-stack{overflow:visible;text-overflow:clip}
.cell-stack .stack{display:flex;flex-direction:column;gap:2px;min-width:0}
.icon-row{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}
.icon-row > button.toggle{padding:0 7px;gap:0}

table.grid td.col-loc,table.grid th.col-loc,
table.grid td.col-addr,table.grid th.col-addr{
  white-space:nowrap;overflow:visible;text-overflow:clip;
  max-width:none;
}
.rec-geo{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:var(--fs-sm);white-space:nowrap}
.rec-addr{color:var(--muted);font-size:var(--fs-sm);line-height:1.35;white-space:nowrap}

table.grid td.col-rec{white-space:nowrap;max-width:none}
.rec-stack{display:inline-flex;flex-direction:row;gap:var(--sp-2);min-width:0;align-items:center}

/* PATCH (2026-09 hard-sticky header): keep the opaque backdrop from the
   base <th> rule; the sortable rule only removes cell padding so the
   <button> can own it. Explicitly re-declare position:sticky+top so a
   more-specific selector cannot silently unstick the header. */
table.grid th.sortable{
  padding:0;
  position:sticky;top:0;
  background:var(--th-bg);
  background-color:var(--th-bg);
}
table.grid th.sortable .th-sort{
  all:unset;box-sizing:border-box;
  display:flex;align-items:center;gap:6px;width:100%;
  padding:7px var(--sp-3);min-height:0;cursor:pointer;
  font:inherit;font-size:var(--fs-xs);font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
  background:transparent;
}
table.grid th.sortable .th-sort:hover{background:rgba(96,165,250,.10);color:var(--txt)}
table.grid th.sortable .th-sort:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}
table.grid th.sortable .sort-ind{opacity:.4;font-size:8px;color:var(--muted-2)}
/* Sorted-column tint used to be an alpha wash straight on the <th>, so
   a moving row could bleed through it. Paint the tint on the button
   (which sits ABOVE the ::before opaque layer) instead. */
table.grid th.sortable.sorted{
  background:var(--th-bg);
  background-color:var(--th-bg);
}
table.grid th.sortable.sorted .th-sort{
  background:rgba(59,130,246,.14);
  color:var(--txt);
}
table.grid th.sortable.sorted .sort-ind{opacity:1;color:var(--accent-2)}
table.grid th.sortable.sorted::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
}

tr.grp-row td,tr.date-bucket td{
  padding:6px var(--sp-3);
  background:linear-gradient(90deg,rgba(96,165,250,.075),rgba(96,165,250,.015));
  border-top:1px solid var(--line-2);
}
tr.grp-row .grp-toggle,tr.date-bucket .bucket-toggle{
  all:unset;display:inline-flex;align-items:center;gap:var(--sp-2);
  cursor:pointer;font:inherit;font-size:var(--fs-md);font-weight:650;color:var(--accent-2);
}
tr.grp-row .grp-toggle:hover,tr.date-bucket .bucket-toggle:hover{color:#dbeafe}
tr.grp-row .grp-caret{display:inline-block;font-size:9px;transition:transform .15s ease}
tr.grp-row.is-open .grp-caret{transform:rotate(90deg)}
tr.grp-row .grp-meta{margin-left:var(--sp-3);font-size:var(--fs-sm);color:var(--muted-2)}
tr.grp-child td:first-child,tr.date-child td:first-child{padding-left:var(--sp-5)}
tr.date-child .bucket-indent{
  display:inline-block;min-width:14px;margin-right:2px;text-align:center;opacity:.55;
}

.sk-row td{padding:8px var(--sp-3)}
.sk-bar{
  display:block;height:10px;border-radius:5px;
  background:linear-gradient(90deg,#1c2734 25%,#28394c 37%,#1c2734 63%);
  background-size:400% 100%;animation:skshimmer 1.2s ease-in-out infinite;
}
@keyframes skshimmer{from{background-position:100% 0}to{background-position:0 0}}

.pager{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  margin-top:var(--sp-3);padding:2px;
}
.pager-info{font-size:var(--fs-md);color:var(--muted);font-variant-numeric:tabular-nums}

.dlg-backdrop{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(10px,4vh,40px) var(--sp-3);
  background:rgba(4,7,12,.74);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dlg{
  width:100%;max-width:min(720px,100%);margin:auto;
  max-height:none;overflow:visible;
  padding:clamp(var(--sp-3),2vw,var(--sp-4));
  background:linear-gradient(180deg,var(--panel),#111925);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);animation:pop .16s ease;
}
@keyframes pop{from{transform:translateY(8px) scale(.99);opacity:0}to{transform:none;opacity:1}}
.dlg.busy{pointer-events:none;opacity:.72}
.dlg-head{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-1);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line);
}
.dlg-head h2{
  flex:1;display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-lg);font-weight:600;
}
.dlg-head h2::before{
  content:"";width:3px;height:14px;flex:none;
  background:var(--accent);border-radius:2px;
}
.dlg-x{min-height:var(--btn-sm-h);padding:0 var(--sp-2)}
.dlg-sub{margin:var(--sp-2) 0 var(--sp-3);color:var(--muted);font-size:var(--fs-md);line-height:1.5}
.dlg-body{margin-top:var(--sp-2)}
.dlg-foot{
  display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-2);
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);
}
.dlg-foot:empty{display:none;margin:0;padding:0;border:0}
.pre-scroll{
  margin:0;padding:var(--sp-3);max-height:52vh;overflow:auto;
  background:#0a1017;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-md);white-space:pre-wrap;word-break:break-word;
  overscroll-behavior:contain;
}
.kv-list{list-style:none;padding:0;margin:0}
.kv-list li{
  display:flex;justify-content:space-between;gap:var(--sp-3);
  padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.06);
}
.kv-list li:last-child{border-bottom:0}
.kv-list span{
  color:var(--muted);font-size:var(--fs-sm);
  text-transform:uppercase;letter-spacing:.05em;
}

.explorer-toolbar,.filter-bar,.ex-filter-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  margin-bottom:var(--sp-3);padding:6px var(--sp-3);
  background:rgba(255,255,255,.022);
  border:1px solid var(--line);border-radius:var(--r);
}
.ex-filter-bar{margin:var(--sp-2) 0 var(--sp-3)}
.filter-bar label,.ex-filter-bar label{margin:0}
.explorer-toolbar input,.explorer-toolbar select,
.filter-bar input,.filter-bar select,
.ex-filter-bar input,.ex-filter-bar select{
  min-height:30px;padding:4px var(--sp-2);font-size:var(--fs-md);
}
.ex-filter-bar input[type=search]{min-width:140px}
.ex-filter-bar input[type=date]{min-width:146px}
.folder-filter{width:auto;min-width:180px;max-width:270px}
.sort-group{display:flex;align-items:center;gap:6px}
.sort-group select{width:auto;min-width:140px}
.sort-dir{min-width:96px;justify-content:flex-start}
.sort-mobile{display:none}

.crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px;
  margin-bottom:var(--sp-3);font-size:var(--fs-md);min-width:0;
}
.crumbs a{padding:2px 6px;border-radius:var(--r-sm);color:var(--accent-2);font-weight:500}
.crumbs a:hover{background:rgba(96,165,250,.10);color:#dbeafe;text-decoration:none}

.bulk-toolbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  margin-bottom:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  background:rgba(59,130,246,.09);
  border:1px solid var(--accent-line);border-radius:var(--r);
}
.bulk-toolbar .sel-count{
  color:var(--accent-2);font-weight:650;font-size:var(--fs-md);
  font-variant-numeric:tabular-nums;
}
.bulk-toolbar button{min-height:var(--btn-sm-h);padding:0 10px;font-size:var(--fs-md)}
.vr{display:inline-block;width:1px;height:18px;background:var(--line-2)}

.meta-strip{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  margin:0 0 var(--sp-3);
}
.meta-chip{
  display:inline-flex;align-items:baseline;gap:6px;max-width:100%;
  padding:3px 10px;border-radius:var(--r-pill);
  background:var(--th-bg);border:1px solid var(--line);
  font-size:var(--fs-md);line-height:1.45;
}
.mc-k{
  color:var(--muted-2);font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
}
.mc-v{
  color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mc-accent{border-color:var(--accent-line);background:var(--accent-soft)}

.user-chip{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  max-width:min(46vw,300px);padding:3px 10px 3px 3px;
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:none;
}
.user-chip .uc-avatar{
  display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,#3d84f7,#2563eb);
  color:#fff;font-size:var(--fs-md);font-weight:700;text-transform:uppercase;
}
.user-chip .uc-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.user-chip .uc-label{
  color:var(--muted-2);font-size:var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}
.user-chip .uc-name{
  color:var(--txt);font-size:var(--fs-md);font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.hx{display:flex;align-items:center;gap:var(--sp-2);font-weight:600;letter-spacing:.08px;text-shadow:none}
.hx-1,.hx-2,.hx-3,.hx-4,.hx-5,.hx-6{color:var(--txt)}

.scope-picker{
  padding:var(--sp-2);background:var(--th-bg);
  border:1px solid var(--line);border-radius:var(--r);
}
.scope-picker .row-actions{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.scope-picker .scope-search{width:auto;max-width:200px;min-height:28px;padding:4px var(--sp-2);font-size:var(--fs-md)}
.scope-picker .scope-list{max-height:190px;overflow:auto;overscroll-behavior:contain}
.scope-picker .chk{
  display:flex;align-items:center;gap:var(--sp-2);margin:0;
  padding:4px 6px;border-radius:var(--r-sm);cursor:pointer;
  font-size:var(--fs-md);color:var(--txt);
}
.scope-picker .chk:hover{background:var(--panel-3)}
.chk-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.scope-col{
  display:flex;flex-direction:column;min-height:150px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
}
.scope-col-head{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:var(--panel-3);border-bottom:1px solid var(--line);
}
.scope-col-title{font-size:var(--fs-md);font-weight:650;color:var(--txt)}
.scope-col-head .pill.count{margin-left:auto}
.scope-col-head .ghost.small{min-height:24px;padding:0 var(--sp-2);font-size:var(--fs-sm)}
.scope-col-search{padding:var(--sp-2) var(--sp-2) 0}
.scope-col-search input{min-height:28px;padding:4px var(--sp-2);font-size:var(--fs-md)}
.scope-col-body{
  padding:var(--sp-1) var(--sp-2) var(--sp-2);
  max-height:230px;overflow-y:auto;overscroll-behavior:contain;
}
.ck-list{display:flex;flex-direction:column}
.ck-row{
  display:flex;align-items:center;gap:var(--sp-2);margin:0;
  padding:4px var(--sp-2);border-radius:var(--r-sm);cursor:pointer;
  font-size:var(--fs-md);color:var(--txt);transition:background .1s ease;
}
.ck-row:hover{background:var(--panel-3)}
.ck-row input[type=checkbox]{width:14px;height:14px}
.ck-row .ck-lbl{
  flex:1;min-width:0;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ck-row.is-off .ck-lbl{opacity:.62}
.ck-row.is-disabled{cursor:not-allowed;opacity:.55}
.ck-row.is-disabled:hover{background:transparent}
.ck-row.is-disabled:has(input:checked){opacity:.85}
.ck-row.is-disabled:has(input:checked) .ck-lbl{color:var(--txt)}

.health-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-2);
}
.health-cell{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r-sm);
}
.health-cell .hc-k{
  color:var(--muted);font-size:var(--fs-xs);font-weight:650;
  text-transform:uppercase;letter-spacing:.06em;
}

.uc-perms-list,.uc-filters-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.uc-perms-list:empty::after,.uc-filters-list:empty::after{
  content:"Nothing added yet.";color:var(--muted-2);font-size:var(--fs-sm);
}
.uc-perm-row,.uc-filter-row{
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r-sm);
}
.uc-perm-row:hover,.uc-filter-row:hover{border-color:var(--line-2)}
.uc-perm-grid{
  display:grid;align-items:end;gap:var(--sp-2);
  grid-template-columns:minmax(140px,1fr) minmax(120px,1fr) minmax(160px,2fr) auto;
}
.uc-perm-row .uc-lbl,.uc-filter-row .uc-lbl{
  margin:0 0 2px;font-size:var(--fs-sm);color:var(--muted);
}
.uc-perm-row .check-row{margin-top:2px}

.upload-hint{
  margin:var(--sp-1) 0 var(--sp-3);padding:5px var(--sp-3);
  background:var(--accent-soft);border:1px dashed var(--accent-line);
  border-radius:var(--r-sm);color:var(--accent-2);font-size:var(--fs-md);
}

.ex-chrome{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.ex-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  padding:6px var(--sp-3);
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r);
}
.ex-nav{border-left:2px solid var(--accent-2);background:var(--panel-3)}
.ex-nav button{min-height:30px;font-weight:550}
.ex-nav [data-a="back"]{
  background:linear-gradient(180deg,#3d84f7,#2563eb);border-color:transparent;color:#fff;
}
.ex-nav .crumbs{margin:0;font-size:var(--fs-md)}
.ex-scope{border-left:2px solid var(--ok)}
.ex-counts{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums;
}
.ex-act{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  padding-left:var(--sp-3);border-left:1px solid var(--line-2);
}
.ex-act.is-empty{padding-left:0;border-left:0}
.ex-act .file-pick{flex:0 1 210px;min-width:150px;margin:0}

.fb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-2)}
.fb-field{display:inline-flex;flex-direction:column;gap:4px;min-width:0}
.fb-field input,.fb-field select,.fb-field .sort-dir{
  min-width:130px;min-height:30px;padding:4px var(--sp-2);font-size:var(--fs-md);
}
.fb-field--wide input,.fb-field--wide select{min-width:220px}
.fb-grid .fb-field input,.fb-grid .fb-field select,.fb-grid .fb-field .sort-dir{width:100%;min-width:0}
.fb-more{display:flex;align-items:center;gap:var(--sp-2)}

.row-act{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sp-2);justify-content:flex-end}
.row-act button.ghost.small{
  background:rgba(255,255,255,.03);border-color:var(--line);color:var(--txt);font-weight:500;
}
.row-act button.ghost.small:hover:not(:disabled){
  background:rgba(96,165,250,.13);border-color:var(--accent-line);color:#dbeafe;filter:none;
}
.row-act button.danger.small{
  background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.34);color:#fca5a5;
}
.row-act button.danger.small:hover:not(:disabled){
  background:rgba(239,68,68,.22);border-color:rgba(239,68,68,.5);color:#fff;filter:none;
}

.fp{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fp-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:var(--panel-3);border-bottom:1px solid var(--line);
}
.fp-tabs{
  display:inline-flex;gap:2px;padding:2px;
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r-sm);
}
.fp-tabs button{
  min-height:26px;padding:0 10px;
  background:transparent;border-color:transparent;color:var(--muted);
  font-size:var(--fs-md);font-weight:500;
}
.fp-tabs button:hover:not(.active){color:var(--txt);filter:none}
.fp-tabs button.active{
  background:var(--panel-3);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line-2);
}
.fp-node-lbl{margin:0}
.fp-node{width:auto;min-width:150px;max-width:220px;min-height:28px;padding:4px var(--sp-2);font-size:var(--fs-md)}
.fp-search{flex:1 1 180px;min-width:160px;min-height:28px;padding:4px var(--sp-2);font-size:var(--fs-md)}
.fp-nav{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);
  padding:6px var(--sp-3);
  background:rgba(255,255,255,.015);border-bottom:1px solid var(--line);
}
.fp-crumbs,.fa-crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0;font-size:var(--fs-md);
}
.fp-crumbs a,.fa-crumbs a{padding:1px 6px;border-radius:var(--r-sm)}
.fp-crumbs a:hover,.fa-crumbs a:hover{background:var(--panel-3);text-decoration:none}
.fp-list,.fa-list{max-height:300px;overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-1) var(--sp-2)}
.fp-picked,.fa-picked{
  padding:var(--sp-2) var(--sp-3);
  background:var(--th-bg);border-top:1px solid var(--line);
}
.fp-picked .hint,.fa-picked .hint{margin:0}
.fp-unpick,.fa-unpick{
  all:unset;margin-left:5px;padding:0 3px;
  cursor:pointer;opacity:.65;font-size:10px;line-height:1;
}
.fp-unpick:hover,.fa-unpick:hover{opacity:1}

table.grid td .row > button.toggle{padding:0 8px;gap:0}

.empty{
  padding:var(--sp-5) var(--sp-4);text-align:center;color:var(--muted);
  background:rgba(255,255,255,.012);
  border:1px dashed var(--line-2);border-radius:var(--r);
  font-size:var(--fs-base);
}
.empty .em-title{margin-bottom:5px;color:var(--txt);font-size:var(--fs-base);font-weight:600}
.empty.loading{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);border-style:solid}
.empty.small{padding:var(--sp-4);border:0;background:transparent;color:var(--muted-2);font-size:var(--fs-md)}
.spinner{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-fail{max-width:520px;margin:8vh auto;padding:var(--sp-6);text-align:center}
.auth-fail h2{margin-bottom:var(--sp-2);color:var(--err)}
.auth-fail .actions{
  display:flex;justify-content:center;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4);
}

.toast-region{
  position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:var(--z-toast);
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2);
  max-width:min(400px,92vw);
}
.toast{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3);
  background:linear-gradient(180deg,#1c2836,#141d29);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);box-shadow:var(--sh-2);
  font-size:var(--fs-base);line-height:1.45;
  animation:slide .16s ease;
}
@keyframes slide{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.toast.ok{border-left-color:var(--ok)}
.toast.err{border-left-color:var(--err)}
.toast.warn{border-left-color:var(--warn)}
.toast-body{flex:1;min-width:0}
.toast-close{
  min-height:0;padding:0 2px;background:transparent;border:0;color:var(--muted);
  font-size:var(--fs-base);line-height:1;
}
.toast-close:hover{color:var(--txt);filter:none;background:transparent}

.tip-float{
  position:fixed;z-index:var(--z-tip);max-width:min(300px,80vw);
  padding:6px 10px;
  background:#0a1017;color:var(--txt);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:var(--fs-md);line-height:1.4;box-shadow:var(--sh-2);
  opacity:0;pointer-events:none;transition:opacity .12s;
}
.tip-float.on{opacity:1}

.gw-progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:var(--z-progress);
  background:transparent;pointer-events:none;opacity:0;transition:opacity .15s ease;
}
.gw-progress.on{opacity:1}
.gw-progress > span{
  display:block;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,#60a5fa,#93c5fd,#60a5fa,transparent);
  box-shadow:0 0 8px rgba(96,165,250,.6);
  animation:gwslide 1.05s linear infinite;
}
@keyframes gwslide{from{transform:translateX(-60%)}to{transform:translateX(260%)}}
.busy-status{
  display:none;align-items:center;gap:6px;
  font-size:var(--fs-sm);color:var(--accent-2);font-weight:600;
}
.busy-status.on{display:inline-flex}
.busy-status::before{
  content:"";width:11px;height:11px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
[data-busy="1"] .table-wrap{opacity:.5;filter:saturate(.6);transition:opacity .12s ease}

.scroll-top{
  position:fixed;right:24px;bottom:24px;z-index:var(--z-fab);
  width:42px;height:42px;padding:0;border-radius:50%;
  display:grid;place-items:center;font-size:16px;line-height:1;
  background:linear-gradient(180deg,#3d84f7,#2563eb);color:#fff;
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  pointer-events:none;
}
body.is-scrolled .scroll-top{pointer-events:auto}
body.is-scrolled .scroll-top{opacity:1;visibility:visible;transform:none}
body.modal-open .scroll-top{opacity:0;visibility:hidden}

.table-wrap.has-x-overflow:not(.at-x-start){box-shadow:inset 24px 0 18px -18px rgba(0,0,0,.75)}
.table-wrap.has-x-overflow:not(.at-x-end){box-shadow:inset -24px 0 18px -18px rgba(0,0,0,.75)}
.table-wrap.has-x-overflow:not(.at-x-start):not(.at-x-end){
  box-shadow:inset 24px 0 18px -18px rgba(0,0,0,.75),
             inset -24px 0 18px -18px rgba(0,0,0,.75);
}

.hide{display:none!important}
.muted{color:var(--muted)}
.muted-2{color:var(--muted-2)}
.small{font-size:var(--fs-sm)}
.row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2)}
.flex-1{flex:1}
.mt-8{margin-top:var(--sp-2)}
.mt-12{margin-top:var(--sp-3)}
.mt-16{margin-top:var(--sp-4)}
.mb-0{margin-bottom:0}
.mb-8{margin-bottom:var(--sp-2)}
.mb-12{margin-bottom:var(--sp-3)}

@media (max-width:1100px){
  .view{max-width:100%}

  table.grid.compact td .row{flex-wrap:nowrap}
}

@media (max-width:1000px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid .span-3,.form-grid .span-4{grid-column:span 2}
}

@media (max-width:900px){
  .app-header{gap:var(--sp-2)}
  .app-header h1{flex:1 1 100%;font-size:var(--fs-base)}
  /* R16: header controls wrap gracefully on narrower screens */
  .bp-header-controls{margin-left:0;flex:0 1 auto}
  .header-filter{width:160px;flex:1 1 120px}
}

@media (max-width:820px){
  .ex-act{
    flex:1 1 100%;padding:var(--sp-2) 0 0;
    border-left:0;border-top:1px solid var(--line-2);
  }
  .ex-act button{flex:1 1 auto}
}

@media (max-width:760px){
  .explorer-toolbar,.filter-bar,.ex-filter-bar{
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-2);
  }
  .explorer-toolbar .flex-1,.ex-filter-bar .flex-1{display:none}
  .ex-filter-bar input,.ex-filter-bar select,
  .filter-bar input,.filter-bar select{width:100%;max-width:none;min-width:0}
  .ex-filter-bar .sort-group,.ex-filter-bar [data-a="fReset"]{grid-column:1 / -1}
  .ex-filter-bar [data-a="fReset"]{justify-self:end}
  .card-actions{width:100%}
  .card-actions button{flex:1 1 auto}
}

@media (max-width:700px){
  .scope-grid{grid-template-columns:1fr}
  .uc-perm-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:680px){
  .bulk-toolbar{position:sticky;bottom:0;z-index:var(--z-bulk);padding-right:56px}
  .form-grid{grid-template-columns:1fr}
  .form-grid [class^=span-]{grid-column:span 1}

  table.grid,table.grid thead,table.grid tbody,table.grid tr,table.grid td,table.grid th{
    display:revert;
  }
  table.grid td::before{content:none!important}
  .table-wrap{overflow:auto;max-height:var(--tw-max, calc(100dvh - var(--hdr-h) - 176px))}
}

@media (max-width:620px){
  .form-section > .fs-head{grid-template-columns:auto 1fr;padding:var(--sp-2)}
  .form-section > .fs-head .fs-icon{display:none}
  .form-section > .fs-head .fs-tools{grid-column:1 / -1;grid-row:3;margin-top:var(--sp-1)}
  .form-section > .fs-head .fs-desc{grid-column:1 / -1}
  .ex-bar{gap:var(--sp-1)}
  .fb-field,.fb-field input,.fb-field select,.fb-field .sort-dir{width:100%;min-width:0}
  body.modal-open .toast-region{top:var(--sp-3);bottom:auto;align-items:stretch}
}

@media (max-width:560px){
  .user-chip .uc-label{display:none}
  .user-chip .uc-name{font-size:var(--fs-base)}
}

@media (max-width:520px){
  .toast-region{left:var(--sp-3);right:var(--sp-3);align-items:stretch;max-width:none}
  .scroll-top{right:12px;bottom:12px;width:36px;height:36px;font-size:15px}
}

@media (max-width:420px){
  .explorer-toolbar,.filter-bar,.ex-filter-bar{grid-template-columns:1fr}
  .uc-perm-grid{grid-template-columns:1fr}
}

/* ── R16: Mobile responsiveness ──────────────────────────────────────── */
@media (max-width:640px){
  /* Header: stack controls on small screens */
  .app-header{flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);min-height:auto;padding:var(--sp-2)}
  .app-header h1{font-size:var(--fs-base);flex:1 1 auto;min-width:0}
  .bp-header-controls{order:2;flex:1 1 100%;margin-left:0}
  .bp-header-controls .header-select{width:100%;min-width:0}
  .header-filter{order:3;flex:1 1 100%;width:100%}
  .page-actions{order:4;flex:1 1 100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;gap:var(--sp-1)}
  .page-actions button.ghost.small{flex:none;font-size:var(--fs-xs);padding:0 8px}

  /* View: tighter padding */
  .view{padding:var(--sp-2) var(--sp-2) calc(var(--sp-4) + 44px)}
  .view--full{padding:var(--sp-1) var(--sp-1) var(--sp-1);--tw-max:calc(100dvh - 90px)}
  body.detail .view{padding:var(--sp-2)}

  /* Section headings: allow wrapping */
  .rd-sub{flex-wrap:wrap;font-size:var(--fs-base);gap:var(--sp-2);margin:var(--sp-5) 0 var(--sp-3)}
  .inline-filter{width:100%;flex:1 1 100%;min-width:0}

  /* Section spacing on mobile */
  .lk-sec{margin:0 0 var(--sp-5)}
  .lk-sec + .lk-sec{padding-top:var(--sp-5);margin-top:var(--sp-5)}

  /* Tables: ensure horizontal scroll */
  .table-wrap{border-radius:var(--r-sm)}
  table.grid th,table.grid td{padding:5px var(--sp-2);font-size:var(--fs-sm)}
  table.grid th{font-size:9px}

  /* Cards: tighter padding */
  .card-body{padding:var(--sp-2) var(--sp-3) var(--sp-3)}

  /* KPIs: 2-col on phone */
  .rd-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}

  /* Col dropdown: bottom sheet */
  .bp-col-dropdown{position:fixed;bottom:0;left:0;right:0;top:auto;
    max-width:100vw;min-width:0;border-radius:var(--r) var(--r) 0 0;max-height:50vh;z-index:200}

  /* Chips */
  .lk-chips{gap:4px}
  .lk-chips .pill{font-size:var(--fs-xs)}
}

@media (max-width:380px){
  .app-header h1{font-size:var(--fs-sm)}
  .page-actions button.ghost.small{min-height:26px;font-size:9px;padding:0 6px}
  .rd-kpis{grid-template-columns:1fr 1fr}
  .rd-sub{font-size:var(--fs-sm)}
}

@media (pointer:coarse){
  button{min-height:38px}
  button.small,button.toggle,.count-chip{min-height:32px}
  input,select,textarea{min-height:38px}
  input[type=checkbox],input[type=radio]{width:18px;height:18px}
}

:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:3px}
:focus:not(:focus-visible){outline:none}
button:focus-visible{box-shadow:0 0 0 3px rgba(96,165,250,.32)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:var(--sp-2);z-index:1300;
  padding:var(--sp-2) var(--sp-3);
  background:var(--accent);color:#fff;border-radius:var(--r-sm);
}
.skip-link:focus{left:var(--sp-3)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ── PATCH (admin All-files parity — 2026-09) ─────────────────────────
   Group-by toggle for the admin "Files → All files" subtab. Same visual
   language as the portal explorer filter chips. The column-toggle CHIP
   bar was retired in favour of the ⚙ Columns dropdown below (see
   PATCH 2026-09 "column hide/show should be a drop-down list"). */
.af-group-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;border:1px solid var(--line);border-radius:999px;
  background:var(--th-bg);color:var(--muted);
  font-size:var(--fs-sm);line-height:1.6;cursor:pointer;user-select:none;
}
.af-group-toggle:hover{border-color:var(--accent-2);color:var(--txt)}
.af-group-toggle input{margin:0}

/* ── PATCH (operator report — 2026-09 "column hide/show as drop-down list
   for all tables — keep the interface clean, avoid confusing users") ──
   The ⚙ Columns dropdown replaces the inline chip bar in both the admin
   All-files subtab and the user-portal file explorer. It is a plain
   <details> popover: opens on click, closes on click-outside (wired in
   admin.js / file-utils.js), keeps its menu open while the user flips
   multiple checkboxes.

   The menu itself is absolutely positioned so opening it does not push
   the toolbar or the table underneath -- a stable, non-shifting layout
   was the main complaint about the old inline chips.

   Reused by:
     • admin.js  → filesAll()  (⚙ Columns on "Files → All files")
     • file-utils.js → makeExplorer()  (⚙ Columns on user-portal explorer)
*/
.col-picker-wrap{display:inline-flex;position:relative}
.col-picker-dd{position:relative;display:inline-block}
.col-picker-dd > summary{
  list-style:none;
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--th-bg);color:var(--muted);
  font-size:var(--fs-sm);line-height:1.6;cursor:pointer;user-select:none;
  white-space:nowrap;
}
.col-picker-dd > summary::-webkit-details-marker{display:none}
.col-picker-dd > summary::marker{content:""}
.col-picker-dd > summary:hover{border-color:var(--accent-2);color:var(--txt)}
.col-picker-dd[open] > summary{
  border-color:var(--accent-2);color:var(--txt);
  background:var(--panel);
}
.col-picker-dd .dd-caret{
  transition:transform .15s ease;font-size:.85em;opacity:.75;
}
.col-picker-dd[open] .dd-caret{transform:rotate(180deg)}

/* PATCH (operator report — 2026-09 "user portal: columns filters
   drop-down visually incorrect showing — fix it"):
   The old menu was `position:absolute` inside a `.col-picker-wrap` that
   the parent .card was clipping via `overflow:hidden`, so on narrow
   viewports and on the merged single-row toolbar it opened underneath
   the table or was cut off at the card edge. Switched to fixed
   positioning; the wrap's script sets --cp-top / --cp-left via
   inline style just before the menu paints, so the popover always sits
   flush under the ⚙ Columns button no matter which ancestor is
   clipping. `min-width` and `max-width` were also tuned so it looks
   like a real popover instead of a stretched inline strip. */
.col-picker-menu{
  position:fixed;
  top:var(--cp-top, calc(100% + 6px));
  left:var(--cp-left, auto);
  min-width:200px;max-width:min(320px,90vw);
  max-height:min(60vh,420px);overflow:auto;
  z-index:calc(var(--z-thead) + 40);
  padding:6px;
  background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 8px 32px -8px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:2px;
}
.col-menu-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:6px;cursor:pointer;user-select:none;
  color:var(--txt);font-size:var(--fs-md);line-height:1.4;
  background:transparent;
}
.col-menu-item:hover{background:rgba(96,165,250,.14)}
.col-menu-item input{margin:0;flex:none}
.col-menu-item > span{flex:1;min-width:0;white-space:nowrap;color:var(--txt)}

/* Mobile: expand the dropdown to a full-width bottom sheet so tap
   targets stay comfortable. */
@media (max-width: 640px){
  .col-picker-menu{
    position:fixed;top:auto;bottom:0;left:0;right:0;
    max-width:100vw;min-width:0;
    border-radius:var(--r) var(--r) 0 0;max-height:60vh;
  }
}

/* ── PATCH (operator report — 2026-09 "over all table's columns should
   be moveable to change order by user's choice") ──────────────────────
   Visual affordances for the drag-drop column reordering wired up in
   admin.js (dataTable) and file-utils.js (explorer). A draggable <th>
   shows a grab cursor; the source column dims while the pointer is
   dragging; the drop target grows a coloured 2px insertion bar on the
   left or right edge depending on the pointer's half.
   These styles are inert on tables that do not opt into reordering,
   because they only match .col-dragging / .col-drop-* classes that
   the JS attaches when a drag begins. */
table.grid th[data-dt-col],
table.grid th[data-col-key]{cursor:grab}
table.grid th[data-dt-col]:active,
table.grid th[data-col-key]:active{cursor:grabbing}
table.grid th.col-dragging{opacity:.4}
table.grid th.col-drop-before{box-shadow:inset 3px 0 0 var(--accent-2), 0 6px 10px -6px rgba(0,0,0,.75)}
table.grid th.col-drop-after {box-shadow:inset -3px 0 0 var(--accent-2), 0 6px 10px -6px rgba(0,0,0,.75)}

/* ── PATCH (operator report — 2026-09 "user portal: it should be a
   single row — Refresh button first, then Folder dropdown, then other
   info") ──────────────────────────────────────────────────────────────
   The merged .ex-strip toolbar replaces the historic ex-nav + ex-scope
   two-row stack. Same visual container as .ex-bar, plus a left border
   accent so it still reads as the primary toolbar for the file
   explorer. Its children flow-wrap on very narrow viewports but stay
   on ONE row on any normal desktop width. */
.ex-strip{
  border-left:2px solid var(--accent-2);
  background:var(--panel-3);
  row-gap:6px;
}
.ex-strip button{min-height:30px;font-weight:550}
.ex-strip [data-a="back"]{
  background:linear-gradient(180deg,#3d84f7,#2563eb);border-color:transparent;color:#fff;
}
.ex-strip .crumbs{margin:0;font-size:var(--fs-md)}
.ex-strip .ex-act{
  padding-left:var(--sp-2);border-left:1px solid var(--line-2);
}
.ex-strip .ex-act.is-empty{padding-left:0;border-left:0}
.ex-strip .fb-field{margin:0}
.ex-strip .col-picker-wrap{margin-right:6px}

/* PATCH (2026-09 single-row toolbar): inline compact form fields —
   the FOLDER label above the dropdown is gone, so the select must
   stand on its own with no wasted vertical space. `--inline` shrinks
   the field to a single row that fits the toolbar's row height. */
.ex-strip .fb-field--inline{flex-direction:row;align-items:center;gap:4px}
.ex-strip .fb-field--inline select{min-height:30px;padding:2px var(--sp-2);font-size:var(--fs-md)}

/* Inline crumbs are always short (they only ever render inside a
   specific folder), so keep them from stretching and pushing counts
   off the right of the toolbar. */
.ex-strip .crumbs--inline{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Compact counts pill lives at the tail of the toolbar. */
.ex-strip .ex-counts--tail{font-size:var(--fs-sm);color:var(--muted);flex:0 0 auto}

/* PATCH (2026-09 collapsible-filters as inline dropdown): the filter
   button lives on the toolbar. Once the disclosure body opens it
   drops into a headless panel with only a small internal caption
   ("🔎 Filters & sorting") + Reset button — no big header row. */
.dc.dc--headless{background:transparent;border:0;padding:0;margin:0}
.dc.dc--headless > .dc-body{
  padding:var(--sp-2) var(--sp-3);
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r);
  margin-top:var(--sp-2);
}
.fb-toolstrip{
  display:flex;align-items:center;gap:var(--sp-2);
  margin:0 0 var(--sp-2);
}
.fb-toolstrip-label{
  font-weight:600;color:var(--txt);font-size:var(--fs-md);
  display:inline-flex;align-items:center;gap:4px;
}
.fb-toolstrip .flex-1,.fb-toolstrip [data-a="fReset"]{margin-left:auto}

/* Filter toggle button on the toolbar. */
.ex-strip button[data-a="fToggle"]{
  display:inline-flex;align-items:center;gap:4px;
}
.ex-strip button[data-a="fToggle"][aria-expanded="true"]{
  background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2);
}

/* Portal card: card-head is gone; keep the body flush. */
.card.card--flush > .card-body.card-body--flush{
  padding:var(--sp-3) var(--sp-4);
}

/* ═══════════ RECORD DETAILS ═══════════ */
button.rd-launch{
  background:linear-gradient(135deg,#8b5cf6,#3b82f6);color:#fff;border-color:transparent;
  font-weight:650;box-shadow:0 0 0 1px rgba(139,92,246,.35),0 4px 14px -4px rgba(139,92,246,.6);
}
button.rd-launch:hover:not(:disabled){filter:brightness(1.12)}
.dlg:has(.rd){max-width:min(1240px,100%)!important}
.rd-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);
  background:var(--th-bg);border:1px solid var(--line);border-left:2px solid #8b5cf6;border-radius:var(--r)}
.rd-ctl{display:flex;flex-direction:column;gap:3px;margin:0}
.rd-ctl>span{font-size:var(--fs-xs);font-weight:650;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
.rd-ctl select,.rd-ctl input{min-height:30px;padding:3px var(--sp-2);font-size:var(--fs-md);width:auto;min-width:140px}
/* PATCH (2026-09 — "compact analytics everywhere"): the KPI tiles were the
   single biggest vertical-space consumer on every analytics surface (contact
   stats, per-contact history, dashboards): a 3-line stack 150px wide each, so
   eight tiles wrapped onto two rows and pushed the real content below the
   fold. The tile is now a compact two-column block — icon + value on the
   first line, the label tucked under it, the sub-value (avg / range) on a
   slim third line — roughly half the height at the same information
   density. Because every analytics surface renders `.rd-kpis`, this one
   block restyles them all. */
/* R16: increased gap below KPI row */
.rd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;margin-bottom:var(--sp-4)}
.rd-kpis--sm{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.rd-kpi{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i v" "i k" "s s";
  align-items:center;column-gap:6px;padding:5px 9px;min-width:0;
  background:linear-gradient(180deg,var(--panel-3),var(--panel-2));border:1px solid var(--line);
  border-left:2px solid var(--accent);border-radius:8px}
.rd-kpi.vio{border-left-color:#8b5cf6}.rd-kpi.in{border-left-color:#22c55e}
.rd-kpi.out{border-left-color:#60a5fa}.rd-kpi.missed{border-left-color:#ef4444}.rd-kpi.warn{border-left-color:#f59e0b}
.rd-kpi-i{grid-area:i;font-size:13px;opacity:.85;line-height:1}
.rd-kpi-v{grid-area:v;font-size:var(--fs-lg);font-weight:700;font-variant-numeric:tabular-nums;color:var(--txt);
  line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-kpi-k{grid-area:k;font-size:9.5px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-kpi-s{grid-area:s;font-size:var(--fs-xs);color:var(--muted-2);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--sp-3);margin-top:var(--sp-3)}
.rd-card{background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);min-width:0}
.rd-card.wide{grid-column:1/-1}
.rd-h{margin:0 0 var(--sp-2);font-size:var(--fs-base);font-weight:650}
.rd-sub{margin:var(--sp-3) 0 var(--sp-2);font-size:var(--fs-sm);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.rd-donut-wrap{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.rd-donut{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative}
.rd-donut::before{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--th-bg)}
.rd-donut b{position:relative;font-size:var(--fs-xl)}
.rd-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-md)}
.rd-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.rd-legend i.in,.rd-stack .in,.rd-col-bar .in{background:#22c55e}
.rd-legend i.out,.rd-stack .out,.rd-col-bar .out{background:#60a5fa}
.rd-legend i.missed,.rd-stack .missed,.rd-col-bar .missed{background:#ef4444}
.rd-legend i.unk,.rd-stack .unk,.rd-col-bar .unk{background:#64748b}
.rd-hbars{display:flex;flex-direction:column;gap:5px}
.rd-hbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm)}
.rd-hbar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-hbar-t{height:10px;background:var(--panel-3);border-radius:var(--r-pill);overflow:hidden}
.rd-hbar-t>span{display:block;height:100%;background:linear-gradient(90deg,#8b5cf6,#60a5fa);border-radius:inherit}
.rd-hbar-v{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rd-stack{display:flex;width:110px;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--panel-3)}
.rd-stack>span{height:100%}
.rd-cols{display:flex;align-items:flex-end;gap:2px;height:170px;padding:4px 0;border-bottom:1px solid var(--line-2)}
.rd-col{flex:1 1 0;height:100%;display:flex;align-items:flex-end;min-width:3px}
.rd-col-bar{width:100%;display:flex;flex-direction:column-reverse;border-radius:3px 3px 0 0;overflow:hidden;min-height:2px}
.rd-col-bar>span{display:block;width:100%}
.rd-col:hover .rd-col-bar{filter:brightness(1.25)}
.rd-axis{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--muted-2);margin-top:4px;gap:var(--sp-2)}
.rd-heat{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.rd-heat-c{display:flex;flex-direction:column;align-items:center;padding:6px 2px;border-radius:6px;
  background:rgba(139,92,246,calc(.08 + var(--a) * .72));border:1px solid var(--line);font-size:var(--fs-xs)}
.rd-heat-c b{font-size:var(--fs-sm)}
.rd-map{width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line)}
.rd-map-bg{fill:#0d1622}.rd-map line{stroke:#1f2d3d;stroke-width:1}
.rd-map circle:hover{r:7}
.rd-qual{list-style:none;margin:0;padding:0}
.rd-qual li{display:flex;justify-content:space-between;gap:var(--sp-2);padding:4px 0;
  border-bottom:1px dashed rgba(255,255,255,.06);font-size:var(--fs-md)}
.rd-table-wrap{max-height:420px}
tr[data-rd-peer]{cursor:pointer}
.rd-kv li>div{text-align:right;min-width:0;overflow-wrap:anywhere}
.rd-info-hist{margin-top:var(--sp-3)}
@media (max-width:700px){.rd-grid{grid-template-columns:1fr}.rd-heat{grid-template-columns:repeat(6,1fr)}}

/* ── Record Details v2 ── */
.rd-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:8px 12px;margin-bottom:var(--sp-1);
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-md);color:var(--muted)}
.rd-summary b{color:var(--txt);font-variant-numeric:tabular-nums}
/* R16: more generous section break */
.rd-section{margin:var(--sp-6) 0 0;padding-top:var(--sp-5);border-top:2px solid var(--line-2);font-size:var(--fs-lg);font-weight:650}
.rd-h .muted{font-weight:400;font-size:var(--fs-sm)}
.rd-tools{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.rd-tools input{max-width:320px;min-height:30px;padding:4px var(--sp-2);font-size:var(--fs-md)}
.rd-alias{margin-left:4px;padding:0 5px;border-radius:var(--r-pill);background:var(--panel-3);color:var(--muted);font-size:var(--fs-xs);cursor:help}
.rd-chs{display:inline-flex;gap:3px;flex-wrap:nowrap}
.pill.rd-ch--phone{color:#93c5fd;border-color:var(--accent-line);background:var(--accent-soft)}
.pill.rd-ch--whatsapp{color:#86efac;border-color:rgba(34,197,94,.36);background:rgba(34,197,94,.10)}
.pill.rd-ch--other{color:#c4b5fd;border-color:rgba(139,92,246,.34);background:rgba(139,92,246,.10)}

/* full-width tables: fill the card, wrap long text instead of truncating */
.rd-table-wrap{max-height:460px}
.rd-table-wrap--fluid table.grid,.rd-table-wrap--fluid table.grid.compact{width:100%;min-width:100%}
.rd-table-wrap--fluid table.grid td.rd-wrap{white-space:normal;overflow-wrap:anywhere;min-width:200px;line-height:1.4}
.rd-table-wrap--fluid table.grid td.rd-wrap--wide{min-width:320px;width:60%}

/* free tile map */
.rd-map2{position:relative;height:clamp(320px,52vh,540px);overflow:hidden;border:1px solid var(--line);
  border-radius:var(--r);background:#0d1622;cursor:grab;touch-action:none;user-select:none}
.rd-map2.is-dragging{cursor:grabbing}
.rd-map2.is-empty{height:auto;cursor:default;background:transparent;border:0}
.rd-map-tiles,.rd-map-pins{position:absolute;inset:0}
.rd-map-tiles img{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none}
.rd-map2 .rd-pin{position:absolute;transform:translate(-50%,-50%);width:14px;min-width:14px;height:14px;min-height:0;padding:0;
  border-radius:50%;border:2px solid #fff;background:#64748b;color:#fff;font-size:10px;font-weight:700;line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.6);cursor:pointer;z-index:1}
.rd-map2 .rd-pin.is-multi{width:auto;min-width:24px;height:24px;padding:0 5px;border-radius:999px}
.rd-map2 .rd-pin--in{background:#16a34a}.rd-map2 .rd-pin--out{background:#2563eb}.rd-map2 .rd-pin--missed{background:#dc2626}
.rd-map2 .rd-pin:hover,.rd-map2 .rd-pin:active{transform:translate(-50%,-50%) scale(1.2);filter:none;z-index:2}
.rd-map-ctl{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:4px;z-index:3}
.rd-map2 .rd-map-ctl button{width:32px;height:32px;min-height:32px;padding:0;background:var(--panel);color:var(--txt);
  border:1px solid var(--line-2);font-size:16px;box-shadow:var(--sh-1)}
.rd-map-attr{position:absolute;right:0;bottom:0;padding:2px 6px;font-size:10px;color:var(--muted);
  background:rgba(11,15,20,.75);border-top-left-radius:6px;z-index:3}
.rd-map-pop{position:absolute;z-index:4;width:260px;max-height:75%;overflow:auto;padding:10px 12px;cursor:default;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-2);font-size:var(--fs-sm)}
.rd-map-pop ul{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.rd-map2 .rd-map-x{position:absolute;top:4px;right:4px;width:22px;height:22px;min-height:22px;padding:0;
  background:transparent;border:0;color:var(--muted)}
.rd-map-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:6px;font-size:var(--fs-sm);color:var(--muted)}
.rd-map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.rd-map-legend i.in{background:#16a34a}.rd-map-legend i.out{background:#2563eb}.rd-map-legend i.missed{background:#dc2626}

/* ══════════════════════════════════════════════════════════════════════
   PATCH (2026-09 — contact page + record-details page): every phone number
   in the user panel is a link that opens /contact.html (the one place that
   shows a number's API lookup and its call statistics); Record Details
   opens /record-details.html. Both are standalone pages sharing the
   `body.detail` shell below. Also styles the read-only flag pills used by
   the admin Users table.
   ══════════════════════════════════════════════════════════════════════ */
.caller-link,.contact-link{
  color:var(--accent-2);text-decoration:none;
  border-bottom:1px dotted var(--accent-line);
  font-variant-numeric:tabular-nums;
}
.caller-link:hover,.caller-link:focus-visible,
.contact-link:hover,.contact-link:focus-visible{color:var(--txt);border-bottom-color:var(--accent-2)}
.caller-link::after,.contact-link::after{content:"\2197";font-size:9px;margin-left:3px;opacity:.6;vertical-align:super}
tr[data-contact-open]{cursor:pointer}
tr[data-contact-open]:hover td{background:var(--panel-3)}

/* Clickable on/off flag toggles (admin Users table "Flags" column).
   PATCH (operator report — "FLAGS enabled/disabled visually correctly
   showing"): an ON flag is green and an OFF flag is red+faded, each with a
   legible ON/OFF word, so the state reads at a glance and the button itself
   is the control that persists it. */
.flag-toggle{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;font-size:var(--fs-sm);font-weight:600;
  border-radius:999px;border:1px solid var(--line);background:var(--th-bg);
  color:var(--muted-2);cursor:pointer;user-select:none;white-space:nowrap;
  transition:border-color .12s,background .12s,color .12s;
}
.flag-toggle:hover{border-color:var(--line-2)}
.flag-toggle.on{color:#86efac;border-color:rgba(34,197,94,.34);background:rgba(34,197,94,.10)}
.flag-toggle.off{color:#fca5a5;border-color:rgba(239,68,68,.32);background:rgba(239,68,68,.10)}
/* Single-line table rows: keep a cell on one line, ellipsise what overflows. */
.u-inline{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
table.grid td.u-nowrap{white-space:nowrap}
table.grid td.u-nowrap > *{min-width:0}
/* Legacy read-only flag pills kept for any other surface that still uses them */
.pill.flag{padding:2px 7px;font-size:var(--fs-sm);cursor:default;user-select:none}
.pill.flag.off{opacity:.45}

/* ── Standalone detail pages (/contact.html · /record-details.html) ── */
body.detail .view{max-width:1400px;margin:0 auto;padding:var(--sp-3)}
body.detail .card-body{padding-top:var(--sp-2)}
body.detail .page-num{font-size:var(--fs-2xl);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
body.detail .page-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
body.detail .page-sub{color:var(--muted);font-size:var(--fs-md)}
/* R16: generous section spacing — clear visual separation between data blocks */
.lk-sec{margin:0 0 var(--sp-6)}
.lk-sec + .lk-sec{border-top:2px solid var(--line-2);padding-top:var(--sp-6);margin-top:var(--sp-6)}
.lk-sec .rd-sub:first-child{margin-top:0}
.lk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--sp-2)}
.lk-lines{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--sp-2)}
.lk-note{
  display:block;padding:var(--sp-3);border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--th-bg);color:var(--muted);font-size:var(--fs-md);
}
.lk-note.warn{border-color:var(--accent-line);color:var(--txt);background:var(--accent-soft)}
/* R16: table-wrap and lk-table inside sections get bottom breathing room */
.lk-sec .table-wrap{margin-bottom:var(--sp-3)}
.lk-sec .lk-chips{margin-bottom:var(--sp-3)}
.lk-table{max-height:none}
.lk-table table.grid{width:100%}
.lk-stamp{color:var(--muted-2);font-size:var(--fs-sm)}

/* ── Trace-X chips ──────────────────────────────────────────────────────
   The Trace-X1 / Trace-X4 columns arrive as one " | "-joined summary.
   They are rendered here as chips (see shared/trace-columns.js): the url
   and base64 parts never print, and the cell wraps instead of truncating
   so the whole value stays readable. */
/* ── R13: CNIC-linked table visual distinction ─────────────────────── */
table.grid.cnic-table{border:2px solid rgba(245,158,11,.35);border-radius:var(--r)}
table.grid.cnic-table thead tr{background:rgba(245,158,11,.08)}

/* ── R14/R15/R16: prominent section headings (flex for inline filter) ──── */
.rd-sub{
  display:flex;align-items:center;gap:var(--sp-3);
  color:#f59e0b;font-weight:700;font-size:var(--fs-lg);
  border-left:3px solid #f59e0b;padding-left:10px;margin:var(--sp-6) 0 var(--sp-4);
}

/* ── R14: blinking CNIC loading indicator ──────────────────────────── */
@keyframes blink-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.cnic-loading{
  font-size:var(--fs-md);font-weight:700;color:#f59e0b;
  animation:blink-pulse 1.2s ease-in-out infinite;
  padding:var(--sp-2) 0;
}

/* ── R14/R15: table filter search input ─────────────────────────────── */
.table-filter-wrap{display:flex;justify-content:flex-end;margin-bottom:6px}
.table-filter{
  width:220px;padding:5px 10px;
  background:var(--th-bg);border:1px solid var(--line-2);border-radius:var(--r-pill);
  color:var(--txt);font-size:var(--fs-sm);outline:none;
}
.table-filter:focus{border-color:var(--accent-2)}
.table-filter::placeholder{color:var(--muted-2)}

/* R15: inline filter sits INSIDE a section heading (.rd-sub), right-aligned */
.inline-filter{
  margin-left:auto;width:180px;min-height:0;flex:0 0 auto;
  padding:3px 10px;font-size:var(--fs-xs);
  background:var(--th-bg);border:1px solid var(--line-2);border-radius:var(--r-pill);
  color:var(--txt);outline:none;
}
.inline-filter:focus{border-color:var(--accent-2)}
.inline-filter::placeholder{color:var(--muted-2)}

/* R15: header-bar filter for B-party page — sits in the .app-header */
.header-filter{
  width:200px;min-height:0;flex:0 0 auto;
  padding:5px 10px;
  background:var(--th-bg);border:1px solid var(--line-2);border-radius:var(--r-pill);
  color:var(--txt);font-size:var(--fs-sm);outline:none;
}
.header-filter:focus{border-color:var(--accent-2)}
.header-filter::placeholder{color:var(--muted-2)}

/* R15: B-party header controls — folder selector lives in the header bar */
.bp-header-controls{display:inline-flex;align-items:center;gap:var(--sp-2);margin-left:var(--sp-2)}
.bp-header-controls .header-select{
  width:auto;min-width:150px;min-height:var(--btn-sm-h);
  padding:3px var(--sp-2);font-size:var(--fs-md);
  background:var(--th-bg);border:1px solid var(--line-2);
  border-radius:var(--r-sm);color:var(--txt);cursor:pointer;
}
.bp-header-controls .header-select:focus{border-color:var(--accent-2)}

/* (R15 section spacing merged into original .lk-sec rule above) */

/* R12: single-row trace cells. Pills never wrap mid-word AND the cell
   itself never wraps to a second line — all chips sit on ONE horizontal
   line. The table scrolls horizontally when needed. */
.trace-cell{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;min-width:120px;max-width:none}
.trace-cell .pill{max-width:none;white-space:nowrap;text-align:left;flex:none}
.pill.trace-name{color:#93c5fd;border-color:rgba(59,130,246,.34);background:rgba(59,130,246,.10)}
.pill.trace-alias{color:#c4b5fd;border-color:rgba(139,92,246,.30);background:rgba(139,92,246,.08)}
.pill.trace-other{color:var(--muted)}
.pill.trace-fb{color:#93c5fd;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.14);text-decoration:none}
.pill.trace-fb:hover{background:rgba(59,130,246,.24)}
.pill.trace-photo{color:#67e8f9;border-color:rgba(6,182,212,.40);background:rgba(6,182,212,.12);text-decoration:none}
.pill.trace-photo:hover{background:rgba(6,182,212,.22)}
/* the record-details page keeps the dashboard's own controls in a sticky bar */
body.detail .rd-controls{margin-bottom:var(--sp-3)}

/* ── R8: sortable headers + sort arrow ─────────────────────────────── */
th.bp-sortable{cursor:pointer;user-select:none}
th.bp-sortable:hover{color:var(--accent-2)}
.sort-arrow{font-size:10px;opacity:.8;margin-left:2px}

/* ── R8: column show/hide dropdown ─────────────────────────────────── */
.bp-col-dropdown{
  position:absolute;right:0;top:calc(100% + 4px);z-index:100;
  min-width:180px;max-height:360px;overflow-y:auto;
  background:var(--th-bg);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 6px 20px rgba(0,0,0,.35);padding:6px 0;
}
.bp-col-item{
  display:flex;align-items:center;gap:8px;padding:5px 14px;
  font-size:var(--fs-md);color:var(--txt);cursor:pointer;white-space:nowrap;
}
.bp-col-item:hover{background:var(--hover)}
.bp-col-item input[type="checkbox"]{width:15px;height:15px;margin:0;accent-color:var(--accent-2);flex:none}

/* ── R8: bold / clearer clickable numbers ──────────────────────────── */
.caller-link,.contact-link{font-weight:700;letter-spacing:.02em}

/* ── CloudX delivery log (operator request — 2026-10-03) ────────────────
   The log packs many narrow columns. Keep every row on ONE line, size each
   column to its own content (no truncation, no stretched empty gaps), and
   let the wrap scroll horizontally when the row is wider than the card. */
#cxLogTable table.grid.compact{min-width:0;width:max-content}
#cxLogTable table.grid.compact th,#cxLogTable table.grid.compact td{padding:6px 9px}
#cxLogTable table.grid.compact td{white-space:nowrap;max-width:none;overflow:visible;text-overflow:clip}
#cxLogTable table.grid.compact td.mono{font-size:var(--fs-xs)}
#cxLogTable table.grid.compact td .pill{white-space:nowrap}

/* Log filter toolbar: the search grows, the two selects stay compact. */
.cx-log-bar{flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.cx-log-bar .fb-grow{flex:1 1 240px;min-width:180px}
.cx-log-bar .fb-grow input{width:100%}
#cxLogBulk:empty{display:none}

/* ── CloudX user portal (/cloudx) ─────────────────────────────────────── */
.cx-login{max-width:460px;margin:8vh auto 0;padding:0 var(--sp-4)}
.cx-login .card{margin:0}
.cx-login .form-error{margin:0 0 var(--sp-2)}
.cx-login-alt{margin:var(--sp-4) 0 0;text-align:center}
.cx-toolbar{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);
}
.cx-toolbar input[type=search]{flex:1 1 240px;min-width:180px}
.cx-toolbar select{flex:0 0 auto;min-width:160px}
.cx-more{display:flex;justify-content:center;padding:var(--sp-3)}
.cx-player{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-toast);
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:linear-gradient(180deg,#1c2836,#141d29);
  border-top:1px solid var(--line);box-shadow:var(--sh-2);
}
.cx-player-meta{display:flex;flex-direction:column;min-width:0;line-height:1.2;flex:0 1 220px}
.cx-player-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cx-player-meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-player audio{flex:1 1 auto;min-width:0;height:38px}
@media (max-width:640px){
  .cx-player{flex-wrap:wrap}
  .cx-player-meta{flex:1 1 100%}
}

@media print{
  .app-header,.gw-progress,.scroll-top,.toast-region,.caller-link::after,
  .contact-link::after,body.detail .rd-controls,body.detail .page-actions{display:none!important}
  body.detail{background:#fff;color:#000}
  body.detail .card{border-color:#ccc}
  .table-wrap{max-height:none;overflow:visible}
}


/* ── CloudX caller detail (cloudx-party.html) ─────────────────────── */
.cx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);padding:var(--sp-3)}
.cx-stat{background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3)}
.cx-stat .k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cx-stat .v{font-size:var(--fs-lg);font-weight:600;margin-top:2px}
.cx-chart{padding:var(--sp-3);border-top:1px solid var(--line)}
.cx-chart h3{margin:0 0 var(--sp-2);font-size:var(--fs-base)}
.cx-bars{display:flex;align-items:flex-end;gap:4px;height:110px;padding-bottom:20px}
.cx-bar{flex:1 1 0;min-width:6px;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-radius:3px 3px 0 0;position:relative;min-height:3px}
.cx-bar i{position:absolute;left:50%;transform:translateX(-50%);bottom:-18px;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;font-style:normal}
.cx-split{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:0 var(--sp-3) var(--sp-3)}
.cx-api{padding:var(--sp-3);border-top:1px solid var(--line)}
.cx-api .cx-toolbar{margin-bottom:var(--sp-2)}
.cx-api table{margin-top:var(--sp-2)}
.cx-api .k{color:var(--muted);font-weight:600;vertical-align:top;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════════
 * PATCH (2026-10) — full-page tables + top-bar page tabs (CloudX portal).
 *
 * The portal tables used to live inside `.table-wrap`, which is its own
 * scroll container (max-height + overflow:auto). Nested scrolling meant the
 * full list was rarely reachable — the operator had to scroll inside a
 * small box. `.table-page` keeps the same frame (rule, radius, zebra
 * header) but lets the PAGE own the scrolling, and `.grid-page` drops the
 * per-cell min-widths so the table fits the page width instead of pushing
 * a horizontal scrollbar of its own.
 * ══════════════════════════════════════════════════════════════════════════ */

.view--page{ max-width:min(100%,1720px); padding-bottom:var(--sp-6); }

.tabs--top{ margin:var(--sp-3) auto var(--sp-3); }

.cx-topbar{ position:sticky; top:var(--hdr-h); z-index:calc(var(--z-header) - 1);
  background:linear-gradient(180deg,var(--bg) 70%,transparent); padding-bottom:var(--sp-1); }

.table-page{
  position:relative;margin:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--th-bg);
  /* No inner scroll container: the page scrollbar is the only one. */
  max-height:none;overflow:visible;
}
table.grid-page{ width:100%; }
table.grid-page td,table.grid-page th{ white-space:nowrap; }
table.grid-page td.col-act{ text-align:right; }
table.grid-page td[data-label="Device model"]{ color:var(--muted); }

/* Keep the sticky header readable while the page scrolls.
 * PATCH (2026-10-22): the +44px cleared the portal's old Recordings /
 * Callers strip. Those tabs live in the header now, and --hdr-h tracks the
 * header's real height, so the offset is the header and nothing else. */
.table-page thead th{ position:sticky; top:var(--hdr-h); z-index:var(--z-thead); }

@media (max-width:720px){
  .table-page thead th{ position:static; }
  table.grid-page{ display:block; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * CloudX → 📂 Files (admin, 2026-10-07)
 * ══════════════════════════════════════════════════════════════════════════ */
.cxf-kpis{display:flex;flex-wrap:nowrap;gap:8px;padding:0 0 var(--sp-2);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cxf-kpis .cx-stat{flex:1 1 0;min-width:110px;padding:6px 10px;border-radius:6px;background:var(--th-bg);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.cxf-kpis .cx-stat .k{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxf-kpis .cx-stat .v{font-size:var(--fs-md);font-weight:700;margin-top:1px;line-height:1.2}
.cxf-kpis .cx-stat .small{font-size:10px;line-height:1.1;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxf-views{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-2)}
.cxf-views button.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--txt)}
.cxf-bar{flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.cxf-bar .fb-grow{flex:1 1 260px;min-width:200px}
.cxf-bar .fb-grow input{width:100%}
.cxf-bar select,.cxf-bar input[type=date]{min-width:0}
.cxf-chk{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;margin:0;font-weight:500}
.cxf-chk input[type=checkbox]{width:16px!important;height:16px!important;min-width:0;margin:0;padding:0;flex:none;accent-color:var(--accent-2)}
.cxf-bar .fb-field{display:inline-flex;align-items:center;gap:6px}
.cxf-bar .fb-field .inline-lbl{margin:0;white-space:nowrap}
#cxfBulk:empty{display:none}
#cxfTable table.grid.compact td{white-space:nowrap}
#cxfTable table.grid.compact td.mono{font-size:var(--fs-xs)}
.cxf-kv th.k{width:170px;color:var(--muted);font-weight:600;text-align:left;vertical-align:top;white-space:nowrap}
.cxf-kv td{word-break:break-word}


/* ══════════════════════════════════════════════════════════════════════════
 * MOBILE OVERHAUL (2026-10-07) — admin console, CloudX portal, caller page.
 *
 * The defects this block fixes (measured at 390 px wide):
 *   • /cloudx Recordings table rendered 20 404 px wide (Callers 6 673 px):
 *     `.grid-page{display:block}` + nowrap cells made a giant blank box
 *     and the page itself scrolled sideways.
 *   • Admin tables hid most columns behind a nested horizontal scroller.
 *   • Header buttons wrapped into 2–3 rows; sub-tab bars wrapped into a
 *     block that pushed the content down.
 *   • The sticky audio player covered the last rows / "Load more".
 *   • Dialog scope pickers were two cramped columns.
 *
 * Approach: on phones every table that carries data-label cells (all
 * dataTable() tables + the portal tables, class `.dt`) becomes a list of
 * stacked cards — label on the left, value on the right, actions in a
 * full-width footer row. Pure CSS; desktop is untouched.
 * ══════════════════════════════════════════════════════════════════════════ */

html,body{max-width:100%;overflow-x:hidden}
a.btn-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* CloudX → Filters: how-to strip, radio cards, preview */
.cxfl-howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);margin:0 0 var(--sp-3)}
.cxfl-howto > div{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2) var(--sp-3);
  background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r)}
.cxfl-howto b{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--accent-2)}
.cxfl-howto span{font-size:var(--fs-md);color:var(--muted);line-height:1.4}
.cxfl-howto code,.cxfl-hits code{font-size:var(--fs-sm);padding:0 4px;border-radius:4px;background:var(--panel-3)}
.cxfl-choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin:0 0 var(--sp-2)}
.cxfl-opt{display:flex;gap:var(--sp-2);align-items:flex-start;margin:0;padding:var(--sp-2) var(--sp-3);cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.cxfl-opt:hover{border-color:var(--line-2)}
.cxfl-opt:has(input:checked){border-color:var(--accent-2);background:rgba(59,130,246,.10)}
.cxfl-opt input{margin-top:3px;flex:none;width:16px;height:16px}
.cxfl-opt span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cxfl-opt small{color:var(--muted);font-size:var(--fs-sm);line-height:1.4;font-weight:400}
.cxfl-scope[hidden]{display:none!important}
.cxfl-preview{margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);min-height:20px;
  background:var(--th-bg);border:1px dashed var(--line-2);border-radius:var(--r);font-size:var(--fs-md);line-height:1.5}
.cxfl-preview:empty{display:none}
.cxfl-hits{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);font-size:var(--fs-md);line-height:1.6}

/* Integration → Per-account access: CloudX / Legacy switch */
.ig-acc-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-2)}
.ig-acc-tabs button.active{background:var(--accent-soft, rgba(59,130,246,.16));border-color:var(--accent-line, var(--accent-2));color:var(--txt)}
.warn-hint{color:#fbbf24}

/* The page reserves room for the fixed audio player while it is open. */
body:has(.cx-player:not(.hide)) .view{padding-bottom:calc(var(--sp-6) + 120px)}

@media (max-width:900px){
  .cxfl-howto{grid-template-columns:1fr}
}

@media (max-width:640px){
  /* ── header: one compact row, buttons scroll instead of wrapping ── */
  .app-header{flex-wrap:wrap;row-gap:var(--sp-1);padding:6px var(--sp-2)}
  .app-header h1{flex:1 1 auto;min-width:0;font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-header .flex-1{display:none}
  .app-header .badge{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app-header > button.ghost.small,.app-header > a.ghost.small{min-height:32px;padding:0 10px;font-size:var(--fs-sm)}
  body.admin .app-header > button.ghost.small{flex:1 1 30%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.admin .app-header .busy-status:empty{display:none}
  body.portal .user-chip{flex:1 1 auto;min-width:0}
  body.portal .user-chip .uc-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

  /* ── tab bars: single row, swipe horizontally ── */
  .tabs,.subtabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;max-width:100%}
  .tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar{display:none}
  .tabs button,.subtabs button{flex:none;white-space:nowrap}
  .tabs{width:calc(100% - 2 * var(--sp-2));margin:var(--sp-2) auto 0}
  .subtabs{width:100%}
  .tabs--top{margin:var(--sp-2) 0}
  .cx-topbar{top:var(--hdr-h);padding:0 var(--sp-2)}

  /* ── cards / toolbars ── */
  .card{border-radius:var(--r);margin-bottom:var(--sp-3)}
  .card-head{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
  .card-head h2{flex:1 1 100%}
  .card-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .card-actions > *{width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center}
  .card-actions > :only-child{grid-column:1 / -1}
  .card-body{padding:var(--sp-2) var(--sp-3) var(--sp-3)}
  .cx-toolbar{display:flex;flex-direction:column;gap:var(--sp-2);align-items:stretch}
  .cx-toolbar input[type=search],.cx-toolbar select{width:100%;min-width:0;flex:1 1 auto}
  .cxf-bar{display:grid!important;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
  .cxf-bar .fb-grow{grid-column:1 / -1;min-width:0}
  .cxf-bar .fb-field,.cxf-bar select,.cxf-bar input{width:100%;min-width:0}
  .cxf-bar #cxfReset{grid-column:1 / -1}
  .cx-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--sp-2)}
  .meta-strip{flex-wrap:wrap}
  .cxfl-choice{grid-template-columns:1fr}
  .scope-grid{grid-template-columns:1fr}
  .scope-col-body{max-height:200px}

  /* ── dialogs: full-width sheet ── */
  .dlg-backdrop{padding:0;align-items:flex-end}
  .dlg{max-width:100%!important;border-radius:var(--r-lg) var(--r-lg) 0 0;margin:auto 0 0;padding:var(--sp-3)}
  .dlg-foot{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,#111925 30%);
    margin-left:calc(-1 * var(--sp-3));margin-right:calc(-1 * var(--sp-3));padding:var(--sp-3)}
  .dlg-foot button{flex:1 1 auto}

  /* ── player ── */
  .cx-player{padding:var(--sp-2);gap:var(--sp-2)}
  .cx-player audio{flex:1 1 calc(100% - 52px)}

  /* ═══ TABLE → CARD LIST ═══ */
  .table-wrap.dt-wrap,.table-page.dt-wrap{
    overflow:visible!important;max-height:none!important;contain:none;
    border:0;background:transparent;box-shadow:none!important;border-radius:0}
  table.grid.dt{display:block!important;width:100%!important;min-width:0!important;border:0}
  table.grid.dt colgroup,table.grid.dt thead{display:none!important}
  table.grid.dt tbody{display:flex!important;flex-direction:column;gap:var(--sp-2)}
  table.grid.dt tbody tr{
    display:grid!important;grid-template-columns:minmax(0,1fr);
    background:var(--th-bg);border:1px solid var(--line);border-radius:var(--r);
    overflow:hidden;position:relative}
  table.grid.dt tbody tr.is-alt > td,table.grid.dt tbody tr:hover td{background:transparent}
  table.grid.dt tbody td{
    display:flex!important;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);
    position:static!important;width:auto!important;max-width:none!important;min-width:0!important;
    padding:6px var(--sp-3)!important;border:0!important;border-bottom:1px solid var(--line)!important;
    white-space:normal!important;text-align:right;overflow-wrap:anywhere;word-break:break-word;
    box-shadow:none!important;background:transparent!important;font-size:var(--fs-md)}
  table.grid.dt tbody td:last-child{border-bottom:0!important}
  table.grid.dt tbody td::before{
    content:attr(data-label)!important;flex:0 0 38%;max-width:38%;text-align:left;
    color:var(--muted-2);font-size:var(--fs-xs);font-weight:650;text-transform:uppercase;letter-spacing:.05em;
    line-height:1.9}
  table.grid.dt tbody td[data-label=""]::before{content:none!important}
  table.grid.dt tbody td > *{min-width:0}
  table.grid.dt tbody td .tok-list,table.grid.dt tbody td .row{justify-content:flex-end;flex-wrap:wrap!important}
  table.grid.dt tbody td .muted.small,table.grid.dt tbody td .muted-2{white-space:normal}
  /* first cell = card title */
  table.grid.dt tbody tr > td:not(.col-sel):first-of-type,
  table.grid.dt tbody tr > td.col-sel + td{
    background:var(--panel-3)!important;font-weight:600;text-align:left;justify-content:flex-start}
  table.grid.dt tbody tr > td:not(.col-sel):first-of-type::before,
  table.grid.dt tbody tr > td.col-sel + td::before{content:none!important}
  /* selection checkbox floats in the title row */
  table.grid.dt tbody td.col-sel{position:absolute!important;top:4px;right:4px;z-index:1;
    width:auto!important;padding:4px!important;border:0!important;background:transparent!important}
  table.grid.dt tbody td.col-sel::before{content:none!important}
  table.grid.dt tbody td.col-sel input{width:20px!important;height:20px!important}
  table.grid.dt tbody tr:has(td.col-sel input) > td.col-sel + td{padding-right:40px!important}
  table.grid.dt tbody td.col-sel:empty{display:none!important}
  /* actions = full-width footer */
  table.grid.dt tbody td.col-act,table.grid.dt tbody td[data-label="Actions"]{
    justify-content:stretch;background:rgba(0,0,0,.12)!important}
  table.grid.dt tbody td.col-act::before,table.grid.dt tbody td[data-label="Actions"]::before{content:none!important}
  table.grid.dt tbody td.col-act > .row,table.grid.dt tbody td[data-label="Actions"] > .row,
  table.grid.dt tbody td.col-act > :only-child{display:flex;width:100%;gap:6px;justify-content:stretch}
  table.grid.dt tbody td.col-act button,table.grid.dt tbody td.col-act a,
  table.grid.dt tbody td[data-label="Actions"] button{flex:1 1 0;min-height:34px;justify-content:center}
  /* group header rows (dataTable groupBy) */
  table.grid.dt tbody tr.grp-row{display:block!important;background:transparent;border:0}
  table.grid.dt tbody tr.grp-row td{display:block!important;text-align:left;background:transparent!important;padding:var(--sp-1) 0!important}
  table.grid.dt tbody tr.grp-row td::before{content:none!important}
  table.grid.dt tbody tr.row-empty{display:none!important}
  table.grid.dt tbody tr.row-blocked td:first-child::after{content:none}

  /* bulk toolbar stays reachable above the bottom edge */
  .bulk-toolbar{position:sticky;bottom:0;flex-wrap:wrap;padding-right:var(--sp-2);z-index:var(--z-bulk)}

  /* plain key/value tables inside dialogs */
  table.grid.cxf-kv{width:100%;min-width:0}
  table.grid.cxf-kv th.k{width:auto}
  table.grid.cxf-kv td{white-space:normal;overflow-wrap:anywhere}
}

@media (max-width:380px){
  .card-actions{grid-template-columns:1fr}
  .cx-stats{grid-template-columns:1fr 1fr}
  table.grid.dt tbody td::before{flex-basis:42%;max-width:42%}
}

/* ══════════════════════════════════════════════════════════════════════════
 * DESKTOP LAYOUT FIX (2026-10-08) — "misalignments, vertical + horizontal
 * scrolling broken, every table row must be ONE line with horizontal scroll".
 *
 * ROOT CAUSES
 *  1. `html,body{overflow-x:hidden}` (mobile block) turned <body> into a
 *     scroll container. Sticky header / sticky table heads then stuck to
 *     the body instead of the viewport, wheel events were swallowed by the
 *     wrong scroller and the page showed two competing vertical scrollbars.
 *     → `overflow-x:clip` clips identically but creates NO scroll container.
 *  2. Cells marked `.cell-stack` / two-line cells (name + sub-line) were
 *     `white-space:normal`, so rows grew to 2-3 lines and columns drifted.
 *     → on desktop every cell is single-line; stacked sub-lines are laid
 *       out inline; the table scrolls horizontally inside its frame.
 *  3. Table frames used `contain:paint` + a viewport-based max-height that
 *     did not account for the sub-tab bar, so the horizontal scrollbar sat
 *     below the fold. → height fits the viewport, scrollbar always visible.
 * Mobile (≤640 px) card layout is unchanged.
 * ══════════════════════════════════════════════════════════════════════════ */
html,body{overflow-x:clip}
@supports not (overflow:clip){ html{overflow-x:hidden} body{overflow-x:visible} }
html{overflow-y:auto}
body{overflow-y:visible}

@media (min-width:641px){
  .view{min-width:0}
  .card,.card-body{min-width:0;max-width:100%}
  .table-wrap{
    display:block;width:100%;max-width:100%;
    overflow:auto;contain:none;
    max-height:max(320px, calc(100dvh - var(--hdr-h) - 150px));
    overscroll-behavior:auto;
  }
  @supports not (height:100dvh){ .table-wrap{max-height:max(320px, calc(100vh - var(--hdr-h) - 150px))} }
  .table-wrap::-webkit-scrollbar{height:14px;width:12px}
  table.grid{width:max-content;min-width:100%}

  /* ONE LINE PER ROW */
  table.grid th,table.grid td,
  table.grid td.wrap,table.grid td.cell-stack,table.grid td.col-grow,
  table.grid td .muted,table.grid td .small,table.grid td .pill,table.grid td b,table.grid td strong{
    white-space:nowrap!important;
  }
  table.grid td{vertical-align:middle;line-height:1.35;overflow:visible}
  table.grid td > div,table.grid td .stack,.cell-stack .stack{
    display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    align-items:center;gap:6px;vertical-align:middle;
  }
  table.grid td > b + div,table.grid td > b + .muted,table.grid td > strong + div{margin-left:8px}
  table.grid td .tok-list,table.grid td .row,table.grid td .icon-row,table.grid td .row-act{
    display:inline-flex!important;flex-wrap:nowrap!important;align-items:center
  }
  table.grid td .muted.small,table.grid td .muted-2{display:inline}
  table.grid td button.small{white-space:nowrap}
  table.grid tbody tr{height:auto}

  /* aligned header/body + selection column */
  table.grid th,table.grid td{text-align:left}
  table.grid td.num,table.grid th.num{text-align:right}
  table.grid .col-sel{width:40px;min-width:40px;text-align:center}

  /* sticky elements line up (sub-tab bar no longer slides under header) */
  .app-header{position:sticky;top:0}
  .table-page thead th{top:var(--hdr-h)}
  .cxf-bar{flex-wrap:wrap}
  .card-head{flex-wrap:wrap;row-gap:var(--sp-2)}
  .card-actions{flex-wrap:wrap;justify-content:flex-end}
}

/* ══════════════════════════════════════════════════════════════════════════
 * HORIZONTAL SCROLL FIX (2026-10-08b) — "Caller lookup" table on the caller
 * page and the Recordings / Callers tables on /cloudx were cut off on the
 * right ("ADDI…", "Downl…").
 *
 * ROOT CAUSE: `.table-page` was declared `overflow:visible` so the PAGE
 * would own vertical scrolling. The table is `width:max-content`, so when
 * it is wider than the page it spilled out of its frame and was clipped by
 * the parent `.card{overflow:hidden}` and `html,body{overflow-x:clip}` —
 * the right-hand columns were simply unreachable.
 *
 * FIX: every `.table-page` is now its own HORIZONTAL scroll container
 * (`overflow-x:auto`) and all th/td are `white-space:nowrap`, so columns
 * keep their natural width and nothing is squished or cut. Vertical
 * scrolling still belongs to the page (no max-height). Because a scroll
 * container breaks `position:sticky` against the page, the header is kept
 * on screen by shared/table-scroll.js (translateY), which also adds a
 * floating horizontal scrollbar pinned to the bottom of the viewport while
 * the table's own scrollbar is below the fold.
 * Mobile (≤640 px) card layout is unchanged.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:641px){
  .card.card--flush > .card-body.card-body--flush,
  .cx-api,#cpApiOut,#cxTable,#cxCallers,#cxTabRec,#cxTabCallers{min-width:0;max-width:100%}

  .table-page{
    display:block;width:100%;max-width:100%;min-width:0;
    overflow-x:auto!important;overflow-y:hidden!important;
    max-height:none;contain:none;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-color:var(--muted-2) transparent;
  }
  .table-page::-webkit-scrollbar{height:14px}
  .table-page::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.35);border-radius:8px;
    border:3px solid transparent;background-clip:content-box;
  }
  .table-page::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.6);background-clip:content-box}
  .table-page::-webkit-scrollbar-track{background:transparent}

  /* natural column widths — the table may be wider than its frame */
  .table-page > table.grid,
  .table-page > table.grid-page{display:table!important;width:max-content!important;min-width:100%!important;table-layout:auto}
  .table-page table.grid th,
  .table-page table.grid td,
  .table-page table.grid td *{white-space:nowrap!important}
  .table-page table.grid td{max-width:none;overflow:visible;text-overflow:clip}

  /* header: kept visible by table-scroll.js (sticky can't follow the page
     out of a scroll container). top:0 avoids the old --hdr-h offset
     pushing the header down over the first rows. */
  .table-page thead th{position:relative!important;top:0!important;z-index:var(--z-thead);will-change:auto}
  .table-page.tp-head-floating thead th{box-shadow:inset 0 -1px 0 var(--line-2),0 8px 14px -6px rgba(0,0,0,.85)}

  /* edge shadows: there is more to the left / right */
  .table-page.has-x-overflow:not(.at-x-start){box-shadow:inset 24px 0 18px -18px rgba(0,0,0,.75)}
  .table-page.has-x-overflow:not(.at-x-end){box-shadow:inset -24px 0 18px -18px rgba(0,0,0,.75)}
  .table-page.has-x-overflow:not(.at-x-start):not(.at-x-end){
    box-shadow:inset 24px 0 18px -18px rgba(0,0,0,.75),inset -24px 0 18px -18px rgba(0,0,0,.75)}

  /* Caller lookup: a little breathing room between stacked lookup blocks */
  .cx-api .table-page + .table-page,.cx-api .table-page + .muted{margin-top:var(--sp-2)}
  .cx-api .table-page{margin-top:var(--sp-2)}
  .cx-api .table-page table{margin-top:0}
}

/* floating horizontal scrollbar (shared/table-scroll.js) */
.tp-xbar{
  position:fixed;bottom:0;left:0;height:16px;z-index:calc(var(--z-toast) - 1);
  overflow-x:auto;overflow-y:hidden;display:none;
  background:rgba(13,20,30,.92);border-top:1px solid var(--line);
  border-radius:6px 6px 0 0;
  scrollbar-color:var(--muted-2) transparent;
}
.tp-xbar.show{display:block}
.tp-xbar-inner{height:1px}
.tp-xbar::-webkit-scrollbar{height:14px}
.tp-xbar::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:8px;border:3px solid transparent;background-clip:content-box}
.tp-xbar::-webkit-scrollbar-track{background:transparent}
@media (max-width:640px){ .tp-xbar{display:none!important} }
@media print{
  .tp-xbar{display:none!important}
  .table-page{overflow:visible!important}
}


/* ── CloudX recordings table controls and columns (2026-10-08) ─────── */
.cx-toolbar--recordings{
  flex-wrap:nowrap;gap:var(--sp-2);align-items:center;overflow:visible;
}
.cx-toolbar--recordings #cxStats{display:flex;flex:none;flex-wrap:nowrap;padding:0;white-space:nowrap}
.cx-toolbar--recordings #cxSearch{flex:1 1 320px;min-width:180px}
.cx-toolbar--recordings #cxDevice{flex:0 1 220px;min-width:150px}
.cx-columns{position:relative;flex:none}
.cx-columns > summary{list-style:none;cursor:pointer;white-space:nowrap;user-select:none}
.cx-columns > summary::-webkit-details-marker{display:none}
.cx-columns[open] > summary{border-color:var(--accent-2);color:var(--txt)}
.cx-column-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-popover, 40);
  min-width:190px;max-height:70vh;overflow:auto;padding:6px;
  background:var(--th-bg);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--sh-2);
}
.cx-column-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;white-space:nowrap;cursor:pointer}
.cx-column-item:hover{background:var(--hover)}
.cx-column-item input{width:16px;height:16px;margin:0;accent-color:var(--accent-2)}
.cx-recordings-table th{white-space:nowrap}
.cx-sort{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;cursor:pointer;text-transform:inherit;letter-spacing:inherit;white-space:nowrap}
.cx-sort:hover{color:var(--accent-2)}
.cx-sort-mark{font-size:.72em;color:var(--accent-2)}
.cx-recordings-table td{white-space:nowrap}
.cx-recordings-table td[data-label="File"]{max-width:none;overflow:visible;text-overflow:clip}
.cx-recordings-table td[data-label="Device ID"]{font-size:var(--fs-sm)}
@media (max-width:640px){
  .cx-toolbar.cx-toolbar--recordings{
    display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    padding:var(--sp-2);scrollbar-width:thin;
  }
  .cx-toolbar--recordings #cxStats{flex:none}
  .cx-toolbar--recordings #cxSearch{flex:0 0 210px;width:210px;min-width:210px}
  .cx-toolbar--recordings #cxDevice{flex:0 0 170px;width:170px;min-width:170px}
  .cx-columns{position:static}
  .cx-column-menu{position:fixed;right:10px;top:auto;max-height:60vh}
}

/* ── CloudX recordings toolbar (2026-10-08c) ───────────────────────────
 * Device picker first, then stats, search, Type / Direction filters. */
.cx-toolbar--recordings #cxKind,
.cx-toolbar--recordings #cxDirection{flex:0 1 160px;min-width:130px}
.cx-toolbar--recordings #cxClear{flex:none;white-space:nowrap}
.cx-devsplit .pill .mono{font-size:var(--fs-sm)}
@media (max-width:640px){
  .cx-toolbar--recordings #cxKind,
  .cx-toolbar--recordings #cxDirection{flex:0 0 150px;width:150px;min-width:150px}
}
@media (min-width:641px){ .cx-toolbar.cx-toolbar--recordings{flex-wrap:wrap} }
.cx-devline{white-space:nowrap;line-height:1.35}
#cxCallers td[data-label="Device ID"]{font-size:var(--fs-sm)}

/* PATCH (2026-10-08h): Land records (via CNIC) table in the Caller lookup section. */
.cx-land{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:2px solid var(--line-2);margin-bottom:var(--sp-4)}
.cx-call-history{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:2px solid var(--line-2)}
.cx-call-history .rd-sub{margin-top:0;margin-bottom:var(--sp-3)}
.cx-land .cx-land-src{margin:var(--sp-2) 0 0}
.cx-land-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.cx-land-form input{min-width:220px;max-width:100%}

/* PATCH (2026-10-08i): compact Land records result ("Not found" + ⚠ reason). */
.cx-land-nf{margin:var(--sp-2) 0 0;font-weight:600}
.cx-land-warn{margin:var(--sp-1) 0 0}

/* PATCH (2026-10-21): Month → Date migration preview modal. The old → new
   key pairs are the whole point of the preview, so they get a real
   scrollable table rather than a collapsed paragraph. */
.cxrm-preview p{margin:0 0 var(--sp-3)}
/* `.hint` is the global helper (var(--muted-2), fs-sm) — reuse it, do not
   redeclare it here and let the two drift apart. */
.cxrm-keys{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-sm);margin-top:var(--sp-3)}
.cxrm-keys table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.cxrm-keys th{position:sticky;top:0;background:var(--th-bg);text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);font-weight:600}
.cxrm-keys td{padding:5px 10px;border-bottom:1px solid var(--border);vertical-align:top;word-break:break-all}
.cxrm-keys tr:last-child td{border-bottom:0}
.cxrm-keys .dim{color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════════════
 * PATCH (2026-10-22) — CloudX portal: ONE header, a calmer toolbar.
 *
 * WHY
 *   • 🎙 Recordings / 📇 Callers lived on their own sticky strip under the
 *     header, so the page opened with two title bars and lost ~44 px of
 *     table height. They now sit inside the header, right after "CloudX".
 *   • "Signed in as" sat in the middle of the header, between the title and
 *     the buttons. An account block belongs at the far right, next to the
 *     Sign out button it explains.
 *   • The search box was the same dim grey as an idle select, so the
 *     primary control looked disabled. It is now a pill with a magnifier,
 *     a lighter surface and a focus ring.
 *   • Device / Type / Direction are the three pickers that narrow the list;
 *     they are adjacent, ahead of the stats and the search.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── page tabs, in the header ─────────────────────────────────────────── */
.app-header .tabs.cx-headtabs{
  width:auto;margin:0;padding:3px;flex:0 1 auto;min-width:0;
  background:var(--th-bg);border:1px solid var(--line);
  border-radius:var(--r-pill);box-shadow:none;
}
.app-header .tabs.cx-headtabs button{
  min-height:28px;padding:0 13px;border-radius:var(--r-pill);
  font-size:var(--fs-md);font-weight:600;
}
.app-header .tabs.cx-headtabs button.active{
  background:linear-gradient(180deg,#3d84f7,#2563eb);color:#fff;
}
/* The account block sits at the far right, next to the Sign out button it
 * explains — the `.flex-1` spacer before the buttons does the pushing, so
 * nothing here may take the auto margin away from it. */
body.portal .app-header .user-chip{flex:0 1 auto}

/* ── toolbar: pickers first, then stats, then the search ──────────────── */
.cx-toolbar--recordings .cx-pick{flex:0 1 200px;min-width:150px}
.cx-toolbar--recordings #cxKind,
.cx-toolbar--recordings #cxDirection{flex:0 1 180px;min-width:150px}

/* The search box is the primary control of this page — give it presence. */
.cx-toolbar--recordings #cxSearch.cx-search,
.cx-toolbar .cx-search{
  flex:1 1 340px;min-width:210px;min-height:38px;
  padding:0 14px 0 34px;
  font-size:var(--fs-base);
  background-color:var(--panel-3);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  color:var(--txt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.35);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239aabbf' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px 50%;
}
.cx-toolbar .cx-search::placeholder{color:var(--muted);opacity:1}
.cx-toolbar .cx-search:hover:not(:disabled){
  border-color:var(--accent-line);background-color:var(--panel-3);
}
.cx-toolbar .cx-search:focus{
  border-color:var(--accent);background-color:var(--panel-3);
  box-shadow:0 0 0 3px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.05);
  outline:none;
}

/* Address sizing now follows the shared full-value table policy below. */
@media (max-width:820px){
  /* Tabs drop to their own line under the title instead of crushing it. */
  body.portal .app-header .tabs.cx-headtabs{order:9;flex:1 1 100%;margin-top:var(--sp-1);justify-content:flex-start}
  /* No spacer at this width, so the chip takes the slack and keeps the
   * account block (with Sign out) on the right. */
  body.portal .app-header .user-chip{flex:1 1 auto;min-width:0;max-width:52vw;margin-left:auto}
}
/* ── phones: the toolbar now fits (2026-10-22i) ─────────────────────────
 * PATCH (2026-10-22i). The toolbar was a single nowrap row with
 * `overflow-x:auto` holding four fixed-width controls (search 210 + device
 * 170 + type 150 + direction 150 ≈ 750px) on a 390px screen. ⚙ Columns sat
 * past the right edge and was reachable only by swiping — invisible unless
 * you knew to try. It now wraps into two rows: the search takes a
 * full-width line on top (it is the primary control), the three pickers
 * share the next, and Columns is pushed to the right.
 *
 * `order:-1` on the search is the one deliberate trade-off: visual order no
 * longer matches tab order on phones. Keeping DOM order instead forces a
 * three-row layout that reads worse.
 *
 * The last two rules restate an exception to `.cx-recordings-table
 * td{white-space:nowrap}`, which is a GLOBAL rule outside any media query.
 * The ≤640px card-list layout already overrides it with !important, but a
 * long filename or address should never be able to clip inside a card.
 *
 * No address CAP here on purpose — see the note on the column above: on a
 * phone the card's own width is the only cap that makes sense. */
@media (max-width:640px){
  .cx-toolbar.cx-toolbar--recordings{
    display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;
    padding:var(--sp-2);row-gap:var(--sp-2);
  }
  .cx-toolbar--recordings #cxStats{flex:none}
  .cx-toolbar--recordings #cxSearch.cx-search{
    order:-1;flex:1 1 100%;width:auto;min-width:0;min-height:40px;
  }
  .cx-toolbar--recordings #cxDevice{flex:1 1 150px;width:auto;min-width:0}
  .cx-toolbar--recordings #cxKind,
  .cx-toolbar--recordings #cxDirection{flex:1 1 118px;width:auto;min-width:0}
  .cx-toolbar--recordings #cxClear{flex:0 0 auto}
  .cx-columns{position:static;margin-left:auto}
  .cx-column-menu{position:fixed;right:10px;left:10px;top:auto;bottom:auto;width:auto;max-height:60vh}
  .cx-recordings-table td[data-label="File"],
  .table-page .cx-recordings-table td[data-label="File"]{
    max-width:none;overflow:visible;text-overflow:clip;
  }
}

/* Copy button and device ID truncation styling */
.btn-copy{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;padding:2px 4px;margin-left:4px;
  color:var(--muted);cursor:pointer;border-radius:var(--r-sm);font-size:13px;line-height:1;
  vertical-align:middle;transition:color .12s,background .12s;
}
.btn-copy:hover{background:var(--panel-3);color:var(--txt)}
.tag-cell{display:inline-flex;align-items:center;gap:4px;max-width:220px}
.tag-cell .mono-truncated{
  display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;
}


/* Audit remediation — 2026-10-25. Shared policy; DOM column order untouched.
 * Natural table layout sizes columns from FULL values, not fixed character caps.
 * Wrap is opt-in and never hides content, including long unbroken identifiers. */
:root{--fs-lg:20px;--fs-xl:24px;--sb-w:14px}
.app-header h1{font-size:24px;line-height:1.25}
.card-head h2,.cx-page-title{font-size:22px;line-height:1.35}
.cx-page-title{margin:12px 0}
#cpBody h2.rd-sub{font-size:20px;margin:16px 0 10px;padding-left:10px;border-left:3px solid var(--accent)}
#cpBody h3.rd-sub{font-size:16px;margin:12px 0 8px;padding-left:10px;border-left:3px solid var(--accent)}
#cpMain{max-width:none;width:100%;min-width:0}
#cxCallerSearch{flex:0 1 480px;width:min(100%,480px);max-width:480px}
.cp-back{min-height:36px;padding:0 14px;border:1px solid var(--line-2);background:var(--panel-2);font-size:14px}
.cx-chart .cx-bars{height:94px}
.cx-chart--compact .cx-bars{height:70px}
.cx-chart{padding:10px 0}
.card-head{align-items:center;gap:12px}
.card-head > .card-actions{margin-left:auto;justify-content:flex-end;align-items:center}
.ex-filter-bar.cxf-bar{align-items:flex-end;gap:10px}
.cxf-bar .fb-field{display:flex;flex-direction:column;gap:5px;align-self:flex-end}
.cxf-bar .cxf-chk{flex-direction:row;align-items:center;min-height:34px;margin-bottom:0}
.cxf-kpis .cx-stat .k{font-size:13px;font-weight:650;color:#b9c9dc;letter-spacing:.035em;white-space:normal;overflow:visible;text-overflow:clip}
.cxf-kpis{flex-wrap:wrap;overflow:visible}
.cxf-kpis .cx-stat{min-width:150px}
.cxf-kpis .cx-stat .small{white-space:normal;overflow:visible;text-overflow:clip}
.cxf-bar input:not([type=checkbox]),.cxf-bar select,.cxf-bar .cxf-chk{height:34px;min-height:34px}
.cxf-bar > button{align-self:flex-end;min-height:34px}
.cxf-bar .inline-lbl{font-size:11px;font-weight:600;color:var(--muted)}
.tabs button,.subtabs button{padding:9px 14px;gap:8px;min-height:36px}
.dc-icon,.fs-icon{display:none}
/* A single neutral secondary + accent primary + semantic destructive system.
   Structural sorting, tabs and disclosure controls retain their own geometry. */
button:not(.th-sort):not(.cx-sort):not(.dc-toggle):not(.grp-toggle):not([role="tab"]),
a.ghost,.btn-link,summary.ghost{
  border-radius:6px;font-family:inherit;font-weight:600;font-size:13px;
  min-height:32px;padding:5px 11px;border:1px solid var(--line-2);
  background:var(--panel-2);color:var(--txt);box-shadow:none;
}
button.primary,button[type="submit"]{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger,button.btn-danger{background:var(--panel-2);border-color:#ac535b;color:#ffadb5}
button:not(:disabled):hover,a.ghost:hover{filter:brightness(1.15)}
button:focus-visible,a:focus-visible,.tp-managed:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.tp-tools{display:flex;justify-content:flex-end;align-items:center;margin:8px 0;gap:8px}
.tp-wrap-toggle[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
/* All breakpoints stay tables: phones can scroll without truncation or reordering. */
.table-page.tp-managed,.table-wrap.tp-managed{
  display:block!important;width:100%;max-width:100%;min-width:0;
  overflow:auto!important;max-height:clamp(240px,65vh,760px)!important;
  contain:none;isolation:isolate;overscroll-behavior:contain;
  scrollbar-width:auto;scrollbar-color:#93acc9 #182536;
}
.tp-managed::-webkit-scrollbar{height:14px;width:14px}
.tp-managed::-webkit-scrollbar-track{background:#182536}
.tp-managed::-webkit-scrollbar-thumb{background:#93acc9;border:2px solid #182536;border-radius:8px}
.tp-managed > table.grid{display:table!important;width:max-content!important;min-width:100%!important;table-layout:auto!important;border-collapse:separate}
.tp-managed > table.grid thead{display:table-header-group!important}
.tp-managed > table.grid tbody{display:table-row-group!important}
.tp-managed > table.grid tr{display:table-row!important}
.tp-managed > table.grid th,.tp-managed > table.grid td{
  display:table-cell!important;max-width:none!important;width:auto;
  padding:10px 12px!important;height:auto!important;vertical-align:middle;
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
}
.tp-managed > table.grid td *{
  white-space:nowrap!important;max-width:none!important;overflow:visible!important;
  text-overflow:clip!important;-webkit-line-clamp:unset!important;
}
.tp-managed > table.grid td > div:not(.row):not(.icon-row),
.tp-managed > table.grid td .stack{display:inline-flex;flex-direction:row;gap:8px;align-items:center}
.tp-managed > table.grid td::before{display:none!important}
.tp-managed > table.grid thead th{
  position:sticky!important;top:0!important;transform:none!important;
  z-index:60!important;background:var(--th-bg)!important;
}
.tp-managed > table.grid tbody tr:nth-child(even) > td{background:var(--zebra)}
.tp-managed > table.grid tbody tr:hover > td{background:var(--hover)}
.tp-managed > table.grid .col-act{
  width:var(--tp-action-width,auto)!important;min-width:var(--tp-action-width,auto)!important;
  box-shadow:none;
}
.tp-managed > table.grid .col-act .row{display:inline-flex!important;flex-wrap:nowrap!important;width:max-content}
.tp-managed.tp-wrap > table.grid{
  table-layout:fixed!important;width:100%!important;min-width:var(--tp-wrap-min-width,320px)!important;
}
.tp-managed.tp-wrap > table.grid col{width:auto!important}
.tp-managed.tp-wrap > table.grid th:not(.col-act),
.tp-managed.tp-wrap > table.grid td:not(.col-act),
.tp-managed.tp-wrap > table.grid td:not(.col-act) *{
  white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;min-width:0!important;
}
.tp-managed.tp-wrap > table.grid td:not(.col-act) .stack,
.tp-managed.tp-wrap > table.grid td:not(.col-act) > div{display:block!important}
.tp-managed.tp-wrap > table.grid .col-act{overflow-wrap:normal!important}
.cx-toolbar--recordings{flex-wrap:wrap}
@media(max-width:640px){
  .app-header h1{font-size:22px}
  .tp-managed > table.grid td{border-right:1px solid var(--line)!important}
}
@media print{
  .tp-tools{display:none!important}
  .tp-managed{max-height:none!important;overflow:visible!important}
  .tp-managed > table.grid th,.tp-managed > table.grid .col-act{position:static!important}
}


/* Compact CloudX controls and a single gold column-heading palette. */
:root{--table-heading:#f59e0b}
/* Include sortable buttons, links, and custom table markup everywhere. */
table thead th,table thead th *,table th[scope="col"],table th[scope="col"] *,
table.grid th,table.grid th *{color:var(--table-heading)!important}
#cxTabRec > .cx-toolbar,#cxTabCallers > .cx-toolbar{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
  gap:8px;padding:8px 0;margin:0 0 8px;min-width:0;
  overflow-x:auto;overflow-y:hidden;
}
#cxTabRec .cx-picker{flex:0 0 145px;width:145px;min-width:0}
#cxTabRec .cx-picker[data-picker="cxDevice"]{flex-basis:360px;width:360px;max-width:100%}
#cxTabRec .cx-picker[data-picker="cxKind"]{flex-basis:140px;width:140px}
#cxTabRec .cx-picker > select[hidden]{display:none!important}
.cx-picker-trigger{
  display:block;width:100%;min-width:0;max-width:100%;height:34px;
  padding:5px 25px 5px 10px;text-align:left;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-weight:400;
  background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239aabbf' stroke-width='2' viewBox='0 0 12 12'%3E%3Cpath d='m3 4 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 8px center;
}
.cx-picker-menu{
  position:fixed;z-index:var(--z-modal);margin:0;padding:4px;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--panel-2);box-shadow:var(--sh-3);
  scrollbar-width:auto;scrollbar-color:#93acc9 #182536;
}
.cx-picker-menu[hidden]{display:none!important}
.cx-picker-options{width:100%;min-width:0}
.cx-picker-option{padding:7px 10px;white-space:normal;overflow-wrap:anywhere;cursor:pointer;min-height:32px}
.cx-picker-option[aria-selected="true"]{color:var(--table-heading);font-weight:600}
.cx-picker-option:hover,.cx-picker-option.is-active{background:var(--hover);outline:1px solid var(--accent-line);outline-offset:-1px}
.cx-picker-option[aria-disabled="true"]{opacity:.5;cursor:default}
#cxTabRec #cxSearch.cx-search,#cxTabCallers #cxCallerSearch.cx-search{
  flex:0 1 280px;width:280px;min-width:160px;min-height:34px;height:34px;
}
#cxTabRec #cxStats,#cxTabCallers #cxCallerStats{
  flex:0 0 auto;display:flex;flex-wrap:nowrap;white-space:nowrap;padding:0;margin:0;
}
#cxTabRec #cxStats:empty{display:none}
#cxTabRec .cx-columns,#cxTabRec #cxClear{flex:0 0 auto}
#cxTabRec .cx-columns{margin-left:auto}
#cxTabRec .cx-column-menu{position:fixed;right:auto;overflow:auto;z-index:var(--z-modal)}
#cxTabCallers .cx-page-title{flex:0 0 auto;margin:0;font-size:20px;line-height:34px}
.cx-inline-tools{display:flex;flex:0 0 auto;align-items:center}
#cxCallerTools{margin-left:auto}
.cx-inline-tools .tp-tools{margin:0;padding:0;gap:0}
@media(max-width:760px){
  #cxTabRec .cx-picker{flex-basis:125px;width:125px}
  #cxTabRec .cx-picker[data-picker="cxDevice"]{flex-basis:310px;width:310px}
  #cxTabRec .cx-picker[data-picker="cxKind"]{flex-basis:120px;width:120px}
  #cxTabRec #cxSearch.cx-search,#cxTabCallers #cxCallerSearch.cx-search{flex:0 0 180px;width:180px;min-width:180px}
}
/* v28.13 — CloudX owns a viewport-sized shell; ONLY each table scrolls.
 * Keep the brand, tabs, account and filter/tool controls outside both scroll
 * axes. Every flex ancestor must be shrinkable, otherwise a max-content grid
 * expands the document and carries those controls off screen. Scoped here so
 * admin/detail tables keep their existing shared behavior. */
@media screen{
  html.cx-full-page{height:100%;overflow:hidden;scrollbar-gutter:auto}
  html.cx-full-page body{
    display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;
    min-height:0;overflow:hidden;
  }
  .cx-full-page #cxApp{
    display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0;
    width:100%;overflow:hidden;
  }
  .cx-full-page .cx-header{
    flex:0 0 auto;min-width:0;width:100%;background:var(--panel);
  }
  #cxMain.view--page{
    display:flex;flex-direction:column;flex:1 1 0;width:100%;max-width:none;
    min-width:0;min-height:0;margin:0;padding:8px 12px;
  }
  #cxTabRec,#cxTabCallers{
    display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0;
  }
  #cxTabRec > .cx-toolbar,#cxTabCallers > .cx-toolbar{
    flex:0 0 auto;flex-wrap:wrap;min-width:0;max-width:100%;overflow:visible;
    position:relative;z-index:var(--z-header);background:var(--bg);
  }
  #cxTable,#cxCallers{
    display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0;
  }
  #cxMain .cx-page-table,
  #cxMain .cx-page-table.tp-managed{
    display:block!important;flex:1 1 0;width:100%;max-width:100%;min-width:0;min-height:0;
    height:auto!important;max-height:none!important;overflow:auto!important;
    border:0;border-radius:0;background:var(--bg);box-shadow:none;
    contain:none;isolation:isolate;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #cxMain .cx-page-table > table.grid{margin:0}
  #cxMain .cx-page-table > table.grid thead th{
    position:sticky!important;top:0!important;transform:none!important;
    z-index:var(--z-thead);background:var(--th-bg)!important;
  }
  #cxMore{flex:0 0 auto;padding:8px}
  /* Participate in the shell layout: playback cannot cover the scrollbar,
   * final rows or Load more, including when the player wraps on phones. */
  .cx-full-page .cx-player{position:relative;flex:0 0 auto;min-width:0}
}
@media screen and (min-width:761px){
  #cxTabRec .cx-picker[data-picker="cxDevice"]{flex:1 1 240px;width:auto;min-width:180px;max-width:360px}
  #cxTabRec .cx-picker[data-picker="cxKind"]{flex:0 1 120px;width:auto;min-width:100px}
  #cxTabRec .cx-picker[data-picker="cxDirection"]{flex:0 1 130px;width:auto;min-width:115px}
  #cxTabRec #cxSearch.cx-search{flex:1 1 200px;width:auto;min-width:160px;max-width:280px}
}
@media screen and (max-width:760px){
  #cxMain.view--page{padding:6px}
  #cxTabRec .cx-picker,
  #cxTabRec .cx-picker[data-picker="cxDevice"],
  #cxTabRec .cx-picker[data-picker="cxKind"]{
    flex:1 1 120px;width:auto;min-width:0;max-width:100%;
  }
  #cxTabRec #cxSearch.cx-search,#cxTabCallers #cxCallerSearch.cx-search{
    flex:1 1 180px;width:auto;min-width:0;max-width:100%;
  }
}
@media print{
  .cx-inline-tools{display:none!important}
  #cxMain .cx-page-table,#cxMain .cx-page-table.tp-managed{
    height:auto!important;max-height:none!important;overflow:visible!important;
  }
  #cxMain .cx-page-table > table.grid thead th{position:static!important}
}