* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
html, body { height:100%; }

body{
  min-height:100vh;
  background: url('/assets/bg.jpg') center / cover no-repeat fixed,
              linear-gradient(135deg, #0a0a0a, #0a0a0a);
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
}

body.app-open { align-items:flex-start; }

.brand{
  position:fixed;
  top:12px;
  left:12px;
  color:#fff;
  font-weight:700;
  padding:5px 9px;
  border-radius:8px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  z-index:100;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  font-size:13px;
}

.wrapper{
  width:420px;
  background:transparent;
  border:0;
  backdrop-filter:none;
  color:#fff;
  border-radius:12px;
  padding:26px 34px;
  box-shadow:0 14px 40px rgba(0,0,0,.50);
}

.wrapper h1{
  font-size:32px;
  text-align:center;
}

.input-box{
  position:relative;
  width:100%;
  height:46px;
  margin:24px 0;
}

.input-box input{
  width:100%;
  height:100%;
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  outline:none;
  border:2px solid rgba(255,255,255,.75);
  border-radius:40px;
  color:#fff;
  font-size:15px;
  padding:18px 42px 18px 18px;
}

.input-box input::placeholder{
  color:#fff;
  opacity:.82;
}

.input-box i{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
}

.btn{
  width:100%;
  height:40px;
  border-radius:32px;
  border:none;
  background:#fff;
  color:#333;
  font-weight:600;
  cursor:pointer;
  font-size:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}

.btn.small{
  padding:5px 9px;
  font-size:12px;
  height:auto;
}

.btn.ghost{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
}

.btn.danger{
  background:#e74c3c;
  color:#fff;
  border:none;
}

.btn.pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:#fff;
  width:auto;
  height:auto;
}

.app{
  width:min(1560px, 99vw);
  margin-top:54px;
  margin-bottom:14px;
}

.appbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.app-title{
  font-weight:700;
  opacity:.95;
  font-size:14px;
}

.tabs{
  display:flex;
  gap:6px;
  margin:6px 0 10px;
  flex-wrap:wrap;
}

.tabs button{
  padding:6px 10px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(0,0,0,.16);
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 7px 18px rgba(0,0,0,.36);
  font-size:12px;
}

.tabs button.active{
  border-color:#fff;
  background:rgba(255,255,255,.12);
}

.panel{
  background:rgba(0,0,0,.28);
  border-radius:12px;
  padding:9px;
  box-shadow:0 14px 38px rgba(0,0,0,.46);
}

.panel h2{
  font-size:18px;
  margin-bottom:7px;
}

.controls .row{
  display:grid;
  grid-template-columns:2.0fr 1.6fr 1.6fr 1.8fr auto;
  gap:6px;
  margin-bottom:7px;
}

.controls input{
  padding:7px 9px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#fff;
  font-size:12px;
}

.inline{
  display:inline-flex;
  align-items:center;
  gap:5px;
  opacity:.85;
}

.grid{
  display:grid;
  gap:6px;
}

.grid.grid-4{
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.stack{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.stack label{
  font-size:12px;
  opacity:.9;
}

/* Protected payload database editor */
.payload-editor-panel{padding:22px;min-height:calc(100vh - 170px)}
.payload-editor-head,.payload-editor-toolbar,.payload-editor-actions,.payload-editor-foot{display:flex;align-items:center;gap:12px}
.payload-editor-head{justify-content:space-between;margin-bottom:18px}
.payload-editor-head h2{margin:0 0 5px}
.payload-editor-toolbar{flex-wrap:wrap;margin-bottom:12px}
.payload-field{display:flex;flex-direction:column;gap:5px;min-width:320px}
.payload-field--filter{min-width:180px}
.payload-field span{font-size:12px;opacity:.75}
.payload-field select{height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:#111827;color:#fff;padding:0 12px}
.payload-presence-count{color:#cbd5e1;font-size:12px;white-space:nowrap}
.payload-meta{flex:1;min-width:260px;color:#cbd5e1;font-size:13px;overflow-wrap:anywhere}
.payload-db-state{padding:7px 11px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid transparent}
.payload-db-state--ok{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.38);color:#86efac}
.payload-db-state--bad{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.38);color:#fca5a5}
.payload-editor-actions{justify-content:flex-end;flex-wrap:wrap;margin-bottom:10px}
.payload-editor-actions .btn,.payload-upload-btn{width:auto;min-width:135px;padding:8px 14px}
.payload-upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.payload-upload-btn.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}
.payload-content{display:block;width:100%;height:max(420px,55vh);resize:vertical;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#05080f;color:#dbeafe;padding:15px;font:12px/1.55 Consolas,'Courier New',monospace;white-space:pre;tab-size:2;outline:none}
.payload-content:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.12)}
.payload-editor-foot{justify-content:space-between;margin-top:9px;color:#94a3b8;font-size:12px}
@media (max-width:760px){
  .payload-editor-head,.payload-editor-foot{align-items:flex-start;flex-direction:column}
  .payload-field{min-width:100%;width:100%}
  .payload-meta{min-width:100%}
  .payload-editor-actions{justify-content:stretch}
  .payload-editor-actions .btn,.payload-upload-btn{flex:1}
  .payload-content{height:55vh}
}

.row{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}

.muted{ opacity:.75; }
.center{ text-align:center; }

.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.table-wrap{
  overflow:auto;
  max-height:calc(100vh - 205px);
  -ms-overflow-style:none;
  scrollbar-width:none;
}

.table-wrap::-webkit-scrollbar{
  width:0;
  height:0;
}

table.list{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

table.list th,
table.list td{
  padding:6px 7px;
  border-bottom:1px solid rgba(255,255,255,.16);
  vertical-align:top;
  font-size:12px;
}

table.list th{
  font-size:12px;
  font-weight:700;
  opacity:.9;
}

table.list input,
table.list select{
  width:100%;
  padding:5px 7px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#fff;
  min-height:29px;
  font-size:12px;
}

table.list select option{
  background:#111;
  color:#fff;
}

table.list input[type="checkbox"]{
  width:auto;
  height:auto;
  transform:translateY(1px);
}

td.right{
  text-align:right;
  white-space:nowrap;
}

.hidden{ display:none !important; }

.chip{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  font-size:11px;
  line-height:1.4;
}

.chip.ok{ background:rgba(46,204,113,.25); border:1px solid rgba(46,204,113,.5); }
.chip.expired{ background:rgba(231,76,60,.25); border:1px solid rgba(231,76,60,.5); }
.chip.online{ background:rgba(46,204,113,.25); border:1px solid rgba(46,204,113,.6); }
.chip.offline{ background:rgba(231,76,60,.25); border:1px solid rgba(231,76,60,.65); }

/* Toast */
#toast-root{
  position:fixed;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  z-index:1000;
  pointer-events:none;
}

.toast{
  min-width:250px;
  max-width:390px;
  border-radius:10px;
  padding:9px 11px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 14px 34px rgba(0,0,0,.48);
  display:flex;
  align-items:flex-start;
  gap:8px;
  pointer-events:auto;
  animation:toast-in .22s ease-out forwards, toast-life linear forwards;
}

.toast .icon{
  font-size:17px;
  line-height:1;
  margin-top:2px;
}

.toast .body{ flex:1; }

.toast .title{
  font-weight:700;
  margin-bottom:1px;
  font-size:13px;
}

.toast .msg{
  opacity:.9;
  font-size:12px;
}

.toast .close{
  border:none;
  background:transparent;
  color:#fff;
  opacity:.75;
  cursor:pointer;
  font-size:16px;
}

.toast.success{ border-color:rgba(46,204,113,.55); color:#2ecc71; }
.toast.info{ border-color:rgba(52,152,219,.55); color:#3498db; }
.toast.error{ border-color:rgba(231,76,60,.55); color:#e74c3c; }

@keyframes toast-in{
  from{ transform:translateY(10px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.toast::after{
  content:"";
  display:block;
  height:2px;
  margin-top:6px;
  border-radius:3px;
  background:currentColor;
  opacity:.55;
  width:100%;
  transform-origin:left;
  animation:life-shrink var(--life, 3800ms) linear forwards;
}

@keyframes life-shrink{
  from{ transform:scaleX(1); }
  to{ transform:scaleX(0); }
}

@keyframes toast-life{ from{} to{} }

/* Modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1001;
  animation:fade-in .15s ease-out forwards;
}

@keyframes fade-in{
  from{opacity:0}
  to{opacity:1}
}

.modal{
  width:min(500px, 92vw);
  background:rgba(10,10,10,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;
  box-shadow:0 18px 50px rgba(0,0,0,.50);
  padding:14px;
}

.modal h3{
  margin-bottom:5px;
  font-size:17px;
}

.modal p{
  opacity:.9;
  margin-bottom:11px;
  font-size:13px;
}

.modal .actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
}

.modal .btn{
  width:auto;
  border-radius:9px;
  height:auto;
  padding:8px 12px;
}

.modal .btn.ghost{ border-color:rgba(255,255,255,.35); }
.modal .btn.danger{ background:#e74c3c; }

/* Actions */
.actions{
  display:inline-flex;
  gap:5px;
  flex-wrap:nowrap;
  align-items:center;
}

.actions .action{
  height:29px;
  min-width:29px;
  padding:0 7px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.07);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,.38);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.actions .action:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.34);
}

.actions .action:active{
  transform:translateY(0);
  background:rgba(255,255,255,.16);
}

.actions .action:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

.actions .badge{
  width:17px;
  height:17px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  font-size:10px;
  line-height:1;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
}

.actions .label{
  font-size:11px;
}

.actions .action--primary{
  border-color:rgba(46,204,113,.55);
  background:rgba(46,204,113,.16);
}

.actions .action--primary .badge{
  background:rgba(46,204,113,.25);
  border-color:rgba(46,204,113,.55);
}

.actions .action--muted{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
}

.actions .action--muted .badge{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
}

.actions .action--safe{
  border-color:rgba(52,152,219,.55);
  background:rgba(52,152,219,.18);
}

.actions .action--safe .badge{
  background:rgba(52,152,219,.25);
  border-color:rgba(52,152,219,.55);
}

.actions .action--danger{
  border-color:rgba(231,76,60,.6);
  background:rgba(231,76,60,.18);
}

.actions .action--danger .badge{
  background:rgba(231,76,60,.26);
  border-color:rgba(231,76,60,.6);
}

/* Clients Panel */
#clientsPanel{
  padding:8px;
}

#clientsPanel h2{
  margin-bottom:6px;
}

#clientsPanel .grid{
  gap:5px !important;
  margin-bottom:5px !important;
}

#clientsPanel .row{
  gap:5px !important;
  margin-bottom:5px !important;
}

#clientsPanel .stack{
  gap:2px;
}

#clientsPanel .stack label{
  font-size:11px;
}

#clientsPanel input,
#clientsPanel select{
  padding:5px 7px !important;
  min-height:27px !important;
  font-size:12px !important;
}

#clientsPanel .table-wrap{
  max-height:calc(100vh - 226px);
}

/* Clients table compact: works for Admin and Leaders */
#clientsPanel table.list{
  table-layout:fixed !important;
}

#clientsPanel table.list th,
#clientsPanel table.list td{
  padding:3px 4px !important;
  vertical-align:middle !important;
  font-size:11px !important;
  line-height:1.1 !important;
}

/* UUID */
#clientsPanel table.list th:nth-child(1),
#clientsPanel table.list td:nth-child(1){
  width:22% !important;
}

/* Team / Label / Note / Group */
#clientsPanel table.list th:nth-child(2),
#clientsPanel table.list td:nth-child(2){
  width:7% !important;
}

#clientsPanel table.list th:nth-child(3),
#clientsPanel table.list td:nth-child(3){
  width:9% !important;
}

#clientsPanel table.list th:nth-child(4),
#clientsPanel table.list td:nth-child(4){
  width:9% !important;
}

#clientsPanel table.list th:nth-child(5),
#clientsPanel table.list td:nth-child(5){
  width:8% !important;
}

/* Expires */
#clientsPanel table.list th:nth-child(6),
#clientsPanel table.list td:nth-child(6){
  width:12% !important;
}

/* WC / NF / AL */
#clientsPanel table.list th:nth-child(7),
#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),
#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),
#clientsPanel table.list td:nth-child(9){
  width:4% !important;
}

/* Disabled */
#clientsPanel table.list th:nth-child(10),
#clientsPanel table.list td:nth-child(10){
  width:6% !important;
}

/* Actions */
#clientsPanel table.list th:nth-child(11),
#clientsPanel table.list td:nth-child(11){
  width:19% !important;
}

#clientsPanel table.list input,
#clientsPanel table.list select{
  padding:3px 5px !important;
  min-height:24px !important;
  height:24px !important;
  font-size:11px !important;
  border-radius:6px !important;
}

#clientsPanel table.list input[type="checkbox"]{
  width:auto !important;
  height:auto !important;
  min-height:auto !important;
  transform:scale(.9) !important;
}

#clientsPanel .actions{
  gap:4px !important;
}

#clientsPanel .actions .action{
  height:25px !important;
  min-width:25px !important;
  padding:0 5px !important;
  font-size:11px !important;
  border-radius:7px !important;
}

#clientsPanel .actions .badge{
  width:15px !important;
  height:15px !important;
  font-size:9px !important;
}

/* UUID / text */
.uuid-cell .uuid-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.uuid-cell .uuid-text{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-ligatures:none;
}

table.list td input[placeholder="label"],
table.list td input[placeholder="note"]{
  font-size:12px;
}

/* Extension Users Panel */
#extUsersPanel{
  padding:9px;
}

#extUsersPanel h2{
  margin-bottom:7px;
}

#extUsersPanel .grid{
  gap:5px !important;
  margin-bottom:5px !important;
}

#extUsersPanel .stack{
  gap:2px;
}

#extUsersPanel .stack label{
  font-size:11px;
}

#extUsersPanel input,
#extUsersPanel select{
  padding:5px 7px !important;
  min-height:28px !important;
  font-size:12px !important;
}

#extUsersPanel .row{
  gap:5px !important;
  margin-bottom:5px !important;
}

#extUsersPanel .table-wrap{
  max-height:calc(100vh - 230px);
}

#extUsersPanel table.list th,
#extUsersPanel table.list td{
  padding:5px 6px !important;
  vertical-align:top;
  font-size:12px;
}

#extUsersPanel table.list th:nth-child(1){ width:9%; }
#extUsersPanel table.list th:nth-child(2){ width:7%; }
#extUsersPanel table.list th:nth-child(3){ width:8%; }
#extUsersPanel table.list th:nth-child(4){ width:8%; }
#extUsersPanel table.list th:nth-child(5){ width:10%; }
#extUsersPanel table.list th:nth-child(6){ width:24%; }
#extUsersPanel table.list th:nth-child(7){ width:18%; }
#extUsersPanel table.list th:nth-child(8){ width:5%; }
#extUsersPanel table.list th:nth-child(9){ width:16%; }

#extUsersPanel .actions{
  gap:4px;
}

#extUsersPanel .actions .action{
  height:27px;
  min-width:27px;
  padding:0 6px;
  border-radius:8px;
  gap:4px;
  font-size:11px;
}

#extUsersPanel .actions .badge{
  width:16px;
  height:16px;
  font-size:10px;
}

#extUsersPanel .ext-pass-card,
#extUsersPanel .ext-browser-card{
  padding:4px 5px;
  margin:3px 0;
  border-radius:7px;
  font-size:11px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
}

#extUsersPanel .mono,
#clientsPanel .mono{
  font-size:11px;
}

/* Small screens */
@media (max-width: 980px){
  .grid.grid-4{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .app{
    width:99vw;
    margin-top:50px;
  }

  .actions .label{
    display:none;
  }

  .actions .action{
    padding:0 6px;
  }
}

@media (max-width: 640px){
  .grid.grid-4{
    grid-template-columns:1fr;
  }

  .wrapper{
    width:92vw;
    padding:24px;
  }

  .appbar{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}

/* ===== 2026 polished responsive admin fix ===== */
:root{
  --glass:rgba(18,8,34,.58);
  --glass-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.18);
  --line-strong:rgba(255,255,255,.34);
  --shadow:0 22px 70px rgba(0,0,0,.55);
  --radius:18px;
}

html{ scroll-behavior:smooth; }
body{
  min-height:100dvh;
  padding:18px;
  overflow-x:hidden;
}
body.auth-checking #loginCard{ display:none !important; }
body.auth-checking::after{
  content:"Loading admin...";
  position:fixed;
  inset:auto 50% 28px auto;
  transform:translateX(50%);
  padding:10px 16px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid var(--line);
  color:#fff;
  box-shadow:var(--shadow);
}

.brand{
  top:14px;
  left:clamp(12px, 3vw, 28px);
  font-size:14px;
  letter-spacing:.2px;
  background:rgba(16,5,34,.58);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.wrapper{
  width:min(430px, 94vw);
  padding:30px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(40,9,78,.34));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}
.wrapper h1{ font-size:34px; margin-bottom:6px; }
.input-box{ height:50px; margin:20px 0; }
.input-box input{
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.input-box input:focus{
  border-color:#fff;
  box-shadow:0 0 0 4px rgba(156,82,255,.22), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn{ transition:transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease; }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.btn:active{ transform:translateY(0); }

.app{
  width:min(1620px, 100%);
  margin:46px auto 16px;
  padding:0 clamp(0px, .8vw, 12px);
}
.appbar{
  position:sticky;
  top:8px;
  z-index:50;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(12,4,28,.48);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 38px rgba(0,0,0,.32);
}
.app-title{ font-size:15px; }
.appbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}
.me-label{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:.95;
}

.tabs{
  gap:8px;
  margin:12px 0;
  position:sticky;
  top:68px;
  z-index:45;
  padding:4px 0;
}
.tabs button{
  min-height:36px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(20,6,42,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tabs button.active{
  background:linear-gradient(135deg, rgba(145,61,255,.42), rgba(255,255,255,.12));
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 10px 28px rgba(123,46,255,.22);
}
.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  background:linear-gradient(145deg, rgba(10,3,22,.62), rgba(71,14,124,.25));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.controls .row,
.grid.grid-4{
  grid-template-columns:repeat(4, minmax(150px, 1fr));
}
.controls .row .btn{ min-height:36px; }
.controls input,
table.list input,
table.list select,
#clientsPanel input,
#clientsPanel select{
  border:1px solid var(--line);
  background:rgba(255,255,255,.09) !important;
  color:#fff;
}
.controls input:focus,
table.list input:focus,
table.list select:focus,
#clientsPanel input:focus,
#clientsPanel select:focus{
  outline:none;
  border-color:rgba(255,255,255,.72);
  box-shadow:0 0 0 3px rgba(156,82,255,.18);
}
.table-wrap{
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:rgba(0,0,0,.18);
  max-height:calc(100dvh - 235px);
}
table.list th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(17,6,34,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
table.list tr:hover td{ background:rgba(255,255,255,.045); }
.actions{ gap:6px; }
.actions .action{ min-height:31px; border-radius:10px; }

#extUsersPanel .table-wrap,
#clientsPanel .table-wrap{ max-height:calc(100dvh - 260px); }
#extUsersPanel table.list{ min-width:1180px; }
#clientsPanel table.list{ min-width:1050px; }

@media (max-width: 900px){
  body{ padding:12px; align-items:center; background-attachment:scroll; }
  .brand{ position:absolute; }
  .wrapper{ margin-top:38px; padding:24px 18px; }
  .app{ margin-top:38px; padding:0; }
  .appbar{ position:relative; top:auto; align-items:flex-start; }
  .appbar-right{ width:100%; margin-left:0; justify-content:space-between; }
  .me-label{ font-size:12px; }
  .tabs{
    position:relative;
    top:auto;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .tabs button{ flex:0 0 auto; }
  .panel{ padding:10px; border-radius:16px; }
  .controls .row,
  .grid.grid-4{ grid-template-columns:1fr; }
  .row{ align-items:stretch; }
  .row > *{ max-width:100%; }
  .table-wrap{ max-height:none; overflow:auto; }
  table.list{ min-width:980px; }
  .modal{ width:min(94vw, 500px); }
  #toast-root{ left:10px; right:10px; bottom:10px; }
  .toast{ min-width:0; max-width:none; width:100%; }
}

@media (max-width: 520px){
  body{ padding:10px; }
  .wrapper{ width:100%; padding:22px 14px; border-radius:20px; }
  .wrapper h1{ font-size:28px; }
  .input-box{ height:48px; margin:16px 0; }
  .btn{ height:42px; }
  .appbar-right .btn{ width:100%; }
  .tabs button{ padding:8px 10px; font-size:11px; }
  .panel h2{ font-size:16px; }
  .actions .label{ display:none; }
  table.list th, table.list td{ font-size:11px; }
}

/* ===== Clients final containment fix ===== */
#clientsPanel{
  width:100%;
  max-width:100%;
  overflow:hidden;
  padding:16px !important;
  border-radius:18px;
}
#clientsPanel *{ box-sizing:border-box; }
#clientsPanel .grid.grid-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px !important;
  align-items:end;
}
#clientsPanel .row{
  max-width:100%;
  overflow:visible;
}
#clientsPanel #addUUIDBtn{
  width:auto;
  min-width:160px;
  margin-left:auto;
  padding-inline:18px !important;
}
#clientsPanel .table-wrap{
  width:100%;
  max-width:100%;
  overflow:auto;
  border-radius:14px;
  margin-top:14px !important;
}
#clientsPanel table.list{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
}
#clientsPanel table.list th,
#clientsPanel table.list td{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#clientsPanel table.list td:nth-child(1){ white-space:nowrap; }
#clientsPanel table.list input,
#clientsPanel table.list select{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
#clientsPanel table.list input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
}
#clientsPanel .actions{
  display:flex !important;
  justify-content:flex-end;
  gap:5px !important;
  width:100%;
  flex-wrap:nowrap;
}
#clientsPanel .actions .action{
  flex:0 0 26px;
  width:26px !important;
  min-width:26px !important;
  height:26px !important;
  padding:0 !important;
}
/* exact 100% desktop column budget */
#clientsPanel table.list th:nth-child(1), #clientsPanel table.list td:nth-child(1){ width:25% !important; }
#clientsPanel table.list th:nth-child(2), #clientsPanel table.list td:nth-child(2){ width:8% !important; }
#clientsPanel table.list th:nth-child(3), #clientsPanel table.list td:nth-child(3){ width:8% !important; }
#clientsPanel table.list th:nth-child(4), #clientsPanel table.list td:nth-child(4){ width:9% !important; }
#clientsPanel table.list th:nth-child(5), #clientsPanel table.list td:nth-child(5){ width:8% !important; }
#clientsPanel table.list th:nth-child(6), #clientsPanel table.list td:nth-child(6){ width:13% !important; }
#clientsPanel table.list th:nth-child(7), #clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8), #clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9), #clientsPanel table.list td:nth-child(9){ width:4% !important; text-align:center; }
#clientsPanel table.list th:nth-child(10), #clientsPanel table.list td:nth-child(10){ width:5% !important; text-align:center; }
#clientsPanel table.list th:nth-child(11), #clientsPanel table.list td:nth-child(11){ width:12% !important; }

@media (max-width: 1180px){
  #clientsPanel table.list{ min-width:1050px !important; }
  #clientsPanel .table-wrap{ overflow-x:auto; }
}
@media (max-width: 900px){
  #clientsPanel{ padding:12px !important; }
  #clientsPanel .grid.grid-4{ grid-template-columns:1fr 1fr; }
  #clientsPanel #addUUIDBtn{ width:100%; margin-left:0; }
}
@media (max-width: 560px){
  #clientsPanel .grid.grid-4{ grid-template-columns:1fr; }
  #clientsPanel table.list{ min-width:820px !important; }
  #clientsPanel table.list th:nth-child(1), #clientsPanel table.list td:nth-child(1){ width:28% !important; }
  #clientsPanel table.list th:nth-child(3), #clientsPanel table.list td:nth-child(3),
  #clientsPanel table.list th:nth-child(4), #clientsPanel table.list td:nth-child(4){ width:10% !important; }
  #clientsPanel .actions .action{ flex-basis:28px; width:28px !important; min-width:28px !important; }
}


/* ===== Extension Users only: fixed responsive layout, Clients untouched ===== */
#extUsersPanel{
  width:100%;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
}
#extUsersPanel .table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  overflow-y:auto;
  box-sizing:border-box;
}
#extUsersPanel table.ext-users-table{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
#extUsersPanel table.ext-users-table th,
#extUsersPanel table.ext-users-table td{
  box-sizing:border-box;
  min-width:0;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#extUsersPanel table.ext-users-table th:nth-child(1),
#extUsersPanel table.ext-users-table td:nth-child(1){ width:8%; }
#extUsersPanel table.ext-users-table th:nth-child(2),
#extUsersPanel table.ext-users-table td:nth-child(2){ width:7%; }
#extUsersPanel table.ext-users-table th:nth-child(3),
#extUsersPanel table.ext-users-table td:nth-child(3){ width:7%; }
#extUsersPanel table.ext-users-table th:nth-child(4),
#extUsersPanel table.ext-users-table td:nth-child(4){ width:7%; }
#extUsersPanel table.ext-users-table th:nth-child(5),
#extUsersPanel table.ext-users-table td:nth-child(5){ width:9%; }
#extUsersPanel table.ext-users-table th:nth-child(6),
#extUsersPanel table.ext-users-table td:nth-child(6){ width:22%; }
#extUsersPanel table.ext-users-table th:nth-child(7),
#extUsersPanel table.ext-users-table td:nth-child(7){ width:17%; }
#extUsersPanel table.ext-users-table th:nth-child(8),
#extUsersPanel table.ext-users-table td:nth-child(8){ width:5%; text-align:center; }
#extUsersPanel table.ext-users-table th:nth-child(9),
#extUsersPanel table.ext-users-table td:nth-child(9){ width:18%; }
#extUsersPanel .ext-player-cell span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#extUsersPanel table.ext-users-table input,
#extUsersPanel table.ext-users-table select{
  width:100% !important;
  max-width:100% !important;
}
#extUsersPanel table.ext-users-table input[type="checkbox"]{
  width:auto !important;
  min-height:auto !important;
}
#extUsersPanel .ext-pass-card,
#extUsersPanel .ext-browser-card{
  max-width:100%;
  overflow:hidden;
}
#extUsersPanel .ext-browser-card .mono,
#extUsersPanel .ext-pass-card .mono,
#extUsersPanel .ext-browser-card .muted,
#extUsersPanel .ext-pass-card .muted{
  overflow-wrap:anywhere;
  word-break:break-word;
}
#extUsersPanel .ext-row-actions,
#extUsersPanel .ext-pass-card .actions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
  justify-content:flex-start;
}
#extUsersPanel .ext-row-actions .action{
  flex:1 1 58px;
  min-width:0;
  max-width:92px;
  justify-content:center;
  white-space:nowrap;
}
#extUsersPanel .ext-row-actions .label{
  overflow:hidden;
  text-overflow:ellipsis;
}
#extUsersPanel .row{
  flex-wrap:wrap;
}
#extUsersPanel #extAddBtn,
#extUsersPanel #extClearBtn,
#extUsersPanel #extRefreshBtn{
  flex:1 1 220px;
}
@media (max-width: 1180px){
  #extUsersPanel table.ext-users-table th:nth-child(1),
  #extUsersPanel table.ext-users-table td:nth-child(1){ width:7%; }
  #extUsersPanel table.ext-users-table th:nth-child(6),
  #extUsersPanel table.ext-users-table td:nth-child(6){ width:24%; }
  #extUsersPanel table.ext-users-table th:nth-child(7),
  #extUsersPanel table.ext-users-table td:nth-child(7){ width:15%; }
  #extUsersPanel table.ext-users-table th:nth-child(9),
  #extUsersPanel table.ext-users-table td:nth-child(9){ width:19%; }
  #extUsersPanel .ext-row-actions .label{ display:none; }
  #extUsersPanel .ext-row-actions .action{ flex:0 0 32px; max-width:34px; padding:0; }
}
@media (max-width: 760px){
  #extUsersPanel .grid.grid-4{ grid-template-columns:1fr !important; }
  #extUsersPanel .table-wrap{ overflow:visible !important; max-height:none !important; border:0; background:transparent; }
  #extUsersPanel table.ext-users-table,
  #extUsersPanel table.ext-users-table thead,
  #extUsersPanel table.ext-users-table tbody,
  #extUsersPanel table.ext-users-table tr,
  #extUsersPanel table.ext-users-table td{
    display:block;
    width:100% !important;
  }
  #extUsersPanel table.ext-users-table thead{ display:none; }
  #extUsersPanel table.ext-users-table tr{
    margin:0 0 12px;
    padding:10px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    background:rgba(7,0,20,.55);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
  }
  #extUsersPanel table.ext-users-table td{
    padding:7px 0 !important;
    border:0 !important;
  }
  #extUsersPanel table.ext-users-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:4px;
    font-size:11px;
    color:rgba(255,255,255,.68);
    font-weight:700;
  }
  #extUsersPanel .ext-player-cell span{ white-space:normal; }
  #extUsersPanel .ext-row-actions .label{ display:inline; }
  #extUsersPanel .ext-row-actions .action{ flex:1 1 46%; max-width:none; padding:0 7px; }
}

/* ===== REAL FIX: Clients Actions custom-days no overlap ===== */
#clientsPanel .table-wrap{
  overflow-x:auto !important;
  overflow-y:auto !important;
}
#clientsPanel table.list{
  min-width:1320px !important;
  width:max-content !important;
  table-layout:fixed !important;
}
#clientsPanel table.list th:nth-child(1), #clientsPanel table.list td:nth-child(1){ width:300px !important; }
#clientsPanel table.list th:nth-child(2), #clientsPanel table.list td:nth-child(2){ width:105px !important; }
#clientsPanel table.list th:nth-child(3), #clientsPanel table.list td:nth-child(3){ width:115px !important; }
#clientsPanel table.list th:nth-child(4), #clientsPanel table.list td:nth-child(4){ width:120px !important; }
#clientsPanel table.list th:nth-child(5), #clientsPanel table.list td:nth-child(5){ width:115px !important; }
#clientsPanel table.list th:nth-child(6), #clientsPanel table.list td:nth-child(6){ width:155px !important; }
#clientsPanel table.list th:nth-child(7), #clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8), #clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9), #clientsPanel table.list td:nth-child(9){ width:45px !important; text-align:center !important; }
#clientsPanel table.list th:nth-child(10), #clientsPanel table.list td:nth-child(10){ width:70px !important; text-align:center !important; }
#clientsPanel table.list th:nth-child(11), #clientsPanel table.list td:nth-child(11){
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
#clientsPanel .actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  min-width:205px !important;
  overflow:visible !important;
}
#clientsPanel .actions .action{
  flex:0 0 auto !important;
  height:28px !important;
  min-height:28px !important;
  padding:0 7px !important;
  border-radius:8px !important;
  font-size:11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#clientsPanel .actions [data-act="cplus30"]{
  width:54px !important;
  min-width:54px !important;
}
#clientsPanel .actions [data-act="cdays"]{
  width:58px !important;
  min-width:58px !important;
}
#clientsPanel .actions [data-act="creset"],
#clientsPanel .actions [data-act="save"],
#clientsPanel .actions [data-act="del"]{
  width:30px !important;
  min-width:30px !important;
  padding:0 !important;
}
#clientsPanel .actions .label{
  display:inline !important;
  font-size:10px !important;
}
@media (max-width: 900px){
  #clientsPanel table.list{ min-width:1320px !important; }
}


/* ===== Custom Days Modal - English professional UI ===== */
.modal-backdrop.custom-days-modal{
  background:rgba(5,0,18,.72);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  padding:18px;
}
.custom-days-modal .modal--prompt{
  width:min(440px, calc(100vw - 28px));
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(31,9,61,.96), rgba(12,4,27,.96));
  border:1px solid rgba(190,120,255,.42);
  box-shadow:0 22px 70px rgba(0,0,0,.62), 0 0 35px rgba(146,44,255,.22);
}
.custom-days-modal .modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}
.custom-days-modal .modal-head h3{
  margin:0;
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
}
.custom-days-modal .modal-x{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.custom-days-modal .modal-hint{
  margin:0 0 14px;
  color:rgba(255,255,255,.72);
  font-size:12px;
}
.custom-days-modal .prompt-label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.88);
}
.custom-days-modal #__promptInput{
  width:100%;
  height:46px;
  box-sizing:border-box;
  padding:0 14px;
  border-radius:13px;
  border:1px solid rgba(204,156,255,.55);
  outline:none;
  background:rgba(0,0,0,.30);
  color:#fff;
  font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.custom-days-modal #__promptInput::placeholder{ color:rgba(255,255,255,.46); }
.custom-days-modal #__promptInput:focus{
  border-color:rgba(202,117,255,.95);
  box-shadow:0 0 0 3px rgba(155,67,255,.26), inset 0 0 0 1px rgba(255,255,255,.05);
}
.custom-days-modal .modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.custom-days-modal .modal-actions .btn{
  width:auto;
  min-width:104px;
  height:40px;
  padding:0 16px;
  border-radius:12px;
  box-shadow:none;
}
.custom-days-modal .modal-actions .btn-primary{
  background:linear-gradient(135deg,#8f20ff,#c02cff);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.custom-days-modal .modal-actions .btn.ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.24);
}
@media (max-width:520px){
  .custom-days-modal .modal--prompt{ padding:15px; border-radius:16px; }
  .custom-days-modal .modal-actions{ flex-direction:column-reverse; }
  .custom-days-modal .modal-actions .btn{ width:100%; }
}

/* ===== Final Group dropdown fix (Clients) ===== */
#clientsPanel select,
#clientsPanel select option,
#clientsPanel select optgroup{
  background:#211038 !important;
  color:#ffffff !important;
  color-scheme:dark !important;
}

#clientsPanel select option:checked,
#clientsPanel select option:hover{
  background:#7a22d9 !important;
  color:#ffffff !important;
}

#clientsPanel #newUUIDGroup,
#clientsPanel #groupFilterSelect,
#clientsPanel .server-group-select{
  background:linear-gradient(180deg, rgba(58,31,88,.98), rgba(33,16,56,.98)) !important;
  border:1px solid rgba(255,255,255,.32) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) !important;
  color:#fff !important;
  max-width:100% !important;
}

#clientsPanel #groupFilterSelect{
  width:150px !important;
  min-width:150px !important;
}

#clientsPanel #groupManageBtn{
  white-space:nowrap !important;
  min-width:132px !important;
}

#clientsPanel .clients-group-tools,
#clientsPanel .row:has(#groupFilterSelect){
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  overflow:visible !important;
}

#clientsPanel .stack:has(#newUUIDGroup){
  min-width:220px !important;
}

#clientsPanel .table-wrap{
  overflow-x:auto !important;
  overflow-y:auto !important;
  scrollbar-gutter:stable both-edges !important;
}

#clientsPanel table.list select.server-group-select{
  width:120px !important;
  min-width:120px !important;
}

@media (max-width: 760px){
  #clientsPanel #groupFilterSelect,
  #clientsPanel #groupManageBtn{
    width:100% !important;
    min-width:0 !important;
  }
  #clientsPanel .stack:has(#newUUIDGroup){
    min-width:0 !important;
  }
}


/* ===== Server Groups modal professional fix ===== */
.group-manager-backdrop{
  background:rgba(3,0,10,.72) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  padding:18px !important;
  align-items:center !important;
}

.group-manager-modal{
  width:min(960px, calc(100vw - 28px)) !important;
  max-width:960px !important;
  max-height:calc(100vh - 34px) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding:18px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(19,7,35,.98), rgba(8,5,18,.98)) !important;
  border:1px solid rgba(181,95,255,.38) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.group-manager-modal h3{
  margin:0 0 4px !important;
  font-size:20px !important;
  letter-spacing:.2px !important;
}

.group-manager-modal .muted{
  margin:0 0 16px !important;
  color:rgba(255,255,255,.72) !important;
  font-size:13px !important;
}

.group-manager-form{
  display:grid !important;
  grid-template-columns:minmax(180px,1.2fr) minmax(135px,.8fr) minmax(180px,1.2fr) auto !important;
  gap:12px !important;
  align-items:end !important;
  margin-bottom:14px !important;
}

