/* ============================================================
   Shubh Ventures — Roles & Permissions v3.0 (sv-access-v3.css)
   Loaded AFTER sv-access.css (v2.0). Only adds styles for the new v3 parts and
   a few polish overrides, all scoped to html.sva3 so the v2.0 fallback is untouched.
   Uses the panel's theme tokens (--surface*, --border*, --text, --muted, --accent*,
   --green/--red/--amber) so light, dark and the sv-ui skins all work.
   ============================================================ */
html.sva3 #sva .sr-only,.sva3-menu .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- focus rings (keyboard only) ---------- */
html.sva3 #sva :is(button,a,select,input,textarea,[tabindex]):focus-visible,
.sva3-dlgwrap :is(button,a,select,input,textarea):focus-visible,
.sva3-menu button:focus-visible,#sva3-toasts button:focus-visible{
  outline:2px solid var(--accent,#4a58d4)!important;outline-offset:2px;box-shadow:0 0 0 4px var(--ring,rgba(74,88,212,.3))!important;border-radius:10px}
html.sva3 #sva .sva-sw:focus-visible{border-radius:999px}

/* ---------- header extras ---------- */
html.sva3 .sva-head-a{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sva3-hbtn{display:inline-flex;align-items:center;gap:6px;border-radius:999px!important}
.sva3-hbtn span{font-size:.78rem}
html.sva3 .sva-views{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.sva3 .sva-views::-webkit-scrollbar{display:none}
.sva3-vbadge{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;background:var(--red,#c8414f);color:#fff;margin-left:2px;line-height:1}

/* ---------- role list toolbar ---------- */
.sva3-rtool{display:flex;flex-direction:column;gap:8px;padding:4px 4px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.sva3-rsearch,.sva3-rsort{position:relative;display:flex;align-items:center}
.sva3-rsearch svg,.sva3-rsort svg{position:absolute;left:11px;color:var(--faint);pointer-events:none}
.sva3-rsearch input,.sva3-rsort select{padding-left:32px!important;border-radius:12px!important;font-size:.82rem!important;height:36px}
.sva3-rsort select{cursor:pointer}
.sva3-rfl{display:flex;gap:4px;flex-wrap:wrap}
#sva .sva3-rflb{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:999px;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s,transform .16s var(--spring,cubic-bezier(.32,.72,0,1))}
#sva .sva3-rflb em{font-style:normal;opacity:.7;margin-left:2px}
#sva .sva3-rflb:hover{color:var(--text);border-color:var(--border-strong);transform:translateY(-1px)}
#sva .sva3-rflb.on{background:var(--accent-soft);color:var(--accent-text,var(--accent));border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.sva3-rnone{padding:14px 10px;text-align:center}
.sva3-rcount{text-align:center;margin:4px 0 2px}
html.sva3 .sva-rw[draggable="true"]{cursor:grab}
html.sva3 .sva-rw.dragging{opacity:.55;transform:scale(.98)}

/* risk band pill */
.sva3-band{display:inline-flex;align-items:center;font-size:.62rem;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.sva3-band.b-low{background:var(--green-bg);color:var(--green)}
.sva3-band.b-medium{background:var(--blue-bg,rgba(46,116,201,.09));color:var(--blue,#2e74c9)}
.sva3-band.b-high{background:var(--amber-bg);color:var(--amber)}
.sva3-band.b-critical{background:var(--red-bg);color:var(--red)}
html.sva3 .sva-r-m{flex-wrap:wrap;align-items:center;row-gap:4px}

/* ---------- editor: risk strip ---------- */
.sva3-risk{margin:12px 0 4px;padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.sva3-risk-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;gap:2px;background:var(--surface-3)}
.sva3-risk-bar i{display:block;min-width:3px;transition:flex-grow .4s var(--ease-out,ease)}
.sva3-risk-bar i.t-read{background:var(--green)}.sva3-risk-bar i.t-write{background:var(--accent)}
.sva3-risk-bar i.t-sensitive{background:var(--amber)}.sva3-risk-bar i.t-critical{background:var(--red)}
.sva3-risk-bar i.t-none{flex-grow:1;background:transparent}
.sva3-risk-l{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#sva .sva3-tierchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface-elevated);color:var(--text-body);
  font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:999px;cursor:pointer;transition:transform .16s var(--spring,ease),border-color .16s,background .16s}
#sva .sva3-tierchip i{width:8px;height:8px;border-radius:50%;display:inline-block}
#sva .sva3-tierchip.t-read i{background:var(--green)}.sva3-tierchip.t-write i{background:var(--accent)}
#sva .sva3-tierchip.t-sensitive i{background:var(--amber)}.sva3-tierchip.t-critical i{background:var(--red)}
#sva .sva3-tierchip b{font-variant-numeric:tabular-nums;color:var(--text)}
#sva .sva3-tierchip:hover{transform:translateY(-1px);border-color:var(--border-strong)}
#sva .sva3-tierchip.on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent-text,var(--accent))}
.sva3-risk-s{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
#sva .sva3-fix{display:inline-flex;align-items:center;gap:6px;border:1px dashed color-mix(in srgb,var(--amber) 60%,transparent);background:var(--amber-bg);color:var(--amber);
  font-size:.74rem;font-weight:700;padding:5px 10px;border-radius:999px;cursor:pointer;transition:transform .16s}
#sva .sva3-fix:hover{transform:translateY(-1px)}
.sva3-active-f{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;padding:8px 12px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text,var(--accent));font-size:.8rem}
.sva3-tiernote{margin:8px 4px 0}

/* section select-all box */
#sva .sva3-secbox{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-strong);background:var(--surface-elevated);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex:0 0 auto;align-self:center;color:#fff;transition:background .16s,border-color .16s,transform .16s var(--spring,ease)}
#sva .sva3-secbox:hover{border-color:var(--accent);transform:scale(1.06)}
#sva .sva3-secbox.on{background:var(--accent);border-color:var(--accent)}
#sva .sva3-secbox.mixed{border-color:var(--accent)}
#sva .sva3-secbox.mixed i{width:10px;height:2.5px;border-radius:2px;background:var(--accent);display:block}
html.sva3 .sva-sec-h{align-items:center}

/* ---------- more menu ---------- */
.sva3-more{position:relative;display:inline-flex}
.sva3-menu{position:fixed;z-index:1150;min-width:240px;padding:6px;border-radius:16px;border:1px solid var(--glass-border,var(--border));
  background:var(--glass-strong,var(--surface-elevated));backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--shadow-3);animation:sva3-pop .16s var(--ease-out,ease) both;color:var(--text)}
.sva3-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:var(--text-body);font:inherit;font-size:.84rem;padding:9px 11px;border-radius:10px;cursor:pointer}
.sva3-menu button:hover:not([disabled]),.sva3-menu button:focus-visible{background:var(--hover);color:var(--text)}
.sva3-menu button[disabled]{opacity:.45;cursor:not-allowed}
.sva3-menu svg{color:var(--muted);flex:0 0 auto}
@keyframes sva3-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- save bar undo ---------- */
.sva3-undo{display:inline-flex;align-items:center;gap:6px}

/* ---------- history ---------- */
.sva3-hcount{margin:0 4px 8px}
.sva3-hact{display:inline-block;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;border-radius:6px;background:var(--surface-2);color:var(--muted);margin-right:4px}

/* ---------- compare ---------- */
.sva3-cmp-pick{padding:14px 16px;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.sva3-cmp-ph{display:flex;flex-direction:column;gap:2px}
.sva3-cmp-tool{margin:0!important}
.sva3-chk{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-body);cursor:pointer;white-space:nowrap}
.sva3-chk input{width:16px;height:16px;accent-color:var(--accent)}
.sva3-cmp-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:10px}
.sva3-cmp-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:var(--surface-solid);box-shadow:var(--shadow-1)}
.sva3-cmp-n{margin:4px 4px 8px}
.sva3-cmp-wrap{overflow:auto;max-height:70vh;padding:0!important;border-radius:18px}
table.sva3-cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.82rem}
table.sva3-cmp thead th{position:sticky;top:0;z-index:2;background:var(--surface-elevated);border-bottom:1px solid var(--border-strong);padding:10px 12px;text-align:center;vertical-align:bottom;min-width:120px}
table.sva3-cmp thead th span{display:block;font-weight:500}
table.sva3-cmp .sva3-cmp-k{position:sticky;left:0;z-index:1;background:var(--surface-elevated);text-align:left;font-weight:500;padding:8px 12px;min-width:220px;max-width:340px;border-right:1px solid var(--border)}
table.sva3-cmp thead .sva3-cmp-k{z-index:3}
table.sva3-cmp tbody th.sva3-cmp-k span{color:var(--text-body);margin-right:6px}
table.sva3-cmp tbody tr.pg th.sva3-cmp-k span{font-weight:700;color:var(--text)}
table.sva3-cmp td{text-align:center;padding:7px 10px;border-bottom:1px solid var(--border)}
table.sva3-cmp tbody th{border-bottom:1px solid var(--border)}
table.sva3-cmp td.y{color:var(--green)}table.sva3-cmp td.y svg{display:inline-block}
table.sva3-cmp td.n{color:var(--faint)}
table.sva3-cmp tr.diff td{background:color-mix(in srgb,var(--amber-bg) 60%,transparent)}
table.sva3-cmp tr:hover td,table.sva3-cmp tr:hover th.sva3-cmp-k{background:var(--hover)}
table.sva3-cmp .sva3-cmp-sec th{position:sticky;left:0;text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text,var(--accent));background:var(--surface-2);padding:8px 12px}
#sva .sva3-cmp-role{border:0;background:none;font:inherit;font-weight:700;color:var(--text)!important;cursor:pointer;padding:2px 4px;border-radius:8px}
#sva .sva3-cmp-role:hover{color:var(--accent-text,var(--accent))!important;text-decoration:underline}

/* ---------- health check ---------- */
.sva3-hl-h{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 18px;margin-bottom:12px}
.sva3-hl-h>div:first-child{display:flex;flex-direction:column;gap:4px;max-width:720px}
.sva3-hl{display:flex;flex-direction:column;gap:10px}
.sva3-hl-i{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-left:4px solid var(--blue,#2e74c9)!important;transition:transform .18s var(--spring,ease),box-shadow .18s}
.sva3-hl-i:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.sva3-hl-i.warn{border-left-color:var(--amber)!important}
.sva3-hl-ic{width:34px;height:34px;flex:0 0 auto;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--blue-bg,rgba(46,116,201,.09));color:var(--blue,#2e74c9)}
.sva3-hl-i.warn .sva3-hl-ic{background:var(--amber-bg);color:var(--amber)}
.sva3-hl-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.sva3-hl-k{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sva3-hl-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}

/* ---------- dialogs ---------- */
.sva3-dlgwrap{background:var(--overlay,rgba(8,12,24,.45))!important;backdrop-filter:blur(8px) saturate(120%)!important;-webkit-backdrop-filter:blur(8px) saturate(120%)!important}
.sva3-dlgwrap .sva-dlg{background:var(--glass-strong,var(--surface-elevated))!important;border-color:var(--glass-border,var(--border))!important;box-shadow:var(--shadow-3)!important}
.sva3-dlgwrap .sva-dlg.sva3-small{width:min(460px,100%)}
.sva3-dlgwrap .sva-dlg-f{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:12px 20px 18px}
.sva3-ask{display:flex;gap:14px;align-items:flex-start;color:var(--text-body);font-size:.9rem;line-height:1.5}
.sva3-ask>div{display:flex;flex-direction:column;gap:8px}
.sva3-ask-i{width:40px;height:40px;flex:0 0 auto;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.sva3-ask-i.bad{background:var(--red-bg);color:var(--red)}
.sva3-warnline{display:flex;gap:6px;align-items:flex-start;color:var(--amber);font-size:.84rem}
.sva3-btn-danger{background:var(--red)!important;color:#fff!important}
.sva3-reason textarea{resize:vertical;min-height:56px}
.sva3-reason em{font-style:normal;font-weight:400}
.sva3-kv{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:12px 14px;border-radius:14px;background:var(--surface-2);font-size:.86rem}
.sva3-kv b{text-align:right;font-variant-numeric:tabular-nums}.sva3-kv b.add{color:var(--green)}.sva3-kv b.rem{color:var(--red)}
.sva3-tpl-file b{display:inline-flex;align-items:center;gap:6px}
.sva3-keys{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:center;margin:0}
.sva3-keys dt{margin:0}.sva3-keys dd{margin:0;color:var(--text-body);font-size:.86rem}
.sva3-keys kbd{display:inline-block;min-width:28px;text-align:center;font:600 .74rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:6px 8px;border-radius:8px;
  border:1px solid var(--border-strong);border-bottom-width:2px;background:var(--surface-2);color:var(--text);white-space:nowrap}
html.sva3-modal{overflow:hidden}

/* ---------- toasts ---------- */
#sva3-toasts{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:1250;display:flex;flex-direction:column-reverse;gap:8px;align-items:center;pointer-events:none;width:min(560px,calc(100vw - 24px))}
.sva3-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;width:100%;padding:10px 10px 10px 14px;border-radius:16px;
  background:var(--glass-strong,rgba(16,20,31,.92));color:var(--text);border:1px solid color-mix(in srgb,var(--green) 40%,var(--border));
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:var(--shadow-3);font-size:.86rem;
  animation:sva3-tin .28s var(--spring,cubic-bezier(.32,.72,0,1)) both}
.sva3-toast.bad{border-color:color-mix(in srgb,var(--red) 50%,var(--border))}
.sva3-toast.out{animation:sva3-tout .24s ease both}
.sva3-toast-i{width:26px;height:26px;border-radius:9px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--green-bg);color:var(--green)}
.sva3-toast.bad .sva3-toast-i{background:var(--red-bg);color:var(--red)}
.sva3-toast-t{flex:1 1 auto;min-width:0;line-height:1.4}
#sva3-toasts .sva3-toast-a{border:0;background:var(--accent-soft);color:var(--accent-text,var(--accent));font:inherit;font-weight:700;font-size:.8rem;padding:6px 10px;border-radius:10px;cursor:pointer}
#sva3-toasts .sva3-toast-x{border:0;background:none;color:var(--muted);padding:6px;border-radius:9px;cursor:pointer;display:inline-flex}
#sva3-toasts .sva3-toast-x:hover{background:var(--hover);color:var(--text)}
@keyframes sva3-tin{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sva3-tout{to{opacity:0;transform:translateY(8px) scale(.98)}}
/* v2 toasts are not used by v3, but hide strays just in case */
html.sva3 .sva-toast{display:none}

/* ---------- loading / error ---------- */
.sva3-skel-g{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;margin-top:14px}
.sva3-err{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:36px 20px!important}
.sva3-err-a{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ---------- motion polish ---------- */
html.sva3 #sva .sva-main.sva3-enter>*{animation:sva3-fade .32s var(--ease-out,ease) both}
@keyframes sva3-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
html.sva3 #sva .sva-p{transition:transform .18s var(--spring,ease),box-shadow .18s,border-color .18s}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  html.sva3 .sva3-rtool{border-bottom:0;margin-bottom:8px;padding:12px;border-radius:var(--radius-card,18px);border:1px solid var(--border);background:var(--glass,var(--surface))}
  .sva3-rfl{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .sva3-rfl::-webkit-scrollbar{display:none}
  #sva .sva3-rflb{flex:0 0 auto}
  .sva3-skel-g{grid-template-columns:1fr}
  .sva3-skel-g>div:first-child{height:90px!important}
}
@media (min-width:640px) and (max-width:1023px){
  .sva3-rtool{display:grid!important;grid-template-columns:1fr 200px;align-items:center}
  .sva3-rfl{grid-column:1 / -1}
}
@media (max-width:640px){
  .sva3-hbtn span{display:none}
  .sva3-risk-s{margin-left:0;width:100%}
  .sva3-hl-i{flex-wrap:wrap}
  .sva3-hl-a{width:100%;justify-content:flex-start;padding-left:48px}
  table.sva3-cmp .sva3-cmp-k{min-width:150px;max-width:170px}
  table.sva3-cmp thead th{min-width:92px;padding:8px}
  table.sva3-cmp .sva-tier{display:none}
  #sva3-toasts{bottom:150px}
  .sva3-keys{grid-template-columns:1fr;gap:4px}
  .sva3-keys dd{margin-bottom:8px}
  .sva3-cmp-sum{grid-template-columns:1fr 1fr}
  html.sva3 .sva-ed-a{flex-wrap:wrap}
}

/* ---------- reduced motion / transparency ---------- */
@media (prefers-reduced-motion:reduce){
  html.sva3 #sva *,.sva3-menu,.sva3-toast,.sva3-dlgwrap,.sva3-dlgwrap *{animation:none!important;transition:none!important}
}
html[data-motion=reduced].sva3 #sva *,html[data-motion=reduced] .sva3-toast,html[data-motion=reduced] .sva3-menu{animation:none!important;transition:none!important}
@media (prefers-reduced-transparency:reduce){
  .sva3-menu,.sva3-toast,.sva3-dlgwrap .sva-dlg{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--surface-elevated)!important}
}

/* quick actions on a role row: also show for keyboard users */
html.sva3 .sva-rw:focus-within .sva-r-qa{opacity:1;transform:translateX(0);pointer-events:auto}
@media (max-width:640px){html.sva3 .sva-tab{padding:10px 10px;font-size:.82rem;flex:0 0 auto}}
/* while a dialog is open, keep info toasts out of the way (errors stay visible) */
html.sva3-modal #sva3-toasts .sva3-toast:not(.bad){visibility:hidden}

/* role sort: the panel swaps native selects for its own .svs-trigger button */
.sva3-rsort svg{z-index:1}
html.sva3 #sva .sva3-rsort .svs-trigger{padding-left:32px!important;font-size:.82rem!important;min-height:36px;height:36px;border-radius:12px!important;width:100%}
html.sva3 #sva .sva3-rsort .svs-trigger .svs-txt{font-size:.82rem}
html.sva3 #sva .sva3-cmp-pick .sva-chip{font-size:.8rem;padding:5px 11px}