/* =======================================================================
   Source-of-truth stylesheet for Reporting_RBAC.

   The bundle inlines this same CSS into a shadow root at runtime (see the
   RBAC_CSS constant in Reporting_RBAC.js), so the external file is not required
   to render the widget. It exists as the editable source — paste any
   changes back into the RBAC_CSS backtick string so the bundle stays in sync.
   ======================================================================= */

:host {
  all: initial;
  display: block;
  width: 100%;
  contain: content;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: normal;
  font-weight: 400;
  color: #EEEFEC;
  text-align: left;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:host([hidden]) { display: none; }

/* ============ Tokens — scoped to the widget ============ */
.sift-rbac{
  --sift-orange:        #F04A01;
  --sift-orange-bright: #FF5722;
  --sift-orange-deep:   #EE4120;
  --rubber-black:       #1B1D1F;
  --vanta:              #000000;
  --steel:              #726E6E;
  --titanium:           #E1D7D0;
  --ceramic:            #EEEFEC;
  --lunar:              #848582;

  --gray-100: #111111;
  --gray-90:  #222222;
  --gray-80:  #353534;
  --gray-70:  #4B4C4A;
  --gray-60:  #6A6B68;
  --gray-50:  #848582;
  --gray-40:  #9E9F9C;
  --gray-30:  #BABAB6;
  --gray-20:  #D4D4D0;
  --gray-10:  #EEEFEC;

  /* Channels — match the RCA propulsion panel exactly. */
  --ch-red:    #FA4D56;
  --ch-orange: #F89E37;
  --ch-blue:   #4589FF;
  --ch-cyan:   #33B1FF;
  --ch-mint:   #4ED49B;
  --ch-purple: #BE95FF;
  --ch-yellow: #FCC539;
}
.sift-rbac, .sift-rbac *, .sift-rbac *::before, .sift-rbac *::after{
  box-sizing: border-box;
}

/* ============ Demo stage ============ */
.sift-rbac.demo-stage{
  background: #131416;
  border: 1px solid #2A2C2E;
  border-radius: 0;
  aspect-ratio: 16 / 9;
  width: 100%;
  position: relative;
  overflow: hidden;
  color: var(--ceramic);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  container-type: inline-size;
}
.sift-rbac.demo-stage::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center center;
  pointer-events: none;
}

/* ----- Scale wrap -------------------------------------------------------
   The design canvas is locked to 664 × 374 — the size this bundle
   renders at in the Claude design preview. A ResizeObserver on the
   stage writes --stage-scale = stageWidth / 664; the transform below
   uses it to scale the whole canvas uniformly to fit the host
   container. Every nested px (text, padding, plot geometry, dialog)
   keeps the same RATIO to the canvas at any width, so the composition
   reads identically everywhere the bundle is embedded. */
.sift-rbac .scale-wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 664px;
  aspect-ratio: 16 / 9;
  transform-origin: top left;
  transform: scale(var(--stage-scale, 1));
}

/* ============ Cursor ============ */
.sift-rbac .cursor{
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  transition: transform 760ms cubic-bezier(0.2,0,0,1),
              opacity 280ms ease-out;
}
.sift-rbac .cursor.visible{ opacity: 1; }
.sift-rbac .cursor-icon{
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.55));
}
.sift-rbac .cursor-icon.arrow{
  width: 44px; height: 44px;
  top: -9.625px;
  left: -13.75px;
  display: block;
  transform-origin: 13.75px 9.625px;
}
.sift-rbac .cursor.clicking .cursor-icon.arrow{
  animation: sift-rbac-cursor-click 220ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes sift-rbac-cursor-click {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.82); }
  100% { transform: scale(1); }
}

/* ============ Plot panel ============ */
.sift-rbac .rbac-plot-clip{
  position: absolute;
  inset: 26px 56px 24px 56px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.2,0,0,1);
}
.sift-rbac .rbac-plot-clip.in{ opacity: 1; }

.sift-rbac .rbac-plot-shell{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sift-rbac .rbac-plot-head{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: #0E0F11;
  border-top: 1px solid #2A2C2E;
  border-left: 1px solid #2A2C2E;
  border-right: 1px solid #2A2C2E;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.sift-rbac .rbac-plot-tag{
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sift-orange);
  padding: 2px 6px;
  border: 1px solid rgba(240, 74, 1, 0.5);
}
.sift-rbac .rbac-plot-name{
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-30);
  white-space: nowrap;
}
.sift-rbac .rbac-plot-asset{
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-50);
}