.group-manager-form .stack{ gap:5px !important; }
.group-manager-form label{
  color:rgba(255,255,255,.86) !important;
  font-size:12px !important;
  font-weight:700 !important;
}

.group-manager-modal input,
.group-manager-modal select{
  width:100% !important;
  min-height:38px !important;
  height:38px !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:linear-gradient(180deg, rgba(52,29,78,.96), rgba(26,13,45,.96)) !important;
  color:#fff !important;
  color-scheme:dark !important;
  outline:none !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

.group-manager-modal select option,
.group-manager-modal select optgroup{
  background:#211038 !important;
  color:#fff !important;
}

.group-manager-modal input::placeholder{ color:rgba(255,255,255,.48) !important; }
.group-manager-modal input:focus,
.group-manager-modal select:focus{
  border-color:rgba(180,95,255,.9) !important;
  box-shadow:0 0 0 3px rgba(150,50,255,.18) !important;
}

.group-manager-add .btn,
#gmAdd{
  height:38px !important;
  min-width:150px !important;
  border-radius:12px !important;
  border:0 !important;
  background:linear-gradient(135deg, #8b22e8, #b12cff) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 8px 22px rgba(128,38,230,.32) !important;
}

.group-manager-list{
  flex:1 1 auto !important;
  min-height:180px !important;
  max-height:none !important;
  overflow:auto !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;
  padding:8px !important;
  background:rgba(255,255,255,.035) !important;
  scrollbar-color:rgba(180,95,255,.62) rgba(255,255,255,.08) !important;
  scrollbar-width:thin !important;
}

.group-manager-row{
  display:grid !important;
  grid-template-columns:minmax(180px,1.25fr) minmax(135px,.75fr) minmax(180px,1.15fr) 78px !important;
  gap:10px !important;
  align-items:center !important;
  padding:8px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.group-manager-row:last-child{ border-bottom:0 !important; }

.group-manager-row-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:7px !important;
  flex-wrap:nowrap !important;
}

.group-manager-row-actions .action{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  border-radius:10px !important;
}

.group-manager-footer{
  flex:0 0 auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-top:14px !important;
}
.group-manager-footer .btn{
  height:38px !important;
  min-width:95px !important;
  border-radius:12px !important;
}

@media (max-width:760px){
  .group-manager-backdrop{ align-items:flex-start !important; padding:10px !important; }
  .group-manager-modal{
    width:100% !important;
    max-height:calc(100vh - 20px) !important;
    padding:14px !important;
  }
  .group-manager-form{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }
  .group-manager-add .btn,
  #gmAdd{ width:100% !important; min-width:0 !important; }
  .group-manager-row{
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:10px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:13px !important;
    margin-bottom:8px !important;
    background:rgba(255,255,255,.035) !important;
  }
  .group-manager-row-actions{ justify-content:stretch !important; }
  .group-manager-row-actions .action{ flex:1 1 0 !important; }
  .group-manager-footer .btn{ width:100% !important; }
}

/* ===== WAR COMMANDER FULL UI REDESIGN ===== */
:root{
  --wc-bg:#060617; --wc-panel:rgba(10,10,28,.72); --wc-panel2:rgba(25,10,55,.58);
  --wc-line:rgba(180,108,255,.28); --wc-line2:rgba(255,255,255,.14);
  --wc-text:#fff; --wc-muted:rgba(255,255,255,.68); --wc-purple:#9b2cff; --wc-purple2:#cf42ff;
  --wc-green:#20d77a; --wc-blue:#2679ff; --wc-red:#ff3d57; --wc-orange:#ff9b24;
  --wc-radius:16px; --wc-shadow:0 24px 70px rgba(0,0,0,.58);
}
*{scrollbar-color:rgba(160,74,255,.55) rgba(255,255,255,.05); scrollbar-width:thin;}
body{
  display:block !important; padding:0 !important; overflow-x:hidden !important;
  background:linear-gradient(90deg,rgba(5,5,18,.9),rgba(10,5,28,.72)), url('/assets/bg.jpg') center/cover fixed no-repeat !important;
  color:var(--wc-text); min-height:100dvh;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 12%,rgba(139,39,255,.28),transparent 32%),radial-gradient(circle at 35% 55%,rgba(176,30,255,.18),transparent 33%);z-index:-1;}
.brand{display:none!important}.hidden{display:none!important}
.wrapper{position:fixed;inset:50%;transform:translate(-50%,-50%);width:min(430px,92vw)!important;background:linear-gradient(145deg,rgba(10,7,28,.86),rgba(76,17,123,.35))!important;border:1px solid var(--wc-line)!important;border-radius:26px!important;box-shadow:var(--wc-shadow),0 0 60px rgba(155,44,255,.22)!important;padding:28px!important;backdrop-filter:blur(20px)!important}.login-logo{display:grid;place-items:center;margin-bottom:8px}.login-logo img{width:92px;height:92px;object-fit:cover;border-radius:24px;filter:drop-shadow(0 0 18px rgba(186,70,255,.55))}.wrapper .btn,#loginBtn{background:linear-gradient(135deg,var(--wc-purple),#6b19d8)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}.input-box input{background:rgba(255,255,255,.08)!important;border-color:var(--wc-line)!important;border-radius:14px!important}.input-box{height:50px!important}.input-box input:focus{border-color:rgba(216,92,255,.75)!important;box-shadow:0 0 0 4px rgba(155,44,255,.22)!important}
.app{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;min-height:100dvh;display:grid;grid-template-columns:292px minmax(0,1fr);gap:24px}.side-panel{position:sticky;top:0;height:100dvh;padding:20px 18px;display:flex;flex-direction:column;gap:18px;background:linear-gradient(180deg,rgba(8,8,25,.92),rgba(7,6,20,.78));border:1px solid var(--wc-line);border-top:0;border-bottom:0;box-shadow:18px 0 50px rgba(0,0,0,.35);backdrop-filter:blur(18px);z-index:80}.side-brand{display:flex;align-items:center;gap:12px}.side-brand img{width:64px;height:64px;object-fit:cover;border-radius:18px;filter:drop-shadow(0 0 16px rgba(191,63,255,.45))}.side-brand strong{display:block;font-size:18px;line-height:1.05}.side-brand span{display:block;font-size:13px;font-weight:800;color:#d94cff}.profile-card{display:flex;align-items:center;gap:12px;padding:14px 10px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.profile-card img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid rgba(202,74,255,.55);box-shadow:0 0 22px rgba(155,44,255,.42)}.profile-meta{min-width:0;flex:1}.profile-meta strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.profile-meta span{display:flex;gap:7px;align-items:center;color:var(--wc-muted);font-size:12px}.profile-meta i,.online-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#2de384;box-shadow:0 0 12px #2de384}.profile-card b{font-size:11px;padding:4px 8px;border-radius:8px;background:rgba(155,44,255,.38);border:1px solid rgba(212,89,255,.4)}.side-nav{display:flex;flex-direction:column;gap:8px;overflow:auto;padding-right:3px}.nav-label{margin:14px 8px 6px;color:var(--wc-muted);text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.06em}.side-nav button,.side-logout{height:46px;border-radius:12px;border:1px solid transparent;background:transparent;color:#fff;text-align:left;padding:0 13px;display:flex;align-items:center;gap:12px;font-weight:700;cursor:pointer}.side-nav button i{font-size:19px;color:rgba(255,255,255,.76)}.side-nav button:hover,.side-nav button.active{background:linear-gradient(135deg,rgba(155,44,255,.58),rgba(155,44,255,.22));border-color:rgba(217,74,255,.52);box-shadow:0 0 22px rgba(155,44,255,.22)}.side-logout{margin-top:auto;justify-content:center;text-align:center;border-color:rgba(217,74,255,.55);color:#e565ff;background:rgba(155,44,255,.08)}
.main-panel{min-width:0;padding:18px 22px 18px 0}.appbar{position:sticky!important;top:16px!important;z-index:70!important;min-height:64px;margin:0 0 16px!important;padding:12px 16px!important;border:1px solid var(--wc-line)!important;border-radius:16px!important;background:rgba(8,8,24,.60)!important;box-shadow:none!important}.mobile-menu{width:42px;height:42px;border-radius:12px;border:1px solid var(--wc-line);background:rgba(155,44,255,.18);color:#fff;font-size:25px;display:none;place-items:center}.app-title{font-size:18px!important;font-weight:800}.appbar-right .btn{width:auto!important;min-width:120px;border-radius:10px!important;background:rgba(155,44,255,.12)!important;color:#fff!important;border:1px solid rgba(217,74,255,.5)!important}.me-label{font-size:15px;display:flex;align-items:center;gap:8px}
.tabs{position:relative!important;top:auto!important;margin:0 0 10px!important;padding:14px!important;border:1px solid var(--wc-line)!important;border-radius:16px;background:rgba(10,8,28,.54);backdrop-filter:blur(16px);overflow-x:auto;flex-wrap:nowrap!important}.tabs button{height:48px!important;padding:0 20px!important;border-radius:12px!important;font-weight:800!important;font-size:14px!important;background:rgba(9,8,28,.65)!important;border:1px solid rgba(255,255,255,.16)!important}.tabs button.active{background:linear-gradient(135deg,#b13cff,#7c22e2)!important;box-shadow:0 12px 35px rgba(155,44,255,.38)!important;border-color:rgba(255,255,255,.18)!important}
.panel{background:linear-gradient(135deg,rgba(8,8,24,.78),rgba(35,12,69,.48))!important;border:1px solid var(--wc-line)!important;border-radius:16px!important;padding:22px!important;box-shadow:var(--wc-shadow)!important;backdrop-filter:blur(18px)!important;margin-bottom:12px}#extUsersPanel::before{content:'Extension Users';display:block;font-size:24px;font-weight:900;margin:0 0 18px}#clientsPanel::before{content:'Heartbeat Clients';display:block;font-size:24px;font-weight:900;margin:0 0 8px}.grid.grid-4,.controls .row{display:grid!important;grid-template-columns:repeat(4,minmax(170px,1fr))!important;gap:16px!important}.stack label,#clientsPanel .stack label,#extUsersPanel .stack label{font-size:13px!important;font-weight:800!important;color:rgba(255,255,255,.88)!important;margin-bottom:6px!important}input,select,textarea,table.list input,table.list select,#clientsPanel input,#clientsPanel select,#extUsersPanel input,#extUsersPanel select{background:rgba(255,255,255,.075)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:9px!important;min-height:40px!important;height:auto!important;padding:9px 12px!important;font-size:14px!important;outline:none!important}select option{background:#100721!important;color:#fff!important}input:focus,select:focus{border-color:rgba(210,80,255,.68)!important;box-shadow:0 0 0 3px rgba(155,44,255,.18)!important}.btn{border-radius:10px!important;background:linear-gradient(135deg,#a92fff,#7d21dd)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;height:48px!important}.row{gap:12px!important}.inline{font-weight:800;color:#fff}.table-wrap{border:1px solid rgba(255,255,255,.12);border-radius:14px;max-height:none!important;overflow:auto!important;background:rgba(0,0,0,.12)}table.list{table-layout:auto!important;min-width:1100px;border-collapse:separate!important;border-spacing:0!important}table.list th{position:sticky;top:0;z-index:2;background:rgba(12,6,30,.96);font-size:13px!important;padding:12px 10px!important;color:#fff!important}table.list td{padding:10px!important;font-size:13px!important;vertical-align:middle!important;border-bottom:1px solid rgba(255,255,255,.09)!important}table.list tr:hover td{background:rgba(155,44,255,.06)}table.list input[type="checkbox"]{min-height:auto!important;width:16px!important;height:16px!important;accent-color:#168bff}.chip{font-weight:800}.actions,.group-manager-row-actions{display:flex!important;gap:7px!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important;min-width:max-content}.actions .action{height:36px!important;min-width:36px!important;padding:0 10px!important;border-radius:9px!important;font-size:13px!important;font-weight:800!important}.action--primary{background:rgba(11,171,99,.22)!important;border-color:rgba(45,227,132,.55)!important}.action--muted{background:rgba(255,155,36,.16)!important;border-color:rgba(255,155,36,.55)!important}.action--safe{background:rgba(38,121,255,.20)!important;border-color:rgba(38,121,255,.58)!important}.action--danger{background:rgba(255,61,87,.18)!important;border-color:rgba(255,61,87,.58)!important}td.right,th.right{text-align:right!important;min-width:220px!important}#clientsPanel table.list th:nth-child(11),#clientsPanel table.list td:nth-child(11){width:auto!important;min-width:220px!important}#extUsersPanel table.list th:nth-child(9),#extUsersPanel table.list td:nth-child(9){min-width:260px!important}.ext-pass-card,.ext-browser-card{border-radius:10px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.12)!important;padding:10px!important;margin:4px 0!important}.modal-backdrop{background:rgba(0,0,0,.66)!important;backdrop-filter:blur(6px)}.modal{background:linear-gradient(145deg,rgba(8,8,22,.96),rgba(32,11,58,.92))!important;border:1px solid var(--wc-line)!important;border-radius:18px!important;color:#fff!important;box-shadow:var(--wc-shadow)!important}.modal input,.modal select{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.20)!important}.group-manager-modal{width:min(920px,94vw)!important;max-height:86dvh!important;overflow:auto!important}.group-manager-modal .gm-list,.group-manager-modal [data-list]{overflow:auto!important}.group-manager-modal .row,.group-manager-row{display:grid!important;grid-template-columns:minmax(160px,1.2fr) minmax(120px,.8fr) minmax(180px,1fr) auto!important;gap:10px!important;align-items:center!important}.group-manager-modal input,.group-manager-modal select{min-width:0!important;width:100%!important}.group-manager-modal button{white-space:nowrap!important}
@media (max-width:1100px){.app{grid-template-columns:1fr}.side-panel{position:fixed;left:0;top:0;bottom:0;width:290px;transform:translateX(-105%);transition:transform .18s ease;z-index:100}.app.sidebar-open .side-panel{transform:translateX(0)}.main-panel{padding:12px}.mobile-menu{display:grid}.app.sidebar-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:90}.side-panel{z-index:110}.tabs{top:auto!important}.grid.grid-4,.controls .row{grid-template-columns:repeat(2,minmax(0,1fr))!important}.panel{padding:16px!important}}
@media (max-width:680px){.main-panel{padding:10px}.appbar{top:8px!important}.appbar-right{width:100%;justify-content:space-between}.me-label{font-size:12px}.appbar-right .btn{min-width:auto}.tabs{padding:10px!important}.tabs button{height:42px!important;padding:0 12px!important;font-size:12px!important}.grid.grid-4,.controls .row{grid-template-columns:1fr!important;gap:10px!important}.panel{padding:12px!important;border-radius:14px!important}.table-wrap{border-radius:12px}table.list{min-width:760px}#extUsersPanel::before,#clientsPanel::before{font-size:20px}.side-panel{width:min(290px,86vw)}}

/* ===== FINAL CLEAN TEXT / BUTTON / RESPONSIVE FIX ===== */
html, body { width:100%; max-width:100%; }
body { font-size:14px; text-rendering:geometricPrecision; -webkit-font-smoothing:antialiased; }

/* Login clean card */
#loginCard.wrapper{
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  display:block;
  text-align:center;
  overflow:visible !important;
}
#loginCard .login-logo{ margin:-6px auto 10px !important; }
#loginCard .login-logo img{ width:86px !important; height:86px !important; border-radius:22px !important; }
#loginCard h1{ margin:6px 0 18px !important; line-height:1.1 !important; }
#loginCard .input-box{ margin:14px 0 !important; }
#loginCard .btn{ margin-top:12px !important; }

/* Main layout never pushes outside screen */
.app{ overflow:hidden !important; }
.main-panel{ overflow:hidden !important; }
.panel{ overflow:hidden !important; }
.table-wrap{ width:100% !important; max-width:100% !important; overflow:auto !important; }

/* Sidebar text clear */
.side-nav button,
.side-logout,
.tabs button,
.btn,
.actions .action{
  letter-spacing:0 !important;
  line-height:1.15 !important;
}
.side-nav button{ min-height:46px; white-space:nowrap; }
.profile-meta strong{ font-size:14px !important; }

/* Remove duplicated fake titles, keep real panel titles only */
#extUsersPanel::before,
#clientsPanel::before{ content:none !important; display:none !important; }
#extUsersPanel h2,
#clientsPanel h2{ font-size:24px !important; margin:0 0 18px !important; line-height:1.2 !important; }

/* Better form spacing */
#extUsersPanel .grid.grid-4,
#clientsPanel .grid.grid-4{
  grid-template-columns:repeat(4, minmax(180px, 1fr)) !important;
  gap:16px !important;
  align-items:end !important;
}
#extUsersPanel .row,
#clientsPanel .row{ gap:12px !important; }
#extUsersPanel #extAddBtn,
#extUsersPanel #extClearBtn,
#extUsersPanel #extRefreshBtn,
#clientsPanel #addUUIDBtn{
  min-height:48px !important;
  font-size:14px !important;
  font-weight:800 !important;
}

/* Universal table readable text */
table.list th,
table.list td{
  font-size:13px !important;
  line-height:1.25 !important;
  white-space:normal !important;
}
table.list th{ font-weight:900 !important; }
table.list input,
table.list select{ font-size:13px !important; }

/* Actions: no clipping, no text cut */
td.right,
th.right{ min-width:320px !important; text-align:left !important; }
.actions,
.ext-row-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  min-width:0 !important;
  width:100% !important;
  overflow:visible !important;
}
.actions .action,
.ext-row-actions .action{
  width:auto !important;
  max-width:none !important;
  min-width:44px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 12px !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:800 !important;
  gap:6px !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}
.actions .badge{ flex:0 0 auto !important; }
.actions .label,
.ext-row-actions .label{
  display:inline !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font-size:12px !important;
}

/* Extension Users table: enough room for writing */
#extUsersPanel .table-wrap{ overflow-x:auto !important; overflow-y:auto !important; }
#extUsersPanel table.ext-users-table,
#extUsersPanel table.list{
  min-width:1680px !important;
  width:100% !important;
  table-layout:fixed !important;
}
#extUsersPanel table.ext-users-table th:nth-child(1), #extUsersPanel table.ext-users-table td:nth-child(1){ width:120px !important; }
#extUsersPanel table.ext-users-table th:nth-child(2), #extUsersPanel table.ext-users-table td:nth-child(2){ width:115px !important; }
#extUsersPanel table.ext-users-table th:nth-child(3), #extUsersPanel table.ext-users-table td:nth-child(3){ width:125px !important; }
#extUsersPanel table.ext-users-table th:nth-child(4), #extUsersPanel table.ext-users-table td:nth-child(4){ width:130px !important; }
#extUsersPanel table.ext-users-table th:nth-child(5), #extUsersPanel table.ext-users-table td:nth-child(5){ width:185px !important; }
#extUsersPanel table.ext-users-table th:nth-child(6), #extUsersPanel table.ext-users-table td:nth-child(6){ width:350px !important; }
#extUsersPanel table.ext-users-table th:nth-child(7), #extUsersPanel table.ext-users-table td:nth-child(7){ width:260px !important; }
#extUsersPanel table.ext-users-table th:nth-child(8), #extUsersPanel table.ext-users-table td:nth-child(8){ width:95px !important; text-align:center !important; }
#extUsersPanel table.ext-users-table th:nth-child(9), #extUsersPanel table.ext-users-table td:nth-child(9){ width:300px !important; min-width:300px !important; overflow:visible !important; }
#extUsersPanel .ext-row-actions .action{ flex:0 0 auto !important; }
#extUsersPanel .ext-row-actions [data-act="edit"]{ min-width:92px !important; }
#extUsersPanel .ext-row-actions [data-act="plus30"]{ min-width:70px !important; }
#extUsersPanel .ext-row-actions [data-act="days"]{ min-width:74px !important; }
#extUsersPanel .ext-row-actions [data-act="reset"]{ min-width:74px !important; }
#extUsersPanel .ext-row-actions [data-act="save"]{ min-width:68px !important; }
#extUsersPanel .ext-row-actions [data-act="deleteUser"]{ min-width:120px !important; }
#extUsersPanel .ext-pass-card .actions{ justify-content:flex-start !important; }
#extUsersPanel .ext-pass-card .action{ height:32px !important; min-height:32px !important; padding:0 10px !important; }

/* Clients table: keep existing data, only make buttons clear */
#clientsPanel table.list{
  min-width:1450px !important;
  width:100% !important;
  table-layout:fixed !important;
}
#clientsPanel table.list th:nth-child(11),
#clientsPanel table.list td:nth-child(11){
  width:280px !important;
  min-width:280px !important;
  max-width:none !important;
  overflow:visible !important;
}
#clientsPanel .actions{ flex-wrap:wrap !important; justify-content:flex-start !important; min-width:260px !important; }
#clientsPanel .actions .action{ width:auto !important; min-width:38px !important; padding:0 10px !important; }
#clientsPanel .actions [data-act="cplus30"]{ min-width:68px !important; }
#clientsPanel .actions [data-act="cdays"]{ min-width:72px !important; }
#clientsPanel .actions [data-act="creset"]{ min-width:40px !important; }
#clientsPanel .actions [data-act="save"]{ min-width:40px !important; }
#clientsPanel .actions [data-act="del"]{ min-width:40px !important; }

/* Modal / group manager readable */
.modal h3,
.group-manager-modal h3{ font-size:22px !important; line-height:1.2 !important; }
.group-manager-modal{ width:min(980px,94vw) !important; }
.group-manager-row{ grid-template-columns:minmax(180px,1.2fr) minmax(140px,.75fr) minmax(200px,1fr) 110px !important; }
.group-manager-row-actions .action{ width:42px !important; min-width:42px !important; }

/* Mobile: use card mode for Extension Users, readable buttons */
@media (max-width: 1100px){
  .app{ display:block !important; }
  .main-panel{ padding:12px !important; }
  #extUsersPanel table.ext-users-table,
  #extUsersPanel table.list,
  #clientsPanel table.list{ min-width:1180px !important; }
}
@media (max-width: 760px){
  #extUsersPanel .grid.grid-4,
  #clientsPanel .grid.grid-4{ grid-template-columns:1fr !important; }
  #extUsersPanel .table-wrap{ overflow:visible !important; }
  #extUsersPanel table.ext-users-table,
  #extUsersPanel table.ext-users-table thead,
  #extUsersPanel table.ext-users-table tbody,
  #extUsersPanel table.ext-users-table tr,
  #extUsersPanel table.ext-users-table td{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }
  #extUsersPanel table.ext-users-table{ min-width:0 !important; }
  #extUsersPanel table.ext-users-table thead{ display:none !important; }
  #extUsersPanel table.ext-users-table tr{
    padding:12px !important;
    margin:0 0 12px !important;
    border:1px solid rgba(180,108,255,.22) !important;
    border-radius:14px !important;
    background:rgba(10,8,26,.72) !important;
  }
  #extUsersPanel table.ext-users-table td{ border:0 !important; padding:8px 0 !important; }
  #extUsersPanel table.ext-users-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:5px;
    color:rgba(255,255,255,.68);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
  }
  #extUsersPanel .ext-row-actions .action{ flex:1 1 45% !important; justify-content:center !important; }
  #clientsPanel table.list{ min-width:1050px !important; }
}

/* === Search + clear button text fix === */
.admin-search-row{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin:12px 0 !important;
}
.search-box{
  flex:1 1 360px !important;
  min-width:260px !important;
  max-width:680px !important;
  position:relative !important;
}
.search-box-wide{ max-width:none !important; }
.search-box .search-ico{
  position:absolute !important;
  left:13px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  color:#e7ccff !important;
  opacity:.9 !important;
  font-size:18px !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.search-box input[type="search"]{
  width:100% !important;
  height:44px !important;
  padding-left:42px !important;
  background:rgba(255,255,255,.085) !important;
  border:1px solid rgba(190,100,255,.32) !important;
  border-radius:12px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.1px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.16) !important;
}
.search-box input[type="search"]::placeholder{ color:rgba(255,255,255,.58) !important; font-weight:700 !important; }
.search-box input[type="search"]:focus{
  border-color:rgba(180,64,255,.82) !important;
  box-shadow:0 0 0 3px rgba(168,44,255,.18), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
.actions .action,
.ext-row-actions .action,
.group-manager-row-actions .action{
  color:#fff !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.15px !important;
  text-shadow:0 1px 3px rgba(0,0,0,.65) !important;
  white-space:nowrap !important;
  overflow:visible !important;
  line-height:1 !important;
}
.actions .label,
.ext-row-actions .label{
  display:inline-block !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  opacity:1 !important;
}
#clientsPanel .actions,
#extUsersPanel .ext-row-actions{
  gap:8px !important;
  justify-content:flex-start !important;
  align-items:center !important;
}
#clientsPanel .actions .action,
#extUsersPanel .ext-row-actions .action{
  height:36px !important;
  min-height:36px !important;
  padding:0 12px !important;
}
#clientsPanel table.list th:last-child,
#clientsPanel table.list td:last-child{ min-width:305px !important; }
#extUsersPanel table.list th:last-child,
#extUsersPanel table.list td:last-child{ min-width:390px !important; }
@media (max-width:900px){
  .search-box{ flex-basis:100% !important; min-width:0 !important; }
  #clientsPanel table.list th:last-child,
  #clientsPanel table.list td:last-child{ min-width:250px !important; }
  #extUsersPanel table.list th:last-child,
  #extUsersPanel table.list td:last-child{ min-width:300px !important; }
}

/* ===== FINAL MOBILE PHONE FIX - clean cards, no cut, no lag ===== */
html, body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  -webkit-text-size-adjust:100%;
}
body{
  background-attachment:scroll !important;
}
button, input, select, textarea{
  -webkit-tap-highlight-color:transparent;
}

/* desktop/tablet text clarity */
.actions .action,
.ext-row-actions .action,
.btn,
.tabs button,
.side-nav button{
  font-weight:900 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.72) !important;
}
.actions .label,
.ext-row-actions .label{
  font-size:12px !important;
  font-weight:900 !important;
}

@media (max-width: 760px){
  body{ min-height:100dvh !important; }
  #appCard.app{
    display:block !important;
    width:100vw !important;
    max-width:100vw !important;
    min-height:100dvh !important;
    overflow-x:hidden !important;
  }
  .main-panel{
    width:100% !important;
    max-width:100vw !important;
    padding:8px !important;
    overflow:visible !important;
  }
  .appbar{
    position:sticky !important;
    top:6px !important;
    z-index:70 !important;
    min-height:auto !important;
    padding:8px !important;
    gap:8px !important;
    border-radius:14px !important;
  }
  .appbar-left{ min-width:0 !important; }
  .app-title{ font-size:14px !important; white-space:nowrap !important; }
  .appbar-right{
    width:100% !important;
    display:flex !important;
    gap:7px !important;
    align-items:center !important;
  }
  .me-label{
    flex:1 1 auto !important;
    min-width:0 !important;
    font-size:11px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .appbar-right .btn{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:86px !important;
    height:38px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }
  .mobile-menu{
    display:grid !important;
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
  }

  .tabs{
    width:100% !important;
    max-width:100% !important;
    padding:8px !important;
    gap:7px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity;
  }
  .tabs button{
    flex:0 0 auto !important;
    height:38px !important;
    padding:0 11px !important;
    font-size:11px !important;
    border-radius:11px !important;
    scroll-snap-align:start;
  }

  .panel{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    padding:12px !important;
    border-radius:14px !important;
    margin-bottom:10px !important;
  }
  .panel h2,
  #extUsersPanel h2,
  #clientsPanel h2{
    font-size:20px !important;
    margin-bottom:12px !important;
  }
  .grid.grid-4,
  .controls .row,
  #extUsersPanel .grid.grid-4,
  #clientsPanel .grid.grid-4{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .row{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    width:100% !important;
  }
  .stack label,
  #clientsPanel .stack label,
  #extUsersPanel .stack label{
    font-size:12px !important;
    margin-bottom:5px !important;
  }
  input, select, textarea,
  table.list input, table.list select,
  #clientsPanel input, #clientsPanel select,
  #extUsersPanel input, #extUsersPanel select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    font-size:14px !important;
    padding:9px 10px !important;
  }
  input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
    min-height:18px !important;
  }
  #extAddBtn,#extClearBtn,#extRefreshBtn,#addUUIDBtn,
  #clientsPanel #addUUIDBtn{
    width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    height:44px !important;
  }
  .admin-search-row{
    gap:8px !important;
    margin:10px 0 !important;
  }
  .search-box{
    flex:1 1 100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  .search-box input[type="search"]{
    height:42px !important;
    font-size:13px !important;
  }

  /* Convert Extension Users table to mobile cards */
  #extUsersPanel .table-wrap,
  #clientsPanel .table-wrap{
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
    max-height:none !important;
  }
  #extUsersPanel table.ext-users-table,
  #extUsersPanel table.ext-users-table thead,
  #extUsersPanel table.ext-users-table tbody,
  #extUsersPanel table.ext-users-table tr,
  #extUsersPanel table.ext-users-table td,
  #clientsPanel table.list,
  #clientsPanel table.list thead,
  #clientsPanel table.list tbody,
  #clientsPanel table.list tr,
  #clientsPanel table.list td{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  #extUsersPanel table.ext-users-table,
  #clientsPanel table.list{
    table-layout:auto !important;
    min-width:0 !important;
    border-spacing:0 !important;
  }
  #extUsersPanel table.ext-users-table thead,
  #clientsPanel table.list thead{
    display:none !important;
  }
  #extUsersPanel table.ext-users-table tr,
  #clientsPanel table.list tr{
    margin:0 0 12px !important;
    padding:12px !important;
    border:1px solid rgba(190,100,255,.24) !important;
    border-radius:16px !important;
    background:linear-gradient(145deg,rgba(12,8,30,.84),rgba(38,10,70,.52)) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
    overflow:hidden !important;
  }
  #extUsersPanel table.ext-users-table td,
  #clientsPanel table.list td{
    padding:8px 0 !important;
    border:0 !important;
    text-align:left !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  #extUsersPanel table.ext-users-table td::before,
  #clientsPanel table.list td::before{
    content:attr(data-label);
    display:block;
    margin:0 0 5px !important;
    color:rgba(232,210,255,.72) !important;
    font-size:11px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
  }
  #clientsPanel .client-uuid-cell span,
  #extUsersPanel .ext-player-cell span,
  .mono{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:normal !important;
  }
  .ext-pass-card,
  .ext-browser-card{
    width:100% !important;
    max-width:100% !important;
    padding:10px !important;
    border-radius:12px !important;
    margin-bottom:8px !important;
  }
  #clientsPanel table.list th:last-child,
  #clientsPanel table.list td:last-child,
  #extUsersPanel table.list th:last-child,
  #extUsersPanel table.list td:last-child,
  td.right, th.right{
    min-width:0 !important;
    width:100% !important;
  }
  #clientsPanel .actions,
  #extUsersPanel .ext-row-actions,
  #extUsersPanel .ext-pass-card .actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    justify-content:stretch !important;
  }
  #clientsPanel .actions .action,
  #extUsersPanel .ext-row-actions .action,
  #extUsersPanel .ext-pass-card .action{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 8px !important;
    justify-content:center !important;
    font-size:12px !important;
    border-radius:11px !important;
  }
  #clientsPanel .actions [data-act="del"],
  #extUsersPanel .ext-row-actions [data-act="deleteUser"]{
    grid-column:1 / -1 !important;
  }
  .actions .label,
  .ext-row-actions .label{
    display:inline !important;
    font-size:12px !important;
  }

  /* Other regular tables: keep swipe but do not break screen */
  #domainsPanel .table-wrap,
  #usersPanel .table-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #domainsPanel table.list,
  #usersPanel table.list{
    min-width:760px !important;
  }

  .modal,
  .custom-days-modal .modal--prompt,
  .group-manager-modal{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 20px) !important;
    overflow:auto !important;
    border-radius:16px !important;
  }
  .group-manager-row,
  .group-manager-modal .row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
}

@media (max-width: 380px){
  .main-panel{ padding:6px !important; }
  .panel{ padding:10px !important; }
  #clientsPanel .actions,
  #extUsersPanel .ext-row-actions,
  #extUsersPanel .ext-pass-card .actions{
    grid-template-columns:1fr !important;
  }
  .tabs button{ font-size:10px !important; padding:0 9px !important; }
}

/* ===== RESOLUTION AUTO-FIT FINAL FIX =====
   Auto adjusts desktop / tablet / phone without changing app logic. */
:root{
  --side-w:auto;
  --page-pad:clamp(8px, 1.1vw, 18px);
  --panel-pad:clamp(10px, 1.15vw, 22px);
  --btn-h:clamp(34px, 2.2vw, 42px);
  --field-h:clamp(38px, 2.4vw, 46px);
  --ui-font:clamp(12px, .72vw, 14px);
  --head-font:clamp(18px, 1.25vw, 24px);
}
html,body,#appCard{ width:100%; max-width:100%; }
body{ overflow-x:hidden !important; }
.app{ width:100% !important; max-width:1920px !important; margin-inline:auto !important; }
.main-panel{ min-width:0 !important; max-width:100% !important; }
.panel{ padding:var(--panel-pad) !important; }
.panel h2{ font-size:var(--head-font) !important; }
input,select,textarea,button,.btn,table.list th,table.list td{ font-size:var(--ui-font) !important; }
input,select,textarea{ min-height:var(--field-h) !important; }
.btn,.actions .action,.ext-row-actions .action{ min-height:var(--btn-h) !important; }

/* Wide desktop: keep tables inside screen and readable */
@media (min-width: 1401px){
  #appCard.app{ grid-template-columns:clamp(230px, 14vw, 285px) minmax(0,1fr) !important; }
  .side-panel{ width:auto !important; }
  .main-panel{ padding:16px 18px !important; }
  .tabs button{ padding-inline:clamp(13px, .95vw, 20px) !important; }
  #extUsersPanel table.ext-users-table{ min-width:1420px !important; }
  #clientsPanel table.list{ min-width:1280px !important; }
  #extUsersPanel table.ext-users-table th:nth-child(9),
  #extUsersPanel table.ext-users-table td:nth-child(9){ min-width:330px !important; width:330px !important; }
  #clientsPanel table.list th:nth-child(11),
  #clientsPanel table.list td:nth-child(11){ min-width:280px !important; width:280px !important; }
}

