/* ============================================================
   Microsoft Entra admin center — fidelity styles (DARK theme).
   The real Entra admin center defaults to the Azure dark theme
   for most admins, so this portal renders dark by default:
   near-black content, dark cards, light text, #4db2ff links.
   Every selector is scoped under .px-entra (page roots, overlay
   bodies/panels, and the portal shell while Entra is active).
   Overlays live on document.body OUTSIDE .portal — they only go
   dark when portal-entra.js adds .px-entra-dark / .px-entra-scrim
   to them, so other portals' overlays stay light.
   ============================================================ */

/* ---------------- theme tokens ---------------- */

.px-entra, .px-entra-dark {
  --blue: #4db2ff;       /* Azure link/accent blue on dark */
  --blue-dark: #6cbeff;  /* hover accent */
}
.portal.px-entra, .px-entra-dark { color-scheme: dark; }
.portal.px-entra { background: #111; }

/* ---------------- shell: top bar (near-black Azure shell) ---------------- */

.px-entra .portal-top { height: 44px; gap: 8px; padding: 0 10px; }
.px-entra .portal-top-title { font-size: 14px; font-weight: 400; letter-spacing: .1px; }
/* central shell live search, restyled to the dark Azure shell look */
.px-entra .portal-search-wrap { max-width: 560px; }
.px-entra .portal-search-input {
  background: #292929; color: #fff; border: 1px solid #4a4a4a; border-radius: 2px;
  font-size: 12px; padding: 6px 12px;
}
.px-entra .portal-search-input::placeholder { color: #b8b8b8; }
.px-entra .portal-search-input:focus { outline: 1px solid var(--blue); background: #292929; color: #fff; }
/* central shell icon cluster (bell/gear/help) on the near-black bar */
.px-entra .top-icon-btn { border-radius: 2px; }
.px-entra .top-icon-btn:hover { background: rgba(255, 255, 255, .14); }
.px-entra .e-acct { display: flex; flex-direction: column; align-items: flex-end; margin-left: 10px; line-height: 1.35; }
.px-entra .e-acct-u { font-size: 11px; color: #fff; }
.px-entra .e-acct-t { font-size: 9.5px; color: #b3b3b3; letter-spacing: .04em; }
.px-entra .portal-avatar { margin-left: 8px; width: 30px; height: 30px; font-size: 11px; background: #6b2d84; }

/* ---------------- shell: left nav (dark, Fluent icons) ---------------- */

.px-entra .portal-nav { background: #141414; border-right: 1px solid #2b2b2b; width: 222px; padding: 6px 0; }
.px-entra .nav-item { font-size: 13px; color: #e6e6e6; padding: 7px 12px; gap: 10px; }
.px-entra .nav-item:hover { background: #232323; }
.px-entra .nav-item.active { background: #262626; border-left-color: var(--blue); font-weight: 600; color: #fff; }
.px-entra .e-navico { display: flex; flex: none; }
.px-entra .e-navico svg { width: 16px; height: 16px; color: #c8c6c4; }
.px-entra .nav-item.active .e-navico svg { color: var(--blue); }
.px-entra .nav-group-label {
  text-transform: none; font-size: 12.5px; font-weight: 600; color: #adadad; letter-spacing: 0;
  padding: 12px 12px 4px; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #262626; margin-top: 8px;
}
.px-entra .nav-group-label::after {
  content: ''; width: 6px; height: 6px; flex: none;
  border-right: 1.3px solid #8a8a8a; border-bottom: 1.3px solid #8a8a8a;
  transform: rotate(45deg) translateY(-2px); margin-right: 3px;
}

.px-entra .portal-content { padding: 18px 26px 60px; background: #1b1a19; color: #f5f5f5; position: relative; }

/* thin indeterminate Azure-blue loading bar while a blade loads (route-change skeleton) */
@keyframes e-loadbar {
  0% { left: -35%; width: 35%; }
  60% { left: 55%; width: 45%; }
  100% { left: 100%; width: 45%; }
}
.px-entra .portal-content:has(> .skel-page)::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: #22384e; z-index: 5;
}
.px-entra .portal-content:has(> .skel-page)::after {
  content: ''; position: absolute; top: 0; height: 3px; border-radius: 2px;
  background: var(--blue); animation: e-loadbar 1.15s ease-in-out infinite; z-index: 6;
}
/* skeleton shimmer, re-tinted for the dark content surface */
.px-entra .skel {
  background: linear-gradient(90deg, #262626 25%, #313131 37%, #262626 63%);
  background-size: 800px 100%;
}

/* ---------------- icons ---------------- */

.px-entra .e-ico { display: inline-flex; flex: none; }
.px-entra .e-ico svg { width: 16px; height: 16px; display: block; }

/* ---------------- breadcrumbs ---------------- */

.px-entra .e-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: -6px 0 10px; flex-wrap: wrap; }
.px-entra .e-crumb {
  background: none; border: none; padding: 0; color: var(--blue); font-size: 12.5px;
  font-family: var(--font-fluent); cursor: pointer;
}
.px-entra .e-crumb:hover { text-decoration: underline; }
.px-entra .e-crumb-cur { color: #e8e8e8; cursor: default; }
.px-entra .e-crumb-cur:hover { text-decoration: none; }
.px-entra .e-crumb-sep { color: #6f6f6f; }

/* ---------------- blade header ---------------- */

.px-entra .e-blade { display: flex; gap: 12px; align-items: flex-start; margin: 2px 0 10px; }
.px-entra .e-blade-ico { margin-top: 4px; color: var(--blue); }
.px-entra .e-blade-ico svg { width: 28px; height: 28px; }
.px-entra .e-blade h1 { font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; color: #f5f5f5; }
.px-entra .e-blade-pipe { color: #4d4d4d; font-weight: 300; }
.px-entra .e-blade-sub { color: #adadad; font-weight: 400; }
.px-entra .e-tenline { font-size: 12px; color: #adadad; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.px-entra .e-blade-x {
  margin-left: auto; background: none; border: none; color: #adadad; font-size: 13px;
  padding: 4px 9px; border-radius: 2px; cursor: pointer;
}
.px-entra .e-blade-x:hover { background: #2e2e2e; color: #fff; }

/* ---------------- command bar ---------------- */

.px-entra .cmdbar { border-bottom: 1px solid #2e2e2e; padding-bottom: 2px; margin-bottom: 6px; gap: 2px; align-items: center; }
.px-entra .cmd-btn { font-size: 12.5px; padding: 6px 10px; border-radius: 2px; color: #e6e6e6; gap: 6px; }
.px-entra .cmd-btn:hover:not(:disabled) { background: #2a2a2a; color: #fff; }
.px-entra .cmd-btn:disabled { color: #6f6f6f; }
.px-entra .cmd-btn .ci { display: flex; }
.px-entra .cmd-btn .ci svg { width: 15px; height: 15px; }
.px-entra .e-tbdiv { width: 1px; height: 18px; background: #3d3d3d; margin: 0 6px; flex: none; }

/* ---------------- filter row / search ---------------- */

.px-entra .e-filterbar { display: flex; gap: 8px; align-items: center; margin: 12px 0 2px; flex-wrap: wrap; }
.px-entra .e-searchbox {
  display: flex; align-items: center; gap: 6px; height: 30px; border: 1px solid #7a7a7a;
  border-radius: 2px; background: #1f1f1f; padding: 0 8px; width: 280px; max-width: 100%;
}
.px-entra .e-searchbox:focus-within { border-color: var(--blue); }
.px-entra .e-searchinput {
  border: none; outline: none; flex: 1; font-size: 12.5px; font-family: var(--font-fluent);
  background: transparent; color: #f5f5f5; min-width: 0;
}
.px-entra .e-searchinput::placeholder { color: #8f8f8f; }
.px-entra .e-searchico svg { width: 13px; height: 13px; color: #adadad; }
.px-entra .e-chip {
  display: inline-flex; gap: 6px; align-items: center; height: 30px; padding: 0 12px;
  border: 1px solid #4d4d4d; border-radius: 4px; background: #232323; font-size: 12.5px;
  color: #e6e6e6; font-family: var(--font-fluent); cursor: pointer;
}
.px-entra .e-chip:hover { background: #2e2e2e; }
.px-entra .e-chipico svg { width: 11px; height: 11px; color: var(--blue); }
.px-entra .e-tenantsearch { width: min(520px, 100%); height: 34px; margin: 0 0 8px; }
.px-entra .e-count { font-size: 12px; color: #adadad; margin: 8px 0 0; }

/* ---------------- data grid ---------------- */

.px-entra .data-table { margin-top: 6px; }
.px-entra .data-table th { font-size: 12px; font-weight: 600; color: #adadad; padding: 8px 12px; border-bottom: 1px solid #3a3a3a; }
.px-entra .data-table td { font-size: 12.5px; padding: 8px 12px; border-bottom: 1px solid #262626; color: #ededed; }
.px-entra .data-table tbody tr:hover { background: #2a2a2a; }
.px-entra .data-table .cell-link { font-weight: 400; }
.px-entra .data-table .cell-sub { color: #adadad; }
.px-entra .data-table th:has(.e-cb), .px-entra .data-table td:has(.e-cb) { width: 34px; padding-right: 0; }
.px-entra .pill { font-size: 11px; padding: 1px 9px; }

/* status pills on dark: translucent fills, brighter text */
.px-entra .pill-green { background: rgba(80, 190, 100, .15); color: #7cd88a; }
.px-entra .pill-red { background: rgba(255, 95, 105, .14); color: #ff9ba3; }
.px-entra .pill-gray { background: #333; color: #c8c6c4; }
.px-entra .pill-amber { background: rgba(255, 190, 40, .13); color: #f0c76b; }
.px-entra .pill-blue { background: rgba(77, 178, 255, .16); color: #7cc4ff; }

.px-entra .e-cb {
  width: 15px; height: 15px; border: 1px solid #8f8f8f; border-radius: 2px; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.px-entra .e-cb:hover { border-color: #fff; }
.px-entra .e-cb.on { background: var(--blue); border-color: var(--blue); }
.px-entra .e-cb.on::after { content: '\2713'; color: #0c0c0c; font-size: 10px; line-height: 1; }

.px-entra .e-namecell { display: inline-flex; align-items: center; gap: 9px; }
.px-entra .e-upncell { display: inline-flex; align-items: center; gap: 4px; }
.px-entra .e-guid { font-family: var(--font-mono, Consolas, monospace); font-size: 11.5px; color: #b3b3b3; }

.px-entra .e-av {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; flex: none; letter-spacing: .02em;
}
.px-entra .e-av-lg { width: 44px; height: 44px; font-size: 15px; }
.px-entra .e-av-sq { border-radius: 6px; }

.px-entra .e-copy { background: none; border: none; color: #adadad; padding: 2px; border-radius: 2px; cursor: pointer; display: inline-flex; }
.px-entra .e-copy:hover { color: var(--blue); background: #2e2e2e; }
.px-entra .e-copy svg { width: 13px; height: 13px; }
.px-entra .data-table .e-copy { opacity: 0; }
.px-entra .data-table tr:hover .e-copy { opacity: 1; }

/* ---------------- banners ---------------- */

.px-entra .e-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 4px;
  font-size: 12.5px; margin: 10px 0; line-height: 1.45; border: 1px solid transparent;
}
.px-entra .e-banner-info { background: rgba(71, 158, 245, .10); border-color: rgba(71, 158, 245, .35); color: #e8e8e8; }
.px-entra .e-banner-info .e-banner-ico { color: var(--blue); }
.px-entra .e-banner-warn { background: rgba(255, 185, 0, .10); border-color: rgba(255, 185, 0, .32); color: #f3e8c8; }
.px-entra .e-banner-warn .e-banner-ico { color: #f2c661; }
.px-entra .e-banner-ico { margin-top: 1px; }
.px-entra .e-banner-ico svg { width: 15px; height: 15px; }

/* ---------------- cards / property lists ---------------- */

.px-entra .e-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 14px 0; }
.px-entra .e-cards-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.px-entra .e-card {
  background: #242424; border: 1px solid #383838; border-radius: 8px; padding: 16px 20px;
  box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .4);
}
.px-entra .e-card-h { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: #f5f5f5; }
.px-entra .e-prop { display: flex; gap: 12px; padding: 5px 0; font-size: 12.5px; align-items: baseline; }
.px-entra .e-prop-l { width: 150px; flex: none; color: #adadad; }
.px-entra .e-prop-v { color: #ededed; display: flex; align-items: center; gap: 4px; min-width: 0; word-break: break-word; }
.px-entra .e-props-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.px-entra .e-props-grid .e-prop-l { width: 120px; }
.px-entra .e-empty { font-size: 12.5px; color: #adadad; padding: 12px 2px; }
.px-entra .e-dim { font-size: 12px; color: #adadad; margin: 4px 0; line-height: 1.5; }
.px-entra .e-sect-title { font-size: 15px; font-weight: 600; margin: 20px 0 6px; color: #f5f5f5; }

/* ---------------- overview stats / tabs / home ---------------- */

.px-entra .e-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 14px 0; }
.px-entra .e-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: #242424; border: 1px solid #383838; border-radius: 8px; padding: 14px 18px;
  cursor: pointer; font-family: var(--font-fluent); box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .4);
}
.px-entra .e-stat:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .55); border-color: #4a4a4a; }
.px-entra .e-stat-ico { color: var(--blue); margin-bottom: 4px; }
.px-entra .e-stat-ico svg { width: 18px; height: 18px; }
.px-entra .e-stat-n { font-size: 26px; font-weight: 600; color: #f5f5f5; line-height: 1.15; }
.px-entra .e-stat-l { font-size: 12.5px; color: #adadad; }

.px-entra .e-tabs { display: flex; gap: 2px; border-bottom: 1px solid #2e2e2e; margin: 4px 0 14px; }
.px-entra .e-tab {
  background: none; border: none; padding: 8px 12px; font-size: 13px; color: #c8c6c4;
  position: relative; font-family: var(--font-fluent); cursor: pointer;
}
.px-entra .e-tab:hover { background: #2a2a2a; }
.px-entra .e-tab.active { font-weight: 600; color: #fff; }
.px-entra .e-tab.active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px;
  background: var(--blue); border-radius: 2px;
}

.px-entra .e-home-h1 { font-size: 26px; font-weight: 600; margin: 0; color: #f5f5f5; }
.px-entra .e-reco-ico { color: var(--blue); margin-bottom: 8px; }
.px-entra .e-reco-ico svg { width: 22px; height: 22px; }
.px-entra .e-linkbtn {
  background: none; border: none; color: var(--blue); font-size: 12.5px; padding: 0; margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font-fluent);
}
.px-entra .e-linkbtn:hover { text-decoration: underline; }
.px-entra .e-linkarrow { font-size: 15px; line-height: 1; }
.px-entra .e-feed { display: flex; gap: 12px; align-items: center; }
.px-entra .e-feed-n { font-size: 13px; font-weight: 600; color: #f5f5f5; }
.px-entra .e-riskcard .e-stat-n { color: var(--blue); }

/* ---------------- per-user / per-group blade ---------------- */

.px-entra .e-userhead { display: flex; gap: 14px; align-items: center; margin: 2px 0 12px; }
.px-entra .e-userhead h1 { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.2; color: #f5f5f5; }
.px-entra .e-userhead .e-copy { opacity: .85; }
.px-entra .e-userbody { display: flex; gap: 20px; align-items: flex-start; margin-top: 4px; }
.px-entra .e-usermain { flex: 1; min-width: 0; }
.px-entra .e-subnav {
  width: 218px; flex: none; border-right: 1px solid #2e2e2e; padding: 6px 10px 20px 0;
  display: flex; flex-direction: column; gap: 1px;
}
.px-entra .e-subitem {
  display: flex; gap: 9px; align-items: center; background: none; border: none; text-align: left;
  padding: 7px 10px; font-size: 12.5px; color: #e0e0e0; border-radius: 4px;
  font-family: var(--font-fluent); cursor: pointer; position: relative;
}
.px-entra .e-subitem:hover { background: #2a2a2a; }
.px-entra .e-subitem.active { background: rgba(77, 178, 255, .12); color: #7cc4ff; font-weight: 600; }
.px-entra .e-subitem.active::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2.5px;
  background: var(--blue); border-radius: 2px;
}
.px-entra .e-subico { color: #adadad; }
.px-entra .e-subitem.active .e-subico { color: var(--blue); }
.px-entra .e-subico svg { width: 15px; height: 15px; }
.px-entra .e-subnav-label {
  font-size: 11px; font-weight: 600; color: #adadad; text-transform: uppercase;
  letter-spacing: .4px; padding: 14px 10px 4px;
}

/* ---------------- flyout panels & dialogs (dark, opt-in via .px-entra-dark) ---------------- */

.px-entra.flyout { width: 560px; }
.px-entra.flyout .flyout-head { padding: 18px 24px 4px; }
.px-entra.flyout .flyout-head h3 { font-size: 20px; font-weight: 600; }
.px-entra .flyout-foot { justify-content: flex-start; gap: 8px; padding: 12px 24px; }

.flyout.px-entra-dark { background: #292827; color: #f0f0f0; box-shadow: -8px 0 28px rgba(0, 0, 0, .55); }
.modal.px-entra-dark { background: #292827; color: #f0f0f0; }
.px-entra-dark .flyout-close { color: #adadad; }
.px-entra-dark .flyout-close:hover { background: #3a3a3a; color: #fff; }
.px-entra-dark .flyout-foot, .px-entra-dark .modal-foot { border-top: 1px solid #3d3d3d; }
/* dim the underlying blade — it stays visible behind the stacked panel */
.panel-scrim.px-entra-scrim { background: rgba(0, 0, 0, .55); }

/* one-shot thin Azure-blue loading bar along the top of a freshly opened panel */
@keyframes e-loadonce {
  0% { transform: scaleX(0); opacity: 1; }
  75% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.flyout.px-entra::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: var(--blue); transform-origin: left; pointer-events: none;
  animation: e-loadonce .9s ease-out forwards;
}

/* blade-stacking cue: panel opened from inside another blade slides in with a
   peek of the parent blade's edge along its left side */
@keyframes e-bladein { from { transform: translateX(72px); opacity: .35; } to { transform: none; opacity: 1; } }
.flyout.px-entra.e-stacked { animation: e-bladein .22s ease-out; box-shadow: -22px 0 34px rgba(0, 0, 0, .6); }
.flyout.px-entra.e-stacked::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -13px; width: 13px;
  background: #201f1e; border-left: 1px solid #3d3d3d; border-right: 1px solid #0a0a0a;
}

.px-entra .btn-primary, .px-entra .btn-ghost, .px-entra .btn-danger {
  border-radius: 2px; font-size: 13px; padding: 6px 18px; font-family: var(--font-fluent);
  font-weight: 600; text-transform: none; letter-spacing: 0;
}
/* Azure dark primary: light blue fill, near-black label */
.px-entra .btn-primary { background: var(--blue); color: #0c0c0c; border: 1px solid var(--blue); }
.px-entra .btn-primary:hover:not(:disabled) { background: var(--blue-dark); border-color: var(--blue-dark); color: #0c0c0c; }
.px-entra .btn-primary:disabled { background: #3d3d3d; border-color: #3d3d3d; color: #8a8a8a; }
.px-entra .btn-ghost { border: 1px solid #8f8f8f; background: transparent; color: #f0f0f0; }
.px-entra .btn-ghost:hover { background: #3a3a3a; }

.px-entra .e-pane-sub { font-size: 12px; color: #adadad; margin: 0 0 6px; line-height: 1.5; }
.px-entra .f-label { font-size: 12.5px; margin: 14px 0 5px; color: #f5f5f5; }
.px-entra .f-input, .px-entra .f-select {
  border-radius: 2px; border: 1px solid #8f8f8f; font-size: 13px; padding: 6px 8px;
  color: #f5f5f5; background: #1f1f1f;
}
.px-entra .f-input::placeholder { color: #8f8f8f; }
.px-entra .f-select { height: 32px; }
.px-entra .f-check { font-size: 12.5px; margin: 9px 0; color: #e6e6e6; }
.px-entra .f-hint { font-size: 11.5px; color: #adadad; }

.px-entra .e-sect { font-size: 13px; font-weight: 600; color: #f5f5f5; margin: 16px 0 2px; padding-top: 12px; border-top: 1px solid #3a3a3a; }
.px-entra .e-sum { font-size: 12.5px; color: var(--blue); margin: 6px 0 2px; }
.px-entra .e-sect-off { display: flex; flex-direction: column; gap: 3px; margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid #3a3a3a; }
.px-entra .e-sect-off span:first-child { font-size: 13px; font-weight: 600; color: #8a8a8a; }
.px-entra .e-sum-off { font-size: 12.5px; color: #8a8a8a; }
.px-entra .e-ctrlbox { border: 1px solid #3a3a3a; border-radius: 4px; padding: 2px 12px; margin-top: 8px; background: #1f1e1d; }
.px-entra .e-checklist { max-height: 210px; overflow-y: auto; border: 1px solid #3a3a3a; border-radius: 4px; padding: 2px 12px; margin-top: 6px; }

.px-entra .e-pwbox {
  display: flex; align-items: center; gap: 8px; background: #1f1e1d; border: 1px solid #3a3a3a;
  border-radius: 4px; padding: 8px 12px; margin: 10px 0;
}
.px-entra .e-pwbox code { font-family: var(--font-mono, Consolas, monospace); font-size: 14px; font-weight: 600; letter-spacing: .03em; color: #f5f5f5; }

/* ---------------- context menu (dark, opt-in) ---------------- */

.ctx-menu.px-entra-dark { background: #292827; border: 1px solid #4a4a4a; color: #f0f0f0; }
.ctx-menu.px-entra-dark .ctx-item { color: #f0f0f0; }
.ctx-menu.px-entra-dark .ctx-item:hover:not(:disabled) { background: rgba(77, 178, 255, .16); }
.ctx-menu.px-entra-dark .ctx-item:disabled { color: #6f6f6f; }
.ctx-menu.px-entra-dark .ctx-sep { background: #4a4a4a; }

/* ---------------- SSPR properties (segmented control) ---------------- */

.px-entra .e-ssprlabel {
  font-size: 13px; font-weight: 600; color: #f5f5f5; margin: 18px 0 8px;
  display: flex; align-items: center; gap: 6px;
}
.px-entra .e-infodot { color: #adadad; display: inline-flex; cursor: help; }
.px-entra .e-infodot svg { width: 13px; height: 13px; }
.px-entra .e-seg { display: inline-flex; border: 1px solid #8f8f8f; border-radius: 2px; overflow: hidden; }
.px-entra .e-segbtn {
  background: #232323; border: none; border-right: 1px solid #8f8f8f; padding: 7px 30px;
  font-size: 13px; font-family: var(--font-fluent); color: #f0f0f0; cursor: pointer; line-height: 1.3;
}
.px-entra .e-segbtn:last-child { border-right: none; }
.px-entra .e-segbtn:hover { background: #2f2f2f; }
.px-entra .e-segbtn.active { background: var(--blue); color: #0c0c0c; font-weight: 600; }
.px-entra .e-segbtn.active:hover { background: var(--blue-dark); }

/* ---------------- invite external user ---------------- */

.px-entra .e-textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #8f8f8f; border-radius: 2px;
  font-size: 13px; font-family: var(--font-fluent); color: #f5f5f5; background: #1f1f1f; padding: 6px 8px;
  margin-top: 8px; resize: vertical; min-height: 72px;
}
.px-entra .e-textarea::placeholder { color: #8f8f8f; }
.px-entra .e-textarea:focus { outline: none; border-color: var(--blue); }

/* ---------------- Conditional Access policy editor ---------------- */

.px-entra .e-ca-edit { display: flex; gap: 28px; align-items: flex-start; margin-top: 4px; }
.px-entra .e-ca-col { width: 340px; flex: none; display: flex; flex-direction: column; gap: 1px; }
.px-entra .e-ca-blurb { font-size: 12px; color: #adadad; line-height: 1.5; margin: 0 0 4px; }
.px-entra .e-ca-grouplabel {
  font-size: 13px; font-weight: 600; color: #f5f5f5; margin: 12px 0 4px;
  padding-top: 12px; border-top: 1px solid #2e2e2e;
}
.px-entra .e-ca-sec {
  display: flex; flex-direction: column; gap: 3px; text-align: left; background: none;
  border: none; border-radius: 4px; padding: 8px 10px; cursor: pointer;
  font-family: var(--font-fluent); position: relative;
}
.px-entra .e-ca-sec:hover { background: #2a2a2a; }
.px-entra .e-ca-sec.active { background: rgba(77, 178, 255, .10); }
.px-entra .e-ca-sec.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2.5px;
  background: var(--blue); border-radius: 2px;
}
.px-entra .e-ca-sec-l { font-size: 13px; color: #f0f0f0; }
.px-entra .e-ca-sec-s { font-size: 12.5px; color: var(--blue); }
.px-entra .e-ca-seg { margin: 6px 0 4px; align-self: flex-start; }
.px-entra .e-ca-seg .e-segbtn { padding: 7px 22px; }
.px-entra .e-ca-foot { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #2e2e2e; }
.px-entra .e-ca-del { color: #ff9ba3; border-color: #ff9ba3; }
.px-entra .e-ca-del:hover { background: rgba(255, 95, 105, .12); }

.px-entra .e-ca-detail {
  flex: 1; min-width: 260px; max-width: 480px; min-height: 340px;
  border-left: 1px solid #2e2e2e; padding: 4px 0 24px 26px; position: relative;
}
/* blade-stacking feel: section sub-panel slides in over the column with a
   one-shot loading bar (class replayed from JS on each section change) */
.px-entra .e-ca-detail.e-slidein { animation: e-bladein .22s ease-out; }
.px-entra .e-ca-detail.e-slidein::before {
  content: ''; position: absolute; top: 0; left: 26px; right: 0; height: 2.5px;
  background: var(--blue); transform-origin: left; pointer-events: none;
  animation: e-loadonce .8s ease-out forwards;
}
.px-entra .e-ca-dhead { font-size: 16px; font-weight: 600; color: #f5f5f5; margin: 0 0 4px; }
.px-entra .e-ca-dsub { font-size: 12.5px; font-weight: 600; color: #f0f0f0; margin: 16px 0 6px; }
.px-entra .e-ca-ro { display: flex; gap: 9px; align-items: center; padding: 5px 0; font-size: 12.5px; color: #adadad; }
.px-entra .e-ca-ro.on { color: #f0f0f0; }
.px-entra .e-radio {
  width: 15px; height: 15px; border: 1px solid #8f8f8f; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; background: transparent;
}
.px-entra .e-radio.on { border-color: var(--blue); }
.px-entra .e-radio.on::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.px-entra .e-ca-cond { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid #262626; }
.px-entra .e-ca-cond span:first-child { font-size: 12.5px; color: #f0f0f0; }
.px-entra .e-ca-notcfg { font-size: 12px; color: #8f8f8f; }

/* ---------------- roles & administrators ---------------- */

.px-entra .e-roleico { color: var(--blue); }
.px-entra .e-roleico svg { width: 15px; height: 15px; }
.px-entra .e-roledesc { color: #c8c6c4; }

/* ---------------- placeholder pages ---------------- */

.px-entra .placeholder-page { padding: 44px 20px; color: #adadad; }
.px-entra .placeholder-page .ph-ico { opacity: .45; }