.sift-rbac .rbac-plot-body{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #0E0F11;
  border: 1px solid #2A2C2E;
  overflow: hidden;
}
.sift-rbac .rbac-plot-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.sift-rbac .rbac-y-ticks{
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--gray-50);
  letter-spacing: 0.04em;
  line-height: 1;
}
.sift-rbac .rbac-y-ticks.left{ left: 0; }
.sift-rbac .rbac-y-ticks.right{ right: 0; }
.sift-rbac .rbac-y-tick{
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  white-space: nowrap;
}
.sift-rbac .rbac-y-tick.right{
  right: auto;
  left: 6px;
}
.sift-rbac .rbac-y-unit{
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-40);
  pointer-events: none;
  z-index: 2;
}
.sift-rbac .rbac-y-unit.right{
  right: auto;
  left: 6px;
}

.sift-rbac .rbac-x-ticks{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--gray-50);
  letter-spacing: 0.04em;
  line-height: 1;
}
.sift-rbac .rbac-x-tick{
  position: absolute;
  bottom: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.sift-rbac .rbac-x-tick.edge-left{ left: 12px; transform: none; }
.sift-rbac .rbac-x-tick.edge-right{ left: auto; right: 12px; transform: none; }

.sift-rbac .rbac-ch-path{
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.sift-rbac .rbac-grid-line{ stroke: rgba(255, 255, 255, 0.04); stroke-width: 1; }
.sift-rbac .rbac-axis-line{ stroke: #2A2C2E; stroke-width: 1; }

.sift-rbac .rbac-plot-legend{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 2px 0;
  flex-shrink: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--gray-40);
}
.sift-rbac .rbac-ch-key{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  will-change: opacity, transform;
  transition: opacity 80ms linear, transform 80ms linear;
}
.sift-rbac .rbac-ch-swatch{
  width: 9px;
  height: 9px;
  border-radius: 0;
  flex: 0 0 auto;
}

/* ============ ABAC dialog ============
   Tall + narrow panel anchored to the top-left of the stage — same
   slide-up vocabulary and scale factor as the RootCauseAnalysis_Compare
   Channels card so the two animations feel related. */
.sift-rbac .rbac-card{
  position: absolute;
  left: 28px;
  top: 63px;
  width: 320px;
  min-height: 720px;
  background: #1B1D1F;
  border: 1px solid #2A2C2E;
  border-radius: 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55);
  color: var(--ceramic);
  font-family: "IBM Plex Sans", sans-serif;
  display: flex;
  flex-direction: column;
  z-index: 30;
  transform-origin: 0 0;
  /* opacity + transform are driven by inline style from the JS tween
     (so the slide survives visibility throttling). */
  opacity: 0;
  transform: translateY(120%) scale(0.7225);
  will-change: opacity, transform;
  overflow: hidden;
}

/* Header padding tightens up for the narrow card width. */
.sift-rbac .rbac-card-head{
  padding: 14px 14px 12px;
  border-bottom: 1px solid #2A2C2E;
  flex-shrink: 0;
}
.sift-rbac .rbac-card-title{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ceramic);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.sift-rbac .rbac-card-sub{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(241, 247, 255, 0.55);
  letter-spacing: 0;
}

/* Search row. */
.sift-rbac .rbac-card-search-row{
  padding: 10px 14px;
  border-bottom: 1px solid #2A2C2E;
  flex-shrink: 0;
}
.sift-rbac .rbac-card-search{
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 12px;
  background: #131416;
  border: 1px solid #2A2C2E;
  border-radius: 0;
  font-family: "IBM Plex Sans", sans-serif;
  transition: border-color 140ms cubic-bezier(0.2,0,0,1);
}
.sift-rbac .rbac-card-search.focused{
  border-color: #4A4B48;
  background: #0E0F11;
}
.sift-rbac .rbac-card-search-icon{
  width: 14px; height: 14px;
  color: rgba(241, 247, 255, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sift-rbac .rbac-card-search-icon svg{ width: 100%; height: 100%; display: block; }
.sift-rbac .rbac-card-search-placeholder{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  color: rgba(241, 247, 255, 0.4);
  letter-spacing: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
}
.sift-rbac .rbac-card-search-val{
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  color: var(--ceramic);
  letter-spacing: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
}
.sift-rbac .rbac-card-search-caret{
  display: inline-block;
  width: 1.5px;
  height: 14px;
  background: var(--ceramic);
  margin-left: 2px;
  animation: sift-rbac-caret 900ms steps(2, end) infinite;
}
.sift-rbac .rbac-card-search-caret.leading{
  background: var(--ceramic);
  margin-left: 0;
}
@keyframes sift-rbac-caret {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Table header + body. Two columns now (User + Group). */
.sift-rbac .rbac-table-head,
.sift-rbac .rbac-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}
.sift-rbac .rbac-table-head{
  height: 32px;
  border-bottom: 1px solid #2A2C2E;
  background: #131416;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-40);
  flex-shrink: 0;
}
.sift-rbac .rbac-table-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2A2C2E transparent;
}
.sift-rbac .rbac-table-body::-webkit-scrollbar{ width: 6px; }
.sift-rbac .rbac-table-body::-webkit-scrollbar-thumb{
  background: #2A2C2E;
}
.sift-rbac .rbac-table-empty{
  padding: 28px 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-50);
  text-align: center;
}

.sift-rbac .rbac-row{
  height: 44px;
  border-bottom: 1px solid #222426;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  color: rgba(241, 247, 255, 0.85);
}
.sift-rbac .rbac-row:last-child{ border-bottom: none; }

.sift-rbac .rbac-user{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sift-rbac .rbac-avatar{
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: var(--gray-80);
  color: var(--ceramic);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.sift-rbac .rbac-user-email{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0;
  color: rgba(241, 247, 255, 0.85);
}

/* Group dropdown — looks like a select control but draws its own panel.
   width: 100% makes every row's dropdown fill its column so the chevron
   lines up vertically regardless of label length. */
.sift-rbac .rbac-group-select{
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  background: #131416;
  border: 1px solid #2A2C2E;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11.5px;
  color: var(--ceramic);
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  transition: border-color 140ms cubic-bezier(0.2,0,0,1);
}
.sift-rbac .rbac-group-select.open{
  border-color: #4A4B48;
  background: #0E0F11;
}
.sift-rbac .rbac-group-val{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sift-rbac .rbac-group-chev{
  width: 12px; height: 12px;
  color: rgba(241, 247, 255, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sift-rbac .rbac-group-chev svg{ width: 100%; height: 100%; display: block; }

.sift-rbac .rbac-group-dropdown{
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  background: #1B1D1F;
  border: 1px solid #2A2C2E;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  padding: 4px 0;
  z-index: 40;
  animation: sift-rbac-ctx-pop 140ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes sift-rbac-ctx-pop {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
.sift-rbac .rbac-group-option{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12.5px;
  color: rgba(241, 247, 255, 0.85);
  white-space: nowrap;
  cursor: pointer;
}
.sift-rbac .rbac-group-option.hover{
  background: rgba(255, 255, 255, 0.08);
  color: var(--ceramic);
}
.sift-rbac .rbac-group-option-check{
  width: 12px;
  text-align: center;
  color: var(--sift-orange);
  font-size: 11px;
}
.sift-rbac .rbac-group-option-label{ flex: 1 1 auto; }

/* Status pip — flat orange dot + "Active". */
.sift-rbac .rbac-status-pip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 247, 255, 0.75);
}
.sift-rbac .rbac-status-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--sift-orange);
  box-shadow: 0 0 0 2px rgba(240, 74, 1, 0.15);
  flex-shrink: 0;
}

.sift-rbac .rbac-actions{
  display: inline-flex;
  justify-content: flex-end;
}
.sift-rbac .rbac-action-btn{
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(241, 247, 255, 0.55);
  cursor: pointer;
}
.sift-rbac .rbac-action-btn svg{ width: 14px; height: 14px; display: block; }
.sift-rbac .rbac-action-btn:hover{ color: var(--ceramic); }

/* Footer. */
.sift-rbac .rbac-card-foot{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #2A2C2E;
  background: #131416;
  flex-shrink: 0;
}
.sift-rbac .rbac-foot-count{
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-40);
}
.sift-rbac .rbac-foot-spacer{ flex: 1 1 auto; }
.sift-rbac .rbac-foot-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 0;
  cursor: pointer;
  border: 1px solid transparent;
}
.sift-rbac .rbac-foot-btn.ghost{
  background: transparent;
  color: rgba(241, 247, 255, 0.7);
  border-color: #2A2C2E;
}
.sift-rbac .rbac-foot-btn.primary{
  background: var(--sift-orange);
  color: #FFFFFF;
  border-color: var(--sift-orange);
}