/* Laptop / normal desktop */
@media (min-width: 1101px) and (max-width: 1400px){
  #appCard.app{ grid-template-columns:220px minmax(0,1fr) !important; }
  .main-panel{ padding:12px !important; }
  .side-panel{ padding:12px !important; }
  .side-brand img{ width:48px !important; height:48px !important; }
  .side-brand strong{ font-size:14px !important; }
  .side-brand span{ font-size:10px !important; }
  .profile-card{ padding:10px !important; }
  .profile-card img{ width:44px !important; height:44px !important; }
  .profile-meta strong{ max-width:82px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
  .tabs{ padding:10px !important; gap:7px !important; }
  .tabs button{ height:40px !important; padding:0 12px !important; font-size:12px !important; }
  .grid.grid-4,#extUsersPanel .grid.grid-4,#clientsPanel .grid.grid-4{ grid-template-columns:repeat(2,minmax(180px,1fr)) !important; }
  #extUsersPanel table.ext-users-table{ min-width:1320px !important; }
  #clientsPanel table.list{ min-width:1220px !important; }
}

/* Tablet: side menu slides, content fits viewport */
@media (min-width: 761px) and (max-width: 1100px){
  #appCard.app{ display:block !important; width:100vw !important; max-width:100vw !important; overflow-x:hidden !important; }
  .main-panel{ width:100% !important; padding:10px !important; }
  .side-panel{ width:min(300px, 84vw) !important; }
  .appbar{ position:sticky !important; top:8px !important; z-index:75 !important; }
  .mobile-menu{ display:grid !important; }
  .tabs{ overflow-x:auto !important; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch !important; }
  .tabs button{ flex:0 0 auto !important; height:40px !important; font-size:12px !important; }
  .grid.grid-4,#extUsersPanel .grid.grid-4,#clientsPanel .grid.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .table-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
  #extUsersPanel table.ext-users-table{ min-width:1180px !important; }
  #clientsPanel table.list{ min-width:1120px !important; }
  .actions .label,.ext-row-actions .label{ display:none !important; }
  .actions .action,.ext-row-actions .action{ min-width:38px !important; padding:0 9px !important; }
}

/* Phone: cards instead of broken tables, full width buttons */
@media (max-width: 760px), (pointer: coarse) and (max-width: 900px){
  *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  body{ background-attachment:scroll !important; }
  #appCard.app{ display:block !important; width:100vw !important; max-width:100vw !important; overflow-x:hidden !important; margin:0 !important; }
  .main-panel{ width:100% !important; max-width:100vw !important; padding:8px !important; overflow:hidden !important; }
  .side-panel{ width:min(292px, 86vw) !important; transform:translateX(-105%) !important; }
  .app.sidebar-open .side-panel{ transform:translateX(0) !important; }
  .app.sidebar-open::after{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90; }
  .side-panel{ z-index:110 !important; }
  .mobile-menu{ display:grid !important; }
  .appbar{ position:sticky !important; top:6px !important; z-index:70 !important; padding:8px !important; border-radius:14px !important; }
  .appbar-right{ width:100% !important; gap:8px !important; }
  .me-label{ flex:1 1 0 !important; min-width:0 !important; max-width:100% !important; font-size:11px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
  .appbar-right .btn{ flex:0 0 auto !important; min-width:84px !important; width:auto !important; height:38px !important; }
  .tabs{ width:100% !important; max-width:100% !important; overflow-x:auto !important; overflow-y:hidden !important; flex-wrap:nowrap !important; padding:8px !important; gap:7px !important; }
  .tabs button{ flex:0 0 auto !important; height:38px !important; padding:0 10px !important; font-size:11px !important; }
  .panel{ width:100% !important; max-width:100% !important; overflow:hidden !important; padding:11px !important; border-radius:14px !important; }
  .panel h2,#extUsersPanel h2,#clientsPanel h2{ font-size:20px !important; margin-bottom:12px !important; }
  .grid.grid-4,.controls .row,#extUsersPanel .grid.grid-4,#clientsPanel .grid.grid-4{ grid-template-columns:1fr !important; gap:10px !important; }
  .row{ width:100% !important; display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
  .row > *, .stack{ min-width:0 !important; max-width:100% !important; }
  input,select,textarea,#clientsPanel input,#clientsPanel select,#extUsersPanel input,#extUsersPanel select{ width:100% !important; min-width:0 !important; max-width:100% !important; min-height:42px !important; font-size:14px !important; }
  .admin-search-row,.search-box{ width:100% !important; max-width:100% !important; min-width:0 !important; flex-basis:100% !important; }
  #extAddBtn,#extClearBtn,#extRefreshBtn,#addUUIDBtn,#clientsPanel #addUUIDBtn{ width:100% !important; min-width:0 !important; height:44px !important; }

  /* Clients + Extension Users as cards */
  #extUsersPanel .table-wrap,#clientsPanel .table-wrap{ overflow:visible !important; border:0 !important; background:transparent !important; max-height:none !important; }
  #extUsersPanel table.ext-users-table,#clientsPanel table.list{ min-width:0 !important; width:100% !important; table-layout:auto !important; }
  #extUsersPanel table.ext-users-table thead,#clientsPanel table.list thead{ display:none !important; }
  #extUsersPanel table.ext-users-table,
  #extUsersPanel table.ext-users-table tbody,
  #extUsersPanel table.ext-users-table tr,
  #extUsersPanel table.ext-users-table td,
  #clientsPanel table.list,
  #clientsPanel table.list tbody,
  #clientsPanel table.list tr,
  #clientsPanel table.list td{ display:block !important; width:100% !important; min-width:0 !important; max-width:100% !important; }
  #extUsersPanel table.ext-users-table tr,#clientsPanel table.list tr{ padding:12px !important; margin:0 0 12px !important; border:1px solid rgba(190,100,255,.26) !important; border-radius:16px !important; background:linear-gradient(145deg,rgba(11,8,29,.92),rgba(46,12,82,.58)) !important; box-shadow:0 12px 28px rgba(0,0,0,.28) !important; }
  #extUsersPanel table.ext-users-table td,#clientsPanel table.list td{ padding:8px 0 !important; border:0 !important; text-align:left !important; white-space:normal !important; overflow:visible !important; }
  #extUsersPanel table.ext-users-table td::before,#clientsPanel table.list td::before{ content:attr(data-label); display:block; margin-bottom:5px; color:rgba(235,214,255,.72); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
  td.right,th.right,#clientsPanel table.list td:last-child,#extUsersPanel table.list td:last-child{ min-width:0 !important; width:100% !important; max-width:100% !important; }
  #clientsPanel .actions,#extUsersPanel .ext-row-actions,#extUsersPanel .ext-pass-card .actions{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; min-width:0 !important; }
  #clientsPanel .actions .action,#extUsersPanel .ext-row-actions .action,#extUsersPanel .ext-pass-card .action{ width:100% !important; min-width:0 !important; max-width:none !important; height:40px !important; justify-content:center !important; font-size:12px !important; padding:0 8px !important; }
  #clientsPanel .actions [data-act="del"],#extUsersPanel .ext-row-actions [data-act="deleteUser"]{ grid-column:1 / -1 !important; }
  .actions .label,.ext-row-actions .label{ display:inline !important; font-size:12px !important; }
  .mono,.client-uuid-cell span,.ext-player-cell span{ overflow-wrap:anywhere !important; word-break:break-word !important; white-space:normal !important; }

  /* Other tables keep horizontal swipe only */
  #domainsPanel .table-wrap,#usersPanel .table-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
  #domainsPanel table.list,#usersPanel table.list{ min-width:720px !important; }
  .modal,.custom-days-modal .modal--prompt,.group-manager-modal{ width:calc(100vw - 18px) !important; max-width:calc(100vw - 18px) !important; max-height:calc(100dvh - 18px) !important; overflow:auto !important; }
}

@media (max-width: 390px){
  .main-panel{ padding:6px !important; }
  .panel{ padding:9px !important; }
  #clientsPanel .actions,#extUsersPanel .ext-row-actions,#extUsersPanel .ext-pass-card .actions{ grid-template-columns:1fr !important; }
  .tabs button{ font-size:10px !important; padding:0 8px !important; }
  .profile-card b{ display:none !important; }
}

/* ===== FINAL FIX: Extension Users search + actions layout ===== */
#extUsersPanel .ext-search-row{
  margin:12px 0 14px !important;
  display:flex !important;
  width:100% !important;
}
#extUsersPanel .search-box,
#extUsersPanel .search-box-wide{
  width:100% !important;
  max-width:none !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  background:rgba(255,255,255,.065) !important;
  border:1px solid rgba(185,86,255,.28) !important;
  border-radius:13px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.16) !important;
  overflow:hidden !important;
}
#extUsersPanel .search-box .search-ico{
  width:42px !important;
  flex:0 0 42px !important;
  text-align:center !important;
  color:#d58cff !important;
  font-size:19px !important;
  line-height:1 !important;
  opacity:1 !important;
}
#extUsersPanel #extSearch{
  width:100% !important;
  height:46px !important;
  min-height:46px !important;
  border:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.1px !important;
  padding:0 16px 0 0 !important;
  box-shadow:none !important;
}
#extUsersPanel #extSearch::placeholder{
  color:rgba(255,255,255,.58) !important;
  font-weight:700 !important;
}
#extUsersPanel #extSearch:focus{ box-shadow:none !important; }

#extUsersPanel .table-wrap{
  overflow-x:auto !important;
  overflow-y:visible !important;
  padding-bottom:8px !important;
}
#extUsersPanel table.list{
  width:100% !important;
  min-width:1240px !important;
  table-layout:fixed !important;
}
#extUsersPanel table.list th:nth-child(1), #extUsersPanel table.list td:nth-child(1){width:118px !important;}
#extUsersPanel table.list th:nth-child(2), #extUsersPanel table.list td:nth-child(2){width:104px !important;}
#extUsersPanel table.list th:nth-child(3), #extUsersPanel table.list td:nth-child(3){width:116px !important;}
#extUsersPanel table.list th:nth-child(4), #extUsersPanel table.list td:nth-child(4){width:105px !important;}
#extUsersPanel table.list th:nth-child(5), #extUsersPanel table.list td:nth-child(5){width:158px !important;}
#extUsersPanel table.list th:nth-child(6), #extUsersPanel table.list td:nth-child(6){width:280px !important;}
#extUsersPanel table.list th:nth-child(7), #extUsersPanel table.list td:nth-child(7){width:190px !important;}
#extUsersPanel table.list th:nth-child(8), #extUsersPanel table.list td:nth-child(8){width:78px !important; text-align:center !important;}
#extUsersPanel table.list th:nth-child(9), #extUsersPanel table.list td:nth-child(9){
  width:286px !important;
  min-width:286px !important;
  max-width:286px !important;
  text-align:right !important;
  padding-right:14px !important;
}
#extUsersPanel .ext-row-actions{
  display:grid !important;
  grid-template-columns:repeat(3, 86px) !important;
  gap:8px !important;
  justify-content:end !important;
  align-items:center !important;
  min-width:270px !important;
  max-width:270px !important;
  margin-left:auto !important;
}
#extUsersPanel .ext-row-actions .action{
  width:86px !important;
  min-width:86px !important;
  max-width:86px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 8px !important;
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:5px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
}
#extUsersPanel .ext-row-actions .badge{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  font-size:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#extUsersPanel .ext-row-actions .label{
  display:inline !important;
  opacity:1 !important;
  max-width:58px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#extUsersPanel .ext-row-actions [data-act="edit"] .label{max-width:48px !important;}
#extUsersPanel .ext-row-actions [data-act="deleteUser"] .label{max-width:44px !important;}
#extUsersPanel .ext-pass-card .actions{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  gap:7px !important;
  min-width:0 !important;
}
#extUsersPanel .ext-pass-card .actions .action{
  width:auto !important;
  min-width:78px !important;
  height:31px !important;
  font-size:12px !important;
  padding:0 9px !important;
}

@media (max-width: 1200px){
  #extUsersPanel table.list{min-width:1180px !important;}
  #extUsersPanel table.list th:nth-child(9), #extUsersPanel table.list td:nth-child(9){width:252px !important;min-width:252px !important;max-width:252px !important;}
  #extUsersPanel .ext-row-actions{grid-template-columns:repeat(3, 76px) !important;min-width:236px !important;max-width:236px !important;}
  #extUsersPanel .ext-row-actions .action{width:76px !important;min-width:76px !important;max-width:76px !important;font-size:11px !important;padding:0 6px !important;}
}
@media (max-width: 760px){
  #extUsersPanel .search-box .search-ico{width:38px !important;flex-basis:38px !important;}
  #extUsersPanel #extSearch{height:44px !important;min-height:44px !important;font-size:13px !important;}
  #extUsersPanel table.list{min-width:0 !important;width:100% !important;table-layout:auto !important;}
  #extUsersPanel table.list th:nth-child(n), #extUsersPanel table.list td:nth-child(n){width:auto !important;min-width:0 !important;max-width:none !important;}
  #extUsersPanel td.right[data-label="Actions"]{width:100% !important;max-width:none !important;text-align:left !important;padding-right:10px !important;}
  #extUsersPanel .ext-row-actions{grid-template-columns:repeat(2, minmax(0,1fr)) !important;width:100% !important;min-width:0 !important;max-width:none !important;justify-content:stretch !important;}
  #extUsersPanel .ext-row-actions .action{width:100% !important;min-width:0 !important;max-width:none !important;font-size:12px !important;}
}


/* Final search cleanup: clear short placeholder text */
.admin-search-row .search-box{
  min-height:46px !important;
  border-radius:14px !important;
  border:1px solid rgba(184,83,255,.45) !important;
  background:rgba(38,20,62,.88) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.18) !important;
}
.admin-search-row .search-box input[type="search"]{
  color:#ffffff !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:46px !important;
}
.admin-search-row .search-box input[type="search"]::placeholder{
  content:"Search";
  color:#f4edff !important;
  opacity:.92 !important;
  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:.15px !important;
}
.admin-search-row .search-ico{
  color:#e5b6ff !important;
  opacity:1 !important;
}
@media (max-width:760px){
  .admin-search-row .search-box{min-height:44px !important;width:100% !important;}
  .admin-search-row .search-box input[type="search"]{font-size:14px !important;line-height:44px !important;}
  .admin-search-row .search-box input[type="search"]::placeholder{font-size:14px !important;}
}

/* ===== FINAL FULL LAYOUT CLEANUP: clear search + no overlapping buttons ===== */
*, *::before, *::after { box-sizing: border-box !important; }
html, body { max-width:100% !important; overflow-x:hidden !important; }
body { text-rendering: geometricPrecision; }

/* Search boxes: simple clear text, no icon overlap */
.admin-search-row{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}
.admin-search-row .search-box,
#clientsPanel .search-box,
#extUsersPanel .search-box,
#extUsersPanel .search-box-wide{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  min-width:260px !important;
  flex:1 1 360px !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:14px !important;
  border:1px solid rgba(186,91,255,.62) !important;
  background:linear-gradient(180deg,rgba(55,31,82,.94),rgba(39,20,63,.94)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.22) !important;
}
.admin-search-row .search-ico,
#clientsPanel .search-ico,
#extUsersPanel .search-ico{
  display:none !important;
  width:0 !important;
  min-width:0 !important;
  flex:0 0 0 !important;
  overflow:hidden !important;
}
.admin-search-row input[type="search"],
#clientSearch,
#extSearch{
  width:100% !important;
  height:48px !important;
  min-height:48px !important;
  line-height:48px !important;
  display:block !important;
  padding:0 16px !important;
  margin:0 !important;
  border:0 !important;
  outline:none !important;
  background:transparent !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;
  box-shadow:none !important;
}
.admin-search-row input[type="search"]::placeholder,
#clientSearch::placeholder,
#extSearch::placeholder{
  color:#ffffff !important;
  opacity:.86 !important;
  font-size:15px !important;
  font-weight:900 !important;
}
.admin-search-row input[type="search"]:focus,
#clientSearch:focus,
#extSearch:focus{
  box-shadow:none !important;
}

/* Clients search row spacing */
#clientsPanel .admin-search-row{ margin:14px 0 12px !important; }
#clientsPanel #groupFilterSelect{ height:46px !important; min-width:150px !important; }
#clientsPanel #groupManageBtn{ height:46px !important; min-width:142px !important; white-space:nowrap !important; }

/* Common action buttons: readable and separated */
.actions,
.ext-row-actions,
.group-manager-row-actions{
  gap:8px !important;
  align-items:center !important;
}
.action{
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-weight:900 !important;
}
.action .label{
  display:inline-block !important;
  overflow:visible !important;
  text-overflow:clip !important;
  max-width:none !important;
  opacity:1 !important;
  white-space:nowrap !important;
  font-weight:900 !important;
}

/* Extension Users table: give Actions real room and stop clipping */
#extUsersPanel .table-wrap{
  width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  padding-bottom:10px !important;
}
#extUsersPanel table.list{
  min-width:1420px !important;
  width:100% !important;
  table-layout:fixed !important;
}
#extUsersPanel table.list th,
#extUsersPanel table.list td{
  vertical-align:middle !important;
  overflow:visible !important;
}
#extUsersPanel table.list th:nth-child(1), #extUsersPanel table.list td:nth-child(1){width:120px !important;}
#extUsersPanel table.list th:nth-child(2), #extUsersPanel table.list td:nth-child(2){width:100px !important;}
#extUsersPanel table.list th:nth-child(3), #extUsersPanel table.list td:nth-child(3){width:112px !important;}
#extUsersPanel table.list th:nth-child(4), #extUsersPanel table.list td:nth-child(4){width:110px !important;}
#extUsersPanel table.list th:nth-child(5), #extUsersPanel table.list td:nth-child(5){width:160px !important;}
#extUsersPanel table.list th:nth-child(6), #extUsersPanel table.list td:nth-child(6){width:300px !important;}
#extUsersPanel table.list th:nth-child(7), #extUsersPanel table.list td:nth-child(7){width:190px !important;}
#extUsersPanel table.list th:nth-child(8), #extUsersPanel table.list td:nth-child(8){width:80px !important;text-align:center !important;}
#extUsersPanel table.list th:nth-child(9),
#extUsersPanel table.list td:nth-child(9){
  width:330px !important;
  min-width:330px !important;
  max-width:330px !important;
  text-align:right !important;
  padding-right:14px !important;
}
#extUsersPanel .ext-row-actions{
  display:grid !important;
  grid-template-columns:repeat(3, 98px) !important;
  gap:8px !important;
  justify-content:end !important;
  align-items:center !important;
  width:310px !important;
  min-width:310px !important;
  max-width:310px !important;
  margin-left:auto !important;
}
#extUsersPanel .ext-row-actions .action{
  width:98px !important;
  min-width:98px !important;
  max-width:98px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 10px !important;
  border-radius:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  font-size:12px !important;
  line-height:1 !important;
}
#extUsersPanel .ext-row-actions .badge{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:10px !important;
  line-height:16px !important;
}

/* Clients action buttons: keep each button separate */
#clientsPanel table.list{ min-width:1280px !important; table-layout:fixed !important; }
#clientsPanel table.list th:last-child,
#clientsPanel table.list td:last-child{
  width:310px !important;
  min-width:310px !important;
  max-width:310px !important;
  padding-right:12px !important;
  overflow:visible !important;
}
#clientsPanel .group-manager-row-actions,
#clientsPanel td[data-label="Actions"] .actions{
  display:grid !important;
  grid-template-columns:repeat(5, 54px) !important;
  gap:7px !important;
  justify-content:end !important;
  width:292px !important;
  min-width:292px !important;
  max-width:292px !important;
}
#clientsPanel td[data-label="Actions"] .action{
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  height:34px !important;
  padding:0 7px !important;
  font-size:11px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}
#clientsPanel td[data-label="Actions"] .action .label{ font-size:11px !important; }

/* Password cards buttons clean */
.ext-pass-card .actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
}
.ext-pass-card .actions .action{
  min-width:82px !important;
  height:31px !important;
  padding:0 9px !important;
  font-size:12px !important;
}

/* Tablet / medium screens: controlled horizontal table, no clipping */
@media (max-width: 1200px){
  #extUsersPanel table.list{ min-width:1380px !important; }
  #extUsersPanel table.list th:nth-child(9),
  #extUsersPanel table.list td:nth-child(9){ width:318px !important; min-width:318px !important; max-width:318px !important; }
  #extUsersPanel .ext-row-actions{ grid-template-columns:repeat(3, 94px) !important; width:298px !important; min-width:298px !important; max-width:298px !important; }
  #extUsersPanel .ext-row-actions .action{ width:94px !important; min-width:94px !important; max-width:94px !important; font-size:11px !important; padding:0 8px !important; }
}

/* Mobile: convert Clients and Extension Users tables to cards, search full-width */
@media (max-width: 760px){
  .admin-search-row{ gap:8px !important; }
  .admin-search-row .search-box,
  #clientsPanel .search-box,
  #extUsersPanel .search-box,
  #extUsersPanel .search-box-wide{
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
  }
  .admin-search-row input[type="search"], #clientSearch, #extSearch{
    height:46px !important;
    line-height:46px !important;
    font-size:14px !important;
    padding:0 14px !important;
  }
  #clientsPanel #groupFilterSelect,
  #clientsPanel #groupManageBtn{ width:100% !important; min-width:0 !important; }

  #extUsersPanel .table-wrap,
  #clientsPanel .table-wrap{ overflow:visible !important; padding:0 !important; }
  #extUsersPanel table.list,
  #clientsPanel table.list,
  #extUsersPanel table.list thead,
  #clientsPanel table.list thead,
  #extUsersPanel table.list tbody,
  #clientsPanel table.list tbody,
  #extUsersPanel table.list tr,
  #clientsPanel table.list tr,
  #extUsersPanel table.list td,
  #clientsPanel table.list td{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #extUsersPanel table.list thead,
  #clientsPanel table.list thead{ display:none !important; }
  #extUsersPanel table.list tr,
  #clientsPanel table.list tr{
    margin:12px 0 !important;
    padding:12px !important;
    border:1px solid rgba(190,94,255,.28) !important;
    border-radius:16px !important;
    background:linear-gradient(145deg,rgba(14,8,32,.96),rgba(45,14,76,.66)) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.30) !important;
  }
  #extUsersPanel table.list td,
  #clientsPanel table.list td{
    padding:8px 0 !important;
    border:0 !important;
    text-align:left !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  #extUsersPanel table.list td::before,
  #clientsPanel table.list td::before{
    content:attr(data-label) !important;
    display:block !important;
    margin-bottom:6px !important;
    color:rgba(239,220,255,.78) !important;
    font-size:11px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
  }
  #extUsersPanel td[data-label="Actions"],
  #clientsPanel td[data-label="Actions"]{ width:100% !important; max-width:none !important; padding-right:0 !important; }
  #extUsersPanel .ext-row-actions,
  #clientsPanel .group-manager-row-actions,
  #clientsPanel td[data-label="Actions"] .actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    justify-content:stretch !important;
  }
  #extUsersPanel .ext-row-actions .action,
  #clientsPanel td[data-label="Actions"] .action{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:40px !important;
    font-size:12px !important;
    padding:0 10px !important;
  }
  #extUsersPanel .ext-row-actions [data-act="deleteUser"]{ grid-column:1 / -1 !important; }
  #clientsPanel td[data-label="Actions"] [data-act="del"]{ grid-column:1 / -1 !important; }
}

@media (max-width: 390px){
  #extUsersPanel .ext-row-actions,
  #clientsPanel .group-manager-row-actions,
  #clientsPanel td[data-label="Actions"] .actions{
    grid-template-columns:1fr !important;
  }
}

/* ===== FINAL SHARP TEXT + CLEAN LAYOUT FIX 2026-07-04 ===== */
:root{
  --sharp-bg: rgba(8, 5, 23, .94);
  --sharp-card: rgba(18, 11, 38, .96);
  --sharp-field: #241937;
  --sharp-line: rgba(188, 108, 255, .42);
  --sharp-line-soft: rgba(255,255,255,.14);
  --sharp-text: #f8f3ff;
  --sharp-muted: #d7cae8;
}

html, body, button, input, select, textarea, table, th, td, label, .btn, .action{
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
}

/* stop blurry writing */
body, .app, .main-panel, .side-panel, .panel, .appbar, .tabs, .table-wrap,
table.list, table.list th, table.list td, button, input, select, textarea,
.actions .action, .ext-row-actions .action, .btn, .chip, .profile-card,
.ext-pass-card, .ext-browser-card{
  text-shadow: none !important;
  filter: none !important;
}

/* keep glass only on big containers, not on text/input/table cells */
table.list th,
table.list td,
table.list input,
table.list select,
.controls input,
.controls select,
#clientsPanel input,
#clientsPanel select,
#extUsersPanel input,
#extUsersPanel select,
.search-box input[type="search"],
.actions .action,
.ext-row-actions .action{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body{
  color: var(--sharp-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.main-panel{
  padding-top: 18px !important;
}

.panel{
  background: linear-gradient(145deg, rgba(10,6,24,.96), rgba(35,11,62,.88)) !important;
  border: 1px solid var(--sharp-line) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;
}

.panel h2{
  font-size: 23px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-bottom: 18px !important;
}

.stack label,
.controls label,
.row label,
table.list th{
  color: #eee4ff !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

input, select, textarea,
table.list input,
table.list select,
#clientsPanel input,
#clientsPanel select,
#extUsersPanel input,
#extUsersPanel select{
  background: var(--sharp-field) !important;
  color: #fff !important;
  border: 1px solid rgba(205,150,255,.34) !important;
  border-radius: 10px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

input::placeholder,
.search-box input[type="search"]::placeholder{
  color: #d8c9e9 !important;
  opacity: .95 !important;
  font-weight: 800 !important;
}

input:focus, select:focus, textarea:focus,
.search-box input[type="search"]:focus{
  outline: none !important;
  border-color: #c77cff !important;
  box-shadow: 0 0 0 3px rgba(173,74,255,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Search: simple, clear, no overlapped icon */
.search-box .search-ico{
  display: none !important;
}
.admin-search-row{
  margin: 16px 0 14px !important;
  gap: 12px !important;
  align-items: center !important;
}
.search-box,
.search-box-wide{
  flex: 1 1 360px !important;
  max-width: none !important;
  min-width: 240px !important;
}
.search-box input[type="search"],
#clientSearch,
#extSearch{
  height: 46px !important;
  min-height: 46px !important;
  line-height: 46px !important;
  padding: 0 16px !important;
  background: #281b3d !important;
  border: 1px solid rgba(196,119,255,.52) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

/* top buttons clean */
.btn,
.tabs button{
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
}

#extUsersPanel #extAddBtn,
#extUsersPanel #extClearBtn,
#extUsersPanel #extRefreshBtn,
#clientsPanel #addUUIDBtn,
#clientsPanel #groupManageBtn{
  height: 46px !important;
  min-height: 46px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

/* table text sharp and readable */
.table-wrap{
  background: rgba(7,3,18,.86) !important;
  border: 1px solid rgba(188,108,255,.28) !important;
  border-radius: 14px !important;
}

table.list{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table.list th{
  background: #130b25 !important;
  color: #fbf7ff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  padding: 11px 9px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

table.list td{
  color: #f4edff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  padding: 10px 9px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  vertical-align: middle !important;
}

table.list tr:hover td{
  background: rgba(141,60,255,.10) !important;
}

.muted{
  color: var(--sharp-muted) !important;
  opacity: 1 !important;
}

.mono,
.uuid-text{
  font-family: Consolas, "Segoe UI", monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #f7efff !important;
}

.chip{
  font-weight: 900 !important;
  font-size: 11px !important;
  color: #fff !important;
}

/* password/browser cards readable */
#extUsersPanel .ext-pass-card,
#extUsersPanel .ext-browser-card{
  background: #1c1230 !important;
  border: 1px solid rgba(204,141,255,.24) !important;
  border-radius: 10px !important;
  padding: 9px 10px !important;
  color: #fff !important;
}

/* actions: clean blocks, no writing on writing */
td.right,
th.right{
  text-align: center !important;
  overflow: visible !important;
}
.actions,
.ext-row-actions,
#clientsPanel td[data-label="Actions"] .actions{
  display: grid !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

#clientsPanel td[data-label="Actions"] .actions{
  grid-template-columns: 68px 68px 42px 42px 42px !important;
  width: 286px !important;
  min-width: 286px !important;
  max-width: 286px !important;
}

#extUsersPanel .ext-row-actions{
  grid-template-columns: 94px 68px 70px 68px 64px 104px !important;
  width: 506px !important;
  min-width: 506px !important;
  max-width: 506px !important;
}

.actions .action,
.ext-row-actions .action,
#clientsPanel td[data-label="Actions"] .action{
  height: 36px !important;
  min-height: 36px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
.actions .label,
.ext-row-actions .label{
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #fff !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.actions .badge,
.ext-row-actions .badge{
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  font-size: 10px !important;
}

/* make table action columns match buttons */
#clientsPanel table.list th:last-child,
#clientsPanel table.list td:last-child{
  width: 310px !important;
  min-width: 310px !important;
  max-width: 310px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#extUsersPanel table.list,
#extUsersPanel table.ext-users-table{
  min-width: 1760px !important;
}
#extUsersPanel table.list th:last-child,
#extUsersPanel table.list td:last-child,
#extUsersPanel table.ext-users-table th:last-child,
#extUsersPanel table.ext-users-table td:last-child{
  width: 530px !important;
  min-width: 530px !important;
  max-width: 530px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  overflow: visible !important;
}

/* sidebar clearer */
.side-nav button,
.side-logout,
.profile-meta strong,
.side-brand strong{
  font-weight: 900 !important;
  color: #fff !important;
}
.side-nav button{
  font-size: 14px !important;
}
.nav-label{
  color: #cbbbdc !important;
  opacity: 1 !important;
}

/* remove duplicate/squashed form feeling */
#extUsersPanel .grid.grid-4,
#clientsPanel .grid.grid-4{
  gap: 14px !important;
  margin-bottom: 14px !important;
}
#extUsersPanel .row,
#clientsPanel .row{
  gap: 12px !important;
}

/* mobile cards stay clean */
@media (max-width: 760px){
  body{ font-weight: 600 !important; }
  .main-panel{ padding: 10px !important; }
  .panel{ padding: 14px !important; }
  .panel h2{ font-size: 20px !important; margin-bottom: 14px !important; }
  .admin-search-row{ align-items: stretch !important; }
  .search-box,
  .search-box-wide{ min-width: 0 !important; width: 100% !important; flex-basis: 100% !important; }
  #clientSearch,
  #extSearch{ width: 100% !important; }

  #clientsPanel td[data-label="Actions"] .actions,
  #extUsersPanel .ext-row-actions{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: stretch !important;
  }
  #clientsPanel td[data-label="Actions"] .action,
  #extUsersPanel .ext-row-actions .action{
    height: 42px !important;
    width: 100% !important;
    font-size: 13px !important;
  }
  #extUsersPanel .ext-row-actions [data-act="deleteUser"],
  #clientsPanel td[data-label="Actions"] [data-act="del"]{
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 390px){
  #clientsPanel td[data-label="Actions"] .actions,
  #extUsersPanel .ext-row-actions{
    grid-template-columns: 1fr !important;
  }
}

/* ===== EYE COMFORT FINAL FIX - cleaner, sharper, less neon/blur ===== */
:root{
  --eye-bg:#070716;
  --eye-panel:#10091f;
  --eye-panel-2:#160d29;
  --eye-field:#20162e;
  --eye-line:#3b2b52;
  --eye-line-strong:#60407d;
  --eye-text:#eee8f7;
  --eye-muted:#b9adc8;
  --eye-purple:#8b32d8;
  --eye-purple-soft:#6f27b7;
}

*{
  font-family:"Segoe UI", Arial, Tahoma, sans-serif !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:geometricPrecision !important;
}

html, body{
  background-color:var(--eye-bg) !important;
  color:var(--eye-text) !important;
}

body::before{
  background:rgba(7,7,22,.72) !important;
}

body,
.panel,
.appbar,
.tabs,
.tabs button,
.table-wrap,
.side-panel,
.profile-card,
.wrapper,
.modal,
.group-manager-modal,
table.list th{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* soften all heavy glow/shadow */
.panel,
.appbar,
.table-wrap,
.side-panel,
.profile-card,
.tabs button,
.wrapper{
  box-shadow:0 12px 34px rgba(0,0,0,.34) !important;
}

.main-panel{
  padding:20px 28px !important;
}

.side-panel{
  background:#080818 !important;
  border-color:var(--eye-line) !important;
}

.side-brand strong{
  font-size:17px !important;
  letter-spacing:.2px !important;
}
.side-brand span{
  color:#c06cff !important;
  font-size:12px !important;
}
.profile-card{
  background:#111023 !important;
  border-color:var(--eye-line) !important;
}
.profile-meta strong{
  font-size:13px !important;
  max-width:120px !important;
}
.side-nav button{
  color:#e7def0 !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-shadow:none !important;
  border-color:transparent !important;
}
.side-nav button:hover,
.side-nav button.active{
  background:#34114f !important;
  border-color:#7a35b5 !important;
  box-shadow:none !important;
}
.nav-label{
  font-size:11px !important;
  color:#9f94ae !important;
  letter-spacing:.5px !important;
}

.appbar,
.tabs{
  background:#0d0a1d !important;
  border-color:var(--eye-line) !important;
}
.app-title,
.me-label{
  color:var(--eye-text) !important;
  font-weight:700 !important;
  text-shadow:none !important;
}
.tabs button{
  background:#0f0c20 !important;
  border-color:var(--eye-line) !important;
  color:#e8dff2 !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-shadow:none !important;
}
.tabs button.active{
  background:#7327bd !important;
  border-color:#9a52dc !important;
  color:#fff !important;
  box-shadow:none !important;
}

.panel{
  background:#0d071b !important;
  border-color:var(--eye-line) !important;
  border-radius:16px !important;
  padding:18px !important;
}
.panel h2{
  color:#f3ecfb !important;
  font-size:21px !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  margin-bottom:14px !important;
  text-shadow:none !important;
}

.stack label,
.inline,
.row label,
#clientsPanel .stack label,
#extUsersPanel .stack label{
  color:#cfc3dc !important;
  opacity:1 !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
}

input,
select,
textarea,
.controls input,
table.list input,
table.list select,
#clientsPanel input,
#clientsPanel select,
#extUsersPanel input,
#extUsersPanel select{
  background:var(--eye-field) !important;
  border:1px solid var(--eye-line-strong) !important;
  color:#f4eefb !important;
  border-radius:9px !important;
  min-height:36px !important;
  font-size:13px !important;
  font-weight:600 !important;
  text-shadow:none !important;
  box-shadow:none !important;
}
input::placeholder,
.search-box input[type="search"]::placeholder{
  color:#a99bb8 !important;
  opacity:1 !important;
  font-weight:600 !important;
}
input:focus,
select:focus,
textarea:focus,
.search-box input[type="search"]:focus{
  outline:none !important;
  border-color:#9f60cf !important;
  box-shadow:0 0 0 2px rgba(159,96,207,.22) !important;
}
select option,
select optgroup{
  background:#1b1228 !important;
  color:#f3ebfb !important;
}

.btn,
button,
.actions .action,
.ext-row-actions .action,
.tabs button,
.side-nav button{
  text-shadow:none !important;
}
.btn,
#extAddBtn,
#extClearBtn,
#extRefreshBtn,
#addUUIDBtn,
#groupManageBtn{
  background:#7d2dcc !important;
  border:1px solid #9a57d7 !important;
  color:#fff !important;
  font-weight:800 !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
.btn:hover,
.actions .action:hover{
  filter:brightness(1.08) !important;
  transform:none !important;
}

.search-box input[type="search"]{
  height:42px !important;
  background:#20162e !important;
  border-color:#5b3c78 !important;
  border-radius:10px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:700 !important;
  padding-left:40px !important;
  box-shadow:none !important;
}
.search-box .search-ico{
  color:#c5b2dc !important;
  opacity:1 !important;
}
.admin-search-row{
  gap:10px !important;
  margin:14px 0 !important;
}

.table-wrap{
  background:#0b0717 !important;
  border:1px solid var(--eye-line) !important;
  border-radius:13px !important;
  overflow:auto !important;
}
table.list{
  background:#0b0717 !important;
}
table.list th{
  background:#140c25 !important;
  color:#dcd2e8 !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.15px !important;
  padding:10px 8px !important;
  line-height:1.25 !important;
  text-shadow:none !important;
}
table.list td{
  color:#e9e0f2 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  padding:9px 8px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  text-shadow:none !important;
}
table.list tr:nth-child(even) td{
  background:rgba(255,255,255,.018) !important;
}
table.list tr:hover td{
  background:#151025 !important;
}
table.list input,
table.list select{
  min-height:31px !important;
  height:31px !important;
  font-size:12px !important;
  font-weight:600 !important;
  padding:5px 8px !important;
}
table.list input[type="checkbox"]{
  width:15px !important;
  height:15px !important;
  accent-color:#6ca7ff !important;
}

.mono,
.uuid-text{
  font-family:"Cascadia Mono", Consolas, monospace !important;
  font-size:11px !important;
  font-weight:600 !important;
  color:#dcd4e8 !important;
}
.chip{
  font-weight:800 !important;
  font-size:10px !important;
  padding:3px 7px !important;
}
.chip.ok,.chip.online{ background:#0d5b3a !important; border-color:#2abf7b !important; }
.chip.expired,.chip.offline{ background:#6b1823 !important; border-color:#d94a5b !important; }

/* readable, calm buttons */
.actions,
.ext-row-actions{
  gap:7px !important;
}
.actions .action,
.ext-row-actions .action{
  height:33px !important;
  min-height:33px !important;
  border-radius:9px !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  color:#fff !important;
  box-shadow:none !important;
  border-width:1px !important;
}
.actions .label,
.ext-row-actions .label{
  font-size:11px !important;
  font-weight:800 !important;
  color:#fff !important;
}
.actions .badge,
.ext-row-actions .badge{
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  font-size:9px !important;
}
.action--primary{ background:#064d36 !important; border-color:#1db878 !important; }
.action--safe{ background:#0b376e !important; border-color:#2f80e7 !important; }
.action--danger{ background:#601923 !important; border-color:#cf4052 !important; }
.action--muted{ background:#45230b !important; border-color:#c77d29 !important; }

#extUsersPanel .ext-pass-card,
#extUsersPanel .ext-browser-card{
  background:#171124 !important;
  border-color:#3a2d4c !important;
  color:#e9e0f2 !important;
  padding:8px 9px !important;
  box-shadow:none !important;
}

/* stop the page feeling zoomed/tiny */
#clientsPanel .table-wrap,
#extUsersPanel .table-wrap{
  max-height:calc(100dvh - 285px) !important;
}
#clientsPanel table.list{
  min-width:1500px !important;
}
#extUsersPanel table.ext-users-table,
#extUsersPanel table.list{
  min-width:1720px !important;
}

/* action columns: same layout but softer spacing */
#clientsPanel td[data-label="Actions"] .actions{
  grid-template-columns:68px 68px 38px 38px 38px !important;
  width:274px !important;
  min-width:274px !important;
  max-width:274px !important;
}
#clientsPanel table.list th:last-child,
#clientsPanel table.list td:last-child{
  width:300px !important;
  min-width:300px !important;
  max-width:300px !important;
}
#extUsersPanel .ext-row-actions{
  grid-template-columns:88px 66px 68px 66px 62px 98px !important;
  width:480px !important;
  min-width:480px !important;
  max-width:480px !important;
}
#extUsersPanel table.list th:last-child,
#extUsersPanel table.list td:last-child,
#extUsersPanel table.ext-users-table th:last-child,
#extUsersPanel table.ext-users-table td:last-child{
  width:505px !important;
  min-width:505px !important;
  max-width:505px !important;
}

/* Login: also calm */
.wrapper{
  background:#0f0a20 !important;
  border-color:#4b3263 !important;
}
.wrapper h1{
  color:#fff !important;
  text-shadow:none !important;
}
.login-logo img{
  filter:none !important;
  box-shadow:0 0 0 1px #51376d !important;
}

/* comfortable laptop widths */
@media (min-width: 761px){
  .app{ grid-template-columns:280px minmax(0,1fr) !important; }
}

@media (max-width: 760px){
  .main-panel{ padding:10px !important; }
  .panel{ padding:12px !important; background:#0d071b !important; }
  .panel h2{ font-size:19px !important; }
  table.list td{ font-size:13px !important; }
  .actions .action,
  .ext-row-actions .action{ height:40px !important; }
}


/* =========================================================
   FINAL FIX 2026-07-04: readable tables + action buttons
   Prevent Actions buttons from being clipped or overlapping.
   ========================================================= */
*{ box-sizing:border-box !important; }
html,body{ overflow-x:hidden !important; }
.app-main,.main,.content,.page,.panel{ min-width:0 !important; max-width:100% !important; }
.table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:thin !important;
}
.table-wrap table.list{
  border-collapse:separate !important;
  border-spacing:0 !important;
}
.table-wrap table.list th,
.table-wrap table.list td{
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Extension Users table balance */
#extUsersPanel .table-wrap{ padding-bottom:8px !important; }
#extUsersPanel table.list{
  width:100% !important;
  min-width:1280px !important;
  table-layout:fixed !important;
}
#extUsersPanel table.list th:nth-child(1),#extUsersPanel table.list td:nth-child(1){width:95px!important;}
#extUsersPanel table.list th:nth-child(2),#extUsersPanel table.list td:nth-child(2){width:92px!important;}
#extUsersPanel table.list th:nth-child(3),#extUsersPanel table.list td:nth-child(3){width:105px!important;}
#extUsersPanel table.list th:nth-child(4),#extUsersPanel table.list td:nth-child(4){width:95px!important;}
#extUsersPanel table.list th:nth-child(5),#extUsersPanel table.list td:nth-child(5){width:145px!important;}
#extUsersPanel table.list th:nth-child(6),#extUsersPanel table.list td:nth-child(6){width:285px!important;}
#extUsersPanel table.list th:nth-child(7),#extUsersPanel table.list td:nth-child(7){width:190px!important;}
#extUsersPanel table.list th:nth-child(8),#extUsersPanel table.list td:nth-child(8){width:78px!important;text-align:center!important;}
#extUsersPanel table.list th:nth-child(9),#extUsersPanel table.list td:nth-child(9){width:250px!important;min-width:250px!important;text-align:left!important;}

#extUsersPanel .ext-row-actions{
  width:238px !important;
  min-width:238px !important;
  max-width:238px !important;
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:6px !important;
  align-items:center !important;
  justify-content:start !important;
  justify-items:stretch !important;
  overflow:visible !important;
}
#extUsersPanel .ext-row-actions .action{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 6px !important;
  border-radius:9px !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  white-space:nowrap !important;
}
#extUsersPanel .ext-row-actions .badge{font-size:11px!important;line-height:1!important;}
#extUsersPanel .ext-row-actions .label{display:inline!important;font-size:12px!important;line-height:1!important;}

/* Clients table balance */
#clientsPanel table.list{
  width:100% !important;
  min-width:1180px !important;
  table-layout:fixed !important;
}
#clientsPanel table.list th:nth-child(1),#clientsPanel table.list td:nth-child(1){width:210px!important;}
#clientsPanel table.list th:nth-child(2),#clientsPanel table.list td:nth-child(2){width:82px!important;}
#clientsPanel table.list th:nth-child(3),#clientsPanel table.list td:nth-child(3){width:105px!important;}
#clientsPanel table.list th:nth-child(4),#clientsPanel table.list td:nth-child(4){width:120px!important;}
#clientsPanel table.list th:nth-child(5),#clientsPanel table.list td:nth-child(5){width:110px!important;}
#clientsPanel table.list th:nth-child(6),#clientsPanel table.list td:nth-child(6){width:145px!important;}
#clientsPanel table.list th:nth-child(7),#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),#clientsPanel table.list td:nth-child(9),
#clientsPanel table.list th:nth-child(10),#clientsPanel table.list td:nth-child(10){width:55px!important;text-align:center!important;}
#clientsPanel table.list th:nth-child(11),#clientsPanel table.list td:nth-child(11){width:238px!important;min-width:238px!important;text-align:left!important;}
#clientsPanel .group-manager-row-actions,
#clientsPanel .actions{
  width:226px !important;
  min-width:226px !important;
  max-width:226px !important;
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  gap:6px !important;
  justify-content:start !important;
  align-items:center !important;
  overflow:visible !important;
}
#clientsPanel .actions .action,
#clientsPanel .group-manager-row-actions .action{
  width:100% !important;
  min-width:0 !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 5px !important;
  border-radius:9px !important;
  font-size:12px !important;
  font-weight:800 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  white-space:nowrap !important;
}
#clientsPanel .actions .label{display:inline!important;font-size:12px!important;}

/* Cleaner inputs inside dense tables */
table.list input,table.list select{
  min-width:0 !important;
  width:100% !important;
  height:32px !important;
  min-height:32px !important;
  padding:6px 8px !important;
  font-size:12px !important;
}
table.list td{padding:8px 7px!important;}
table.list th{padding:8px 7px!important;}

/* Search readable */
.search-input, input[type="search"], #extUsersPanel input[placeholder="Search"], #clientsPanel input[placeholder="Search"]{
  height:42px !important;
  min-height:42px !important;
  padding:0 16px !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.1px !important;
  color:#fff !important;
}
.search-input::placeholder,input[type="search"]::placeholder,#extUsersPanel input[placeholder="Search"]::placeholder,#clientsPanel input[placeholder="Search"]::placeholder{
  color:rgba(255,255,255,.82) !important;
  opacity:1 !important;
}

@media (max-width: 900px){
  #extUsersPanel table.list,#clientsPanel table.list{min-width:0!important;width:100%!important;display:block!important;}
  #extUsersPanel table.list thead,#clientsPanel table.list thead{display:none!important;}
  #extUsersPanel table.list tbody,#clientsPanel table.list tbody{display:block!important;}
  #extUsersPanel table.list tr,#clientsPanel table.list tr{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:14px!important;
    margin:0 0 12px!important;
    border:1px solid rgba(180,85,255,.28)!important;
    border-radius:14px!important;
    background:rgba(12,8,28,.88)!important;
  }
  #extUsersPanel table.list td,#clientsPanel table.list td{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:10px!important;
    padding:0!important;
    border:0!important;
    white-space:normal!important;
  }
  #extUsersPanel table.list td::before,#clientsPanel table.list td::before{
    content:attr(data-label);
    flex:0 0 96px;
    color:rgba(255,255,255,.72);
    font-weight:800;
    font-size:12px;
  }
  #extUsersPanel table.list td:nth-child(9),#clientsPanel table.list td:nth-child(11){display:block!important;}
  #extUsersPanel table.list td:nth-child(9)::before,#clientsPanel table.list td:nth-child(11)::before{display:block!important;margin-bottom:8px!important;}
  #extUsersPanel .ext-row-actions,
  #clientsPanel .actions,
  #clientsPanel .group-manager-row-actions{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  }
}

/* =========================================================
   AI COMFORT UI FINAL PASS
   Goal: easy-on-eye dashboard, sharp text, zero overlap.
   ========================================================= */
:root{
  --wc-bg:#090716;
  --wc-panel:#111022;
  --wc-panel-2:#17122b;
  --wc-input:#221a35;
  --wc-line:#3b3153;
  --wc-line-soft:#2a2440;
  --wc-text:#f3efff;
  --wc-muted:#b9b0cf;
  --wc-purple:#8f35e8;
  --wc-purple-2:#6f27c9;
  --wc-green:#079c6a;
  --wc-blue:#1e63b6;
  --wc-orange:#9c5a1a;
  --wc-red:#9d243d;
}
html,body{
  background-color:var(--wc-bg)!important;
  color:var(--wc-text)!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-size:15px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-rendering:geometricPrecision!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
}
body::before{
  background:rgba(7,5,18,.78)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
*,*::before,*::after{
  text-shadow:none!important;
  filter:none!important;
}
.app{
  width:min(1760px,100vw)!important;
  margin:0 auto!important;
  padding:0 18px!important;
  gap:28px!important;
}
.side-panel,.appbar,.tabs,.panel,.table-wrap,.profile-card,.wrapper{
  background:var(--wc-panel)!important;
  border:1px solid var(--wc-line)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.side-panel{
  width:270px!important;
  min-width:270px!important;
  padding:18px 16px!important;
}
.main-panel{
  min-width:0!important;
  padding:18px 0 26px!important;
}
.side-brand strong,.panel h2,.app-title,.tabs button,.side-nav button,.btn,.actions .action,label,th{
  font-weight:700!important;
}
.side-brand img{width:56px!important;height:56px!important;border-radius:14px!important;}
.profile-card{padding:12px!important;border-radius:14px!important;}
.profile-card img{width:54px!important;height:54px!important;}
.side-nav{gap:7px!important;}
.side-nav button{
  height:42px!important;
  border-radius:10px!important;
  color:var(--wc-text)!important;
  opacity:1!important;
}
.side-nav button.active,
.tabs button.active{
  background:linear-gradient(180deg,var(--wc-purple),var(--wc-purple-2))!important;
  border-color:#b264ff!important;
  color:#fff!important;
}
.nav-label{color:var(--wc-muted)!important;font-size:12px!important;margin-top:12px!important;}
.appbar{height:auto!important;min-height:58px!important;border-radius:14px!important;padding:12px 16px!important;}
.tabs{border-radius:14px!important;padding:12px!important;gap:10px!important;overflow-x:auto!important;}
.tabs button{
  min-height:40px!important;
  padding:0 16px!important;
  font-size:14px!important;
  border-radius:10px!important;
  background:#0c0b18!important;
  border-color:var(--wc-line)!important;
}
.panel{
  border-radius:15px!important;
  padding:18px!important;
  margin-top:12px!important;
}
.panel h2{font-size:24px!important;margin:0 0 18px!important;line-height:1.2!important;}
.stack label,.controls label,label{
  color:#ddd5ef!important;
  font-size:13px!important;
  margin-bottom:5px!important;
}
input,select,textarea,button{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
}
input,select,textarea,
table.list input,table.list select,
#clientsPanel input,#clientsPanel select,
#extUsersPanel input,#extUsersPanel select{
  height:40px!important;
  min-height:40px!important;
  padding:0 12px!important;
  border-radius:9px!important;
  border:1px solid #54466e!important;
  background:var(--wc-input)!important;
  color:var(--wc-text)!important;
  font-size:14px!important;
  font-weight:600!important;
  outline:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#a45aff!important;
  box-shadow:0 0 0 2px rgba(164,90,255,.18)!important;
}
input::placeholder,textarea::placeholder{
  color:#b8aecb!important;
  opacity:1!important;
  font-weight:600!important;
}
select option{background:#171222!important;color:#fff!important;}
input[type="checkbox"]{
  width:16px!important;height:16px!important;min-height:16px!important;
  accent-color:#4897ff!important;
  padding:0!important;
}
.btn,.side-logout{
  min-height:42px!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,var(--wc-purple),var(--wc-purple-2))!important;
  color:#fff!important;
  border:1px solid #aa5cff!important;
  font-size:14px!important;
  box-shadow:none!important;
}
.btn.ghost{
  background:#141022!important;
  border-color:#71459a!important;
}
.grid.grid-4{gap:14px!important;}
.form-actions,.panel-actions,.button-row{gap:12px!important;}
.search-input,input[type="search"],#clientsPanel input[placeholder="Search"],#extUsersPanel input[placeholder="Search"]{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  margin:10px 0 14px!important;
  font-size:15px!important;
  font-weight:700!important;
  background:#211933!important;
  border:1px solid #725298!important;
  border-radius:12px!important;
}
/* Tables: do not squeeze columns. Scroll horizontally on desktop instead of crushing text/buttons. */
.table-wrap{
  width:100%!important;
  overflow:auto!important;
  max-height:calc(100dvh - 275px)!important;
  border-radius:13px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#6b4e91 #151123!important;
}
.table-wrap::-webkit-scrollbar{width:10px!important;height:10px!important;}
.table-wrap::-webkit-scrollbar-track{background:#151123!important;border-radius:999px!important;}
.table-wrap::-webkit-scrollbar-thumb{background:#6b4e91!important;border-radius:999px!important;}
table.list{
  width:100%!important;
  min-width:1500px!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  background:#0e0b1a!important;
}
table.list th,table.list td{
  padding:12px 10px!important;
  font-size:14px!important;
  line-height:1.35!important;
  color:var(--wc-text)!important;
  border-bottom:1px solid var(--wc-line-soft)!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
table.list th{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:#151022!important;
  color:#e8ddff!important;
  font-size:13px!important;
  letter-spacing:.01em!important;
}
table.list tbody tr{background:#0f0c1d!important;}
table.list tbody tr:nth-child(even){background:#120e22!important;}
table.list tbody tr:hover{background:#18132b!important;}
.mono{font-family:"Segoe UI",Arial,sans-serif!important;font-size:13px!important;}
.muted{color:var(--wc-muted)!important;}
.chip{font-size:12px!important;font-weight:800!important;padding:3px 8px!important;}
.ext-pass-card,.ext-browser-card,
#extUsersPanel .ext-pass-card,#extUsersPanel .ext-browser-card{
  background:#171225!important;
  border:1px solid #443653!important;
  border-radius:10px!important;
  padding:9px 10px!important;
  margin:4px 0!important;
  color:#f6f1ff!important;
  font-size:13px!important;
}
.ext-pass-card .mono,.ext-browser-card .mono{font-size:13px!important;}
/* Action buttons: readable, fixed, never overlap. */
.actions,
#clientsPanel .actions,
#clientsPanel .group-manager-row-actions,
#extUsersPanel .ext-row-actions{
  display:grid!important;
  gap:8px!important;
  align-items:center!important;
  justify-content:start!important;
  overflow:visible!important;
  max-width:none!important;
}
.actions .action,
#clientsPanel .actions .action,
#clientsPanel .group-manager-row-actions .action,
#extUsersPanel .ext-row-actions .action{
  width:100%!important;
  height:36px!important;
  min-height:36px!important;
  min-width:0!important;
  padding:0 10px!important;
  border-radius:9px!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.actions .badge{display:none!important;}
.actions .label{display:inline!important;font-size:13px!important;font-weight:800!important;}
.action--primary{background:#063f32!important;border-color:#10b981!important;color:#ecfff8!important;}
.action--muted{background:#3a250f!important;border-color:#c57924!important;color:#fff1df!important;}
.action--safe{background:#082d5a!important;border-color:#2f7bdb!important;color:#e7f2ff!important;}
.action--danger{background:#4c1220!important;border-color:#d83f5b!important;color:#ffeaf0!important;}
#clientsPanel table.list{min-width:1560px!important;}
#clientsPanel table.list th:nth-child(1),#clientsPanel table.list td:nth-child(1){width:260px!important;}
#clientsPanel table.list th:nth-child(2),#clientsPanel table.list td:nth-child(2){width:105px!important;}
#clientsPanel table.list th:nth-child(3),#clientsPanel table.list td:nth-child(3){width:130px!important;}
#clientsPanel table.list th:nth-child(4),#clientsPanel table.list td:nth-child(4){width:140px!important;}
#clientsPanel table.list th:nth-child(5),#clientsPanel table.list td:nth-child(5){width:130px!important;}
#clientsPanel table.list th:nth-child(6),#clientsPanel table.list td:nth-child(6){width:165px!important;}
#clientsPanel table.list th:nth-child(7),#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),#clientsPanel table.list td:nth-child(9),
#clientsPanel table.list th:nth-child(10),#clientsPanel table.list td:nth-child(10){width:68px!important;text-align:center!important;}
#clientsPanel table.list th:nth-child(11),#clientsPanel table.list td:nth-child(11){width:330px!important;min-width:330px!important;}
#clientsPanel .actions,#clientsPanel .group-manager-row-actions{width:300px!important;grid-template-columns:repeat(5, 52px)!important;}
#clientsPanel .actions .action,#clientsPanel .group-manager-row-actions .action{font-size:12px!important;padding:0 6px!important;}
#extUsersPanel table.list{min-width:1780px!important;}
#extUsersPanel table.list th:nth-child(1),#extUsersPanel table.list td:nth-child(1){width:140px!important;}
#extUsersPanel table.list th:nth-child(2),#extUsersPanel table.list td:nth-child(2){width:115px!important;}
#extUsersPanel table.list th:nth-child(3),#extUsersPanel table.list td:nth-child(3){width:130px!important;}
#extUsersPanel table.list th:nth-child(4),#extUsersPanel table.list td:nth-child(4){width:125px!important;}
#extUsersPanel table.list th:nth-child(5),#extUsersPanel table.list td:nth-child(5){width:170px!important;}
#extUsersPanel table.list th:nth-child(6),#extUsersPanel table.list td:nth-child(6){width:320px!important;}
#extUsersPanel table.list th:nth-child(7),#extUsersPanel table.list td:nth-child(7){width:250px!important;}
#extUsersPanel table.list th:nth-child(8),#extUsersPanel table.list td:nth-child(8){width:90px!important;text-align:center!important;}
#extUsersPanel table.list th:nth-child(9),#extUsersPanel table.list td:nth-child(9){width:360px!important;min-width:360px!important;}
#extUsersPanel .ext-row-actions{width:330px!important;grid-template-columns:repeat(3, 104px)!important;}
#extUsersPanel .ext-row-actions .action{height:38px!important;}
/* remove button text truncation */
#extUsersPanel .ext-row-actions .action .label,
#clientsPanel .actions .action .label{max-width:none!important;overflow:visible!important;text-overflow:clip!important;}
/* Mobile/tablet: card layout, large touch targets. */
@media (max-width: 1100px){
  .app{display:block!important;padding:0 10px!important;}
  .side-panel{position:fixed!important;left:-290px!important;top:0!important;bottom:0!important;z-index:80!important;transition:left .18s ease!important;}
  body.sidebar-open .side-panel,.side-panel.open{left:0!important;}
  .main-panel{padding:12px 0!important;}
  .appbar,.tabs,.panel{border-radius:12px!important;}
  .tabs{flex-wrap:nowrap!important;}
  .tabs button{font-size:13px!important;min-width:max-content!important;}
  .grid.grid-4{grid-template-columns:1fr!important;}
  .controls .row{grid-template-columns:1fr!important;}
  .table-wrap{overflow:visible!important;max-height:none!important;border:0!important;background:transparent!important;}
  #clientsPanel table.list,#extUsersPanel table.list{min-width:0!important;width:100%!important;display:block!important;background:transparent!important;}
  #clientsPanel table.list thead,#extUsersPanel table.list thead{display:none!important;}
  #clientsPanel table.list tbody,#extUsersPanel table.list tbody{display:block!important;}
  #clientsPanel table.list tr,#extUsersPanel table.list tr{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:0 0 14px!important;
    padding:14px!important;
    border:1px solid var(--wc-line)!important;
    border-radius:14px!important;
    background:var(--wc-panel)!important;
  }
  #clientsPanel table.list td,#extUsersPanel table.list td{
    width:100%!important;min-width:0!important;max-width:100%!important;
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    padding:0!important;
    border:0!important;
    white-space:normal!important;
  }
  #clientsPanel table.list td::before,#extUsersPanel table.list td::before{
    content:attr(data-label)!important;
    color:var(--wc-muted)!important;
    font-size:13px!important;
    font-weight:800!important;
  }
  #clientsPanel table.list td[data-label="Actions"],#extUsersPanel table.list td[data-label="Actions"]{display:block!important;}
  #clientsPanel table.list td[data-label="Actions"]::before,#extUsersPanel table.list td[data-label="Actions"]::before{display:block!important;margin-bottom:8px!important;}
  #clientsPanel .actions,#clientsPanel .group-manager-row-actions,#extUsersPanel .ext-row-actions{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #clientsPanel .actions .action,#clientsPanel .group-manager-row-actions .action,#extUsersPanel .ext-row-actions .action{
    height:44px!important;
    font-size:14px!important;
  }
}
@media (max-width: 560px){
  html,body{font-size:14px!important;}
  .app{padding:0 8px!important;}
  .appbar{gap:10px!important;}
  .appbar-right{width:100%!important;justify-content:space-between!important;}
  .me-label{font-size:12px!important;}
  .panel{padding:12px!important;}
  .panel h2{font-size:20px!important;}
  #clientsPanel table.list td,#extUsersPanel table.list td{grid-template-columns:1fr!important;gap:6px!important;}
  #clientsPanel table.list td::before,#extUsersPanel table.list td::before{font-size:12px!important;}
  #clientsPanel .actions,#clientsPanel .group-manager-row-actions,#extUsersPanel .ext-row-actions{grid-template-columns:1fr!important;}
}

/* ==========================================================
   REAL FINAL: zoom-safe responsive layout (2026-07-04)
   - Full width at every browser zoom
   - Sidebar collapses by available CSS pixels
   - Tables never break buttons; actions always visible
   - Mobile/tablet becomes clean cards
   ========================================================== */
:root{
  --final-side: clamp(205px, 14vw, 245px);
  --final-gap: clamp(10px, 1vw, 16px);
  --final-bg: rgba(8, 6, 20, .86);
  --final-card: rgba(12, 8, 28, .88);
  --final-line: rgba(184, 104, 255, .28);
  --final-line-soft: rgba(255,255,255,.11);
  --final-text: #f3efff;
  --final-muted: #b9add0;
  --final-purple: #8f2ef2;
}

html,
body{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}

body{
  padding:0 !important;
  align-items:flex-start !important;
  justify-content:center !important;
  background-attachment:fixed !important;
  font-size:clamp(12px, .72vw, 14px) !important;
}

body::before{
  background:rgba(2,0,12,.66) !important;
}

#appCard.app{
  width:100vw !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 clamp(8px, 1.2vw, 18px) !important;
  display:grid !important;
  grid-template-columns:var(--final-side) minmax(0, 1fr) !important;
  column-gap:var(--final-gap) !important;
  overflow:visible !important;
}

.side-panel{
  width:var(--final-side) !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(10px, 1vw, 16px) !important;
  height:100dvh !important;
  position:sticky !important;
  top:0 !important;
  overflow:auto !important;
  background:rgba(6,6,18,.88) !important;
  border-right:1px solid var(--final-line) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.main-panel{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:clamp(10px, 1.15vw, 18px) 0 !important;
  overflow:hidden !important;
}

.appbar,
.tabs,
.panel{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.appbar{
  position:relative !important;
  top:auto !important;
  margin:0 0 10px !important;
  min-height:54px !important;
  padding:10px 14px !important;
  background:var(--final-bg) !important;
}

.tabs{
  position:relative !important;
  top:auto !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  padding:10px !important;
  margin:0 0 10px !important;
  overflow:visible !important;
  background:var(--final-bg) !important;
}

.tabs button{
  height:38px !important;
  min-height:38px !important;
  padding:0 14px !important;
  font-size:clamp(11px, .72vw, 13px) !important;
  border-radius:10px !important;
}

.panel{
  padding:clamp(12px, 1vw, 18px) !important;
  background:var(--final-card) !important;
  border:1px solid var(--final-line) !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

.panel h2,
#clientsPanel::before,
#extUsersPanel::before{
  font-size:clamp(18px, 1.25vw, 23px) !important;
  line-height:1.2 !important;
  margin-bottom:12px !important;
  color:var(--final-text) !important;
}

.grid.grid-4,
.controls .row{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:end !important;
}

.stack label,
#clientsPanel .stack label,
#extUsersPanel .stack label{
  font-size:12px !important;
  line-height:1.2 !important;
  color:var(--final-muted) !important;
  margin-bottom:5px !important;
}

input,
select,
textarea,
table.list input,
table.list select,
#clientsPanel input,
#clientsPanel select,
#extUsersPanel input,
#extUsersPanel select{
  min-width:0 !important;
  width:100% !important;
  min-height:34px !important;
  height:34px !important;
  padding:6px 9px !important;
  font-size:clamp(11px, .66vw, 13px) !important;
  font-weight:600 !important;
  border-radius:8px !important;
  color:var(--final-text) !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid var(--final-line-soft) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.btn,
#extAddBtn,
#extClearBtn,
#extRefreshBtn,
#addUUIDBtn,
#groupManageBtn{
  height:38px !important;
  min-height:38px !important;
  border-radius:9px !important;
  font-size:clamp(11px, .7vw, 13px) !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

/* search clean */
.search-input,
#clientSearch,
#extSearch,
input[type="search"]{
  height:42px !important;
  min-height:42px !important;
  padding:0 14px !important;
  font-size:14px !important;
  font-weight:700 !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(190,120,255,.45) !important;
}
.search-input::placeholder,
#clientSearch::placeholder,
#extSearch::placeholder,
input[type="search"]::placeholder{
  content:"Search";
  color:#d6cee9 !important;
  opacity:1 !important;
  font-weight:800 !important;
}

.table-wrap{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  max-height:calc(100dvh - 245px) !important;
  overflow:auto !important;
  border:1px solid var(--final-line-soft) !important;
  border-radius:12px !important;
  background:rgba(0,0,0,.12) !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(143,46,242,.6) rgba(255,255,255,.07) !important;
}

/* Desktop table: fit by viewport, no giant fixed min-width */
table.list,
#clientsPanel table.list,
#extUsersPanel table.list,
#extUsersPanel table.ext-users-table{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:fixed !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

table.list th,
table.list td{
  padding:7px 7px !important;
  font-size:clamp(10px, .58vw, 12px) !important;
  line-height:1.25 !important;
  color:var(--final-text) !important;
  vertical-align:middle !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}

table.list th{
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
  background:rgba(10,7,26,.98) !important;
  color:#fff !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Clients column budget = 100%, actions visible */
#clientsPanel table.list th:nth-child(1),#clientsPanel table.list td:nth-child(1){width:22% !important;}
#clientsPanel table.list th:nth-child(2),#clientsPanel table.list td:nth-child(2){width:8% !important;}
#clientsPanel table.list th:nth-child(3),#clientsPanel table.list td:nth-child(3){width:9% !important;}
#clientsPanel table.list th:nth-child(4),#clientsPanel table.list td:nth-child(4){width:10% !important;}
#clientsPanel table.list th:nth-child(5),#clientsPanel table.list td:nth-child(5){width:9% !important;}
#clientsPanel table.list th:nth-child(6),#clientsPanel table.list td:nth-child(6){width:12% !important;}
#clientsPanel table.list th:nth-child(7),#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),#clientsPanel table.list td:nth-child(9){width:4% !important;text-align:center !important;}
#clientsPanel table.list th:nth-child(10),#clientsPanel table.list td:nth-child(10){width:6% !important;text-align:center !important;}
#clientsPanel table.list th:nth-child(11),#clientsPanel table.list td:nth-child(11){width:20% !important;min-width:0 !important;overflow:visible !important;}

/* Extension Users column budget = 100%, actions visible */
#extUsersPanel table.list th:nth-child(1),#extUsersPanel table.list td:nth-child(1){width:10% !important;}
#extUsersPanel table.list th:nth-child(2),#extUsersPanel table.list td:nth-child(2){width:7% !important;}
#extUsersPanel table.list th:nth-child(3),#extUsersPanel table.list td:nth-child(3){width:8% !important;}
#extUsersPanel table.list th:nth-child(4),#extUsersPanel table.list td:nth-child(4){width:8% !important;}
#extUsersPanel table.list th:nth-child(5),#extUsersPanel table.list td:nth-child(5){width:10% !important;}
#extUsersPanel table.list th:nth-child(6),#extUsersPanel table.list td:nth-child(6){width:20% !important;}
#extUsersPanel table.list th:nth-child(7),#extUsersPanel table.list td:nth-child(7){width:15% !important;}
#extUsersPanel table.list th:nth-child(8),#extUsersPanel table.list td:nth-child(8){width:5% !important;text-align:center !important;}
#extUsersPanel table.list th:nth-child(9),#extUsersPanel table.list td:nth-child(9){width:17% !important;min-width:0 !important;overflow:visible !important;}

.actions,
#clientsPanel .actions,
#clientsPanel .group-manager-row-actions,
#extUsersPanel .ext-row-actions{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(28px, 1fr)) !important;
  gap:5px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  justify-content:stretch !important;
  align-items:center !important;
  overflow:visible !important;
}

#extUsersPanel .ext-row-actions{ grid-template-columns:repeat(3, minmax(44px, 1fr)) !important; }

.actions .action,
#clientsPanel .actions .action,
#clientsPanel .group-manager-row-actions .action,
#extUsersPanel .ext-row-actions .action{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:30px !important;
  min-height:30px !important;
  padding:0 4px !important;
  border-radius:8px !important;
  font-size:clamp(9px, .55vw, 11px) !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.actions .label{display:inline !important; font-size:inherit !important;}
.actions .badge{display:none !important;}

/* when available width becomes small due to browser zoom: collapse sidebar and use card rows */
@media (max-width: 1280px){
  #appCard.app{
    display:block !important;
    padding:0 10px !important;
  }
  .mobile-menu{display:grid !important;}
  .side-panel{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:min(285px, 86vw) !important;
    height:100dvh !important;
    transform:translateX(-105%) !important;
    transition:transform .18s ease !important;
    z-index:1000 !important;
    border-right:1px solid var(--final-line) !important;
  }
  #appCard.app.sidebar-open .side-panel,
  body.sidebar-open .side-panel,
  .side-panel.open{
    transform:translateX(0) !important;
  }
  #appCard.app.sidebar-open::after,
  body.sidebar-open::after{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.52) !important;
    z-index:990 !important;
  }
  .main-panel{padding:10px 0 !important;}
  .appbar{position:relative !important; top:auto !important;}
  .grid.grid-4,.controls .row{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
  .tabs{overflow-x:auto !important; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch !important;}
  .tabs button{flex:0 0 auto !important;}

  .table-wrap{max-height:none !important; overflow:visible !important; border:0 !important; background:transparent !important;}
  #clientsPanel table.list,
  #extUsersPanel table.list,
  #extUsersPanel table.ext-users-table,
  #clientsPanel table.list thead,
  #extUsersPanel table.list thead,
  #clientsPanel table.list tbody,
  #extUsersPanel table.list tbody,
  #clientsPanel table.list tr,
  #extUsersPanel table.list tr,
  #clientsPanel table.list td,
  #extUsersPanel table.list td{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  #clientsPanel table.list thead,
  #extUsersPanel table.list thead{display:none !important;}
  #clientsPanel table.list tr,
  #extUsersPanel table.list tr{
    margin:0 0 12px !important;
    padding:12px !important;
    border:1px solid var(--final-line-soft) !important;
    border-radius:13px !important;
    background:rgba(10,7,26,.86) !important;
  }
  #clientsPanel table.list td,
  #extUsersPanel table.list td{
    display:grid !important;
    grid-template-columns:130px minmax(0,1fr) !important;
    gap:10px !important;
    align-items:center !important;
    padding:7px 0 !important;
    border:0 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:13px !important;
  }
  #clientsPanel table.list td::before,
  #extUsersPanel table.list td::before{
    content:attr(data-label) !important;
    color:var(--final-muted) !important;
    font-weight:900 !important;
    font-size:12px !important;
    text-transform:none !important;
  }
  #clientsPanel table.list td[data-label="Actions"],
  #extUsersPanel table.list td[data-label="Actions"]{
    display:block !important;
  }
  #clientsPanel table.list td[data-label="Actions"]::before,
  #extUsersPanel table.list td[data-label="Actions"]::before{
    display:block !important;
    margin-bottom:8px !important;
  }
  #clientsPanel .actions,
  #clientsPanel .group-manager-row-actions,
  #extUsersPanel .ext-row-actions{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
  #clientsPanel .actions .action,
  #clientsPanel .group-manager-row-actions .action,
  #extUsersPanel .ext-row-actions .action{
    height:40px !important;
    font-size:13px !important;
    padding:0 8px !important;
  }
}

@media (max-width: 640px){
  #appCard.app{padding:0 8px !important;}
  .main-panel{padding:8px 0 !important;}
  .appbar{gap:8px !important; padding:9px !important;}
  .appbar-right{width:100% !important; justify-content:space-between !important;}
  .me-label{font-size:12px !important;}
  .appbar-right .btn{min-width:auto !important; width:auto !important;}
  .panel{padding:10px !important;}
  .grid.grid-4,.controls .row{grid-template-columns:1fr !important; gap:9px !important;}
  #clientsPanel table.list td,
  #extUsersPanel table.list td{grid-template-columns:1fr !important; gap:5px !important;}
  #clientsPanel .actions,
  #clientsPanel .group-manager-row-actions,
  #extUsersPanel .ext-row-actions{grid-template-columns:1fr !important;}
  .tabs{padding:8px !important;}
  .tabs button{height:36px !important; padding:0 10px !important;}
}


/* FINAL AUTH VISIBILITY FIX: logout must hide the dashboard completely.
   This beats later #appCard.app display rules. */
#appCard.hidden,
#appCard.app.hidden,
body:not(.app-open) #appCard {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#loginCard.hidden,
body.app-open #loginCard {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.logged-out #loginCard {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.logged-out::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(5, 2, 13, .66);
  z-index: 90;
}
body.logged-out #loginCard {
  z-index: 100 !important;
}

/* =========================================================
   AI AGENT FINAL POLISH — readable, responsive, zoom safe
   ========================================================= */
:root{
  --wc-bg:#070512;
  --wc-card:rgba(13,10,28,.92);
  --wc-card-2:rgba(20,14,40,.88);
  --wc-line:rgba(177,113,255,.28);
  --wc-line-2:rgba(177,113,255,.42);
  --wc-text:#f4f0ff;
  --wc-soft:#c9bddf;
  --wc-muted:#a99bbd;
  --wc-purple:#8e2de2;
  --wc-purple-2:#a855f7;
}
*{box-sizing:border-box !important;}
html{font-size:16px !important; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  overflow-x:hidden !important;
  color:var(--wc-text) !important;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body, .app, .panel, .appbar, .tabs, .side-panel, .profile-card, .table-wrap, .modal{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
  text-shadow:none !important;
}
#appCard.app:not(.hidden){
  width:100% !important;
  max-width:1920px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:clamp(220px, 14vw, 285px) minmax(0, 1fr) !important;
  gap:clamp(12px, 1vw, 20px) !important;
  padding:clamp(8px, .85vw, 18px) !important;
}
.side-panel{
  width:auto !important;
  min-width:0 !important;
  background:rgba(7,5,18,.94) !important;
  border-color:var(--wc-line) !important;
}
.side-brand strong{font-size:clamp(16px, .95vw, 22px) !important; line-height:1.05 !important;}
.side-brand span{font-size:12px !important; color:#d26bff !important;}
.profile-card strong,.side-nav button,.side-logout,.tabs button,.btn,.action{font-weight:800 !important;}
.side-nav button{font-size:14px !important; min-height:42px !important;}
.nav-label{font-size:12px !important; color:#b7a9cf !important; opacity:1 !important;}
.main-panel{min-width:0 !important; width:100% !important; padding:0 !important;}
.appbar,.tabs,.panel{
  background:rgba(11,8,24,.93) !important;
  border:1px solid var(--wc-line) !important;
  border-radius:14px !important;
  box-shadow:0 10px 34px rgba(0,0,0,.28) !important;
}
.appbar{min-height:58px !important; padding:10px 14px !important;}
.tabs{padding:10px !important; gap:8px !important; overflow-x:auto !important; scrollbar-width:thin !important;}
.tabs button{height:42px !important; padding:0 16px !important; font-size:14px !important; flex:0 0 auto !important;}
.panel{padding:clamp(14px, 1.15vw, 24px) !important; margin-top:12px !important;}
h1,h2,h3,.app-title{color:var(--wc-text) !important; font-weight:900 !important; letter-spacing:-.02em !important;}
h2{font-size:clamp(20px, 1.25vw, 28px) !important; margin-bottom:16px !important;}
label,.stack label,.muted{color:var(--wc-soft) !important; opacity:1 !important;}
.grid.grid-4,.controls .row{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(180px, 1fr)) !important;
  gap:12px !important;
  align-items:end !important;
}
input,select,textarea,table.list input,table.list select,#clientsPanel input,#clientsPanel select,#extUsersPanel input,#extUsersPanel select{
  height:38px !important;
  min-height:38px !important;
  padding:8px 11px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  color:var(--wc-text) !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(198,143,255,.34) !important;
  border-radius:9px !important;
  outline:none !important;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(192,132,252,.92) !important;
  box-shadow:0 0 0 3px rgba(168,85,247,.18) !important;
}
input::placeholder,textarea::placeholder{color:#bfb2d5 !important; opacity:1 !important; font-weight:700 !important;}
.btn,#extAddBtn,#extClearBtn,#extRefreshBtn,#addUUIDBtn,#groupManageBtn{
  min-height:42px !important;
  height:42px !important;
  padding:0 16px !important;
  border-radius:10px !important;
  font-size:14px !important;
  color:#fff !important;
  background:linear-gradient(180deg,#9c35ef,#7c24d6) !important;
  border:1px solid rgba(210,166,255,.38) !important;
  box-shadow:none !important;
}
.admin-search-row{display:grid !important; grid-template-columns:auto minmax(145px,180px) minmax(260px,1fr) auto !important; gap:10px !important; align-items:center !important;}
.search-box{position:relative !important; display:flex !important; align-items:center !important; min-width:0 !important; width:100% !important;}
.search-box .search-ico{display:none !important;}
.search-input,#clientSearch,#extSearch,input[type="search"]{
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 16px !important;
  font-size:15px !important;
  font-weight:800 !important;
  color:#fff !important;
  background:rgba(255,255,255,.085) !important;
  border:1px solid rgba(196,128,255,.58) !important;
  border-radius:10px !important;
}
#clientSearch::placeholder,#extSearch::placeholder,input[type="search"]::placeholder{content:none !important; color:#ded5f0 !important; opacity:1 !important;}
.table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow:auto !important;
  max-height:calc(100dvh - 310px) !important;
  border:1px solid rgba(198,143,255,.24) !important;
  border-radius:12px !important;
  background:rgba(5,3,13,.45) !important;
}
table.list,#clientsPanel table.list,#extUsersPanel table.list,#extUsersPanel table.ext-users-table{
  width:100% !important;
  min-width:1280px !important;
  table-layout:fixed !important;
  border-spacing:0 !important;
}
#extUsersPanel table.list,#extUsersPanel table.ext-users-table{min-width:1360px !important;}
table.list th,table.list td{
  padding:9px 8px !important;
  font-size:13px !important;
  line-height:1.28 !important;
  color:#f1ecff !important;
  border-bottom:1px solid rgba(255,255,255,.075) !important;
  vertical-align:middle !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
table.list th{
  position:sticky !important;
  top:0 !important;
  z-index:4 !important;
  background:#0c071b !important;
  color:#f7f2ff !important;
  font-weight:900 !important;
}
table.list tbody tr:hover{background:rgba(168,85,247,.065) !important;}
.chip{font-size:12px !important; font-weight:900 !important; padding:3px 7px !important; border-radius:999px !important;}
.ext-pass-card,.ext-browser-card{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(198,143,255,.24) !important;
  border-radius:10px !important;
  padding:9px !important;
  color:#f3efff !important;
}
/* Stable action buttons: no clipping, no overlap */
.actions,#clientsPanel .actions,#clientsPanel .group-manager-row-actions,#extUsersPanel .ext-row-actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:7px !important;
  width:max-content !important;
  min-width:max-content !important;
  max-width:none !important;
  overflow:visible !important;
}
.action,#clientsPanel .actions .action,#clientsPanel .group-manager-row-actions .action,#extUsersPanel .ext-row-actions .action{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:58px !important;
  max-width:none !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 10px !important;
  border-radius:9px !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.action .label{display:inline !important; font-size:inherit !important;}
.action .badge{display:inline-flex !important; margin-right:4px !important;}
#clientsPanel table.list th:nth-child(1),#clientsPanel table.list td:nth-child(1){width:260px !important;}
#clientsPanel table.list th:nth-child(2),#clientsPanel table.list td:nth-child(2){width:110px !important;}
#clientsPanel table.list th:nth-child(3),#clientsPanel table.list td:nth-child(3){width:125px !important;}
#clientsPanel table.list th:nth-child(4),#clientsPanel table.list td:nth-child(4){width:135px !important;}
#clientsPanel table.list th:nth-child(5),#clientsPanel table.list td:nth-child(5){width:130px !important;}
#clientsPanel table.list th:nth-child(6),#clientsPanel table.list td:nth-child(6){width:160px !important;}
#clientsPanel table.list th:nth-child(7),#clientsPanel table.list td:nth-child(7),#clientsPanel table.list th:nth-child(8),#clientsPanel table.list td:nth-child(8),#clientsPanel table.list th:nth-child(9),#clientsPanel table.list td:nth-child(9),#clientsPanel table.list th:nth-child(10),#clientsPanel table.list td:nth-child(10){width:54px !important;text-align:center !important;}
#clientsPanel table.list th:nth-child(11),#clientsPanel table.list td:nth-child(11){width:330px !important;overflow:visible !important;}
#extUsersPanel table.list th:nth-child(1),#extUsersPanel table.list td:nth-child(1){width:120px !important;}
#extUsersPanel table.list th:nth-child(2),#extUsersPanel table.list td:nth-child(2){width:105px !important;}
#extUsersPanel table.list th:nth-child(3),#extUsersPanel table.list td:nth-child(3){width:120px !important;}
#extUsersPanel table.list th:nth-child(4),#extUsersPanel table.list td:nth-child(4){width:120px !important;}
#extUsersPanel table.list th:nth-child(5),#extUsersPanel table.list td:nth-child(5){width:165px !important;}
#extUsersPanel table.list th:nth-child(6),#extUsersPanel table.list td:nth-child(6){width:280px !important;}
#extUsersPanel table.list th:nth-child(7),#extUsersPanel table.list td:nth-child(7){width:210px !important;}
#extUsersPanel table.list th:nth-child(8),#extUsersPanel table.list td:nth-child(8){width:80px !important;text-align:center !important;}
#extUsersPanel table.list th:nth-child(9),#extUsersPanel table.list td:nth-child(9){width:405px !important;overflow:visible !important;}
@media (max-width:1500px){
  #appCard.app:not(.hidden){grid-template-columns:220px minmax(0,1fr) !important; gap:12px !important; padding:8px !important;}
  .side-nav button{font-size:13px !important;}
  table.list th,table.list td{font-size:12px !important;}
  .action{font-size:11px !important; min-width:54px !important; padding:0 8px !important;}
}
@media (max-width:1180px){
  #appCard.app:not(.hidden){display:block !important; padding:8px !important;}
  .mobile-menu{display:grid !important;}
  .side-panel{position:fixed !important; left:0 !important; top:0 !important; bottom:0 !important; width:min(285px,86vw) !important; transform:translateX(-105%) !important; transition:transform .18s ease !important; z-index:1000 !important;}
  body.sidebar-open .side-panel,#appCard.app.sidebar-open .side-panel,.side-panel.open{transform:translateX(0) !important;}
  .grid.grid-4,.controls .row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .admin-search-row{grid-template-columns:1fr !important;}
  #groupManageBtn,#addUUIDBtn{width:100% !important;}
}
@media (max-width:760px){
  .appbar{flex-wrap:wrap !important;}
  .appbar-right{width:100% !important; justify-content:space-between !important;}
  .grid.grid-4,.controls .row{grid-template-columns:1fr !important;}
  .panel{padding:10px !important;}
  .table-wrap{max-height:none !important; overflow:visible !important; border:0 !important; background:transparent !important;}
  #clientsPanel table.list,#extUsersPanel table.list,#extUsersPanel table.ext-users-table{min-width:0 !important;}
  #clientsPanel table.list thead,#extUsersPanel table.list thead{display:none !important;}
  #clientsPanel table.list,#clientsPanel table.list tbody,#clientsPanel table.list tr,#clientsPanel table.list td,#extUsersPanel table.list,#extUsersPanel table.list tbody,#extUsersPanel table.list tr,#extUsersPanel table.list td{display:block !important; width:100% !important;}
  #clientsPanel table.list tr,#extUsersPanel table.list tr{padding:12px !important; margin:0 0 12px !important; border:1px solid var(--wc-line) !important; border-radius:13px !important; background:var(--wc-card) !important;}
  #clientsPanel table.list td,#extUsersPanel table.list td{display:grid !important; grid-template-columns:110px minmax(0,1fr) !important; gap:8px !important; padding:8px 0 !important; border:0 !important; white-space:normal !important; overflow:visible !important;}
  #clientsPanel table.list td::before,#extUsersPanel table.list td::before{content:attr(data-label) !important; color:var(--wc-muted) !important; font-weight:900 !important;}
  #clientsPanel table.list td[data-label="Actions"],#extUsersPanel table.list td[data-label="Actions"]{display:block !important;}
  #clientsPanel table.list td[data-label="Actions"]::before,#extUsersPanel table.list td[data-label="Actions"]::before{display:block !important; margin-bottom:8px !important;}
  .actions,#clientsPanel .actions,#clientsPanel .group-manager-row-actions,#extUsersPanel .ext-row-actions{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; width:100% !important; min-width:0 !important; gap:8px !important;}
  .action,#clientsPanel .actions .action,#clientsPanel .group-manager-row-actions .action,#extUsersPanel .ext-row-actions .action{width:100% !important; height:40px !important; font-size:13px !important;}
}

/* ==========================================================
   FINAL DOMAIN + ANY-ZOOM + ANY-RESOLUTION RESPONSIVE PATCH
   Appended last on purpose. Do not move above old rules.
   ========================================================== */
:root{
  --final-sidebar: clamp(220px, 15.5vw, 270px);
  --final-gap: clamp(10px, 1vw, 18px);
  --final-pad: clamp(8px, 1.1vw, 18px);
  --final-bg: rgba(9, 7, 24, .88);
  --final-card: rgba(14, 10, 32, .82);
  --final-line: rgba(184, 111, 255, .26);
  --final-text: #f4efff;
  --final-muted: rgba(244,239,255,.72);
}

html{
  width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
body{
  width:100% !important;
  min-width:0 !important;
  min-height:100svh !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background-attachment:scroll !important;
  color:var(--final-text) !important;
  font-size:clamp(12px, .78vw, 14px) !important;
}
body.app-open{align-items:initial !important; justify-content:initial !important;}
body *{box-sizing:border-box !important;}
img,svg,video,canvas{max-width:100% !important; height:auto;}

/* Login never remains over the app when hidden */
#loginCard.hidden,
#loginCard[aria-hidden="true"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}
#loginCard.wrapper:not(.hidden){
  width:min(420px, calc(100vw - 28px)) !important;
  max-height:calc(100svh - 28px) !important;
  overflow:auto !important;
}

/* Real fluid shell */
#appCard.app:not(.hidden){
  display:grid !important;
}
.app{
  width:100vw !important;
  max-width:100vw !important;
  min-height:100svh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  grid-template-columns: var(--final-sidebar) minmax(0, 1fr) !important;
  gap:0 !important;
  background:rgba(0,0,0,.05) !important;
}
.side-panel{
  width:var(--final-sidebar) !important;
  min-width:0 !important;
  max-width:100% !important;
  height:100svh !important;
  position:sticky !important;
  top:0 !important;
  padding:var(--final-pad) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:rgba(6, 6, 19, .92) !important;
  border-right:1px solid var(--final-line) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.main-panel{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:var(--final-pad) !important;
  overflow:hidden !important;
}
.appbar,
.tabs,
.panel{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  background:var(--final-card) !important;
  border:1px solid var(--final-line) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.appbar{
  position:sticky !important;
  top:8px !important;
  z-index:30 !important;
  min-height:54px !important;
  margin:0 0 10px !important;
  padding:10px 12px !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.appbar-left,.appbar-right{min-width:0 !important;}
.appbar-right{margin-left:auto !important; display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important;}
.me-label{max-width:min(55vw, 520px) !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;}
.tabs{
  position:relative !important;
  top:auto !important;
  z-index:20 !important;
  display:flex !important;
  gap:8px !important;
  padding:10px !important;
  margin:0 0 10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  flex-wrap:nowrap !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:thin !important;
}
.tabs button{flex:0 0 auto !important; min-height:36px !important; white-space:nowrap !important;}
.panel{padding:clamp(10px, 1vw, 16px) !important; border-radius:14px !important; overflow:hidden !important;}
.panel h2{font-size:clamp(18px, 1.35vw, 24px) !important; line-height:1.2 !important; margin:0 0 12px !important;}

/* Forms auto-fit to real available width, not fixed pixels */
.controls .row,
.grid.grid-4,
#clientsPanel .grid.grid-4,
#extUsersPanel .grid.grid-4{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
  gap:10px !important;
  align-items:end !important;
}
.row{display:flex !important; flex-wrap:wrap !important; gap:10px !important; min-width:0 !important;}
.row > *{min-width:0 !important;}
input,select,textarea,button{max-width:100% !important;}
input,select,textarea{
  min-height:36px !important;
  font-size:clamp(12px, .78vw, 14px) !important;
  color:var(--final-text) !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(205,155,255,.28) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
input::placeholder{color:rgba(244,239,255,.58) !important; opacity:1 !important;}
select option{background:#11101f !important; color:#fff !important;}

/* Tables: never break the page. Scroll inside the card only. */
.table-wrap,
#clientsPanel .table-wrap,
#extUsersPanel .table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow:auto !important;
  overflow-y:auto !important;
  max-height:calc(100svh - 250px) !important;
  border-radius:12px !important;
  background:rgba(4,3,14,.38) !important;
  scrollbar-width:thin !important;
  -webkit-overflow-scrolling:touch !important;
}
.table-wrap::-webkit-scrollbar{width:9px !important; height:9px !important;}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(180,82,255,.42) !important; border-radius:999px !important;}
.table-wrap::-webkit-scrollbar-track{background:rgba(255,255,255,.04) !important;}
table.list,
#clientsPanel table.list,
#extUsersPanel table.list,
#extUsersPanel table.ext-users-table{
  width:100% !important;
  min-width:clamp(980px, 74vw, 1320px) !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
}
table.list th,
table.list td{
  padding:7px 8px !important;
  font-size:clamp(11px, .72vw, 13px) !important;
  line-height:1.25 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  vertical-align:middle !important;
  border-bottom:1px solid rgba(255,255,255,.075) !important;
}
table.list th{
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;
  background:#100b22 !important;
  color:#fff !important;
  font-weight:800 !important;
}
table.list td input, table.list td select{height:30px !important; min-height:30px !important; padding:4px 7px !important;}

/* Action buttons stable at every zoom */
td.right, th.right{min-width:0 !important; text-align:left !important;}
.actions,.ext-row-actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  width:max-content !important;
  max-width:none !important;
  overflow:visible !important;
}
.actions .action,.ext-row-actions .action{
  flex:0 0 auto !important;
  height:30px !important;
  min-height:30px !important;
  min-width:34px !important;
  padding:0 9px !important;
  border-radius:8px !important;
  font-size:12px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.actions .label,.ext-row-actions .label{display:inline !important; font-size:11px !important; white-space:nowrap !important;}
.actions .badge{width:16px !important;height:16px !important;min-width:16px !important;}
#clientsPanel table.list th:last-child,#clientsPanel table.list td:last-child,
#extUsersPanel table.list th:last-child,#extUsersPanel table.list td:last-child,
#extUsersPanel table.ext-users-table th:last-child,#extUsersPanel table.ext-users-table td:last-child{
  width:clamp(230px, 17vw, 320px) !important;
  overflow:visible !important;
}
#clientsPanel .actions,#extUsersPanel .ext-row-actions{min-width:220px !important; width:max-content !important;}

/* Desktop widths: keep app usable on 1366 and browser zoom */
@media (max-width: 1500px){
  :root{--final-sidebar:230px; --final-pad:10px;}
  table.list,#clientsPanel table.list,#extUsersPanel table.list,#extUsersPanel table.ext-users-table{min-width:1180px !important;}
  .side-brand strong{font-size:15px !important;}
  .side-brand img{width:54px !important; height:54px !important;}
  .side-nav button,.side-logout{height:40px !important; min-height:40px !important; font-size:13px !important;}
  .profile-card{padding:10px 8px !important;}
}

/* Collapse sidebar earlier so zoomed desktop still works */
@media (max-width: 1280px){
  .app{display:block !important; width:100vw !important; max-width:100vw !important;}
  .main-panel{padding:10px !important;}
  .mobile-menu{display:grid !important; flex:0 0 42px !important;}
  .side-panel{
    position:fixed !important;
    left:0 !important; top:0 !important; bottom:0 !important;
    width:min(292px, 86vw) !important;
    height:100svh !important;
    transform:translateX(-105%) !important;
    transition:transform .18s ease !important;
    z-index:1000 !important;
  }
  #appCard.app.sidebar-open .side-panel{transform:translateX(0) !important;}
  #appCard.app.sidebar-open::after{
    content:"" !important;
    position:fixed !important; inset:0 !important;
    background:rgba(0,0,0,.55) !important;
    z-index:900 !important;
  }
  #appCard.app.sidebar-open .side-panel{z-index:1001 !important;}
  .appbar{top:6px !important;}
  .me-label{max-width:calc(100vw - 210px) !important;}
}

@media (max-width: 760px){
  body{font-size:13px !important;}
  .main-panel{padding:8px !important;}
  .appbar{padding:8px !important; border-radius:12px !important;}
  .appbar-right{width:100% !important; margin-left:0 !important; justify-content:space-between !important;}
  .appbar-right .btn{min-width:92px !important; width:auto !important;}
  .me-label{max-width:calc(100vw - 122px) !important; font-size:12px !important;}
  .tabs{padding:8px !important; gap:6px !important;}
  .tabs button{height:38px !important; min-height:38px !important; font-size:12px !important; padding:0 10px !important;}
  .panel{padding:10px !important; border-radius:12px !important;}
  .controls .row,.grid.grid-4,#clientsPanel .grid.grid-4,#extUsersPanel .grid.grid-4{grid-template-columns:1fr !important;}
  .btn,#extUsersPanel #extAddBtn,#extUsersPanel #extClearBtn,#extUsersPanel #extRefreshBtn,#clientsPanel #addUUIDBtn{width:100% !important; min-height:42px !important;}
  .table-wrap,#clientsPanel .table-wrap,#extUsersPanel .table-wrap{max-height:none !important; overflow:auto !important;}
  table.list,#clientsPanel table.list,#extUsersPanel table.list,#extUsersPanel table.ext-users-table{min-width:980px !important;}
}

@media (max-width: 480px){
  .main-panel{padding:6px !important;}
  .appbar-right{gap:6px !important;}
  .me-label{font-size:11px !important; max-width:calc(100vw - 112px) !important;}
  .panel h2{font-size:18px !important;}
  .side-panel{width:min(286px, 88vw) !important;}
  table.list,#clientsPanel table.list,#extUsersPanel table.list,#extUsersPanel table.ext-users-table{min-width:900px !important;}
  .actions .label,.ext-row-actions .label{display:none !important;}
  .actions .action,.ext-row-actions .action{padding:0 7px !important; min-width:32px !important;}
}

/* Print/browser zoom safety: do not allow old fixed width to win */
@media (min-width: 1281px){
  .mobile-menu{display:none !important;}
}

/* =========================================================
   FINAL PATCH: compact Actions buttons for simple admin pages
   Applies ONLY to: Allowed Domains, New File Domains,
   Warcommander Domains and Users. Clients / Extension Users
   keep their bigger action buttons.
   ========================================================= */
#domainsPanel table.list th.right,
#domainsPanel table.list td.right,
#usersPanel table.list th.right,
#usersPanel table.list td.right{
  width:150px !important;
  min-width:150px !important;
  max-width:150px !important;
  text-align:center !important;
  padding-left:6px !important;
  padding-right:6px !important;
  overflow:visible !important;
}

#domainsPanel table.list .actions,
#usersPanel table.list .actions,
#domainsPanel table.list .group-manager-row-actions,
#usersPanel table.list .group-manager-row-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:visible !important;
}

#domainsPanel table.list .actions .action,
#usersPanel table.list .actions .action,
#domainsPanel table.list .group-manager-row-actions .action,
#usersPanel table.list .group-manager-row-actions .action{
  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  padding:0 !important;
  border-radius:8px !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}

#domainsPanel table.list .actions .label,
#usersPanel table.list .actions .label,
#domainsPanel table.list .group-manager-row-actions .label,
#usersPanel table.list .group-manager-row-actions .label{
  display:none !important;
}

#domainsPanel table.list .actions .badge,
#usersPanel table.list .actions .badge,
#domainsPanel table.list .group-manager-row-actions .badge,
#usersPanel table.list .group-manager-row-actions .badge{
  margin:0 !important;
  width:auto !important;
  min-width:0 !important;
  display:inline !important;
}

/* Give the simple tables a little more useful space after shrinking actions */
#domainsPanel table.list{
  min-width:960px !important;
  table-layout:auto !important;
}
#usersPanel table.list{
  min-width:1120px !important;
  table-layout:auto !important;
}

/* On phones these pages become scrollable without broken oversized buttons */
@media (max-width: 768px){
  #domainsPanel table.list th.right,
  #domainsPanel table.list td.right,
  #usersPanel table.list th.right,
  #usersPanel table.list td.right{
    width:142px !important;
    min-width:142px !important;
    max-width:142px !important;
  }
  #domainsPanel table.list .actions .action,
  #usersPanel table.list .actions .action,
  #domainsPanel table.list .group-manager-row-actions .action,
  #usersPanel table.list .group-manager-row-actions .action{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    font-size:12px !important;
    border-radius:7px !important;
  }
}

/* ===== EXTENSION USERS ACTIONS REAL FIX - NO OUTSIDE CLIP ===== */
#extUsersPanel .table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:auto !important;
  padding-bottom:6px !important;
}

#extUsersPanel table.list{
  table-layout:fixed !important;
  width:max-content !important;
  min-width:1560px !important;
  max-width:none !important;
}

#extUsersPanel table.list th,
#extUsersPanel table.list td{
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#extUsersPanel table.list th:nth-child(1),
#extUsersPanel table.list td:nth-child(1){ width:130px !important; }
#extUsersPanel table.list th:nth-child(2),
#extUsersPanel table.list td:nth-child(2){ width:120px !important; }
#extUsersPanel table.list th:nth-child(3),
#extUsersPanel table.list td:nth-child(3){ width:125px !important; }
#extUsersPanel table.list th:nth-child(4),
#extUsersPanel table.list td:nth-child(4){ width:130px !important; }
#extUsersPanel table.list th:nth-child(5),
#extUsersPanel table.list td:nth-child(5){ width:170px !important; }
#extUsersPanel table.list th:nth-child(6),
#extUsersPanel table.list td:nth-child(6){ width:300px !important; }
#extUsersPanel table.list th:nth-child(7),
#extUsersPanel table.list td:nth-child(7){ width:250px !important; }
#extUsersPanel table.list th:nth-child(8),
#extUsersPanel table.list td:nth-child(8){ width:80px !important; text-align:center !important; }
#extUsersPanel table.list th:nth-child(9),
#extUsersPanel table.list td:nth-child(9){
  width:255px !important;
  min-width:255px !important;
  max-width:255px !important;
  overflow:visible !important;
  text-align:left !important;
}

#extUsersPanel .ext-row-actions{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:6px !important;
  width:235px !important;
  min-width:235px !important;
  max-width:235px !important;
  overflow:visible !important;
  justify-content:start !important;
  align-items:center !important;
}

#extUsersPanel .ext-row-actions .action{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 7px !important;
  border-radius:9px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}

#extUsersPanel .ext-row-actions .badge{
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  font-size:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#extUsersPanel .ext-row-actions .label{
  display:inline !important;
  font-size:12px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

#extUsersPanel .ext-pass-card,
#extUsersPanel .ext-browser-card{
  max-width:100% !important;
  overflow:hidden !important;
}
#extUsersPanel .ext-pass-card .actions{
  width:auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
#extUsersPanel .ext-pass-card .action{
  width:auto !important;
  min-width:78px !important;
  height:30px !important;
  min-height:30px !important;
  padding:0 8px !important;
  font-size:12px !important;
}

@media (max-width:900px){
  #extUsersPanel table.list{ min-width:0 !important; width:100% !important; display:block !important; }
  #extUsersPanel table.list thead{ display:none !important; }
  #extUsersPanel table.list tbody{ display:block !important; }
  #extUsersPanel table.list tr{
    display:block !important;
    margin:0 0 12px !important;
    padding:12px !important;
    border:1px solid rgba(185,89,255,.24) !important;
    border-radius:14px !important;
    background:rgba(15,8,32,.72) !important;
  }
  #extUsersPanel table.list td{
    display:grid !important;
    grid-template-columns:105px minmax(0,1fr) !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    padding:8px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    overflow:visible !important;
  }
  #extUsersPanel table.list td::before{
    content:attr(data-label);
    font-weight:900;
    color:rgba(255,255,255,.7);
  }
  #extUsersPanel table.list td.right{ display:block !important; }
  #extUsersPanel table.list td.right::before{ display:block !important; margin-bottom:8px !important; }
  #extUsersPanel .ext-row-actions{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* ===== 2026-07 REAL ZOOM + PHONE FIX: Extension Users becomes clean cards when space is tight ===== */
@media (max-width: 1500px){
  #extUsersPanel{
    overflow:visible !important;
  }
  #extUsersPanel .table-wrap{
    overflow:visible !important;
    max-height:none !important;
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
  }
  #extUsersPanel table.list,
  #extUsersPanel table.list tbody,
  #extUsersPanel table.list tr,
  #extUsersPanel table.list td{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:auto !important;
  }
  #extUsersPanel table.list thead{
    display:none !important;
  }
  #extUsersPanel table.list tr{
    margin:0 0 14px !important;
    padding:14px !important;
    border:1px solid rgba(185,89,255,.22) !important;
    border-radius:16px !important;
    background:linear-gradient(135deg, rgba(12,7,28,.90), rgba(31,15,49,.78)) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.25) !important;
    overflow:hidden !important;
  }
  #extUsersPanel table.list td{
    display:grid !important;
    grid-template-columns:118px minmax(0,1fr) !important;
    gap:10px !important;
    align-items:center !important;
    padding:9px 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.075) !important;
    overflow:visible !important;
    text-align:left !important;
  }
  #extUsersPanel table.list td:last-child{
    border-bottom:0 !important;
  }
  #extUsersPanel table.list td::before{
    content:attr(data-label) !important;
    display:block !important;
    color:rgba(225,215,255,.72) !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
  }
  #extUsersPanel table.list td.right{
    display:block !important;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  #extUsersPanel table.list td.right::before{
    margin-bottom:10px !important;
  }
  #extUsersPanel table.list input,
  #extUsersPanel table.list select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  #extUsersPanel table.list input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
    min-height:22px !important;
    justify-self:start !important;
  }
  #extUsersPanel .ext-pass-card,
  #extUsersPanel .ext-browser-card{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    word-break:break-word !important;
  }
  #extUsersPanel .ext-row-actions{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
    justify-content:stretch !important;
  }
  #extUsersPanel .ext-row-actions .action{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 8px !important;
    border-radius:10px !important;
    font-size:13px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
  }
  #extUsersPanel .ext-row-actions .label{
    display:inline !important;
    font-size:12px !important;
  }
}

@media (max-width: 560px){
  #extUsersPanel table.list tr{
    padding:12px !important;
    border-radius:14px !important;
  }
  #extUsersPanel table.list td{
    grid-template-columns:1fr !important;
    gap:5px !important;
    align-items:start !important;
  }
  #extUsersPanel .ext-row-actions{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  #extUsersPanel .ext-row-actions .action{
    height:40px !important;
    font-size:12px !important;
  }
}

/* =========================================================
   FINAL REAL FIX: no bottom horizontal scrollbar + component
   responsive Extension Users. It switches by actual panel width,
   so it works with browser zoom, desktop, tablet and phones.
   ========================================================= */
html, body { overflow-x: hidden !important; }
#appCard.app:not(.hidden){
  width:100vw !important;
  max-width:100vw !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.main-panel,.panel,.appbar,.tabs{ min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; }

/* never show the ugly purple horizontal bar */
.table-wrap{ scrollbar-width:thin !important; }
#extUsersPanel .table-wrap{ overflow-x:hidden !important; }
#extUsersPanel .table-wrap::-webkit-scrollbar:horizontal{ height:0 !important; display:none !important; }

/* Extension table: desktop only when there is real room */
#extUsersPanel:not(.ext-card-mode) table.list{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
}
#extUsersPanel:not(.ext-card-mode) table.list th:nth-child(1),
#extUsersPanel:not(.ext-card-mode) table.list td:nth-child(1){width:8% !important;}
#extUsersPanel:not(.ext-card-mode) table.list th:nth-child(2),
#extUsersPanel:not(.ext-card-mode) table.list td:nth-child(2){width:8% !important;}
#extUsersPanel:not(.ext-card-mode) table.list th:nth-child(3),
#extUsersPanel:not(.ext-card-mode) table.list td:nth-child(3){width:8% !important;}
#extUsersPanel:not(.ext-card-mode) table.list th:nth-child(4),
#extUsersPanel:not(.ext-card-mode) table.list td:nth-child(4){width:8% !important;}
#extUsersPanel:not(.ext-card-mode) table.list th:nth-child(5),
#extUsersPanel:not(.ext-card-mode) table.list td:nth-child(5){width:13% !important;}
#extUsersPanel:not(.ext-card-mode) table.list th:nth-child(6),
#extUsersPanel:not(.ext-card-mode) table.list td:nth-child(6){width:20% !important;}
#extUsersPanel:not(.ext-card-mode) table.list th:nth-child(7),
#extUsersPanel:not(.ext-card-mode) table.list td:nth-child(7){width:16% !important;}
#extUsersPanel:not(.ext-card-mode) table.list th:nth-child(8),
#extUsersPanel:not(.ext-card-mode) table.list td:nth-child(8){width:6% !important;text-align:center !important;}
#extUsersPanel:not(.ext-card-mode) table.list th:nth-child(9),
#extUsersPanel:not(.ext-card-mode) table.list td:nth-child(9){width:13% !important;max-width:none !important;min-width:0 !important;overflow:visible !important;}
#extUsersPanel:not(.ext-card-mode) .ext-row-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:5px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
#extUsersPanel:not(.ext-card-mode) .ext-row-actions .action{
  width:100% !important;
  min-width:0 !important;
  height:30px !important;
  padding:0 5px !important;
  font-size:11px !important;
}
#extUsersPanel:not(.ext-card-mode) .ext-row-actions .label{font-size:10.5px !important;}

/* Card mode forced by JS when actual table area is tight */
#extUsersPanel.ext-card-mode .table-wrap{
  overflow:visible !important;
  max-height:none !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
}
#extUsersPanel.ext-card-mode table.list,
#extUsersPanel.ext-card-mode table.list tbody,
#extUsersPanel.ext-card-mode table.list tr,
#extUsersPanel.ext-card-mode table.list td{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:auto !important;
  box-sizing:border-box !important;
}
#extUsersPanel.ext-card-mode table.list thead{display:none !important;}
#extUsersPanel.ext-card-mode table.list tr{
  margin:0 0 14px !important;
  padding:14px !important;
  border:1px solid rgba(185,89,255,.24) !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,rgba(12,7,28,.94),rgba(35,17,55,.82)) !important;
  overflow:hidden !important;
}
#extUsersPanel.ext-card-mode table.list td{
  display:grid !important;
  grid-template-columns:120px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:center !important;
  padding:9px 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.075) !important;
  text-align:left !important;
  overflow:visible !important;
}
#extUsersPanel.ext-card-mode table.list td:last-child{border-bottom:0 !important;}
#extUsersPanel.ext-card-mode table.list td::before{
  content:attr(data-label) !important;
  color:rgba(225,215,255,.75) !important;
  font-size:12px !important;
  font-weight:900 !important;
}
#extUsersPanel.ext-card-mode table.list td.right{display:block !important;}
#extUsersPanel.ext-card-mode table.list td.right::before{display:block !important;margin-bottom:10px !important;}
#extUsersPanel.ext-card-mode table.list input,
#extUsersPanel.ext-card-mode table.list select{width:100% !important;min-width:0 !important;max-width:100% !important;}
#extUsersPanel.ext-card-mode table.list input[type="checkbox"]{width:24px !important;height:24px !important;min-height:24px !important;justify-self:start !important;}
#extUsersPanel.ext-card-mode .ext-pass-card,
#extUsersPanel.ext-card-mode .ext-browser-card{width:100% !important;max-width:100% !important;overflow:hidden !important;word-break:break-word !important;}
#extUsersPanel.ext-card-mode .ext-row-actions{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
#extUsersPanel.ext-card-mode .ext-row-actions .action{
  width:100% !important;
  min-width:0 !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 8px !important;
  font-size:13px !important;
}
@media (max-width:560px){
  #extUsersPanel.ext-card-mode table.list td{grid-template-columns:1fr !important;gap:5px !important;align-items:start !important;}
  #extUsersPanel.ext-card-mode .ext-row-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* =========================================================
   TRUE PHONE / ZOOM RESPONSIVE FINAL PATCH
   - removes fixed desktop layout on phones
   - turns every table into readable cards
   - prevents horizontal scroll bars
   ========================================================= */
html, body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
body.mobile-real,
body.phone-screen{
  min-width:0 !important;
  overflow-x:hidden !important;
}

@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px){
  body{display:block !important; align-items:stretch !important; justify-content:flex-start !important;}
  #appCard.app:not(.hidden), .app{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    overflow-x:hidden !important;
  }
  .side-panel{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:min(320px, 88vw) !important;
    max-width:88vw !important;
    height:100dvh !important;
    transform:translateX(-105%) !important;
    transition:transform .2s ease !important;
    z-index:10000 !important;
    padding:14px !important;
    overflow-y:auto !important;
  }
  #appCard.sidebar-open .side-panel{transform:translateX(0) !important;}
  #appCard.sidebar-open::after{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.62) !important;
    z-index:9990 !important;
  }
  .side-brand img{width:48px !important;height:48px !important;border-radius:14px !important;}
  .side-brand strong{font-size:14px !important;line-height:1.05 !important;}
  .side-brand span{font-size:10px !important;}
  .profile-card{padding:10px !important;gap:8px !important;}
  .profile-card img{width:46px !important;height:46px !important;}
  .profile-card b{font-size:10px !important;padding:3px 6px !important;}
  .side-nav button,.side-logout{height:42px !important;font-size:13px !important;}

  .main-panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:8px !important;
    margin:0 !important;
    overflow-x:hidden !important;
  }
  .appbar{
    position:sticky !important;
    top:8px !important;
    z-index:900 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:auto !important;
    margin:0 0 8px !important;
    padding:8px !important;
    border-radius:12px !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    gap:8px !important;
    align-items:center !important;
  }
  .mobile-menu{display:grid !important;width:38px !important;height:38px !important;min-width:38px !important;}
  .appbar-left{min-width:0 !important;}
  .app-title{font-size:14px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .appbar-right{
    grid-column:1 / -1 !important;
    width:100% !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
  }
  .me-label{font-size:11px !important;min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}
  .appbar-right .btn{width:auto !important;min-width:78px !important;height:34px !important;font-size:12px !important;padding:0 10px !important;}

  .tabs{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 8px !important;
    padding:8px !important;
    border-radius:12px !important;
    display:flex !important;
    gap:7px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .tabs::-webkit-scrollbar{height:0 !important;display:none !important;}
  .tabs{scrollbar-width:none !important;}
  .tabs button{
    flex:0 0 auto !important;
    height:38px !important;
    padding:0 12px !important;
    font-size:11px !important;
    border-radius:10px !important;
    white-space:nowrap !important;
  }

  .panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 0 10px !important;
    padding:10px !important;
    border-radius:13px !important;
    overflow:hidden !important;
    box-shadow:0 10px 32px rgba(0,0,0,.36) !important;
  }
  .panel h2,#extUsersPanel::before,#clientsPanel::before{font-size:18px !important;margin-bottom:10px !important;}
  .grid.grid-4,.controls .row,.row.admin-search-row,.ext-search-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
  }
  .row{max-width:100% !important;}
  .stack, .controls, .search-box, .search-box-wide, .admin-search-row > *{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  input,select,textarea,.search-box input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:38px !important;
    font-size:13px !important;
  }
  input[type="checkbox"]{width:22px !important;height:22px !important;min-width:22px !important;}
  #extAddBtn,#extClearBtn,#extRefreshBtn,#addBtn,#addUUIDBtn,#groupManageBtn,
  .controls .btn,.panel > .row .btn{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:40px !important;
    margin:0 !important;
    font-size:13px !important;
  }

  .table-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    max-height:none !important;
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
  }
  .table-wrap::-webkit-scrollbar{display:none !important;}
  table.list, table.list tbody, table.list tr, table.list td{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  table.list{border:0 !important;background:transparent !important;table-layout:auto !important;}
  table.list thead{display:none !important;}
  table.list tr{
    margin:0 0 10px !important;
    padding:11px !important;
    border:1px solid rgba(185,89,255,.25) !important;
    border-radius:14px !important;
    background:rgba(13,8,28,.88) !important;
    overflow:hidden !important;
  }
  table.list td{
    display:grid !important;
    grid-template-columns:88px minmax(0,1fr) !important;
    gap:8px !important;
    align-items:center !important;
    padding:8px 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  table.list td:last-child{border-bottom:0 !important;}
  table.list td::before{
    content:attr(data-label) !important;
    color:rgba(230,220,255,.78) !important;
    font-size:11px !important;
    font-weight:900 !important;
  }
  table.list td:not([data-label])::before{content:"" !important;display:none !important;}
  table.list td.right, table.list td.center{text-align:left !important;justify-content:stretch !important;}
  table.list td.right{display:block !important;}
  table.list td.right::before{display:block !important;margin-bottom:8px !important;}
  table.list td.center input[type="checkbox"]{justify-self:start !important;}
  table.list td input:not([type="checkbox"]), table.list td select{width:100% !important;min-width:0 !important;max-width:100% !important;}
  .actions,.ext-row-actions,.group-manager-row-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    justify-content:stretch !important;
  }
  .action,.actions .action{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 8px !important;
    justify-content:center !important;
    font-size:12px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
  }
  .action .label{display:inline !important;font-size:12px !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .ext-pass-card,.ext-browser-card{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    word-break:break-word !important;
    padding:9px !important;
  }
}

body.mobile-real #appCard.app:not(.hidden),
body.phone-screen #appCard.app:not(.hidden){
  display:block !important;width:100% !important;max-width:100% !important;min-width:0 !important;overflow-x:hidden !important;
}
body.mobile-real .side-panel,
body.phone-screen .side-panel{position:fixed !important;transform:translateX(-105%) !important;z-index:10000 !important;width:min(320px,88vw) !important;max-width:88vw !important;}
body.mobile-real #appCard.sidebar-open .side-panel,
body.phone-screen #appCard.sidebar-open .side-panel{transform:translateX(0) !important;}
body.mobile-real .main-panel,
body.phone-screen .main-panel{width:100% !important;max-width:100% !important;padding:8px !important;margin:0 !important;overflow-x:hidden !important;}
body.mobile-real .mobile-menu,
body.phone-screen .mobile-menu{display:grid !important;}

/* REAL MOBILE SEARCH FIX: CSS !important card rows must still hide when filtered */
tr.search-hidden,
#clientRows tr.search-hidden,
#extRows tr.search-hidden,
#clientsPanel table.list tr.search-hidden,
#extUsersPanel table.list tr.search-hidden,
body.mobile-real #clientRows tr.search-hidden,
body.mobile-real #extRows tr.search-hidden{
  display:none !important;
}

/* Make search usable on phones */
#clientSearch,#extSearch{
  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
  touch-action:manipulation !important;
}
.search-box{ pointer-events:auto !important; }

/* =========================================================
   PHONE READABILITY FINAL FIX
   Makes mobile rows readable: label on top, full-width value,
   no cramped UUID/team/date fields, no horizontal scrollbar.
   ========================================================= */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1024px){
  .table-wrap,
  #clientsPanel .table-wrap,
  #extUsersPanel .table-wrap{
    overflow-x:hidden !important;
    overflow-y:visible !important;
    width:100% !important;
    max-width:100% !important;
  }

  table.list tr,
  #clientRows tr,
  #extRows tr{
    width:100% !important;
    max-width:100% !important;
    padding:12px !important;
    margin:0 0 12px !important;
    background:rgba(13,9,29,.96) !important;
    border:1px solid rgba(168,85,247,.30) !important;
    border-radius:16px !important;
  }

  table.list td,
  #clientRows td,
  #extRows td,
  #clientsPanel table.list td,
  #extUsersPanel table.list td{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:9px 0 !important;
    gap:6px !important;
    border-bottom:1px solid rgba(255,255,255,.075) !important;
    text-align:left !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  table.list td::before,
  #clientRows td::before,
  #extRows td::before{
    display:block !important;
    width:100% !important;
    margin:0 0 2px !important;
    color:#cfc6ff !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    letter-spacing:.02em !important;
    text-transform:none !important;
  }

  table.list td:last-child,
  #clientRows td:last-child,
  #extRows td:last-child{border-bottom:0 !important;}

  .client-uuid-cell,
  .ext-player-cell{
    font-size:12px !important;
    line-height:1.45 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }
  .client-uuid-cell span,
  .ext-player-cell span{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }
  .client-uuid-cell .chip,
  .ext-player-cell .chip,
  .chip{
    width:max-content !important;
    max-width:100% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-top:5px !important;
    padding:4px 9px !important;
    border-radius:999px !important;
    line-height:1 !important;
  }

  #clientRows input:not([type="checkbox"]),
  #clientRows select,
  #extRows input:not([type="checkbox"]),
  #extRows select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 11px !important;
    font-size:13px !important;
    line-height:40px !important;
  }

  #clientRows input[type="checkbox"],
  #extRows input[type="checkbox"]{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    min-height:26px !important;
    align-self:flex-start !important;
  }

  #clientRows td.center,
  #extRows td.center{
    align-items:flex-start !important;
  }

  .ext-pass-card,
  .ext-browser-card,
  #clientRows .ext-browser-card,
  #extRows .ext-pass-card,
  #extRows .ext-browser-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:10px !important;
    line-height:1.45 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  .actions,
  .ext-row-actions,
  #clientRows .actions,
  #extRows .ext-row-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .actions .action,
  .ext-row-actions .action,
  #clientRows .action,
  #extRows .action{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 8px !important;
    justify-content:center !important;
    font-size:12px !important;
    border-radius:9px !important;
  }

  .actions .action .label,
  .ext-row-actions .action .label{
    display:inline !important;
    font-size:12px !important;
    line-height:1 !important;
  }
}

@media (max-width: 480px){
  .actions,
  .ext-row-actions,
  #clientRows .actions,
  #extRows .ext-row-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .panel{padding:9px !important;}
  table.list tr,#clientRows tr,#extRows tr{padding:10px !important;}
}


/* User Links only */
#userLinksPanel { padding:9px; }
#userLinksPanel .user-links-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px; flex-wrap:wrap;
}
#userLinksPanel .user-links-head h2 { margin:0 0 2px; }
#userLinksPanel .user-links-tools {
  display:flex; align-items:center; gap:8px; flex:1; justify-content:flex-end;
}
#userLinksPanel #userLinksSearch {
  width:min(680px, 100%); min-width:220px; padding:8px 10px; border-radius:9px;
  border:1px solid rgba(255,255,255,.32); background:rgba(0,0,0,.22); color:#fff;
}
#userLinksPanel #userLinksRefresh { width:auto; white-space:nowrap; }
#userLinksPanel .user-links-table-wrap { max-height:calc(100vh - 205px); }
#userLinksPanel .user-links-table { min-width:1320px; table-layout:fixed; }
#userLinksPanel .user-links-table th,
#userLinksPanel .user-links-table td { vertical-align:middle; }
#userLinksPanel .user-links-table th:nth-child(1) { width:12%; }
#userLinksPanel .user-links-table th:nth-child(2) { width:8%; }
#userLinksPanel .user-links-table th:nth-child(3) { width:11%; }
#userLinksPanel .user-links-table th:nth-child(4) { width:13%; }
#userLinksPanel .user-links-table th:nth-child(5) { width:14%; }
#userLinksPanel .user-links-table th:nth-child(6) { width:20%; }
#userLinksPanel .user-links-table th:nth-child(7) { width:9%; }
#userLinksPanel .user-links-table th:nth-child(8) { width:5%; }
#userLinksPanel .user-links-table th:nth-child(9) { width:12%; }
#userLinksPanel .user-account-link {
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#userLinksPanel .user-link-inline { display:inline-flex; align-items:center; gap:5px; max-width:100%; }
#userLinksPanel .user-link-inline a {
  max-width:calc(100% - 30px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#userLinksPanel .user-link-inline button {
  width:25px; height:25px; border-radius:7px; border:1px solid rgba(52,152,219,.55);
  background:rgba(52,152,219,.18); color:#fff; cursor:pointer; flex:0 0 auto;
}
@media (max-width:700px) {
  #userLinksPanel .user-links-tools { width:100%; justify-content:stretch; }
  #userLinksPanel #userLinksSearch { min-width:0; flex:1; }
}


/* DSY FINAL ANDROID / EMULATOR LAYOUT */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
button,input,select,textarea{touch-action:manipulation;}

@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px){
  body.app-open,
  body.mobile-real,
  body.phone-screen{
    display:block !important;
    min-height:100dvh !important;
    width:100% !important;
    overflow-x:hidden !important;
  }
  #appCard.app:not(.hidden){
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    grid-template-columns:none !important;
    overflow:visible !important;
  }
  #appCard .main-panel{
    display:block !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:8px !important;
    overflow-x:hidden !important;
  }
  #appCard .side-panel{
    position:fixed !important;
    inset:0 auto 0 0 !important;
    width:min(320px,88vw) !important;
    max-width:88vw !important;
    height:100dvh !important;
    transform:translate3d(-105%,0,0) !important;
    overflow-y:auto !important;
    z-index:10001 !important;
  }
  #appCard.sidebar-open .side-panel{transform:translate3d(0,0,0) !important;}
  .appbar,.tabs,.panel,#clientsPanel,#extUsersPanel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .tabs button{flex:0 0 auto !important;}
  #clientsPanel .grid.grid-4,
  #extUsersPanel .grid.grid-4,
  .controls .row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
  }
  #clientsPanel .table-wrap,
  #extUsersPanel .table-wrap,
  .table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  #clientsPanel table.list,
  #extUsersPanel table.list,
  table.list{
    min-width:0 !important;
    width:100% !important;
  }
  #clientRows tr,#extRows tr,table.list tbody tr{
    width:100% !important;
    max-width:100% !important;
  }
  #clientRows td,#extRows td,table.list tbody td{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  input[type="datetime-local"]{font-size:16px !important;}
}

@media (max-width: 480px){
  #appCard .main-panel{padding:6px !important;}
  .appbar,.tabs,.panel{border-radius:11px !important;}
  .appbar-right{flex-wrap:wrap !important;}
  .me-label{width:100% !important;}
  #clientRows td,#extRows td,table.list tbody td{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:6px !important;
  }
  #clientRows td::before,#extRows td::before,table.list tbody td::before{
    width:100% !important;
  }
  .actions,.group-manager-row-actions,.ext-row-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* DSY ZOOM-SAFE DESKTOP + TRUE MOBILE FINAL OVERRIDE */
html,body{width:100% !important;max-width:100% !important;min-width:0 !important;}
#appCard.app:not(.hidden){width:100vw !important;max-width:100vw !important;min-width:0 !important;}
#appCard .main-panel{min-width:0 !important;max-width:none !important;}

/* Browser zoom on a desktop must never squeeze the whole admin into a thin column. */
@media (max-width:1280px){
  body:not(.mobile-real) #appCard.app:not(.hidden){
    display:block !important;
    position:relative !important;
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
  }
  body:not(.mobile-real) #appCard .main-panel{
    display:block !important;
    position:relative !important;
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    padding:10px !important;
    overflow-x:hidden !important;
  }
  body:not(.mobile-real) #appCard .side-panel{
    position:fixed !important;
    inset:0 auto 0 0 !important;
    width:min(300px,88vw) !important;
    max-width:88vw !important;
    height:100dvh !important;
    transform:translate3d(-105%,0,0) !important;
    z-index:10001 !important;
    overflow-y:auto !important;
  }
  body:not(.mobile-real) #appCard.sidebar-open .side-panel{transform:translate3d(0,0,0) !important;}
  body:not(.mobile-real) .mobile-menu{display:grid !important;}
  body:not(.mobile-real) .appbar,
  body:not(.mobile-real) .tabs,
  body:not(.mobile-real) .panel,
  body:not(.mobile-real) #clientsPanel,
  body:not(.mobile-real) #extUsersPanel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  body:not(.mobile-real) .tabs{overflow-x:auto !important;flex-wrap:nowrap !important;}
  body:not(.mobile-real) .tabs button{flex:0 0 auto !important;}
  body:not(.mobile-real) .table-wrap{width:100% !important;max-width:100% !important;overflow:auto !important;}
  body:not(.mobile-real) table.list{width:max-content !important;min-width:1180px !important;max-width:none !important;}
}

/* True Android / emulator layout: full screen cards, never a 220px column. */
body.mobile-real #appCard.app:not(.hidden){
  display:block !important;
  width:100vw !important;
  max-width:100vw !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
body.mobile-real #appCard .main-panel{
  display:block !important;
  width:100vw !important;
  max-width:100vw !important;
  min-width:0 !important;
  margin:0 !important;
  padding:8px !important;
}
body.mobile-real .appbar,
body.mobile-real .tabs,
body.mobile-real .panel,
body.mobile-real #clientsPanel,
body.mobile-real #extUsersPanel{width:100% !important;max-width:100% !important;min-width:0 !important;}


/* === Leader multi-access + clean Users permission controls === */
#usersPanel .leader-access-cell{vertical-align:middle!important;min-width:170px}
#usersPanel .leader-access-picker{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:nowrap;white-space:nowrap}
#usersPanel .access-pill{position:relative;display:inline-flex!important;align-items:center;justify-content:center;margin:0!important;cursor:pointer;user-select:none}
#usersPanel .access-pill input{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}
#usersPanel .access-pill span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:31px;padding:0 10px;border-radius:9px;border:1px solid rgba(177,113,255,.38);background:rgba(255,255,255,.055);color:#e9e1ff;font-size:12px;font-weight:800;letter-spacing:.25px;transition:transform .12s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}
#usersPanel .access-pill:hover span{transform:translateY(-1px);border-color:rgba(185,112,255,.72);background:rgba(164,70,255,.12)}
#usersPanel .access-pill input:checked + span{border-color:#ae4cff;background:linear-gradient(135deg,rgba(126,43,222,.72),rgba(180,63,255,.86));color:#fff;box-shadow:0 0 0 1px rgba(180,76,255,.16),0 7px 18px rgba(109,30,183,.22)}
#usersPanel .access-pill input:focus-visible + span{outline:2px solid #c58bff;outline-offset:2px}
body.leader-view .side-nav{padding-top:6px}
body.leader-view .side-nav [data-side-tab]{display:flex;min-height:44px}
body.leader-view .side-panel .profile-card>b{background:linear-gradient(135deg,#6f2bd1,#a93df2)}
@media (max-width:900px){#usersPanel .leader-access-picker{gap:5px}#usersPanel .access-pill span{min-width:38px;padding:0 8px}}


/* Leader controls: compact WC / NF / AL / DEL option buttons */
.leader-access-picker{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.leader-access-picker .access-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:30px;
  margin:0;
  cursor:pointer;
  user-select:none;
}
.leader-access-picker .access-pill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.leader-access-picker .access-pill span{
  width:100%;
  height:100%;
  padding:5px 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:9px;
  background:rgba(255,255,255,.06);
  color:#d9d2ec;
  font-size:11px;
  font-weight:800;
  line-height:1;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.leader-access-picker .access-pill input:checked + span{
  border-color:rgba(168,85,247,.9);
  background:linear-gradient(135deg, rgba(126,34,206,.88), rgba(168,85,247,.88));
  color:#fff;
  box-shadow:0 0 0 1px rgba(168,85,247,.18),0 6px 16px rgba(126,34,206,.22);
}
.leader-access-picker .access-pill--del input:checked + span{
  border-color:rgba(244,63,94,.92);
  background:linear-gradient(135deg, rgba(159,18,57,.92), rgba(225,29,72,.92));
  box-shadow:0 0 0 1px rgba(244,63,94,.18),0 6px 16px rgba(159,18,57,.22);
}
.leader-access-picker .access-pill:hover span{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.42);
}


/* === Independent Leader permissions: WC / NF / AL / DEL === */
.ext-users-table th:nth-child(4),
.ext-users-table th:nth-child(5),
.ext-users-table th:nth-child(6),
.ext-users-table th:nth-child(7),
.ext-users-table td:nth-child(4),
.ext-users-table td:nth-child(5),
.ext-users-table td:nth-child(6),
.ext-users-table td:nth-child(7){
  width:64px;
  text-align:center;
}

.leader-permission-cell{
  vertical-align:middle !important;
  text-align:center;
}

.permission-switch{
  display:inline-flex;
  position:relative;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:30px;
  margin:0;
  cursor:pointer;
  user-select:none;
}

.permission-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.permission-switch span{
  display:flex;
  width:48px;
  height:30px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:9px;
  background:rgba(255,255,255,.055);
  color:#d9d2ec;
  font-size:11px;
  font-weight:800;
  line-height:1;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.permission-switch:hover span{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.45);
}

.permission-switch input:checked + span{
  color:#fff;
  border-color:rgba(168,85,247,.95);
  background:linear-gradient(135deg, rgba(126,34,206,.94), rgba(168,85,247,.94));
  box-shadow:0 0 0 1px rgba(168,85,247,.15), 0 6px 14px rgba(126,34,206,.20);
}

.permission-switch--del input:checked + span{
  border-color:rgba(244,63,94,.95);
  background:linear-gradient(135deg, rgba(159,18,57,.96), rgba(225,29,72,.96));
  box-shadow:0 0 0 1px rgba(244,63,94,.16), 0 6px 14px rgba(159,18,57,.22);
}

.leader-permission-cell--inactive .permission-switch{
  cursor:default;
  pointer-events:none;
}

.leader-permission-cell--inactive .permission-switch span{
  color:transparent;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}

.leader-permission-cell--inactive .permission-switch span::after{
  content:"—";
  color:rgba(255,255,255,.34);
  font-size:14px;
}


/* =========================================================
   FINAL V3 — Leader permissions + zero-flash access UI
   ========================================================= */

/* Hard hide for DEL-controlled actions. */
[data-delete-only].permission-hidden,
[data-delete-only][hidden]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* During account/scope check, never show dashboard content. */
body.auth-checking #appCard,
body.auth-checking #appCard.app{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.auth-checking #loginCard{
  display:none !important;
  visibility:hidden !important;
}

/* Users table: header and body use the exact same 13-column structure. */
#usersPanel .users-table-wrap{
  overflow:auto !important;
  max-height:calc(100vh - 235px) !important;
}
#usersPanel .users-permissions-table{
  min-width:1380px !important;
  table-layout:fixed !important;
}
#usersPanel .users-permissions-table th,
#usersPanel .users-permissions-table td{
  vertical-align:middle !important;
  padding:8px 7px !important;
}
#usersPanel .users-permissions-table th:nth-child(1),
#usersPanel .users-permissions-table td:nth-child(1){width:150px !important;}
#usersPanel .users-permissions-table th:nth-child(2),
#usersPanel .users-permissions-table td:nth-child(2){width:95px !important;}
#usersPanel .users-permissions-table th:nth-child(3),
#usersPanel .users-permissions-table td:nth-child(3){width:92px !important;}
#usersPanel .users-permissions-table th:nth-child(4),
#usersPanel .users-permissions-table td:nth-child(4),
#usersPanel .users-permissions-table th:nth-child(5),
#usersPanel .users-permissions-table td:nth-child(5),
#usersPanel .users-permissions-table th:nth-child(6),
#usersPanel .users-permissions-table td:nth-child(6),
#usersPanel .users-permissions-table th:nth-child(7),
#usersPanel .users-permissions-table td:nth-child(7){
  width:62px !important;
  text-align:center !important;
}
#usersPanel .users-permissions-table th:nth-child(8),
#usersPanel .users-permissions-table td:nth-child(8){width:150px !important;}
#usersPanel .users-permissions-table th:nth-child(9),
#usersPanel .users-permissions-table td:nth-child(9){width:150px !important;}
#usersPanel .users-permissions-table th:nth-child(10),
#usersPanel .users-permissions-table td:nth-child(10){width:190px !important;}
#usersPanel .users-permissions-table th:nth-child(11),
#usersPanel .users-permissions-table td:nth-child(11){width:78px !important;text-align:center !important;}
#usersPanel .users-permissions-table th:nth-child(12),
#usersPanel .users-permissions-table td:nth-child(12){width:170px !important;}
#usersPanel .users-permissions-table th:nth-child(13),
#usersPanel .users-permissions-table td:nth-child(13){width:150px !important;}

#usersPanel .leader-permission-cell{
  position:relative !important;
  text-align:center !important;
}
#usersPanel .permission-switch{
  display:inline-flex !important;
  width:48px !important;
  min-width:48px !important;
  height:30px !important;
  margin:0 auto !important;
}
#usersPanel .permission-switch span{
  width:48px !important;
  height:30px !important;
  padding:0 !important;
  border-radius:8px !important;
}

/* Admin rows do not have Leader permissions: show only a neutral dash. */
#usersPanel .leader-permission-cell--inactive .permission-switch{
  display:none !important;
}
#usersPanel .leader-permission-cell--inactive::after{
  content:"—" !important;
  display:inline-block !important;
  color:rgba(255,255,255,.38) !important;
  font-size:14px !important;
  line-height:30px !important;
}

/* DEL is independent: on = red, off = normal dark button. */
#usersPanel .permission-switch--del input:checked + span{
  color:#fff !important;
  border-color:rgba(244,63,94,.95) !important;
  background:linear-gradient(135deg,rgba(159,18,57,.96),rgba(225,29,72,.96)) !important;
}
#usersPanel .permission-switch--del input:not(:checked) + span{
  color:#e9e2f4 !important;
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.055) !important;
  box-shadow:none !important;
}

/* Keep Clients action row aligned when DEL disappears. */
#clientsPanel .group-manager-row-actions{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
}


/* EDIT permission and quick Client filters */
[data-edit-only].permission-hidden,
[data-edit-only][hidden]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#usersPanel .users-permissions-table{
  min-width:1450px !important;
}
#usersPanel .permission-switch--edit input:checked + span{
  color:#fff !important;
  border-color:rgba(59,130,246,.95) !important;
  background:linear-gradient(135deg,rgba(30,64,175,.96),rgba(37,99,235,.96)) !important;
}
#usersPanel .leader-permission-cell--locked .permission-switch{
  opacity:.82;
  cursor:not-allowed;
}
#usersPanel .leader-permission-cell--locked .permission-switch span{
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.client-access-row{
  min-height:62px;
}
.client-quick-filters{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-left:18px;
}
.client-quick-filters .quick-filter{
  width:auto !important;
  min-width:76px;
  height:34px !important;
  padding:0 13px !important;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 7px 18px rgba(0,0,0,.22);
}
.client-quick-filters .quick-filter.active{
  border-color:rgba(168,85,247,.95);
  background:linear-gradient(135deg,rgba(126,34,206,.93),rgba(168,85,247,.93));
}
.client-quick-filters .quick-filter--expired.active{
  border-color:rgba(239,68,68,.95);
  background:linear-gradient(135deg,rgba(153,27,27,.94),rgba(220,38,38,.94));
}
.client-quick-filters .quick-filter--nf.active{
  border-color:rgba(245,158,11,.95);
  background:linear-gradient(135deg,rgba(146,64,14,.94),rgba(217,119,6,.94));
}
.client-quick-filters .quick-filter--al.active{
  border-color:rgba(14,165,233,.95);
  background:linear-gradient(135deg,rgba(3,105,161,.94),rgba(2,132,199,.94));
}
.client-quick-filters .quick-filter--disabled.active{
  border-color:rgba(244,63,94,.95);
  background:linear-gradient(135deg,rgba(159,18,57,.94),rgba(225,29,72,.94));
}

/* Explicit EDIT control for each client */
.client-edit-cell{min-width:68px;width:68px;text-align:center}
.client-edit-btn{
  min-width:54px;height:32px;padding:0 9px;border-radius:8px;
  border:1px solid rgba(168,85,247,.9);
  background:linear-gradient(135deg,rgba(126,34,206,.96),rgba(168,85,247,.96));
  color:#fff;font-weight:900;font-size:11px;cursor:pointer
}
.client-edit-btn.active{
  border-color:rgba(16,185,129,.95);
  background:linear-gradient(135deg,rgba(5,150,105,.96),rgba(16,185,129,.96))
}
#clientRows tr.client-row-editing{background:rgba(147,51,234,.07)}
#clientRows input:disabled,#clientRows select:disabled{opacity:.82;cursor:default}


/* FINAL COMPACT CLIENTS TABLE */
#clientsPanel .table-wrap{
  overflow-x:hidden !important;
}
#clientsPanel table.list{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
}
#clientsPanel table.list th,
#clientsPanel table.list td{
  padding:5px 3px !important;
  font-size:10px !important;
  vertical-align:middle !important;
}
#clientsPanel table.list th:nth-child(1),
#clientsPanel table.list td:nth-child(1){width:17% !important;}
#clientsPanel table.list th:nth-child(2),
#clientsPanel table.list td:nth-child(2){width:8% !important;}
#clientsPanel table.list th:nth-child(3),
#clientsPanel table.list td:nth-child(3){width:8% !important;}
#clientsPanel table.list th:nth-child(4),
#clientsPanel table.list td:nth-child(4){width:11% !important;}
#clientsPanel table.list th:nth-child(5),
#clientsPanel table.list td:nth-child(5){width:9% !important;}
#clientsPanel table.list th:nth-child(6),
#clientsPanel table.list td:nth-child(6){width:13% !important;}
#clientsPanel table.list th:nth-child(7),
#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),
#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),
#clientsPanel table.list td:nth-child(9),
#clientsPanel table.list th:nth-child(10),
#clientsPanel table.list td:nth-child(10){
  width:3% !important;
  text-align:center !important;
}
#clientsPanel table.list th:nth-child(11),
#clientsPanel table.list td:nth-child(11){
  width:5% !important;
  text-align:center !important;
}
#clientsPanel table.list th:nth-child(12),
#clientsPanel table.list td:nth-child(12){
  width:17% !important;
  text-align:right !important;
  white-space:nowrap !important;
}
#clientsPanel table.list input:not([type="checkbox"]),
#clientsPanel table.list select{
  width:100% !important;
  min-width:0 !important;
  padding:4px 4px !important;
  font-size:9px !important;
}
#clientsPanel .client-edit-btn{
  min-width:42px !important;
  width:42px !important;
  height:29px !important;
  padding:0 4px !important;
  font-size:9px !important;
}
#clientsPanel .actions{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:2px !important;
  flex-wrap:nowrap !important;
}
#clientsPanel .actions .action{
  min-width:34px !important;
  height:29px !important;
  padding:0 4px !important;
  font-size:9px !important;
  border-radius:7px !important;
}
#clientsPanel .actions .label{
  font-size:9px !important;
}
#clientRows tr.client-row-editing input,
#clientRows tr.client-row-editing select{
  opacity:1 !important;
  pointer-events:auto !important;
}


/* FINAL: UUID EDIT + compact single-screen Clients table */
#clientsPanel .table-wrap{
  overflow-x:hidden !important;
}
#clientsPanel table.list{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
}
#clientsPanel table.list th,
#clientsPanel table.list td{
  padding:4px 2px !important;
  font-size:9px !important;
  vertical-align:middle !important;
}

#clientsPanel table.list th:nth-child(1),
#clientsPanel table.list td:nth-child(1){width:14.5% !important;}
#clientsPanel table.list th:nth-child(2),
#clientsPanel table.list td:nth-child(2){width:7% !important;}
#clientsPanel table.list th:nth-child(3),
#clientsPanel table.list td:nth-child(3){width:7% !important;}
#clientsPanel table.list th:nth-child(4),
#clientsPanel table.list td:nth-child(4){width:8.5% !important;}
#clientsPanel table.list th:nth-child(5),
#clientsPanel table.list td:nth-child(5){width:7% !important;}
#clientsPanel table.list th:nth-child(6),
#clientsPanel table.list td:nth-child(6){width:9.5% !important;}

#clientsPanel table.list th:nth-child(7),
#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),
#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),
#clientsPanel table.list td:nth-child(9),
#clientsPanel table.list th:nth-child(10),
#clientsPanel table.list td:nth-child(10){
  width:2.4% !important;
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(11),
#clientsPanel table.list td:nth-child(11){
  width:4.2% !important;
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(12),
#clientsPanel table.list td:nth-child(12){
  width:24.2% !important;
  text-align:right !important;
  white-space:nowrap !important;
}

/* Shrink the large datetime-local field */
#clientsPanel input[type="datetime-local"][data-k="expiresAt"]{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:28px !important;
  padding:2px 1px !important;
  font-size:7.5px !important;
  letter-spacing:-.35px !important;
}

/* UUID display/edit */
#clientsPanel .client-uuid-view{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#clientsPanel .client-uuid-edit{
  display:none;
  width:100% !important;
  min-width:0 !important;
  height:28px !important;
  padding:3px 4px !important;
  font-size:8px !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace !important;
}

/* EDIT + all Actions stay visible side-by-side */
#clientsPanel .actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:2px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
}
#clientsPanel .actions .action{
  height:27px !important;
  min-width:0 !important;
  padding:0 3px !important;
  font-size:7.5px !important;
  border-radius:7px !important;
  flex:0 0 auto !important;
}
#clientsPanel .actions [data-act="cplus30"]{width:38px !important;}
#clientsPanel .actions [data-act="cdays"]{width:34px !important;}
#clientsPanel .actions [data-act="creset"]{width:37px !important;}
#clientsPanel .actions [data-act="save"]{width:33px !important;}
#clientsPanel .actions [data-act="del"]{width:29px !important;}
#clientsPanel .actions .label{font-size:7.5px !important;}

#clientsPanel .client-edit-btn{
  width:40px !important;
  min-width:40px !important;
  height:27px !important;
  padding:0 2px !important;
  font-size:7.5px !important;
}

/* Locked until EDIT, editable after pressing EDIT */
#clientRows tr:not(.client-row-editing) input:disabled,
#clientRows tr:not(.client-row-editing) select:disabled{
  opacity:.70 !important;
}
#clientRows tr.client-row-editing input,
#clientRows tr.client-row-editing select{
  opacity:1 !important;
  pointer-events:auto !important;
}


/* =========================================================
   FINAL NORMAL-SIZE CLIENTS LAYOUT
   Keep the page readable; only shrink Expires At a little.
   ========================================================= */
#clientsPanel .table-wrap{
  overflow-x:hidden !important;
}

#clientsPanel table.list{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
}

#clientsPanel table.list th,
#clientsPanel table.list td{
  padding:6px 5px !important;
  font-size:11px !important;
  vertical-align:middle !important;
}

/* Comfortable column sizes */
#clientsPanel table.list th:nth-child(1),
#clientsPanel table.list td:nth-child(1){width:16% !important;}

#clientsPanel table.list th:nth-child(2),
#clientsPanel table.list td:nth-child(2){width:8% !important;}

#clientsPanel table.list th:nth-child(3),
#clientsPanel table.list td:nth-child(3){width:8% !important;}

#clientsPanel table.list th:nth-child(4),
#clientsPanel table.list td:nth-child(4){width:10% !important;}

#clientsPanel table.list th:nth-child(5),
#clientsPanel table.list td:nth-child(5){width:8% !important;}

/* Expires At: slightly smaller only */
#clientsPanel table.list th:nth-child(6),
#clientsPanel table.list td:nth-child(6){width:9.5% !important;}

#clientsPanel table.list th:nth-child(7),
#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),
#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),
#clientsPanel table.list td:nth-child(9),
#clientsPanel table.list th:nth-child(10),
#clientsPanel table.list td:nth-child(10){
  width:2.7% !important;
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(11),
#clientsPanel table.list td:nth-child(11){
  width:5% !important;
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(12),
#clientsPanel table.list td:nth-child(12){
  width:24.7% !important;
  text-align:right !important;
  white-space:nowrap !important;
}

/* Normal readable inputs/selects again */
#clientsPanel table.list input:not([type="checkbox"]),
#clientsPanel table.list select{
  width:100% !important;
  min-width:0 !important;
  height:31px !important;
  padding:5px 7px !important;
  font-size:10.5px !important;
}

/* Only the date/time control is reduced a little more */
#clientsPanel input[type="datetime-local"][data-k="expiresAt"]{
  height:30px !important;
  padding:3px 3px !important;
  font-size:9px !important;
  letter-spacing:-.15px !important;
}

/* UUID input must be visible while editing */
#clientsPanel .client-uuid-edit{
  width:100% !important;
  min-width:0 !important;
  height:31px !important;
  padding:5px 6px !important;
  font-size:10px !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace !important;
}
#clientRows tr.client-row-editing .client-uuid-edit{
  display:block !important;
}
#clientRows tr:not(.client-row-editing) .client-uuid-edit{
  display:none !important;
}

/* Keep EDIT + Actions together without making the whole table tiny */
#clientsPanel .client-edit-btn{
  width:48px !important;
  min-width:48px !important;
  height:31px !important;
  padding:0 6px !important;
  font-size:10px !important;
}

#clientsPanel .actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  width:100% !important;
}

#clientsPanel .actions .action{
  height:31px !important;
  min-width:0 !important;
  padding:0 6px !important;
  font-size:9.5px !important;
  border-radius:8px !important;
  flex:0 0 auto !important;
}

#clientsPanel .actions [data-act="cplus30"]{width:46px !important;}
#clientsPanel .actions [data-act="cdays"]{width:43px !important;}
#clientsPanel .actions [data-act="creset"]{width:45px !important;}
#clientsPanel .actions [data-act="save"]{width:42px !important;}
#clientsPanel .actions [data-act="del"]{width:36px !important;}

#clientsPanel .actions .label{
  font-size:9.5px !important;
}

/* Clear edit state */
#clientRows tr:not(.client-row-editing) input:disabled,
#clientRows tr:not(.client-row-editing) select:disabled{
  opacity:.75 !important;
}

#clientRows tr.client-row-editing input,
#clientRows tr.client-row-editing select{
  opacity:1 !important;
  pointer-events:auto !important;
}


/* =========================================================
   SMART FIT + REAL EDIT LOCK
   ========================================================= */

#clientsPanel .table-wrap{
  overflow-x:hidden !important;
}

#clientsPanel table.list{
  width:100% !important;
  min-width:100% !important;
  table-layout:fixed !important;
}

#clientsPanel table.list th,
#clientsPanel table.list td{
  box-sizing:border-box !important;
  padding:5px 4px !important;
  vertical-align:middle !important;
}

/* Exact 100% width distribution — no unused side area */
#clientsPanel table.list th:nth-child(1),
#clientsPanel table.list td:nth-child(1){width:16% !important;}   /* UUID */

#clientsPanel table.list th:nth-child(2),
#clientsPanel table.list td:nth-child(2){width:8% !important;}    /* Team */

#clientsPanel table.list th:nth-child(3),
#clientsPanel table.list td:nth-child(3){width:8% !important;}    /* Label */

#clientsPanel table.list th:nth-child(4),
#clientsPanel table.list td:nth-child(4){width:10% !important;}   /* Note */

#clientsPanel table.list th:nth-child(5),
#clientsPanel table.list td:nth-child(5){width:8% !important;}    /* Group */

#clientsPanel table.list th:nth-child(6),
#clientsPanel table.list td:nth-child(6){width:9% !important;}    /* Expires */

#clientsPanel table.list th:nth-child(7),
#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),
#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),
#clientsPanel table.list td:nth-child(9),
#clientsPanel table.list th:nth-child(10),
#clientsPanel table.list td:nth-child(10){
  width:2.8% !important;                                          /* WC/NF/AL/Disabled */
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(11),
#clientsPanel table.list td:nth-child(11){
  width:5% !important;                                            /* EDIT */
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(12),
#clientsPanel table.list td:nth-child(12){
  width:24.8% !important;                                         /* Actions */
  text-align:right !important;
  white-space:nowrap !important;
}

/* Every field fills its own cell neatly */
#clientsPanel table.list input:not([type="checkbox"]),
#clientsPanel table.list select{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* Only the time control is slightly tighter */
#clientsPanel input[type="datetime-local"][data-k="expiresAt"]{
  height:30px !important;
  padding:3px 2px !important;
  font-size:8.7px !important;
  letter-spacing:-.18px !important;
}

/* Use the complete Actions cell intelligently: no blank strip after Del */
#clientsPanel .actions{
  display:grid !important;
  grid-template-columns:1.15fr 1.05fr 1fr .95fr .85fr !important;
  align-items:center !important;
  gap:4px !important;
  width:100% !important;
  max-width:none !important;
}

#clientsPanel .actions .action{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 4px !important;
  box-sizing:border-box !important;
}

/* EDIT is now the real master switch */
#clientRows tr:not(.client-row-editing) [data-edit-only]:not(.client-edit-btn){
  opacity:.38 !important;
  filter:saturate(.35) !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}

#clientRows tr:not(.client-row-editing) input:disabled,
#clientRows tr:not(.client-row-editing) select:disabled{
  opacity:.58 !important;
  cursor:not-allowed !important;
}

#clientRows tr.client-row-editing{
  background:rgba(147,51,234,.08) !important;
}

#clientRows tr.client-row-editing input,
#clientRows tr.client-row-editing select,
#clientRows tr.client-row-editing [data-edit-only]{
  opacity:1 !important;
  filter:none !important;
}

#clientRows tr.client-row-editing [data-edit-only]{
  pointer-events:auto !important;
  cursor:pointer !important;
}


/* =========================================================
   FINAL — UUID-ONLY EDIT + SMART FULL-WIDTH CLIENT TABLE
   ========================================================= */

/* EDIT never controls unrelated Client fields/actions. */
#clientRows tr:not(.client-row-editing) [data-edit-only]:not(.client-edit-btn){
  opacity:1 !important;
  filter:none !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

/* UUID is the only field controlled by EDIT. */
#clientRows .client-uuid-edit{
  display:none !important;
}
#clientRows tr.client-row-editing .client-uuid-edit{
  display:block !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
#clientRows tr.client-row-editing .client-uuid-view{
  display:none !important;
}

/* Do not dim/lock the normal fields just because UUID EDIT is off. */
#clientRows tr:not(.client-row-editing) input:disabled:not(.client-uuid-edit),
#clientRows tr:not(.client-row-editing) select:disabled{
  opacity:1 !important;
}

/* Smart exact-width table — consume the whole usable width. */
#clientsPanel .table-wrap{
  overflow-x:hidden !important;
}
#clientsPanel table.list{
  width:100% !important;
  min-width:100% !important;
  table-layout:fixed !important;
}
#clientsPanel table.list th,
#clientsPanel table.list td{
  box-sizing:border-box !important;
  padding:5px 4px !important;
}

/* Balanced distribution: 100% total */
#clientsPanel table.list th:nth-child(1),
#clientsPanel table.list td:nth-child(1){width:17% !important;}
#clientsPanel table.list th:nth-child(2),
#clientsPanel table.list td:nth-child(2){width:8% !important;}
#clientsPanel table.list th:nth-child(3),
#clientsPanel table.list td:nth-child(3){width:8% !important;}
#clientsPanel table.list th:nth-child(4),
#clientsPanel table.list td:nth-child(4){width:10% !important;}
#clientsPanel table.list th:nth-child(5),
#clientsPanel table.list td:nth-child(5){width:8% !important;}
#clientsPanel table.list th:nth-child(6),
#clientsPanel table.list td:nth-child(6){width:9% !important;}

#clientsPanel table.list th:nth-child(7),
#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),
#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),
#clientsPanel table.list td:nth-child(9),
#clientsPanel table.list th:nth-child(10),
#clientsPanel table.list td:nth-child(10){
  width:2.5% !important;
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(11),
#clientsPanel table.list td:nth-child(11){
  width:5% !important;
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(12),
#clientsPanel table.list td:nth-child(12){
  width:25% !important;
  text-align:right !important;
  white-space:nowrap !important;
}

/* Fill the Actions cell completely, without a dead strip on the right. */
#clientsPanel .actions{
  display:grid !important;
  grid-template-columns:1.12fr 1.05fr .92fr .88fr .78fr !important;
  gap:4px !important;
  width:100% !important;
  align-items:center !important;
  justify-content:stretch !important;
}
#clientsPanel .actions .action{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* Time only slightly compact. */
#clientsPanel input[type="datetime-local"][data-k="expiresAt"]{
  width:100% !important;
  height:30px !important;
  padding:3px 3px !important;
  font-size:9px !important;
  letter-spacing:-.1px !important;
}


/* =========================================================
   FINAL EDGE FIT — Actions reach the right edge cleanly
   ========================================================= */

#clientsPanel .table-wrap{
  padding-right:0 !important;
  margin-right:0 !important;
  overflow-x:hidden !important;
  scrollbar-gutter:auto !important;
}

#clientsPanel table.list{
  width:100% !important;
  max-width:100% !important;
  margin-right:0 !important;
  border-spacing:0 !important;
}

/* No wasted padding on the last column */
#clientsPanel table.list th:last-child,
#clientsPanel table.list td:last-child{
  padding-right:0 !important;
  margin-right:0 !important;
}

/* Let Actions consume every usable pixel in the last cell */
#clientsPanel table.list th:nth-child(12),
#clientsPanel table.list td:nth-child(12){
  width:25.8% !important;
  padding-left:4px !important;
  padding-right:0 !important;
  overflow:hidden !important;
}

/* Give back a little width from the UUID/date area so Actions never overflow */
#clientsPanel table.list th:nth-child(1),
#clientsPanel table.list td:nth-child(1){width:16.6% !important;}

#clientsPanel table.list th:nth-child(6),
#clientsPanel table.list td:nth-child(6){width:8.6% !important;}

/* Fill the whole actions cell exactly — Del ends at the edge */
#clientsPanel .actions{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:1.15fr 1.08fr .94fr .90fr .82fr !important;
  gap:3px !important;
  justify-content:stretch !important;
  align-items:center !important;
}

#clientsPanel .actions .action{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:3px !important;
  padding-right:3px !important;
  box-sizing:border-box !important;
}

/* The last Del button should touch the usable edge without crossing it */
#clientsPanel .actions .action:last-child{
  margin-right:0 !important;
}

/* Keep the vertical scrollbar slim so it doesn't create a wide dead lane */
#clientsPanel .table-wrap::-webkit-scrollbar{
  width:6px !important;
  height:6px !important;
}
#clientsPanel .table-wrap{
  scrollbar-width:thin !important;
}


/* =========================================================
   FINAL RIGHT-EDGE FIT + DISABLED=>EXPIRED VISUAL
   ========================================================= */

/* Table owns the full usable width. The scrollbar overlays instead of reserving
   a permanent blank lane at the right. */
#clientsPanel .table-wrap{
  width:100% !important;
  max-width:100% !important;
  padding-right:0 !important;
  margin-right:0 !important;
  scrollbar-gutter:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

#clientsPanel table.list{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  border-collapse:collapse !important;
}

/* Last column reaches the usable edge. */
#clientsPanel table.list th:last-child,
#clientsPanel table.list td:last-child{
  padding-right:1px !important;
}

#clientsPanel .actions{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:1.18fr 1.10fr .95fr .92fr .85fr !important;
  gap:3px !important;
  align-items:center !important;
  justify-content:stretch !important;
}

#clientsPanel .actions .action{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* Pull the last action column right up to the scrollbar without crossing it. */
#clientsPanel table.list td:last-child .actions{
  padding-right:2px !important;
}

/* Slim scrollbar = almost no visual dead lane. */
#clientsPanel .table-wrap::-webkit-scrollbar{
  width:4px !important;
  height:4px !important;
}
#clientsPanel .table-wrap::-webkit-scrollbar-track{
  background:transparent !important;
}
#clientsPanel .table-wrap{
  scrollbar-width:thin !important;
}

/* Keep UUID status chip readable beside the UUID. */
#clientsPanel .client-uuid-view{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
}
#clientsPanel .client-uuid-view > span:first-child{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  min-width:0 !important;
}
#clientsPanel .client-uuid-view .chip{
  flex:0 0 auto !important;
}
#clientRows tr.client-row-editing .client-uuid-view{
  display:none !important;
}


/* =========================================================
   FINAL FILL FIX — no blank zone after Actions
   ========================================================= */

#clientsPanel .table-wrap{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
  overflow-x:hidden !important;
  scrollbar-gutter:auto !important;
}

#clientsPanel table.list{
  width:100% !important;
  max-width:100% !important;
  min-width:100% !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
  margin:0 !important;
}

/* Rebalanced exact 100% distribution */
#clientsPanel table.list th:nth-child(1),
#clientsPanel table.list td:nth-child(1){width:16.2% !important;}
#clientsPanel table.list th:nth-child(2),
#clientsPanel table.list td:nth-child(2){width:8% !important;}
#clientsPanel table.list th:nth-child(3),
#clientsPanel table.list td:nth-child(3){width:8% !important;}
#clientsPanel table.list th:nth-child(4),
#clientsPanel table.list td:nth-child(4){width:10% !important;}
#clientsPanel table.list th:nth-child(5),
#clientsPanel table.list td:nth-child(5){width:8% !important;}
#clientsPanel table.list th:nth-child(6),
#clientsPanel table.list td:nth-child(6){width:8.4% !important;}

#clientsPanel table.list th:nth-child(7),
#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),
#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),
#clientsPanel table.list td:nth-child(9),
#clientsPanel table.list th:nth-child(10),
#clientsPanel table.list td:nth-child(10){
  width:2.7% !important;
  text-align:center !important;
}

/* Let "Disabled" render fully instead of looking cut off */
#clientsPanel table.list th:nth-child(10){
  font-size:9px !important;
  white-space:nowrap !important;
}

#clientsPanel table.list th:nth-child(11),
#clientsPanel table.list td:nth-child(11){
  width:5% !important;
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(12),
#clientsPanel table.list td:nth-child(12){
  width:25.6% !important;
  padding-left:4px !important;
  padding-right:1px !important;
  text-align:right !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}

/* Fill the entire Actions cell */
#clientsPanel .actions{
  display:grid !important;
  grid-template-columns:1.18fr 1.10fr .95fr .92fr .85fr !important;
  gap:3px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  justify-content:stretch !important;
  align-items:center !important;
}

/* IMPORTANT: override older fixed widths that were leaving a blank strip */
#clientsPanel .actions [data-act="cplus30"],
#clientsPanel .actions [data-act="cdays"],
#clientsPanel .actions [data-act="creset"],
#clientsPanel .actions [data-act="save"],
#clientsPanel .actions [data-act="del"]{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:31px !important;
  padding:0 4px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

#clientsPanel .actions .label{
  font-size:9px !important;
  white-space:nowrap !important;
}

/* Keep the right edge visually tight */
#clientsPanel table.list th:last-child,
#clientsPanel table.list td:last-child{
  padding-right:1px !important;
}

#clientsPanel .table-wrap::-webkit-scrollbar{
  width:4px !important;
  height:4px !important;
}
#clientsPanel .table-wrap::-webkit-scrollbar-track{
  background:transparent !important;
}


/* =========================================================
   TRUE FINAL EDGE FIX
   - No visible scrollbar lane
   - Actions fill their complete cell
   - No dead space after Del
   ========================================================= */

#clientsPanel .table-wrap{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
#clientsPanel .table-wrap::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

#clientsPanel table.list{
  width:100% !important;
  max-width:100% !important;
  min-width:100% !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
  margin:0 !important;
}

/* Keep every column aligned and use all available width */
#clientsPanel table.list th:nth-child(1),
#clientsPanel table.list td:nth-child(1){width:16% !important;}
#clientsPanel table.list th:nth-child(2),
#clientsPanel table.list td:nth-child(2){width:8% !important;}
#clientsPanel table.list th:nth-child(3),
#clientsPanel table.list td:nth-child(3){width:8% !important;}
#clientsPanel table.list th:nth-child(4),
#clientsPanel table.list td:nth-child(4){width:10% !important;}
#clientsPanel table.list th:nth-child(5),
#clientsPanel table.list td:nth-child(5){width:8% !important;}
#clientsPanel table.list th:nth-child(6),
#clientsPanel table.list td:nth-child(6){width:8.5% !important;}

#clientsPanel table.list th:nth-child(7),
#clientsPanel table.list td:nth-child(7),
#clientsPanel table.list th:nth-child(8),
#clientsPanel table.list td:nth-child(8),
#clientsPanel table.list th:nth-child(9),
#clientsPanel table.list td:nth-child(9),
#clientsPanel table.list th:nth-child(10),
#clientsPanel table.list td:nth-child(10){
  width:2.6% !important;
  text-align:center !important;
}

#clientsPanel table.list th:nth-child(11),
#clientsPanel table.list td:nth-child(11){
  width:5% !important;
  text-align:center !important;
}

/* Actions gets the remaining width */
#clientsPanel table.list th:nth-child(12),
#clientsPanel table.list td:nth-child(12){
  width:26.1% !important;
  padding-left:4px !important;
  padding-right:0 !important;
  text-align:right !important;
  overflow:hidden !important;
}

/* Highest-specificity override for the actual Client actions span */
#clientsPanel table.list td[data-label="Actions"] > .actions.group-manager-row-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:stretch !important;
  gap:3px !important;

  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  inline-size:100% !important;

  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Each action shares the whole available Actions width.
   This deliberately overrides every old fixed 30/38/54/58px rule. */
#clientsPanel table.list td[data-label="Actions"] > .actions.group-manager-row-actions > button.action{
  flex:1 1 0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:none !important;
  height:31px !important;

  margin:0 !important;
  padding:0 3px !important;
  box-sizing:border-box !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:9px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
}

/* Slightly wider first two actions, compact last three */
#clientsPanel table.list td[data-label="Actions"] > .actions.group-manager-row-actions > [data-act="cplus30"]{flex-grow:1.18 !important;}
#clientsPanel table.list td[data-label="Actions"] > .actions.group-manager-row-actions > [data-act="cdays"]{flex-grow:1.10 !important;}
#clientsPanel table.list td[data-label="Actions"] > .actions.group-manager-row-actions > [data-act="creset"]{flex-grow:.95 !important;}
#clientsPanel table.list td[data-label="Actions"] > .actions.group-manager-row-actions > [data-act="save"]{flex-grow:.90 !important;}
#clientsPanel table.list td[data-label="Actions"] > .actions.group-manager-row-actions > [data-act="del"]{flex-grow:.82 !important;}

#clientsPanel table.list td[data-label="Actions"] > .actions.group-manager-row-actions > button.action:last-child{
  margin-right:0 !important;
}

/* Clean headers */
#clientsPanel table.list th:nth-child(7),
#clientsPanel table.list th:nth-child(8),
#clientsPanel table.list th:nth-child(9),
#clientsPanel table.list th:nth-child(10),
#clientsPanel table.list th:nth-child(11){
  text-align:center !important;
  white-space:nowrap !important;
}
#clientsPanel table.list th:nth-child(12){
  text-align:right !important;
  padding-right:1px !important;
}


/* =========================================================
   PROFESSIONAL MULTI-UUID / MULTI-DEVICE PERSON STACK
   ========================================================= */

#clientsPanel .client-uuid-cell{
  position:relative;
}

#clientsPanel .client-uuid-stack-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  width:100%;
}

#clientsPanel .client-uuid-stack-wrap .client-uuid-view{
  flex:1 1 auto;
  min-width:0;
}

#clientsPanel .client-stack-tools{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}

#clientsPanel .client-stack-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(168,85,247,.45);
  background:rgba(126,34,206,.16);
  color:#d9c8ff;
  font-size:8.5px;
  font-weight:800;
  white-space:nowrap;
}

#clientsPanel .client-stack-add{
  width:auto !important;
  min-width:38px !important;
  height:25px !important;
  padding:0 7px !important;
  margin:0 !important;
  border-radius:7px;
  border:1px solid rgba(16,185,129,.72);
  background:linear-gradient(135deg,rgba(5,150,105,.88),rgba(16,185,129,.88));
  color:#fff;
  font-size:8.5px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 5px 12px rgba(0,0,0,.18);
}

#clientsPanel .client-stack-add:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}

#clientsPanel tr.client-stack-primary td{
  border-top:1px solid rgba(168,85,247,.40) !important;
}

#clientsPanel tr.client-stack-child{
  background:rgba(168,85,247,.035);
}

#clientsPanel tr.client-stack-child td:first-child{
  position:relative;
}

#clientsPanel tr.client-stack-child td:first-child::before{
  content:"";
  position:absolute;
  left:7px;
  top:-1px;
  bottom:-1px;
  width:2px;
  background:linear-gradient(to bottom,rgba(168,85,247,.55),rgba(168,85,247,.10));
  border-radius:2px;
}

#clientsPanel .client-stack-branch{
  flex:0 0 auto;
  margin-left:8px;
  color:#a855f7;
  font-size:15px;
  font-weight:900;
  line-height:1;
}

/* Modal */
.client-device-modal{
  width:min(620px,94vw) !important;
  padding:18px !important;
  border-color:rgba(168,85,247,.42) !important;
  background:linear-gradient(180deg,rgba(17,10,31,.97),rgba(8,7,18,.98)) !important;
}

.client-device-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.client-device-modal-head h3{
  margin:0 0 4px !important;
  font-size:20px !important;
}

.client-device-modal-head p{
  margin:0 !important;
  color:rgba(255,255,255,.70);
  font-size:12px !important;
}

.client-device-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0 0 14px;
}

.client-device-summary span{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:11px;
}

.client-device-summary b{
  color:#a78bfa;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.45px;
}

.client-device-form{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:10px;
}

.client-device-form label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#d9d2e8;
  font-size:11px;
  font-weight:700;
}

.client-device-form input{
  width:100%;
  height:40px;
  padding:8px 11px;
  border-radius:9px;
  border:1px solid rgba(168,85,247,.36);
  outline:none;
  background:rgba(255,255,255,.055);
  color:#fff;
}

.client-device-form input:focus{
  border-color:rgba(168,85,247,.90);
  box-shadow:0 0 0 3px rgba(168,85,247,.12);
}

.client-device-copy-note{
  margin-top:10px;
  padding:9px 10px;
  border-radius:9px;
  border:1px solid rgba(16,185,129,.24);
  background:rgba(16,185,129,.07);
  color:rgba(220,255,245,.84);
  font-size:10.5px;
}

.client-device-modal .modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:15px;
}

.client-device-modal .modal-actions .btn{
  width:auto !important;
  min-width:105px;
}

@media (max-width:900px){
  .client-device-summary{grid-template-columns:1fr;}
  .client-device-form{grid-template-columns:1fr;}
}


/* FINAL LINKED DEVICE STACK — clearly shows which UUIDs belong together */
#clientsPanel .client-uuid-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  min-width:0;
  flex:1 1 auto;
}

#clientsPanel .client-device-name{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(59,130,246,.13);
  border:1px solid rgba(59,130,246,.35);
  color:#bfdbfe;
  font-size:8px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#clientsPanel .client-person-stack-label{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(168,85,247,.14);
  border:1px solid rgba(168,85,247,.42);
  color:#e9d5ff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.25px;
  white-space:nowrap;
}

#clientsPanel tr.client-stack-primary td:first-child{
  border-left:3px solid rgba(168,85,247,.72) !important;
}

#clientsPanel tr.client-stack-child td:first-child{
  border-left:3px solid rgba(168,85,247,.35) !important;
  padding-left:12px !important;
}

#clientsPanel tr.client-stack-child{
  background:linear-gradient(90deg,rgba(168,85,247,.055),rgba(168,85,247,.015)) !important;
}


/* =========================================================
   FINAL LINKED DEVICE FULL CONTROL + CLEAN STATUS UI
   ========================================================= */

/* Clear parent/child relationship */
#clientsPanel tr.client-stack-primary td:first-child{
  border-left:3px solid rgba(168,85,247,.78) !important;
}
#clientsPanel tr.client-stack-child td:first-child{
  border-left:3px solid rgba(168,85,247,.38) !important;
  padding-left:12px !important;
}
#clientsPanel tr.client-stack-child{
  background:linear-gradient(90deg,rgba(168,85,247,.055),rgba(168,85,247,.012)) !important;
}

/* Child controls are full normal controls, same as primary */
#clientsPanel tr.client-stack-child input,
#clientsPanel tr.client-stack-child select,
#clientsPanel tr.client-stack-child button{
  opacity:1 !important;
}

/* UUID/status layout: no overlap between UUID, active/expired, LINKED and ADD */
#clientsPanel .client-uuid-stack-wrap{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
}
#clientsPanel .client-stack-branch{
  grid-column:1 / -1 !important;
  margin:0 0 1px 8px !important;
  color:#a855f7 !important;
  font-size:14px !important;
  line-height:1 !important;
}
#clientsPanel .client-uuid-main{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
  min-width:0 !important;
}
#clientsPanel .client-uuid-text{
  width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:10px !important;
  color:#fff !important;
}
#clientsPanel .client-uuid-meta{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  min-height:20px !important;
}
#clientsPanel .client-uuid-meta .chip,
#clientsPanel .client-person-stack-label,
#clientsPanel .client-device-name{
  position:static !important;
  transform:none !important;
  margin:0 !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
#clientsPanel .client-uuid-meta .chip{
  min-height:20px !important;
  padding:3px 7px !important;
  border-radius:999px !important;
  font-size:8.5px !important;
  font-weight:900 !important;
}
#clientsPanel .client-device-name{
  max-width:110px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Device Name is editable and visually distinct */
#clientsPanel tr.client-stack-child input[data-k="deviceName"]{
  border-color:rgba(59,130,246,.42) !important;
  background:rgba(59,130,246,.055) !important;
}
#clientsPanel tr.client-stack-child input[data-k="deviceName"]:focus{
  border-color:rgba(59,130,246,.92) !important;
  box-shadow:0 0 0 2px rgba(59,130,246,.12) !important;
}

/* ADD stays separate from status badges */
#clientsPanel .client-stack-tools{
  align-self:center !important;
}
#clientsPanel .client-stack-add{
  min-width:43px !important;
  height:28px !important;
  padding:0 8px !important;
  margin:0 !important;
  font-size:9px !important;
}

/* Linked child row still has its own full Actions */
#clientsPanel tr.client-stack-child .actions{
  opacity:1 !important;
  pointer-events:auto !important;
}


.client-device-current-uuid{
  margin:-4px 0 12px;
  padding:9px 10px;
  border-radius:9px;
  border:1px solid rgba(245,158,11,.28);
  background:rgba(245,158,11,.07);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.client-device-current-uuid b{
  color:#fbbf24;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.client-device-current-uuid code{
  color:#fff;
  font-size:11px;
  overflow-wrap:anywhere;
}


/* Linked stack: make it unmistakable that parent + child belong together */
#clientsPanel tr.client-stack-primary{
  border-top:1px solid rgba(168,85,247,.55) !important;
}
#clientsPanel tr.client-stack-primary td:first-child{
  box-shadow:inset 4px 0 0 rgba(168,85,247,.80) !important;
}

#clientsPanel tr.client-stack-child{
  background:linear-gradient(90deg,rgba(168,85,247,.085),rgba(168,85,247,.018)) !important;
}
#clientsPanel tr.client-stack-child td:first-child{
  box-shadow:inset 4px 0 0 rgba(168,85,247,.42) !important;
  position:relative !important;
}
#clientsPanel tr.client-stack-child td:first-child::after{
  content:"";
  position:absolute;
  left:12px;
  top:0;
  width:18px;
  height:50%;
  border-left:2px solid rgba(168,85,247,.55);
  border-bottom:2px solid rgba(168,85,247,.55);
  border-bottom-left-radius:7px;
  pointer-events:none;
}

#clientsPanel .client-same-person{
  display:inline-flex !important;
  align-items:center !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  border:1px solid rgba(168,85,247,.40) !important;
  background:rgba(168,85,247,.12) !important;
  color:#e9d5ff !important;
  font-size:8px !important;
  font-weight:900 !important;
  letter-spacing:.25px !important;
  white-space:nowrap !important;
}


/* Independent ADD permission */
[data-add-only].permission-hidden,
[data-add-only][hidden]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#usersPanel .permission-switch--add input:checked + span{
  color:#fff !important;
  border-color:rgba(16,185,129,.95) !important;
  background:linear-gradient(135deg,rgba(5,150,105,.96),rgba(16,185,129,.96)) !important;
  box-shadow:0 0 0 1px rgba(16,185,129,.15),0 6px 14px rgba(5,150,105,.20) !important;
}

/* Slightly wider Users table for WC NF AL EDIT ADD DEL */
#usersPanel .users-permissions-table{
  min-width:1510px !important;
}


/* ===== Stable linked-device family block ===== */
#clientRows tr.client-stack-member > td:first-child{
  border-left:3px solid rgba(168,85,247,.78) !important;
}
#clientRows tr.client-stack-primary > td{
  border-top:1px solid rgba(168,85,247,.52) !important;
}
#clientRows tr.client-stack-child > td{
  background:linear-gradient(90deg, rgba(168,85,247,.055), transparent 22%) !important;
}
#clientRows tr.client-stack-child .client-uuid-stack-wrap{
  padding-left:10px !important;
}
#clientRows tr.client-stack-child .client-stack-branch{
  color:#c084fc !important;
  font-weight:900 !important;
}
#clientRows .client-person-stack-label,
#clientRows .client-same-person{
  white-space:nowrap !important;
}


/* =========================================================
   PERMANENT LINKED PERSON SHAPE
   The group always looks like one block after reload/edit/save.
   ========================================================= */

#clientRows tr.client-stack-member > td{
  background-clip:padding-box !important;
}

#clientRows tr.client-stack-primary > td{
  border-top:2px solid rgba(168,85,247,.70) !important;
  background:linear-gradient(90deg,rgba(126,34,206,.095),rgba(126,34,206,.018)) !important;
}

#clientRows tr.client-stack-child > td{
  background:linear-gradient(90deg,rgba(126,34,206,.070),rgba(126,34,206,.010)) !important;
  border-top-color:rgba(168,85,247,.18) !important;
}

#clientRows tr.client-stack-member > td:first-child{
  border-left:4px solid rgba(168,85,247,.80) !important;
}

#clientRows tr.client-stack-child > td:first-child{
  padding-left:18px !important;
}

#clientRows tr.client-stack-child .client-uuid-stack-wrap{
  position:relative !important;
}

#clientRows tr.client-stack-child .client-uuid-stack-wrap::before{
  content:"";
  position:absolute;
  left:-11px;
  top:-15px;
  bottom:50%;
  width:11px;
  border-left:2px solid rgba(192,132,252,.70);
  border-bottom:2px solid rgba(192,132,252,.70);
  border-bottom-left-radius:7px;
  pointer-events:none;
}

#clientRows .client-person-stack-label{
  background:rgba(126,34,206,.28) !important;
  border-color:rgba(192,132,252,.72) !important;
  color:#f3e8ff !important;
  font-weight:900 !important;
}

#clientRows .client-same-person{
  background:rgba(126,34,206,.16) !important;
  border:1px solid rgba(192,132,252,.46) !important;
  color:#e9d5ff !important;
  font-weight:850 !important;
}

/* Keep ADD only on the parent so it's obvious where the family starts. */
#clientRows tr.client-stack-child .client-stack-add{
  display:none !important;
}

/* Do not let hover/edit state erase the family coloring. */
#clientRows tr.client-stack-primary.client-row-editing > td{
  background:linear-gradient(90deg,rgba(126,34,206,.13),rgba(126,34,206,.025)) !important;
}
#clientRows tr.client-stack-child.client-row-editing > td{
  background:linear-gradient(90deg,rgba(126,34,206,.095),rgba(126,34,206,.018)) !important;
}


/* Show / hide expired checkpoint */
.client-expired-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(148,163,184,.34);
  border-radius:9px;
  background:rgba(15,12,29,.72);
  color:#f8fafc;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  user-select:none;
}
.client-expired-toggle input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:#9333ea;
  cursor:pointer;
}
.client-expired-toggle:has(input:checked){
  border-color:rgba(168,85,247,.72);
  background:rgba(126,34,206,.18);
}


/* User Links player identity */
.user-links-table .user-link-player-name{
  font-weight:800;
  white-space:nowrap;
}
.user-links-table .user-link-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(168,85,247,.50);
  background:rgba(126,34,206,.15);
  color:#eadcff;
  font-size:10px;
  font-weight:900;
}
.user-links-table td[data-label="ID"]{
  white-space:nowrap;
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== SERVER GROUPS PRO MANAGER — FINAL OVERRIDE ===== */
.group-manager-backdrop{
  padding:20px !important;
  align-items:center !important;
  background:rgba(2,0,9,.78) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
.group-manager-modal{
  width:min(1080px,calc(100vw - 32px)) !important;
  max-width:1080px !important;
  max-height:calc(100dvh - 32px) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:20px !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,rgba(19,8,36,.985),rgba(7,5,18,.99)) !important;
  border:1px solid rgba(185,101,255,.42) !important;
  box-shadow:0 32px 100px rgba(0,0,0,.74),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.group-manager-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:16px !important;
}
.group-manager-head h3{margin:0 0 5px !important;font-size:23px !important;font-weight:900 !important;}
.group-manager-head .muted{margin:0 !important;font-size:12px !important;color:rgba(255,255,255,.62) !important;}
.group-manager-summary{
  flex:0 0 auto !important;
  padding:7px 11px !important;
  border-radius:999px !important;
  border:1px solid rgba(185,101,255,.28) !important;
  background:rgba(157,50,255,.12) !important;
  color:#e6c8ff !important;
  font-size:12px !important;
  font-weight:900 !important;
}
.group-manager-form{
  display:grid !important;
  grid-template-columns:minmax(210px,1.2fr) minmax(155px,.72fr) minmax(220px,1.2fr) 150px !important;
  gap:12px !important;
  align-items:end !important;
  padding:14px !important;
  margin:0 0 12px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.035) !important;
}
.group-manager-form .stack{min-width:0 !important;}
.group-manager-form label{font-size:11px !important;text-transform:uppercase !important;letter-spacing:.04em !important;color:rgba(255,255,255,.65) !important;}
.group-manager-modal input,.group-manager-modal select{
  height:40px !important;
  min-height:40px !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,rgba(58,34,82,.92),rgba(28,16,46,.96)) !important;
  border:1px solid rgba(255,255,255,.17) !important;
  color:#fff !important;
}
.group-manager-modal input:disabled,.group-manager-modal select:disabled{
  opacity:1 !important;
  cursor:default !important;
  color:rgba(255,255,255,.9) !important;
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}
.group-manager-add .btn,#gmAdd{
  width:100% !important;
  min-width:0 !important;
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border-radius:10px !important;
}
.group-manager-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:0 0 9px !important;
}
.group-manager-search-wrap{
  position:relative !important;
  width:min(360px,100%) !important;
}
.group-manager-search-wrap i{
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  color:rgba(255,255,255,.48) !important;
  font-size:17px !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.group-manager-search-wrap input{padding-left:38px !important;width:100% !important;}
.group-manager-hint{font-size:11px !important;color:rgba(255,255,255,.48) !important;}
.group-manager-columns{
  display:grid !important;
  grid-template-columns:minmax(190px,1.15fr) minmax(145px,.72fr) minmax(220px,1.2fr) 250px !important;
  gap:12px !important;
  padding:0 12px 7px !important;
  color:rgba(255,255,255,.52) !important;
  font-size:10px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}
.group-manager-list{
  flex:1 1 auto !important;
  min-height:220px !important;
  overflow:auto !important;
  padding:7px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  background:rgba(0,0,0,.14) !important;
}
.group-manager-row{
  display:grid !important;
  grid-template-columns:minmax(190px,1.15fr) minmax(145px,.72fr) minmax(220px,1.2fr) 250px !important;
  gap:12px !important;
  align-items:center !important;
  padding:9px 8px !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.075) !important;
  border-radius:0 !important;
  background:transparent !important;
  transition:background .15s ease,border-color .15s ease !important;
}
.group-manager-row:hover{background:rgba(157,50,255,.055) !important;}
.group-manager-row.is-editing{
  background:linear-gradient(90deg,rgba(39,121,255,.08),rgba(157,50,255,.08)) !important;
  box-shadow:inset 3px 0 0 rgba(70,139,255,.8) !important;
}
.group-manager-row:last-child{border-bottom:0 !important;}
.gm-field{min-width:0 !important;}
.gm-field::before{display:none !important;}
.group-manager-row-actions{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-end !important;
  gap:7px !important;
}
.group-manager-row-actions .action{
  width:auto !important;
  min-width:72px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  border-radius:9px !important;
  font-size:12px !important;
  white-space:nowrap !important;
}
.group-manager-row-actions .action[hidden]{display:none !important;}
.group-manager-row-actions .action i{font-size:15px !important;}
.group-manager-row-actions .action--safe{background:rgba(38,121,255,.18) !important;border-color:rgba(55,139,255,.58) !important;}
.group-manager-row-actions .action--primary{background:rgba(32,215,122,.16) !important;border-color:rgba(32,215,122,.55) !important;}
.group-manager-row-actions .action--muted{background:rgba(255,255,255,.065) !important;border-color:rgba(255,255,255,.18) !important;}
.group-manager-row-actions .action--danger{background:rgba(255,61,87,.13) !important;border-color:rgba(255,61,87,.48) !important;}
.group-manager-empty{
  min-height:210px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  color:rgba(255,255,255,.55) !important;
  text-align:center !important;
}
.group-manager-empty i{font-size:36px !important;color:rgba(191,92,255,.65) !important;}
.group-manager-empty strong{font-size:14px !important;color:rgba(255,255,255,.84) !important;}
.group-manager-empty span{font-size:12px !important;}
.group-manager-footer{margin-top:12px !important;justify-content:flex-end !important;}
.group-manager-footer .btn{width:auto !important;min-width:100px !important;height:38px !important;}

@media (max-width:900px){
  .group-manager-backdrop{padding:8px !important;align-items:flex-start !important;}
  .group-manager-modal{width:100% !important;max-width:100% !important;max-height:calc(100dvh - 16px) !important;padding:14px !important;}
  .group-manager-form{grid-template-columns:1fr 1fr !important;}
  .group-manager-add{grid-column:span 2 !important;}
  .group-manager-columns{display:none !important;}
  .group-manager-row{grid-template-columns:1fr 1fr !important;border:1px solid rgba(255,255,255,.09) !important;border-radius:12px !important;margin-bottom:8px !important;padding:10px !important;}
  .gm-field{position:relative !important;padding-top:16px !important;}
  .gm-field::before{display:block !important;content:attr(data-label) !important;position:absolute !important;top:0 !important;left:2px !important;font-size:9px !important;font-weight:900 !important;text-transform:uppercase !important;color:rgba(255,255,255,.48) !important;}
  .group-manager-row-actions{grid-column:1/-1 !important;justify-content:flex-start !important;}
  .group-manager-row-actions .action{flex:1 1 auto !important;}
}
@media (max-width:560px){
  .group-manager-head{align-items:flex-start !important;}
  .group-manager-head .muted{display:none !important;}
  .group-manager-form{grid-template-columns:1fr !important;padding:10px !important;}
  .group-manager-add{grid-column:auto !important;}
  .group-manager-toolbar{align-items:stretch !important;flex-direction:column !important;}
  .group-manager-search-wrap{width:100% !important;}
  .group-manager-hint{display:none !important;}
  .group-manager-row{grid-template-columns:1fr !important;}
  .group-manager-row-actions{grid-column:auto !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .group-manager-row-actions .action{width:100% !important;min-width:0 !important;}
  .group-manager-footer .btn{width:100% !important;}
}

/* ===== Extension Users stable mode + checkbox sizing ===== */
#extUsersPanel .ext-mode-toolbar{display:flex!important;align-items:flex-end!important;flex-wrap:wrap!important;}
#extUsersPanel .ext-mode-stack{min-width:220px!important;max-width:280px!important;}
#extUsersPanel #extMode,#extUsersPanel #peMode{min-width:180px!important;font-weight:900!important;}
#extUsersPanel input[type="checkbox"]{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;padding:0!important;appearance:auto!important;-webkit-appearance:checkbox!important;}
#extUsersPanel td.center input[type="checkbox"]{display:inline-block!important;vertical-align:middle!important;}

/* ===== Extension Users — professional table / browser cards FINAL ===== */
#extUsersPanel .table-wrap{
  overflow:auto !important;
  border-radius:16px !important;
  scrollbar-gutter:stable !important;
}
#extUsersPanel table.ext-users-table{
  width:100% !important;
  min-width:1760px !important;
  table-layout:fixed !important;
}
#extUsersPanel table.ext-users-table th,
#extUsersPanel table.ext-users-table td{
  vertical-align:top !important;
  overflow:visible !important;
}
#extUsersPanel table.ext-users-table th:nth-child(1),#extUsersPanel table.ext-users-table td:nth-child(1){width:105px!important;}
#extUsersPanel table.ext-users-table th:nth-child(2),#extUsersPanel table.ext-users-table td:nth-child(2){width:120px!important;}
#extUsersPanel table.ext-users-table th:nth-child(3),#extUsersPanel table.ext-users-table td:nth-child(3){width:125px!important;}
#extUsersPanel table.ext-users-table th:nth-child(4),#extUsersPanel table.ext-users-table td:nth-child(4){width:120px!important;}
#extUsersPanel table.ext-users-table th:nth-child(5),#extUsersPanel table.ext-users-table td:nth-child(5){width:170px!important;}
#extUsersPanel table.ext-users-table th:nth-child(6),#extUsersPanel table.ext-users-table td:nth-child(6){width:245px!important;}
#extUsersPanel table.ext-users-table th:nth-child(7),#extUsersPanel table.ext-users-table td:nth-child(7){width:300px!important;}
#extUsersPanel table.ext-users-table th:nth-child(8),#extUsersPanel table.ext-users-table td:nth-child(8){width:300px!important;}
#extUsersPanel table.ext-users-table th:nth-child(9),#extUsersPanel table.ext-users-table td:nth-child(9){width:80px!important;text-align:center!important;}
#extUsersPanel table.ext-users-table th:nth-child(10),#extUsersPanel table.ext-users-table td:nth-child(10){width:300px!important;}

#extUsersPanel .ext-pass-card,
#extUsersPanel .ext-browser-card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 0 8px !important;
  padding:10px 11px !important;
  border-radius:12px !important;
  border:1px solid rgba(191,107,255,.24) !important;
  background:linear-gradient(145deg,rgba(35,20,56,.82),rgba(20,14,37,.92)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
  overflow:hidden !important;
}
#extUsersPanel .ext-pass-card:last-child,
#extUsersPanel .ext-browser-card:last-child{margin-bottom:0!important;}
#extUsersPanel .ext-pass-card{line-height:1.3!important;}
#extUsersPanel .ext-pass-card .muted{font-size:11px!important;line-height:1.35!important;white-space:normal!important;}
#extUsersPanel .ext-pass-card .mono{font-size:12px!important;overflow-wrap:anywhere!important;}
#extUsersPanel .ext-pass-card .actions{margin-top:8px!important;display:flex!important;gap:7px!important;flex-wrap:wrap!important;justify-content:flex-start!important;}
#extUsersPanel .ext-pass-card .action{height:30px!important;min-height:30px!important;padding:0 9px!important;font-size:11px!important;}

#extUsersPanel .ext-browser-card{
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
}
#extUsersPanel .ext-browser-head{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  min-width:0 !important;
}
#extUsersPanel .ext-browser-icon{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:9px !important;
  color:#d8a8ff !important;
  background:rgba(156,58,255,.16) !important;
  border:1px solid rgba(190,95,255,.30) !important;
  font-size:15px !important;
}
#extUsersPanel .ext-browser-title{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
#extUsersPanel .ext-browser-title b{font-size:12px!important;color:#fff!important;}
#extUsersPanel .ext-browser-title .mono{
  max-width:155px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:11px !important;
  color:#c7b8db !important;
}
#extUsersPanel .ext-browser-meta{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:5px !important;
}
#extUsersPanel .ext-browser-meta > div{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:62px minmax(0,1fr) !important;
  align-items:start !important;
  gap:7px !important;
}
#extUsersPanel .ext-browser-meta span{
  color:rgba(255,255,255,.48) !important;
  font-size:10px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.03em !important;
}
#extUsersPanel .ext-browser-meta b{
  min-width:0 !important;
  color:rgba(255,255,255,.90) !important;
  font-size:11px !important;
  font-weight:700 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.35 !important;
}
#extUsersPanel .ext-browser-remove{
  align-self:flex-start !important;
  width:auto !important;
  min-width:92px !important;
  height:30px !important;
  min-height:30px !important;
  padding:0 10px !important;
  justify-content:center !important;
  font-size:11px !important;
}
#extUsersPanel .ext-browser-empty{
  display:inline-flex !important;
  align-items:center !important;
  min-height:38px !important;
  color:rgba(255,255,255,.48) !important;
}
#extUsersPanel td[data-label="Disabled"]{
  padding-top:22px !important;
}
#extUsersPanel td[data-label="Disabled"] input[type="checkbox"]{
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  min-height:17px !important;
  margin:0 !important;
}
#extUsersPanel .ext-row-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
  width:100% !important;
  min-width:0 !important;
}
#extUsersPanel .ext-row-actions .action{
  width:100% !important;
  min-width:0 !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 8px !important;
  justify-content:center !important;
  font-size:11px !important;
}

@media (max-width:1200px){
  #extUsersPanel table.ext-users-table{min-width:1600px!important;}
}
@media (max-width:760px){
  #extUsersPanel table.ext-users-table{min-width:0!important;}
  #extUsersPanel .ext-browser-title .mono{max-width:100%!important;}
  #extUsersPanel .ext-row-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #extUsersPanel td[data-label="Disabled"]{padding-top:8px!important;}
}

/* ===== EXTENSION USERS — CLEAN SINGLE LAYOUT ===== */
#extUsersPanel{
  padding:18px!important;
  overflow:visible!important;
}
#extUsersPanel > h2{
  margin:0 0 14px!important;
  font-size:22px!important;
}
#extUsersPanel .grid.grid-4{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(150px,1fr))!important;
  gap:10px!important;
  align-items:end!important;
}
#extUsersPanel .ext-mode-toolbar{
  display:grid!important;
  grid-template-columns:175px repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:end!important;
}
#extUsersPanel .ext-mode-toolbar .btn{
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
}
#extUsersPanel .ext-search-row{margin:10px 0 12px!important;}
#extUsersPanel .search-box,#extUsersPanel .search-box-wide{width:100%!important;max-width:none!important;}

#extUsersPanel .table-wrap{
  width:100%!important;
  max-width:100%!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:14px!important;
  background:rgba(6,4,18,.20)!important;
}
#extUsersPanel table.ext-users-table,
#extUsersPanel table.list.ext-users-table{
  display:table!important;
  width:100%!important;
  min-width:1440px!important;
  max-width:none!important;
  table-layout:fixed!important;
  border-collapse:collapse!important;
  border-spacing:0!important;
  margin:0!important;
}
#extUsersPanel table.ext-users-table col:nth-child(1){width:90px!important;}
#extUsersPanel table.ext-users-table col:nth-child(2){width:105px!important;}
#extUsersPanel table.ext-users-table col:nth-child(3){width:105px!important;}
#extUsersPanel table.ext-users-table col:nth-child(4){width:110px!important;}
#extUsersPanel table.ext-users-table col:nth-child(5){width:140px!important;}
#extUsersPanel table.ext-users-table col:nth-child(6){width:190px!important;}
#extUsersPanel table.ext-users-table col:nth-child(7){width:210px!important;}
#extUsersPanel table.ext-users-table col:nth-child(8){width:240px!important;}
#extUsersPanel table.ext-users-table col:nth-child(9){width:70px!important;}
#extUsersPanel table.ext-users-table col:nth-child(10){width:180px!important;}

#extUsersPanel table.ext-users-table thead{display:table-header-group!important;}
#extUsersPanel table.ext-users-table tbody{display:table-row-group!important;}
#extUsersPanel table.ext-users-table tr{
  display:table-row!important;
  height:auto!important;
  min-height:0!important;
  background:rgba(255,255,255,.018)!important;
}
#extUsersPanel table.ext-users-table tbody tr:nth-child(even){background:rgba(255,255,255,.028)!important;}
#extUsersPanel table.ext-users-table tbody tr:hover{background:rgba(153,63,255,.055)!important;}
#extUsersPanel table.ext-users-table th,
#extUsersPanel table.ext-users-table td{
  display:table-cell!important;
  position:static!important;
  float:none!important;
  transform:none!important;
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  padding:10px 8px!important;
  border-bottom:1px solid rgba(255,255,255,.085)!important;
  overflow:hidden!important;
  vertical-align:middle!important;
  font-size:11px!important;
  line-height:1.25!important;
}
#extUsersPanel table.ext-users-table th{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  background:rgba(12,6,30,.98)!important;
  color:#fff!important;
  font-weight:900!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#extUsersPanel table.ext-users-table th:nth-child(9),
#extUsersPanel table.ext-users-table th:nth-child(10){text-align:center!important;}

#extUsersPanel table.ext-users-table td input:not([type="checkbox"]),
#extUsersPanel table.ext-users-table td select{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:6px 9px!important;
  box-sizing:border-box!important;
  font-size:11px!important;
  border-radius:9px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#extUsersPanel table.ext-users-table td[data-label="Expires"] input[type="datetime-local"]{
  font-size:10px!important;
  padding:5px 7px!important;
}
#extUsersPanel .ext-player-cell,
#extUsersPanel .ext-player-cell>span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Passwords and browsers grow only as much as their cards need. */
#extUsersPanel table.ext-users-table td[data-label="Passwords"],
#extUsersPanel table.ext-users-table td[data-label="Browsers"]{
  vertical-align:top!important;
  padding:8px!important;
  overflow:hidden!important;
}
#extUsersPanel .ext-pass-card,
#extUsersPanel .ext-browser-card{
  position:static!important;
  float:none!important;
  transform:none!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 8px!important;
  padding:10px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border-radius:11px!important;
}
#extUsersPanel .ext-pass-card:last-child,
#extUsersPanel .ext-browser-card:last-child{margin-bottom:0!important;}

#extUsersPanel .ext-pass-card>div:first-child b{font-size:11px!important;line-height:1.2!important;}
#extUsersPanel .ext-pass-card>.mono{
  display:block!important;
  width:100%!important;
  font-size:9.5px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#extUsersPanel .ext-pass-badges{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:4px!important;
  margin:6px 0!important;
}
#extUsersPanel .ext-badge{
  display:inline-flex!important;
  align-items:center!important;
  height:20px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  font-size:9px!important;
  font-weight:900!important;
}
#extUsersPanel .ext-pass-card .actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
  width:100%!important;
  margin:5px 0 0!important;
}
#extUsersPanel .ext-pass-card .actions .action{
  width:100%!important;
  min-width:0!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 5px!important;
  justify-content:center!important;
  overflow:hidden!important;
}
#extUsersPanel .ext-pass-card .actions .label{font-size:8.5px!important;white-space:nowrap!important;}

/* Browser card: ID + IP + Last Seen only. */
#extUsersPanel .ext-browser-head{
  display:grid!important;
  grid-template-columns:27px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  margin:0 0 8px!important;
}
#extUsersPanel .ext-browser-icon{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
}
#extUsersPanel .ext-browser-title{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
#extUsersPanel .ext-browser-title b{display:block!important;font-size:10.5px!important;line-height:1.15!important;margin-bottom:2px!important;}
#extUsersPanel .ext-browser-title .mono{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  font-size:8.5px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#extUsersPanel .ext-browser-meta.ext-browser-meta-simple{
  display:block!important;
  width:100%!important;
  margin:0!important;
}
#extUsersPanel .ext-browser-meta.ext-browser-meta-simple>div{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
  width:100%!important;
  min-height:20px!important;
  padding:2px 0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
}
#extUsersPanel .ext-browser-meta.ext-browser-meta-simple span{
  font-size:8px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  color:rgba(255,255,255,.62)!important;
}
#extUsersPanel .ext-browser-meta.ext-browser-meta-simple b{
  display:block!important;
  min-width:0!important;
  width:100%!important;
  font-size:9px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#extUsersPanel .ext-browser-meta.ext-browser-meta-simple .ext-browser-time{font-size:8.5px!important;}
#extUsersPanel .ext-browser-remove{
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  height:27px!important;
  min-height:27px!important;
  margin:8px 0 0!important;
  padding:0 7px!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
#extUsersPanel .ext-browser-remove .label{font-size:8.5px!important;white-space:nowrap!important;}
#extUsersPanel .ext-browser-empty{
  display:flex!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:34px!important;
  padding:0 10px!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 auto!important;
  font-size:9px!important;
  white-space:nowrap!important;
}

#extUsersPanel table.ext-users-table td[data-label="Disabled"]{
  text-align:center!important;
  vertical-align:middle!important;
}
#extUsersPanel table.ext-users-table td[data-label="Disabled"] input[type="checkbox"]{
  display:inline-block!important;
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  padding:0!important;
  margin:0!important;
}
#extUsersPanel table.ext-users-table td[data-label="Actions"]{vertical-align:middle!important;}
#extUsersPanel .ext-row-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
}
#extUsersPanel .ext-row-actions .action{
  width:100%!important;
  min-width:0!important;
  height:29px!important;
  min-height:29px!important;
  padding:0 5px!important;
  justify-content:center!important;
  overflow:hidden!important;
}
#extUsersPanel .ext-row-actions .label{font-size:9px!important;white-space:nowrap!important;}

@media(max-width:1100px){
  #extUsersPanel .grid.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #extUsersPanel .ext-mode-toolbar{grid-template-columns:1fr 1fr!important;}
}
@media(max-width:700px){
  #extUsersPanel .grid.grid-4,#extUsersPanel .ext-mode-toolbar{grid-template-columns:1fr!important;}
  #extUsersPanel table.ext-users-table{min-width:1440px!important;}
}



/* ===== Create Users audit + simplified Extension create form ===== */
#createUsersPanel{overflow:hidden!important}
.create-users-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.create-users-head h2{margin:0 0 4px;font-size:23px}
.create-users-tools{display:flex;gap:10px;align-items:center;min-width:min(520px,45vw)}
.create-users-tools input{min-width:260px;flex:1}
.create-users-tools .btn{height:40px!important;min-width:112px}
.create-users-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
.create-stat{padding:12px 14px;border:1px solid rgba(180,108,255,.22);border-radius:12px;background:rgba(255,255,255,.035)}
.create-stat span{display:block;color:rgba(255,255,255,.62);font-size:11px;font-weight:800;text-transform:uppercase}
.create-stat strong{display:block;margin-top:4px;font-size:18px}
.create-users-table{min-width:1080px!important;width:100%!important;table-layout:fixed!important}
.create-users-table th:nth-child(1),.create-users-table td:nth-child(1){width:150px}
.create-users-table th:nth-child(2),.create-users-table td:nth-child(2){width:150px}
.create-users-table th:nth-child(3),.create-users-table td:nth-child(3){width:140px}
.create-users-table th:nth-child(4),.create-users-table td:nth-child(4){width:110px}
.create-users-table th:nth-child(5),.create-users-table td:nth-child(5){width:120px}
.create-users-table th:nth-child(6),.create-users-table td:nth-child(6){width:100px}
.create-users-table th:nth-child(7),.create-users-table td:nth-child(7){width:110px;text-align:center}
.create-users-table th:nth-child(8),.create-users-table td:nth-child(8){width:150px}
.create-users-table th:nth-child(9),.create-users-table td:nth-child(9){width:100px}
.create-mode,.create-status{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;border:1px solid rgba(255,255,255,.18)}
.create-mode--normal{background:rgba(155,44,255,.15);border-color:rgba(194,92,255,.42)}
.create-mode--admin{background:rgba(38,121,255,.16);border-color:rgba(38,121,255,.50)}
.create-mode--private{background:rgba(255,155,36,.14);border-color:rgba(255,155,36,.50)}
.create-status--active{background:rgba(32,215,122,.14);border-color:rgba(32,215,122,.5);color:#9ff0c7}
.create-status--expired,.create-status--disabled{background:rgba(255,61,87,.13);border-color:rgba(255,61,87,.5);color:#ffc1ca}

/* after removing Password Name, keep the create form balanced */
#extUsersPanel .grid.grid-4:first-of-type{
  grid-template-columns:minmax(180px,1.05fr) minmax(150px,.85fr) minmax(150px,.85fr) minmax(200px,1.2fr)!important;
}
@media(max-width:900px){
  .create-users-head{align-items:stretch;flex-direction:column}
  .create-users-tools{min-width:0;width:100%}
  .create-users-stats{grid-template-columns:1fr}
}


/* ===== Create Users self-registration audit ===== */
.create-users-table{min-width:1420px!important}
.create-users-table th:nth-child(1),.create-users-table td:nth-child(1){width:145px!important}
.create-users-table th:nth-child(2),.create-users-table td:nth-child(2){width:135px!important}
.create-users-table th:nth-child(3),.create-users-table td:nth-child(3){width:125px!important}
.create-users-table th:nth-child(4),.create-users-table td:nth-child(4){width:110px!important}
.create-users-table th:nth-child(5),.create-users-table td:nth-child(5){width:145px!important}
.create-users-table th:nth-child(6),.create-users-table td:nth-child(6){width:105px!important}
.create-users-table th:nth-child(7),.create-users-table td:nth-child(7){width:115px!important}
.create-users-table th:nth-child(8),.create-users-table td:nth-child(8){width:105px!important}
.create-users-table th:nth-child(9),.create-users-table td:nth-child(9){width:95px!important;text-align:center}
.create-users-table th:nth-child(10),.create-users-table td:nth-child(10){width:145px!important}
.create-users-table th:nth-child(11),.create-users-table td:nth-child(11){width:100px!important}
.create-source{display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(38,121,255,.14);border:1px solid rgba(38,121,255,.45);font-size:10px;font-weight:900;white-space:nowrap}
.create-mode--none{background:rgba(255,155,36,.12)!important;border-color:rgba(255,155,36,.5)!important;color:#ffd594!important}
.create-status--pending{background:rgba(255,155,36,.12);border-color:rgba(255,155,36,.5);color:#ffd594}
.create-status--deleted{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.35);color:#cbd5e1}


/* ===== Create Users access control ===== */
#createUsersPanel .create-users-table{min-width:1500px!important;}
#createUsersPanel .create-access-control{display:flex;align-items:center;gap:8px;min-width:210px;}
#createUsersPanel .create-access-select{width:126px!important;min-width:126px!important;height:36px!important;min-height:36px!important;padding:6px 28px 6px 10px!important;font-size:12px!important;font-weight:900!important;}
#createUsersPanel .create-access-apply{height:36px!important;min-height:36px!important;min-width:72px!important;padding:0 12px!important;white-space:nowrap!important;}
#createUsersPanel .create-users-table th:last-child,#createUsersPanel .create-users-table td:last-child{min-width:220px!important;}

/* ===== Clear Extension User / Pass edit controls ===== */
.ext-pro-modal .ext-access-editor{grid-column:1/-1}
.ext-pro-modal .ext-access-flags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.ext-pro-modal .ext-access-flags>span{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:7px 9px;border:1px solid rgba(148,163,184,.28);border-radius:10px;background:rgba(255,255,255,.035);font-weight:950;cursor:pointer;user-select:none;transition:.15s}
.ext-pro-modal .ext-access-flags>span i{width:16px;height:16px;border:2px solid #8f82a7;border-radius:4px;background:#fff;position:relative;flex:0 0 16px}
.ext-pro-modal .ext-access-flags>span small{font-size:9px;opacity:.65}
.ext-pro-modal .ext-access-flags>span.active{border-color:#8b35ff;background:rgba(139,53,255,.16);box-shadow:0 0 0 1px rgba(139,53,255,.16) inset}
.ext-pro-modal .ext-access-flags>span.active i{border-color:#8b35ff;background:#8b35ff}
.ext-pro-modal .ext-access-flags>span.active i:after{content:'✓';position:absolute;inset:-4px 0 0;text-align:center;color:#fff;font-size:13px;font-style:normal;font-weight:1000}
.ext-pro-modal .ext-state-toggle{display:flex!important;align-items:center!important;gap:10px!important;margin:12px 0!important;padding:11px 12px!important;border:1px solid rgba(148,163,184,.25)!important;border-radius:10px!important;background:rgba(255,255,255,.035)!important;cursor:pointer!important}
.ext-pro-modal .ext-state-toggle>input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.ext-pro-modal .ext-state-toggle .ext-check-box{width:20px!important;height:20px!important;min-width:20px!important;border:2px solid #8f82a7!important;border-radius:5px!important;background:#fff!important;position:relative!important}
.ext-pro-modal .ext-state-toggle>input:checked+.ext-check-box{background:#8b35ff!important;border-color:#8b35ff!important}
.ext-pro-modal .ext-state-toggle>input:checked+.ext-check-box:after{content:'✓';position:absolute;left:3px;top:-2px;color:#fff;font-size:15px;font-weight:1000}
.ext-pro-modal .ext-state-toggle b{display:block;font-size:13px}
.ext-pro-modal .ext-state-toggle small{display:block;margin-top:2px;color:#aaa0bc;font-size:10px;font-weight:700}
.ext-pro-modal .modal-x{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;border-radius:9px!important;font-size:20px!important;line-height:1!important}
.ext-pro-modal .ext-modal-head{align-items:flex-start!important;gap:12px!important}
.ext-pro-modal .ext-pass-status-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:10px 0 12px!important}
.ext-pro-modal .ext-stat{min-width:0!important;padding:9px 10px!important;border:1px solid rgba(148,163,184,.2)!important;border-radius:9px!important;background:rgba(255,255,255,.03)!important}
.ext-pro-modal .ext-stat span,.ext-pro-modal .ext-stat b{display:block!important;overflow-wrap:anywhere!important}
@media(max-width:650px){.ext-pro-modal .ext-access-flags{grid-template-columns:1fr}.ext-pro-modal .ext-pass-status-grid{grid-template-columns:1fr!important}}

/* ===== Create Users pending queue actions ===== */
#createUsersPanel .create-users-tools{flex-wrap:wrap!important}
#createUsersPanel .create-users-delete-all{background:linear-gradient(135deg,#d7193f,#8f102c)!important;border:1px solid rgba(255,76,108,.65)!important;color:#fff!important;min-width:118px!important}
#createUsersPanel .create-users-table{min-width:1620px!important}
#createUsersPanel .create-users-table th:nth-child(12),#createUsersPanel .create-users-table td:nth-child(12){width:230px!important;min-width:230px!important}
#createUsersPanel .create-users-table th:nth-child(13),#createUsersPanel .create-users-table td:nth-child(13){width:92px!important;min-width:92px!important;text-align:center!important}
#createUsersPanel .create-user-delete{height:36px!important;min-height:36px!important;min-width:74px!important;padding:0 12px!important;white-space:nowrap!important}


/* ===== Create Users pending password column ===== */
#createUsersPanel .create-users-table{min-width:1760px!important}
#createUsersPanel .create-users-table th:nth-child(3),
#createUsersPanel .create-users-table td:nth-child(3){width:190px!important;min-width:190px!important}
#createUsersPanel .create-password-cell{display:flex;align-items:center;gap:8px;min-width:0}
#createUsersPanel .create-password-value{display:block;flex:1 1 auto;min-width:0;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:7px 9px;border-radius:8px;border:1px solid rgba(34,197,94,.34);background:rgba(34,197,94,.08);color:#5cff98;font-size:12px;font-weight:900}
#createUsersPanel .create-password-copy{flex:0 0 auto;height:32px!important;min-height:32px!important;min-width:52px!important;padding:0 9px!important;background:rgba(38,121,255,.18)!important;border-color:rgba(38,121,255,.58)!important}

/* ===== Create Users FINAL compact professional layout ===== */
#createUsersPanel{padding:16px!important}
#createUsersPanel .create-users-head{align-items:center!important;margin-bottom:12px!important}
#createUsersPanel .create-users-head h2{font-size:22px!important}
#createUsersPanel .create-users-tools{min-width:0!important;width:min(520px,48%)!important;flex-wrap:nowrap!important}
#createUsersPanel .create-users-tools input{min-width:160px!important;height:38px!important}
#createUsersPanel .create-users-tools .btn{height:38px!important;min-width:auto!important;padding:0 14px!important}
#createUsersPanel .create-users-stats{gap:10px!important;margin-bottom:12px!important}
#createUsersPanel .create-stat{padding:10px 13px!important;min-height:58px!important}
#createUsersPanel .create-users-table-wrap{overflow-x:auto!important;border-radius:12px!important}
#createUsersPanel .create-users-table{width:100%!important;min-width:1480px!important;table-layout:fixed!important}
#createUsersPanel .create-users-table th,#createUsersPanel .create-users-table td{padding:10px 8px!important;vertical-align:middle!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#createUsersPanel .create-users-table th{font-size:11px!important;text-align:left!important}
#createUsersPanel .create-users-table td{font-size:11px!important}
#createUsersPanel .create-users-table th:nth-child(1),#createUsersPanel .create-users-table td:nth-child(1){width:135px!important}
#createUsersPanel .create-users-table th:nth-child(2),#createUsersPanel .create-users-table td:nth-child(2){width:115px!important}
#createUsersPanel .create-users-table th:nth-child(3),#createUsersPanel .create-users-table td:nth-child(3){width:170px!important;min-width:0!important}
#createUsersPanel .create-users-table th:nth-child(4),#createUsersPanel .create-users-table td:nth-child(4){width:105px!important}
#createUsersPanel .create-users-table th:nth-child(5),#createUsersPanel .create-users-table td:nth-child(5){width:90px!important}
#createUsersPanel .create-users-table th:nth-child(6),#createUsersPanel .create-users-table td:nth-child(6){width:110px!important}
#createUsersPanel .create-users-table th:nth-child(7),#createUsersPanel .create-users-table td:nth-child(7){width:88px!important;text-align:left!important}
#createUsersPanel .create-users-table th:nth-child(8),#createUsersPanel .create-users-table td:nth-child(8){width:95px!important}
#createUsersPanel .create-users-table th:nth-child(9),#createUsersPanel .create-users-table td:nth-child(9){width:90px!important;text-align:center!important}
#createUsersPanel .create-users-table th:nth-child(10),#createUsersPanel .create-users-table td:nth-child(10){width:82px!important;text-align:center!important}
#createUsersPanel .create-users-table th:nth-child(11),#createUsersPanel .create-users-table td:nth-child(11){width:105px!important}
#createUsersPanel .create-users-table th:nth-child(12),#createUsersPanel .create-users-table td:nth-child(12){width:90px!important;min-width:0!important;text-align:center!important}
#createUsersPanel .create-users-table th:nth-child(13),#createUsersPanel .create-users-table td:nth-child(13){width:190px!important;min-width:0!important;text-align:left!important}
#createUsersPanel .create-users-table th:nth-child(14),#createUsersPanel .create-users-table td:nth-child(14){width:78px!important;min-width:0!important;text-align:center!important}
#createUsersPanel .create-password-cell{display:grid!important;grid-template-columns:minmax(0,1fr) 48px!important;gap:6px!important;width:100%!important}
#createUsersPanel .create-password-value{width:100%!important;max-width:none!important;padding:6px 8px!important;font-size:11px!important}
#createUsersPanel .create-password-copy{width:48px!important;min-width:48px!important;height:30px!important;min-height:30px!important;padding:0 6px!important}
#createUsersPanel .create-source,#createUsersPanel .create-mode,#createUsersPanel .create-status{font-size:9px!important;padding:4px 7px!important}
#createUsersPanel .create-access-control{display:grid!important;grid-template-columns:minmax(0,1fr) 58px!important;gap:6px!important;width:100%!important;min-width:0!important}
#createUsersPanel .create-access-select{width:100%!important;min-width:0!important;height:32px!important;min-height:32px!important;padding:4px 24px 4px 8px!important;font-size:10px!important}
#createUsersPanel .create-access-apply{width:58px!important;min-width:58px!important;height:32px!important;min-height:32px!important;padding:0 6px!important;font-size:10px!important}
#createUsersPanel .create-user-delete{width:64px!important;min-width:64px!important;height:32px!important;min-height:32px!important;padding:0 6px!important;font-size:10px!important}
@media(max-width:900px){#createUsersPanel .create-users-tools{width:100%!important;flex-wrap:wrap!important}}

/* Owner update control */
#dsyUpdateControl{display:grid;grid-template-columns:minmax(230px,1fr) auto;gap:12px 20px;margin:12px 0;padding:16px 18px;border:1px solid rgba(176,111,255,.34);border-radius:14px;background:linear-gradient(120deg,rgba(23,15,41,.94),rgba(11,10,23,.92));box-shadow:0 10px 28px rgba(0,0,0,.13);color:#eee7fa}
#dsyUpdateControl .dsy-update-overview{display:flex;align-items:center;gap:12px;min-width:0}
#dsyUpdateControl .dsy-update-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid rgba(185,121,255,.27);border-radius:11px;background:rgba(143,59,230,.14);color:#cd9eff;font-size:24px}
#dsyUpdateControl .dsy-update-heading{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#dsyUpdateControl .dsy-update-heading strong{font-size:14px;font-weight:850;letter-spacing:.01em}
#dsyUpdateControl .dsy-update-state{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid rgba(148,163,184,.3);border-radius:999px;color:#c3bacf;font-size:10px;font-weight:850;line-height:1.3;white-space:nowrap}
#dsyUpdateControl[data-ready="true"][data-updating="false"] .dsy-update-state{color:#69e9a2;border-color:rgba(54,211,133,.36);background:rgba(32,149,95,.1)}
#dsyUpdateControl[data-ready="true"][data-updating="true"] .dsy-update-state{color:#ffd084;border-color:rgba(245,169,56,.4);background:rgba(179,116,24,.13)}
#dsyUpdateControl .dsy-update-overview p{margin:5px 0 0;color:#bfb3d0;font-size:12px;line-height:1.45}
#dsyUpdateControl .dsy-update-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
#dsyUpdateControl .dsy-update-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px!important;min-height:38px!important;min-width:0!important;padding:0 13px!important;border-radius:10px!important;white-space:nowrap;font-size:12px!important;line-height:1.2;cursor:pointer}
#dsyUpdateControl .dsy-update-actions .btn:disabled{cursor:wait;opacity:.5;filter:saturate(.55);transform:none;box-shadow:none}
#dsyUpdateControl .dsy-update-toggle{background:linear-gradient(135deg,#8b2bdd,#6421aa)!important;border-color:rgba(202,147,255,.42)!important}
#dsyUpdateControl[data-updating="true"] .dsy-update-toggle{background:linear-gradient(135deg,#8e5c1e,#634016)!important;border-color:rgba(255,197,104,.4)!important}
#dsyUpdateControl .dsy-update-track{display:inline-flex;align-items:center;width:28px;height:16px;padding:2px;border-radius:999px;background:rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;flex:0 0 28px}
#dsyUpdateControl .dsy-update-track>span{width:12px;height:12px;border-radius:50%;background:#eee8f6;transition:transform .16s ease}
#dsyUpdateControl[data-updating="true"] .dsy-update-track>span{transform:translateX(12px);background:#ffe1a5}
#dsyUpdateControl .dsy-update-options{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-left:52px}
#dsyUpdateControl .dsy-update-options label{display:inline-flex;align-items:center;gap:8px;margin:0;color:#e4daef;font-size:12px;line-height:1.4;cursor:pointer}
#dsyUpdateControl .dsy-update-options input{appearance:auto!important;position:static!important;opacity:1!important;width:15px!important;height:15px!important;min-width:15px!important;min-height:15px!important;margin:0!important;padding:0!important;accent-color:#a959eb;cursor:pointer}
#dsyUpdateControl .dsy-update-options small,#dsyUpdateControl .dsy-update-changed{color:#9789ac;font-size:10px;line-height:1.4}
#dsyUpdateControl .dsy-update-changed{text-align:right;align-self:center}
#dsyUpdateControl .dsy-update-error{grid-column:1/-1;margin:0;padding:9px 11px;border:1px solid rgba(255,116,132,.3);border-radius:9px;background:rgba(158,33,51,.11);color:#ffb7c1;font-size:12px;line-height:1.5}
#dsyUpdateControl .dsy-update-error[hidden]{display:none!important}
#dsyUpdateControl button:focus-visible,#dsyUpdateControl input:focus-visible{outline:2px solid #e1b4ff;outline-offset:3px}
@media(max-width:850px){#dsyUpdateControl{grid-template-columns:1fr}#dsyUpdateControl .dsy-update-actions{justify-content:flex-start}#dsyUpdateControl .dsy-update-options{padding-left:0}#dsyUpdateControl .dsy-update-changed{text-align:left}}
@media(max-width:420px){#dsyUpdateControl{padding:13px}#dsyUpdateControl .dsy-update-actions{display:grid;grid-template-columns:1fr;width:100%}#dsyUpdateControl .dsy-update-actions .btn{width:100%}#dsyUpdateControl .dsy-update-options small{display:none}}