/* Color variables and design tokens are defined in theme.css — loaded before this file */

/* ─── Utility Classes ───────────────────────────────────────────────────── */

/* Layout */
.flex-row {
  display: flex;
  gap: var(--space-2);
}

.flex-center {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
  min-width: 0;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

/* Spacing */
.gap-sm {
  gap: var(--space-2);
}

.gap-md {
  gap: var(--space-3);
}

.gap-lg {
  gap: var(--space-4);
}

.mb-sm {
  margin-bottom: var(--space-2);
}

.mb-md {
  margin-bottom: var(--space-3);
}

.mb-lg {
  margin-bottom: var(--space-4);
}

.mt-sm {
  margin-top: var(--space-2);
}

.mt-md {
  margin-top: var(--space-3);
}

.mt-lg {
  margin-top: var(--space-4);
}

/* Typography */
.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--text-base);
}

.text-md {
  font-size: var(--text-md);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

.text-faint {
  color: var(--text-faint);
}

.text-success {
  color: var(--status-success);
}

.text-error {
  color: var(--status-error);
}

.text-danger {
  color: var(--danger);
}

.text-warning {
  color: var(--status-warning);
}

.org-warn-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  color: var(--status-warning);
}
.org-warn-icon svg {
  display: block;
}

.text-info {
  color: var(--status-info);
}

.font-mono {
  font-family: var(--font-mono);
}

.font-normal {
  font-weight: var(--font-normal);
}

.font-medium {
  font-weight: var(--font-medium);
}

.font-semibold {
  font-weight: var(--font-semibold);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Uppercase labels — for table headers, section titles, filter labels */
.label-caps {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* State */
.hidden {
  display: none !important;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.text-nowrap {
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

/* Table / Code utilities */
/* Standard table cell padding — replaces style="padding:0.4rem 0.75rem" inline */
.td-cell {
  padding: 0.4rem var(--space-3);
}

/* Action column — fixed narrow width for icon-only <th>/<td> */
.col-action-btn {
  width: 30px;
}

/* Preformatted code block — replaces repeated inline pre styles */
.pre-code {
  background: var(--bg-code);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

/* ─── Badge System ──────────────────────────────────────────────────────── */

/* Base badge — all semantic badges extend this */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;
}

.badge-success {
  background: color-mix(in srgb, var(--status-success) 12%, transparent);
  color: var(--status-success);
}

.badge-error {
  background: color-mix(in srgb, var(--status-error) 12%, transparent);
  color: var(--status-error);
}

.badge-warning {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  color: var(--status-warning);
}

.badge-info {
  background: color-mix(in srgb, var(--status-info) 12%, transparent);
  color: var(--status-info);
}

.badge-accent {
  background: var(--accent);
  color: var(--text-on-accent);
}

.badge-muted {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
}

/* Dynamic badge: set style="--badge-color: #hex" on the element */
.badge-dynamic {
  background: color-mix(in srgb, var(--badge-color, var(--accent)) 15%, transparent);
  color: var(--badge-color, var(--accent));
}

/* ─── Avatar ────────────────────────────────────────────────────────────── */

/* Dynamic bg: set style="--avatar-color: #hex" on the element */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: var(--radius-full);
  background: var(--avatar-color, var(--accent));
  color: var(--text-on-accent);
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
  user-select: none;
}

.avatar-lg {
  width: 40px;
  height: 40px;
  font-size: var(--text-base);
}

/* Profile-picture support: when an <img> is inside .avatar, drop the colored
   bg and let the picture fill the circle. */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.avatar:has(img) {
  background: transparent;
}
/* Same picture-replacement behaviour for header/dropdown avatars (different size/color tokens). */
.header-avatar img,
.settings-dropdown-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.header-avatar:has(img),
.settings-dropdown-avatar:has(img) {
  background: transparent;
}
/* Faded variant for recycle-bin row avatars. */
.avatar-faded {
  opacity: 0.5;
}

/* Tab dropdown — top-level tab button with a popover menu of sub-sections.
   Used by the Compliance tab so its sub-tabs replace its entire content navigation,
   freeing the full content area below. */
.tab-dropdown-wrapper {
  position: relative;
  display: inline-flex;
}
.tab-btn-dropdown .tab-dropdown-chevron {
  margin-left: 0.25rem;
  transition: transform var(--transition-base);
  opacity: 0.7;
}
.tab-btn-dropdown.dropdown-open .tab-dropdown-chevron {
  transform: rotate(180deg);
}
.tab-btn-dropdown.dropdown-open {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.tab-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  z-index: var(--z-sticky);
  flex-direction: column;
}
.tab-dropdown.open {
  display: flex;
}
.tab-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--transition-base);
}
.tab-dropdown-item:hover,
.tab-dropdown-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  outline: none;
}
.tab-dropdown-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: var(--font-semibold);
}

/* Profile picture preview lightbox — big circular avatar with edit button. */
.profile-picture-preview-card {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-picture-preview {
  position: relative;
  width: 240px;
  height: 240px;
}
.avatar-xxl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--avatar-color, var(--accent));
  color: var(--text-on-accent);
  font-weight: var(--font-semibold);
  font-size: var(--text-xl);
  letter-spacing: 0.05em;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.avatar-xxl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-xxl:has(img) {
  background: transparent;
}
.profile-picture-edit-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  background: var(--accent);
  color: var(--text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-base), background var(--transition-base);
}
.profile-picture-edit-btn:hover {
  transform: scale(1.08);
  background: var(--accent-hover, var(--accent));
}

/* Profile picture upload modal — circular crop UI. */
.profile-picture-stage {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto;
  background: var(--bg-body);
  overflow: hidden;
  user-select: none;
  cursor: grab;
  border-radius: var(--radius-md);
}
.profile-picture-stage.dragging {
  cursor: grabbing;
}
.profile-picture-stage img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.profile-picture-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 51%);
}
.profile-picture-mask::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--bg-card);
  border-radius: 50%;
  box-sizing: border-box;
  clip-path: circle(50% at 50% 50%);
}
.profile-picture-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.profile-picture-controls input[type="range"] {
  flex: 1;
}
.profile-picture-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-3);
}

/* ─── Button Color Variants ─────────────────────────────────────────────── */

/* Subtle tinted buttons — used for action rows, connector buttons, etc. */
.btn-success-subtle {
  background: color-mix(in srgb, var(--status-success) 10%, transparent);
  color: var(--status-success);
  border: 1px solid color-mix(in srgb, var(--status-success) 30%, transparent);
}

.btn-success-subtle:hover {
  background: color-mix(in srgb, var(--status-success) 18%, transparent);
}

.btn-info-subtle {
  background: color-mix(in srgb, var(--status-info) 10%, transparent);
  color: var(--status-info);
  border: 1px solid color-mix(in srgb, var(--status-info) 30%, transparent);
}

.btn-info-subtle:hover {
  background: color-mix(in srgb, var(--status-info) 18%, transparent);
}

.btn-warning-subtle {
  background: color-mix(in srgb, var(--status-warning) 10%, transparent);
  color: var(--status-warning);
  border: 1px solid color-mix(in srgb, var(--status-warning) 30%, transparent);
}

.btn-warning-subtle:hover {
  background: color-mix(in srgb, var(--status-warning) 18%, transparent);
}

.btn-workflow {
  background: color-mix(in srgb, var(--color-workflow) 10%, transparent);
  color: var(--color-workflow);
  border: 1px solid color-mix(in srgb, var(--color-workflow) 30%, transparent);
}

.btn-workflow:hover {
  background: color-mix(in srgb, var(--color-workflow) 18%, transparent);
}

.btn-indirect {
  background: color-mix(in srgb, var(--color-indirect) 10%, transparent);
  color: var(--color-indirect);
  border: 1px solid color-mix(in srgb, var(--color-indirect) 30%, transparent);
}

.btn-indirect:hover {
  background: color-mix(in srgb, var(--color-indirect) 18%, transparent);
}

/* ─── App Layout ────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Native select reset — appearance: none + theme colors + custom arrow */
select {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--bg-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  padding-right: 2.2rem;
  color: var(--text-primary);
}

body {
  font-family: var(--font-family);
  background: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
}

.sticky-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

header {
  background: var(--bg-header);
  color: var(--text-on-accent);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Customer logo — hidden by default, visible when theme provides --customer-logo */
.customer-logo {
  display: none;
  height: 28px;
}

.customer-logo.visible {
  display: block;
}

.customer-logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

header h1 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: 0.05em;
  display: flex;
  gap: 0.3em;
}

.customer-logo.visible+.logo-entrance {
  font-size: var(--text-lg);
}

.logo-accent {
  animation: logoColorShift 12s ease-in-out infinite;
}

@keyframes logoColorShift {

  0%,
  100% {
    color: var(--logo-color-1);
  }

  25% {
    color: var(--logo-color-2);
  }

  50% {
    color: var(--logo-color-3);
  }

  75% {
    color: var(--logo-color-4);
  }
}

.logo-part-nova {
  opacity: 0;
  animation: logoSlideLeft 0.9s cubic-bezier(0.23, 1, 0.32, 1) 1s forwards;
}

.logo-part-iam {
  opacity: 0;
  animation: logoSlideRight 0.9s cubic-bezier(0.23, 1, 0.32, 1) 1.15s forwards;
}

@keyframes logoSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes logoSlideRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.stats {
  display: flex;
  gap: var(--space-6);
  font-size: var(--text-base);
  opacity: 0.8;
}

.stats span {
  font-weight: var(--font-normal);
  color: rgba(255, 255, 255, 0.45);
}

.stats span[id] {
  font-weight: var(--font-bold);
  color: var(--text-on-accent);
}

.stat-link {
  cursor: pointer;
  transition: opacity var(--transition-base);
}

.stat-link:hover {
  opacity: 0.7;
}

/* Tab bar */
.tab-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 0;
  padding: 0 2rem;
}

.tab-btn {
  padding: 0.85rem 1.25rem;
  border: none;
  background: none;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-slow);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.tab-btn:has(.tab-badge:not(.hidden)) {
  padding-right: 1.75rem;
}

.tab-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.tab-btn:hover {
  color: var(--accent);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-btn.active svg {
  opacity: 1;
}

.container {
  max-width: 1500px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.users-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.users-page-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.users-page-total {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--text-muted);
}

.user-type-quick-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: var(--space-2);
  align-self: center;
}

.user-type-quick-filters .filter-btn {
  font-size: var(--text-xs);
  padding: 0.25rem 0.7rem;
  font-weight: var(--font-medium);
}

.user-type-quick-filters .filter-count {
  margin-left: 0.35rem;
  font-weight: var(--font-normal);
  opacity: 0.7;
}

.users-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.toolbar {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

#tab-users .toolbar .sort-select {
  /* Auto pushes the sort to the right edge; padding-left guarantees a
     minimum visible gap from the rightmost filter pill even when the
     filter row grows enough to consume the auto-margin. */
  margin-left: auto;
  padding-left: var(--space-5);
}

/* Layout-only overrides for inputs in a toolbar; visual styling comes
   from the shared .form-control class on the element itself. */
.toolbar input[type="text"],
.toolbar input[type="search"] {
  flex: 1;
  min-width: 200px;
  /* Cap so adding/removing filter pills doesn't reflow the search width and
     make the UI jump. Leftover space sits between search and filters. */
  max-width: 50%;
}

/* In-flight indicator for backend-driven user list loads (search debounce +
   fetch). Sits as a sibling of the search input — outside, so it doesn't
   collide with the native <input type="search"> clear (×) button. Always
   reserves its slot in the toolbar (visibility, not display) so the filter
   pills next to it don't shift when the spinner toggles on/off. */
.search-loader {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
  visibility: hidden;
}
.search-loader.is-loading {
  visibility: visible;
}

.sort-select {
  color: var(--text-secondary);
}

.filter-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* --- Filter pill buttons (used in roles, role-mining tabs) --- */
.filter-btn {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border-input);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-slow);
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-btn.active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

/* --- Filter dropdown trigger buttons --- */
.filter-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
}

.filter-dropdown-trigger:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-dropdown-trigger.has-selection {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  border-color: var(--accent);
  color: var(--accent);
  font-weight: var(--font-medium);
}

/* "+ Filter" affordance — dashed border, muted by default. */
.filter-dropdown-trigger.add-filter {
  border-style: dashed;
  color: var(--text-muted);
}
.filter-dropdown-trigger.add-filter:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}
.filter-dropdown-trigger.add-filter .filter-label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  color: inherit;
}

.filter-dropdown-trigger .filter-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* Once a filter has a value, the value alone is identifying enough — drop
   the "BUSINESS ROLE / DEPT / STATUS / TYPE" prefix to save horizontal
   space. The chevron + selection-tinted background still convey "this is a
   filter pill". */
.filter-dropdown-trigger.has-selection .filter-label {
  display: none;
}

.filter-dropdown-trigger .filter-value {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-dropdown-trigger .filter-chevron {
  font-size: var(--text-2xs);
  opacity: 0.5;
  transition: transform var(--transition-base);
}

.filter-dropdown-trigger.open .filter-chevron {
  transform: rotate(180deg);
}

.filter-dropdown-trigger .filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-2xs);
  line-height: 1;
  margin-left: var(--space-1);
  cursor: pointer;
  transition: background var(--transition-base);
}

.filter-dropdown-trigger .filter-clear:hover {
  background: var(--danger);
}

/* --- Filter dropdown panel --- */
.filter-dropdown-wrapper {
  position: relative;
  display: inline-flex;
}

.filter-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 280px;
  max-width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  overflow: hidden;
}

.filter-dropdown-panel.open {
  display: block;
}

.filter-dropdown-search {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.filter-dropdown-search input {
  width: 100%;
}

.filter-dropdown-items {
  max-height: 260px;
  overflow-y: auto;
  padding: var(--space-1) 0;
}

.filter-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-base);
  color: var(--text-primary);
}

.filter-dropdown-item:hover {
  background: var(--bg-subtle);
}

.filter-dropdown-item.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-weight: var(--font-medium);
}

.filter-dropdown-item .filter-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-dropdown-item .filter-item-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: var(--space-2);
  flex-shrink: 0;
}

.filter-dropdown-item.active .filter-item-count {
  color: var(--accent);
  opacity: 0.7;
}

.filter-dropdown-empty {
  padding: var(--space-3);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--text-sm);
}
/* Department filter chips — same style as base .filter-btn, no overrides needed */
/* Department inline in user row */
.user-dept {
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-base);
  display: inline-block;
  margin-bottom: 4px;
}

.user-dept:hover {
  color: var(--accent);
  text-decoration: underline;
}

.user-dept-label {
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

/* Searchable manager dropdown */
.search-dropdown-wrapper {
  position: relative;
}

.search-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.search-dropdown-list.open {
  display: block;
}

.search-dropdown-list.dropdown-up {
  top: auto;
  bottom: 100%;
  border-radius: var(--radius-lg) 8px 0 0;
  border-top: 1px solid var(--border-input);
  border-bottom: none;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.search-dropdown-item {
  padding: 0.45rem 0.75rem;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-base);
}

.search-dropdown-item:hover {
  background: var(--bg-subtle);
}

.search-dropdown-item.selected {
  background: color-mix(in srgb, var(--color-focus) 6%, transparent);
  color: var(--accent);
  font-weight: var(--font-medium);
}

.search-dropdown-clear {
  padding: 0.45rem 0.75rem;
  font-size: var(--text-sm);
  color: var(--text-faint);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
}

.search-dropdown-clear:hover {
  color: var(--status-error);
}

/* SAP Role Picker */
.sap-picker-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.3rem 0;
}

.sap-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sap-picker-name {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.sap-picker-desc {
  color: var(--text-muted);
  font-size: var(--text-xs);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sap-picker-assigned {
  opacity: 0.45;
  cursor: default !important;
}

.sap-picker-assigned-tag {
  font-size: var(--text-2xs);
  padding: 0.1rem 0.35rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.sap-picker-footer-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.sap-manual-toggle {
  color: var(--text-muted);
  text-decoration: none;
}

.sap-manual-toggle:hover {
  text-decoration: underline;
}

.sap-manual-wrapper {
  padding: 0.3rem 0;
}

/* Assignment Add Popover (used by SAP/LDAP/Entra/SCIM section headers) */
.assignment-add-popover {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 360px;
  max-width: 480px;
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
}

.assignment-add-popover.open {
  display: block;
}

.assignment-add-popover .search-dropdown-list {
  position: static;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-top: var(--space-1);
  max-height: 280px;
  box-shadow: none;
}

.assignment-add-popover .sap-picker-wrapper,
.assignment-add-popover .sap-manual-wrapper {
  padding: 0;
}

.assignment-add-popover .sap-picker-footer-hint {
  margin-top: var(--space-2);
}

.btn-add-assignment {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-slow);
}

.btn-add-assignment:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
}

.btn-add-assignment .btn-add-icon {
  font-size: var(--text-md);
  line-height: 1;
  font-weight: var(--font-bold);
}

.assignment-add-anchor {
  position: relative;
  display: inline-block;
}

.sap-row-added,
.assignment-row-added {
  border-left: 3px solid var(--status-success);
}

.sap-row-modified,
.assignment-row-modified {
  border-left: 3px solid var(--status-warning);
}

.sap-row-removed,
.assignment-row-removed {
  border-left: 3px solid var(--status-error);
  opacity: 0.6;
}

.sap-row-removed td:first-child,
.assignment-row-removed td:first-child {
  text-decoration: line-through;
}

.user-table {
  width: 100%;
  /* Fixed layout so column widths don't shift when row content varies between
     searches/filters (e.g. some users have many role badges, others few).
     Widths come from the colgroup below. */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.user-table col.col-user { width: 30%; }
.user-table col.col-summary { width: auto; }
.user-table col.col-modified { width: 180px; }
.user-table col.col-actions { width: 56px; }
/* Actions column = single icon. Right-align both the header label AND the
   icon button so they unambiguously share the same anchor (the column's
   right edge). Tightens the horizontal padding so the column stays slim. */
.user-table th:last-child,
.user-table td:last-child {
  text-align: right;
  padding-left: var(--space-2);
  padding-right: var(--space-3);
}
.user-table td:last-child .user-row-actions {
  justify-content: flex-end;
}

.user-table thead {
  background: var(--bg-subtle);
}

.user-table th {
  text-align: left;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.user-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.user-table tbody tr:last-child td {
  border-bottom: none;
}

.user-table tbody tr:hover {
  background: var(--bg-subtle);
}

.last-modified-cell {
  white-space: nowrap;
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.user-info:hover .row-title {
  color: var(--accent);
}

.user-name {
  transition: color var(--transition-slow);
}

.role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: default;
}

.role-badge.composite {
  border-style: dashed !important;
  border-width: 1.5px !important;
  cursor: pointer;
  position: relative;
  font-size: var(--text-xs);
  padding: 0.15rem 0.45rem;
}

.role-badge.composite:hover {
  filter: brightness(0.95);
}

.composite-popover {
  display: none;
  position: fixed;
  z-index: var(--z-sticky);
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 0.85rem 1rem;
  min-width: 200px;
  max-width: 300px;
}

.composite-popover.open {
  display: block;
}

.composite-popover-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.composite-popover-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.composite-popover-label {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

.composite-popover-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.composite-popover-members .role-badge {
  cursor: default;
  font-size: var(--text-xs);
}

/* User popover — opens on click of any element marked .user-trigger
   (see static/js/user-popover.js). Singleton, position:fixed, anchored to
   the trigger element. The trigger styles intentionally avoid setting
   border-radius / background so they don't fight whatever shape the host
   element already has (round avatars, inline name spans, etc.). */
.user-trigger {
  cursor: pointer;
  transition: opacity var(--transition-base), box-shadow var(--transition-base);
}
.user-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Avatar variant: subtle ring on hover/focus instead of a background swap,
   so the circular shape stays intact. Same effect for `.dept-trigger` since
   department icons reuse the `.avatar` base. */
.avatar.user-trigger:hover,
.avatar.dept-trigger:hover,
.avatar.dept-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent);
}
/* Inline-name variant: hover-only underline + slight pad for the focus ring. */
.user-name-link {
  display: inline;
  border-radius: var(--radius-sm);
}
.user-name-link:hover {
  text-decoration: underline;
}

.user-popover {
  position: fixed;
  z-index: var(--z-popover-modal);
  width: 360px;
  max-width: 90vw;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.user-popover.hidden {
  display: none;
}
.user-popover-header {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
}
/* Header avatar: bump the lg size to ~56px and explicitly drop any inherited
   shadow so the popover header stays flat. */
.user-popover-header .avatar {
  width: 56px;
  height: 56px;
  font-size: var(--text-xl);
  box-shadow: none;
}
.user-popover-identity {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-popover-name {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--text-primary);
  line-height: 1.2;
}
.user-popover-sub {
  font-size: var(--text-sm);
  color: var(--text-faint);
}
.user-popover-body {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-5) var(--space-5);
}
.user-popover-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--text-primary);
  padding: var(--space-2) 0;
  text-decoration: none;
  min-width: 0;
}
.user-popover-row:hover {
  color: var(--accent);
}
.user-popover-icon {
  flex: 0 0 auto;
  color: var(--text-muted);
}
.user-popover-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}
.user-popover-open-profile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.user-popover-loading {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-5);
}

/* Dept popover — inherits all `.user-popover*` rules; just needs a
   slightly wider footprint for the member list and per-member layout. */
.dept-popover { width: 360px; max-width: 95vw; }
.user-popover-dept-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--accent-subtle);
  color: var(--accent);
  flex-shrink: 0;
}
.dept-popover-list {
  max-height: 320px;
  overflow-y: auto;
  gap: 0;
}
.dept-popover-member {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.dept-popover-member:last-child { border-bottom: none; }
.dept-popover-member-name {
  font-size: var(--text-base);
  color: var(--text-primary);
}
.dept-popover-member-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  justify-self: end;
  min-width: 0;
  max-width: 180px;
}

.dept-trigger { cursor: pointer; }
.dept-trigger:focus-visible { outline: none; }

.role-badge.indirect {
  opacity: 0.55;
  border-style: dotted !important;
  border-width: 1.5px !important;
}

.role-badge.indirect .indirect-via {
  font-size: var(--text-2xs);
  opacity: 0.75;
  font-weight: var(--font-normal);
}

.role-badge .remove-role {
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.role-badge .remove-role:hover {
  opacity: 1;
}

.no-roles {
  font-size: var(--text-sm);
  color: var(--text-faint);
  font-style: italic;
}

.assign-btn {
  padding: 0.4rem 0.85rem;
  border: 1px dashed var(--border-input);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-slow);
  white-space: nowrap;
}

.assign-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.user-delete-btn {
  padding: 0.4rem 0.85rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-faint);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-slow);
  white-space: nowrap;
}

.user-delete-btn:hover {
  border-color: var(--status-error);
  color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
}

.user-row-actions {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
}

.modal-overlay.open {
  display: flex;
}

/* Stacked modals: lower layers hide their backdrop so we don't double-dim */
.modal-overlay.modal-stacked {
  background: transparent;
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-2xl);
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.modal.wide {
  width: 1100px;
}

.modal.modal-request-detail {
  width: 1200px;
  max-width: 95vw;
  height: 90vh;
}

.modal.modal-request-create {
  width: 960px;
  max-width: 95vw;
  height: 90vh;
}
/* Body lays out as flex column so the roles section can grow into the
   remaining height after the (fixed-size) target-user section. */
.modal.modal-request-create .modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow: hidden;
}
.modal.modal-request-create .modal-body > .req-section:last-child {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.modal.modal-request-create .modal-body > .req-section:last-child .req-role-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.modal.modal-request-create .modal-body > .req-section:last-child .req-role-table-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* ── New access request modal ─────────────────────────────────────────── */
.request-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.request-create-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}
.request-create-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* margin-right: auto wins regardless of the parent's justify-content (the
   base .modal-footer rule sets flex-end). Summary anchors left, actions
   stay right. */
.request-create-footer-summary {
  margin-right: auto;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.request-create-footer-summary strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}
.request-create-footer-actions {
  display: flex;
  gap: var(--space-2);
}

/* Section labels — uppercase faint, mirrors the request-detail meta strip.
   Vertical spacing between sections comes from the parent's `gap` (set on
   `.modal-request-create .modal-body`). */
.req-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}

/* Target user pill — card layout normally, an inline searchable dropdown
   when the user clicked Change. */
.req-target-section {
  position: relative;
}
.req-target-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
}
.req-target-card-text {
  flex: 1 1 auto;
  min-width: 0;
}
.req-target-card-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.req-target-card-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.req-target-change-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}
.req-target-change-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.req-target-section.open #req-target-search {
  width: 100%;
}
.req-target-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-overlay);
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
}
.req-target-result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.req-target-result + .req-target-result {
  border-top: 1px solid var(--border-subtle);
}
.req-target-result:hover {
  background: var(--bg-subtle);
}
.req-target-result-text {
  flex: 1 1 auto;
  min-width: 0;
}
.req-target-result-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.req-target-result-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.req-target-empty {
  padding: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Section headers inside the picker dropdown (Departments / Groups / Users). */
.req-target-section-head {
  padding: var(--space-2) var(--space-3) 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  background: var(--bg-card);
}
.req-target-section-head + .req-target-result {
  border-top: 0;
}

/* Department / group icons reuse the `.avatar` base — same circular
   shape, same size scale, same hover-ring semantics as user avatars.
   These two modifiers just paint the right tint per kind and size the
   inner SVG to fit. */
.avatar.avatar-dept  { --avatar-color: var(--accent); }
.avatar.avatar-group { --avatar-color: var(--status-info); }
.avatar.avatar-dept svg,
.avatar.avatar-group svg {
  width: 55%;
  height: 55%;
  stroke: currentColor;
}
/* Inline kind badge in the option row's name line. */
.req-target-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 6px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.req-target-badge-department {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.req-target-badge-group {
  background: color-mix(in srgb, var(--status-info) 12%, transparent);
  color: var(--status-info);
}

/* Roles card — search/filter toolbar + table. */
.req-role-card {
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.req-role-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.req-role-toolbar #req-role-search {
  flex: 1 1 auto;
  min-width: 0;
}
.req-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border-input);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}
.req-cat-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.req-cat-pill.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  border-color: var(--accent);
  color: var(--accent);
}
.req-cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
.req-cat-pill.active .req-cat-count {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.req-role-table-head,
.req-role-table-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 140px 180px 140px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
}
.req-role-table-head {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.req-role-table-body {
  max-height: 360px;
  overflow-y: auto;
}
.req-role-table-row {
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-light);
  color: var(--text-muted);
}
.req-role-table-row:first-child { border-top: 0; }
.req-role-table-row:hover {
  background: var(--bg-subtle);
}
.req-role-table-row.selected {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.req-role-cell-check input {
  cursor: pointer;
}
.req-role-table-row .req-role-cell-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.req-role-table-row .req-role-cell-name .role-dot {
  flex-shrink: 0;
}
.req-role-name-text {
  min-width: 0;
}
.req-role-cell-name .req-role-desc {
  margin-top: 2px;
}
.req-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
.req-cat-badge.entitlement {
  background: color-mix(in srgb, var(--status-info) 12%, transparent);
  color: var(--status-info);
}
.req-cat-badge.business {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
/* Body-row only — header cells inherit the uppercase faint look from
   `.req-role-table-head` and shouldn't be styled like values. */
.req-role-table-row .req-role-cell-source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.req-role-table-row .req-role-cell-source > span:not(.role-dot) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.req-role-empty {
  padding: var(--space-5);
  text-align: center;
}

/* System account row styling */
.system-account-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-subtle2);
  border-radius: var(--radius-md);
}

/* width-only; canonical handles padding & font-size */

.system-account-row .btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: var(--text-base);
  min-width: 32px;
}

/* --- Account Rows (Connected Accounts tab) --- */
.accounts-toolbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-3);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
}

.accounts-search {
  position: relative;
  flex: 1;
  max-width: 320px;
  display: flex;
  align-items: center;
}

.accounts-search svg {
  position: absolute;
  left: 0.6rem;
  color: var(--text-muted);
  pointer-events: none;
}

.accounts-search input[type="text"] {
  width: 100%;
  min-height: 0;
  padding: 0.4rem 0.6rem 0.4rem 2rem;
  font-size: var(--text-sm);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color var(--transition-base);
}

.accounts-search input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.accounts-toolbar .add-account-toggle {
  margin-left: auto;
}

.accounts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.account-row {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.account-row:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-card));
}

.account-row.expanded {
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-card));
}

.account-row-summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.55rem 0.85rem;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--text-base);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.account-row-system {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-width: 0;
}

.account-row-system-name {
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.account-row-id {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-row-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  flex: 0 0 auto;
}

.account-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.account-row-status.active .account-status-dot { background: var(--status-success); }
.account-row-status.active { color: var(--status-success); }
.account-row-status.locked .account-status-dot { background: var(--status-warning); }
.account-row-status.locked { color: var(--status-warning); }
.account-row-status.inactive .account-status-dot { background: var(--text-muted); }
.account-row-status.inactive { color: var(--text-muted); }

.account-row-chevron {
  color: var(--text-muted);
  flex: 0 0 auto;
  transition: transform var(--transition-base);
}

.account-row.expanded .account-row-chevron {
  transform: rotate(180deg);
}

.account-row-details {
  display: none;
  padding: 0 0.85rem 0.75rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.6rem;
}

.account-row.expanded .account-row-details {
  display: block;
}

.account-row-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.account-row-actions .btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-xs);
  padding: 0.28rem 0.55rem;
}

.account-row-actions .btn-sm svg {
  flex-shrink: 0;
}

.btn-ghost-danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 0.28rem 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1;
}

.btn-ghost-danger:hover:not(:disabled) {
  color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 8%, transparent);
}

.account-row-inline {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-base);
}

.accounts-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.card-pw-input {
  width: 100%;
}

.verify-ok {
  color: var(--status-success);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.verify-fail {
  color: var(--status-error);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.add-account-toggle {
  color: var(--text-secondary);
}

.add-account-toggle:hover:not(:disabled) {
  color: var(--accent);
}

.add-account-form {
  width: 100%;
  padding: 0.875rem;
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle2);
}

.add-account-form-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.add-account-form-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.add-acct-warning {
  font-size: var(--text-sm);
  color: var(--status-warning);
  padding: 0.35rem 0.5rem;
  background: color-mix(in srgb, var(--status-warning) 8%, transparent);
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
}

.add-account-pw-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.add-account-form-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: 0.65rem;
}

.add-account-create-panel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 0.5rem;
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.modal-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.modal-header p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.user-id-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--text-muted);
  margin-left: 0.35rem;
}

.modal-body {
  padding: 1rem 1.5rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.modal-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0.75rem 0 0.35rem 0;
}

.modal-section-label:first-child {
  margin-top: 0;
}

.role-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-base);
}

.role-option:hover {
  background: var(--bg-subtle);
}

.role-option-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.role-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.role-option-name {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

.role-option-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.role-check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-input);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-slow);
  flex-shrink: 0;
}

.role-check.checked {
  background: var(--accent);
  border-color: var(--accent);
}

.role-check.checked::after {
  content: '\2713';
  color: var(--text-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.btn {
  box-sizing: border-box;
  min-height: 2rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 1.5;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-slow);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg-body);
  color: var(--text-secondary);
  border: 1px solid var(--border-input);
}

.btn-secondary:hover {
  background: var(--border-color);
}

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

/* Icon-only variant — square, same vertical metrics as a text .btn */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  aspect-ratio: 1;
  line-height: 0;
}
.btn-icon > svg {
  display: block;
}

.btn-danger {
  background: var(--status-error);
  color: var(--text-on-accent);
}

.btn-danger:hover {
  background: var(--status-error-hover);
}

/* Button loading spinner */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading * {
  visibility: hidden;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: var(--text-on-accent);
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

.btn-secondary.btn-loading::after,
.system-card-actions .btn-loading::after {
  border-color: rgba(100, 100, 100, 0.3);
  border-top-color: var(--text-secondary);
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* Compact empty-state for inline use inside cards / panels (dashboard
   widgets, modal sections, etc.) — same color + font as `.empty-state`,
   just lighter padding so it doesn't blow up the host card. */
.empty-state.empty-state-inline,
.empty-state-inline {
  padding: var(--space-3) var(--space-4);
}

/* Boxed empty-state: dashed border around the message. Used for editor
   sections that have an empty list + a "add one" affordance (e.g. the
   admin lifecycle editor). */
.empty-state.empty-state-boxed {
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* Roles tab styles */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: 2rem;
}

.role-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left: 3px solid transparent;
}

.role-card.composite-card {
  border-left: 3px dashed var(--cr-color, var(--color-workflow));
  background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--bg-card) 100%);
}

.role-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.role-card-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}

.role-card-title .role-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.role-card-title span:not(.role-card-type-tag) {
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  word-break: break-word;
}


.role-card-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.role-card-desc.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.role-card-desc-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.role-card-desc-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--accent);
  cursor: pointer;
}

.role-card-desc-toggle:hover {
  text-decoration: underline;
}

.role-card-id {
  color: var(--text-muted);
}

.role-card-type-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--status-info);
  background: color-mix(in srgb, var(--status-info) 15%, transparent);
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-left: 0.25rem;
  flex-shrink: 0;
  line-height: 1;
}

.pending-changes-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--status-warning);
  cursor: help;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}

.pending-changes-icon svg {
  display: block;
}

.system-card-icons > .pending-changes-icon {
  width: 1.75rem;
  height: 1.75rem;
}

.system-card-icons > .pending-changes-icon svg {
  width: 16px;
  height: 16px;
}

.roles-table td > .pending-changes-icon {
  margin-left: 0.4rem;
}

.role-card-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.member-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.role-card.clickable {
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.role-card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Roles toolbar (search + view toggle) --- */
.roles-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.roles-search-input {
  width: 220px;
}

/* --- Systems toolbar (search + type filter chips) --- */
.systems-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.systems-toolbar:empty {
  display: none;
}

.systems-search-input {
  flex: 0 1 280px;
  min-width: 200px;
}

.systems-toolbar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.systems-toolbar-chips .filter-btn {
  font-size: var(--text-xs);
  padding: 0.3rem 0.7rem;
}

.systems-toolbar-chips .filter-count {
  font-weight: var(--font-normal);
  opacity: 0.7;
  margin-left: 0.2rem;
}

.roles-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.roles-view-toggle button {
  padding: 0.35rem 0.6rem;
  border: none;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
  transition: background var(--transition-base), color 0.15s;
}

.roles-view-toggle button:not(:last-child) {
  border-right: 1px solid var(--border-color);
}

.roles-view-toggle button.active {
  background: var(--accent);
  color: var(--text-on-accent);
}

.roles-view-toggle button:hover:not(.active) {
  background: var(--bg-secondary);
}
/* --- Roles table view --- */
.roles-table {
  width: 100%;
  border-collapse: collapse;
}

.roles-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  user-select: none;
}

.roles-table th.sortable {
  cursor: pointer;
}

.roles-table th.sortable:hover {
  color: var(--text-primary);
}

.roles-table th .sort-arrow {
  font-size: var(--text-xs);
  margin-left: 0.25rem;
  opacity: 0.4;
}

.roles-table th.sorted .sort-arrow {
  opacity: 1;
  color: var(--accent);
}

.roles-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-table tbody tr {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.roles-table tbody tr:hover {
  background: var(--bg-secondary);
}

.roles-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  margin-top: 0.5rem;
}

.roles-load-more span {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Roles cluster chips --- */
.roles-cluster-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
  align-items: center;
}

.roles-cluster-chips .filter-btn {
  font-size: var(--text-xs);
  padding: 0.3rem 0.7rem;
}

.roles-cluster-chips .cluster-count {
  font-weight: var(--font-normal);
  opacity: 0.7;
  margin-left: 0.2rem;
}

.roles-view-toggle button.loading {
  pointer-events: none;
  opacity: 0.6;
}

.role-detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: 1.25rem;
}

.role-detail-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}

.role-detail-field .value {
  font-size: var(--text-base);
  color: var(--text-primary);
  word-break: break-word;
}

.role-detail-field .value.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.role-detail-section {
  margin-bottom: 1.25rem;
}

.role-detail-section h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.role-detail-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.role-detail-child-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.role-detail-child-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.6rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.role-detail-child-item .child-id {
  color: var(--text-muted);
}

.role-detail-child-item .child-text {
  color: var(--text-primary);
}

/* Form styles inside modals */
.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: 0.3rem;
  color: var(--text-faint);
}

/* Form fields inside .form-group take the canonical text-input look from the
   element-level rule below; only width is layout-specific to the form. */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="color"],
.form-group select,
.form-group textarea {
  width: 100%;
}

.form-group input[type="color"] {
  height: 38px;
  padding: 4px;
  cursor: pointer;
}

/* ────────────────────────────────────────────────────────────────────────
   Canonical text-input / textarea look. Applied automatically to every
   input[type=text|search|email|password|number|tel|url] and every
   textarea, AND available as an explicit `.form-control` class for
   elements that need the same look but don't match those selectors.

   Local rules across the app should only handle LAYOUT (flex, width,
   resize, rows, min-width) — never visual styling that's already defined
   here. Selects are intentionally excluded; native chevrons require
   special handling and have their own variants.
   ──────────────────────────────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
textarea.form-control {
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-family: inherit;
  line-height: 1.5;
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
}
textarea,
textarea.form-control {
  resize: vertical;
}

.form-control:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
textarea:focus {
  border-color: var(--accent);
}

.form-control:disabled,
.form-control[disabled],
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────────────
   Checkbox — single centralized style.

   Element-level rule so every <input type="checkbox"> in the app looks
   identical. Local feature CSS should only handle LAYOUT around it (flex,
   gap, label alignment) — never the box itself. Hook classes
   (.joiner-cb, .nova-role-check, .req-role-check, .lc-step-cb-*, etc.)
   stay in the markup as JS event-handler identifiers; their CSS has been
   removed. The .ai-toggle-switch is a button-based slider and unaffected.
   ────────────────────────────────────────────────────────────────────────── */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  position: relative;
  margin: 0;
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
input[type="checkbox"]:hover:not(:checked):not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
}
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  /* Center the check geometrically, then nudge up 1px so the visual mass
     (concentrated in the bottom-right "L" of the pre-rotation box) sits
     in the middle of the checkbox. translate + rotate composes correctly
     regardless of box size, so a future resize won't reopen this. */
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid var(--text-on-accent);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, calc(-50% - 1px)) rotate(45deg);
}
input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Native <select>: same visual look, but keep the OS chevron rendering. */
select,
select.form-control {
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.5rem 2.2rem 0.5rem 1rem;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-family: inherit;
  line-height: 1.5;
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition-base);
  cursor: pointer;
}
select:focus,
select.form-control:focus {
  border-color: var(--accent);
}

/* Minimal select — strips the canonical chrome down to just the value plus
   a small caret. Use for inline "view options" controls where the select is
   not a primary form field (e.g. the sort selector in toolbars). The caret
   uses two adjacent CSS gradients so it inherits `currentColor` and works
   in both light and dark themes without a hardcoded fill. */
select.select-minimal {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  min-height: auto;
  padding: 0 1rem 0 0;
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: 1.5;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 8px) 55%,
    calc(100% - 4px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
select.select-minimal:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Compact select — pill-shaped inline picker that matches the visual
   language of .filter-dropdown-trigger (used in the users filter bar).
   Standard for ANY in-row / in-toolbar "pick a value" select where the
   full 2.5rem form-control height would be too tall. Custom caret so
   the native arrow doesn't betray the chrome. */
select.select-compact {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: 0;
  padding: 0.4rem 1.8rem 0.4rem 0.85rem;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
select.select-compact:hover:not(:disabled),
select.select-compact:focus:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
select.select-compact::-ms-expand { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   Tables — single centralized cell text style.

   Every <table> in the app gets the `app-table` class alongside its
   feature-specific class. Per-feature CSS handles layout (padding,
   widths, hover bg, dividers) but never sets font-size / color /
   font-weight / font-family on cells or their descendants — that's
   monopolized here.

   Rules:
     - One cell font-size: --text-base.
     - Two colors: --text-primary (primary text only), --text-muted (rest).
     - Two weights: 300 by default, --font-medium for primary text.
     - Primary = `.row-title` inside the first <td> of a row.
   Badges / tags / status pills are exempt — they paint themselves.
   ────────────────────────────────────────────────────────────────────────── */
.app-table {
  font-size: var(--text-base);
  color: var(--text-muted);
  font-weight: var(--font-light);
}
.app-table th {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.app-table td {
  font-size: var(--text-base);
  color: var(--text-muted);
  font-weight: var(--font-light);
}
/* `.row-title` marks the primary text of any row-like UI element — table
   rows, the request-detail role rows, org-detail items, positions rows.
   One global rule keeps the look in lock-step across surfaces. */
.row-title {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* Password visibility toggle */
.pw-field {
  position: relative;
  width: 100%;
}

.pw-field input[type="password"],
.pw-field input[type="text"] {
  padding-right: 2.25rem;
  width: 100%;
}

.pw-toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  line-height: 1;
}

.pw-toggle:hover {
  color: var(--text-secondary);
}

.form-group textarea {
  resize: vertical;
  min-height: 60px;
}

.form-group select {
  cursor: pointer;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.info-box {
  padding: 0.75rem;
  background: color-mix(in srgb, var(--status-info) 8%, transparent);
  border-radius: 6px;
  color: var(--status-info);
}

.checkbox-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.25rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-base);
  line-height: 1.3;
}

.checkbox-item:hover {
  background: var(--bg-subtle);
}

.checkbox-item-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex-wrap: wrap;
}

.checkbox-item-label>span {
  font-size: var(--text-sm);
}

.composite-role-id-hint {
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.org-manager-hint {
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-top: 0.25rem;
}

.org-manager-hint strong {
  color: var(--text-muted);
}

/* User detail modal */
.detail-section {
  margin-bottom: var(--space-6);
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
}

.detail-roles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Detail roles filter tabs */
.detail-roles-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}

.detail-roles-filter-tab {
  padding: 0.4rem 0.85rem;
  border: none;
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
  font-family: inherit;
}

.detail-roles-filter-tab:hover {
  color: var(--accent);
}

.detail-roles-filter-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.detail-roles-filter-tab .tab-count {
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-left: 0.2rem;
}

.detail-roles-filter-tab.active .tab-count {
  color: var(--accent);
}

/* Role groups (for "All" filter) */
.detail-roles-group {
  margin-bottom: var(--space-3);
}

.detail-roles-group:last-child {
  margin-bottom: 0;
}

.detail-roles-group-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.detail-systems-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-systems-table th {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.detail-systems-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
/* User status select with accent left-border (color set per status via data-attribute) */
.status-select {
  font-weight: var(--font-medium);
  border-left-width: 3px;
  border-left-style: solid;
}
.status-select.status-active {
  border-left-color: var(--status-success);
  color: var(--status-success);
}
.status-select.status-inactive {
  border-left-color: var(--status-error);
  color: var(--status-error);
}
.status-select.status-onboarding {
  border-left-color: var(--status-info);
  color: var(--status-info);
}
.status-select option {
  color: var(--text-primary);
}

/* Target systems tab */
#systems-grid,
#sources-grid {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

.system-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-left: 3px solid var(--status-info);
}

.system-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.system-card-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.system-card-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.system-type-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.system-type-tag.sap {
  background: color-mix(in srgb, var(--status-info) 12%, transparent);
  color: var(--status-info);
}

.system-type-tag.entra {
  background: color-mix(in srgb, var(--color-entra) 12%, transparent);
  color: var(--color-entra);
}

.system-type-tag.ldap {
  background: color-mix(in srgb, var(--status-success) 12%, transparent);
  color: var(--status-success);
}

.system-type-tag.scim {
  background: color-mix(in srgb, var(--color-scim) 12%, transparent);
  color: var(--color-scim);
}

.system-type-tag.nova_iam {
  background: color-mix(in srgb, var(--accent-hover) 12%, transparent);
  color: var(--accent-hover);
}

.system-type-tag.nova_hr_stage {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  color: var(--status-warning);
}

.system-type-tag.other {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
}

.system-card-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
}

.system-card-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.system-card-meta {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-family: var(--font-mono);
  line-height: 1.5;
}

.system-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

.system-card-actions button {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.system-card-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Edit / Delete icon buttons (top-right of card) */
.system-card-icons {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.system-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-faint);
  cursor: pointer;
  transition: all var(--transition-base);
  padding: 0;
}

.system-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--color-focus) 3%, transparent);
}

.system-icon-btn.system-icon-delete:hover {
  border-color: var(--status-error);
  color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 3%, transparent);
}

.backend-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1;
  flex-shrink: 0;
}

.backend-active {
  background: color-mix(in srgb, var(--status-success) 12%, transparent);
  color: var(--status-success-hover);
}

.backend-not-found {
  background: color-mix(in srgb, var(--status-error) 12%, transparent);
  color: var(--status-error-hover);
}

/* Sync-from-source indicator (OUs + positions): tells the user whether an
   entity is synced from an OM source and whether its parent matches. */
.sync-indicator {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  flex-shrink: 0;
  vertical-align: middle;
}

.sync-ok {
  background: var(--status-success);
}

.sync-parent-mismatch {
  background: var(--status-warning);
}

.sync-native {
  background: var(--status-info);
}

.backend-unknown {
  background: var(--bg-subtle);
  color: var(--text-faint);
}

/* Collapsible advanced section */
.collapsible-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.5rem 0;
  transition: color var(--transition-slow);
}

.collapsible-toggle:hover {
  color: var(--accent);
}

.collapsible-toggle .arrow {
  transition: transform var(--transition-slow);
  font-size: var(--text-xs);
}

.collapsible-toggle.open .arrow {
  transform: rotate(90deg);
}

.collapsible-content {
  display: none;
}

.collapsible-content.open {
  display: block;
}

.no-data-text {
  font-size: var(--text-sm);
  color: var(--text-faint);
  font-style: italic;
}

/* SAP User Lookup Modal */
.sap-user-result {
  margin-top: 1rem;
}

.sap-user-card {
  background: var(--bg-subtle);
  border-radius: 10px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.sap-user-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.sap-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--avatar-color, var(--status-info));
  color: var(--text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  flex-shrink: 0;
}

.nova-match-section {
  border-radius: 6px;
  padding: 0.6rem;
  margin: 0.8rem 0;
}

.nova-match-success {
  background: color-mix(in srgb, var(--status-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-success) 25%, transparent);
}

.nova-match-warning {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-warning) 25%, transparent);
}

.nova-match-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--avatar-color, var(--status-info));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}

.sap-popover-role-item {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-color);
}

.sap-popover-roles-list {
  max-height: 220px;
  overflow-y: auto;
}

.sap-user-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
}

.sap-user-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.sap-roles-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.sap-roles-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 300px;
  overflow-y: auto;
}

.sap-role-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

.sap-role-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.sap-role-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.sap-role-dates {
  font-size: var(--text-xs);
  color: var(--text-faint);
  white-space: nowrap;
}

.sap-lookup-input-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

.sap-lookup-input-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.sap-lookup-input-row .btn {
  height: 36px;
  white-space: nowrap;
}

.sap-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: var(--text-base);
}

.sap-error {
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
  color: var(--status-error-hover);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  margin-top: 1rem;
}

.sap-no-roles {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-faint);
  font-style: italic;
  font-size: var(--text-base);
}

.sap-role-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

.sap-action-buttons {
  display: flex;
  gap: var(--space-2);
  margin-top: 1rem;
  flex-wrap: wrap;
}

.sap-action-buttons .btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
}

.btn-success {
  background: var(--status-success);
  color: var(--text-on-accent);
}

.btn-success:hover {
  background: var(--status-success-hover);
}

.btn-warning {
  background: var(--status-warning);
  color: var(--text-on-accent);
}

.btn-warning:hover {
  background: var(--status-warning-hover);
}

/* System tags on user rows */
.system-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0.2rem;
}

.system-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.4rem;
  border-radius: 3px;
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.system-tag.sap {
  background: color-mix(in srgb, var(--status-info) 6%, transparent);
  color: var(--status-info);
}

.system-tag.ldap {
  background: color-mix(in srgb, var(--status-success) 6%, transparent);
  color: var(--status-success);
}

.system-tag.scim {
  background: color-mix(in srgb, var(--color-scim) 6%, transparent);
  color: var(--color-scim);
}

.system-tag.other {
  background: color-mix(in srgb, var(--text-muted) 7%, transparent);
  color: var(--text-muted);
}

.sync-roles-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--status-info) 25%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--status-info) 6%, transparent);
  color: var(--status-info);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-slow);
}

.sync-roles-btn:hover {
  background: color-mix(in srgb, var(--status-info) 12%, transparent);
  border-color: var(--status-info);
}

.sync-roles-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 700px) {
  .user-table thead {
    display: none;
  }

  .user-table,
  .user-table tbody,
  .user-table tr,
  .user-table td {
    display: block;
    width: 100%;
  }

  .user-table tr {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
  }

  .user-table td {
    padding: 0.4rem 1rem;
    border: none;
  }

  .user-table td:first-child {
    padding-top: 0.75rem;
  }

  .user-table td:last-child {
    padding-bottom: 0.75rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* --- Toast Notifications --- */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: var(--z-sticky);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), color var(--transition-base), background var(--transition-base);
  pointer-events: none;
}

.back-to-top:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-md);
  animation: toast-in 0.25s ease-out;
  max-width: 380px;
  line-height: 1.4;
}

.toast.success {
  background: var(--status-success);
}

.toast.error {
  background: var(--status-error);
}

.toast.info {
  background: var(--status-info);
}

.toast.fade-out {
  animation: toast-out 0.25s ease-in forwards;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* --- Sortable table headers --- */
th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--text-muted);
}

th.sortable::after {
  margin-left: 0.3rem;
  font-size: var(--text-2xs);
  opacity: 0.5;
}

th.sort-asc::after {
  content: '▲';
  opacity: 1;
}

th.sort-desc::after {
  content: '▼';
  opacity: 1;
}

/* --- Unified edit-table base (SAP, LDAP, Entra, SCIM, Nova, Reconcile) --- */
.sap-edit-table,
.ldap-edit-table,
.entra-edit-table,
.scim-edit-table,
.nova-edit-table {
  width: 100%;
  border-collapse: collapse;
}

/* Business areas admin table: color picker + hex label inline */
.business-areas-table .ba-color-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.business-areas-table .ba-color {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.business-areas-table .ba-name {
  width: 100%;
}

.business-areas-table .ba-sort {
  width: 80px;
}

.business-areas-table .ba-action-cell {
  text-align: right;
}

.sap-edit-table th,
.ldap-edit-table th,
.entra-edit-table th,
.scim-edit-table th,
.nova-edit-table th,
.reconcile-table th {
  padding: var(--space-2) var(--space-2);
  text-align: left;
  background: color-mix(in srgb, var(--bg-subtle2) 93%, var(--text-faint));
  white-space: nowrap;
}

.sap-edit-table td,
.ldap-edit-table td,
.entra-edit-table td,
.scim-edit-table td,
.nova-edit-table td {
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.sap-edit-table input[type="text"],
.ldap-edit-table input[type="text"],
.entra-edit-table input[type="text"],
.scim-edit-table input[type="text"],
.nova-edit-table input[type="text"] {
  width: 100%;
}

.sap-edit-table input[type="date"],
.ldap-edit-table input[type="date"],
.entra-edit-table input[type="date"],
.scim-edit-table input[type="date"],
.nova-edit-table input[type="date"] {
  width: 150px;
}

/* Business-roles editor crams checkbox + name + duration + 2 dates into one
   row and is the only edit-table the user might scroll through dozens of —
   tighten cell padding + the date inputs (selects use .select-compact for
   the same reason). */
.nova-edit-table tr.br-role-row td {
  padding: 0.25rem var(--space-2);
}
.br-role-row input[type="date"] {
  min-height: 0;
  padding: 0.25rem 0.5rem;
  font-size: var(--text-sm);
}
.br-role-row .select-compact {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
/* Filter sitting next to the section title — keep it compact and discreet
   so the heading stays the visual anchor. */
.br-area-filter {
  font-size: var(--text-xs);
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  max-width: 11rem;
}

/* Inherited / org-unit-derived rows render dates as plain text (no input
   chrome) — they're not user-editable. A hidden input next to the span keeps
   the value queryable for the apply pipelines. */
.sap-edit-table .date-readonly,
.ldap-edit-table .date-readonly,
.entra-edit-table .date-readonly,
.scim-edit-table .date-readonly,
.nova-edit-table .date-readonly {
  display: inline-block;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sap-edit-table .sap-row-remove,
.ldap-edit-table .sap-row-remove,
.entra-edit-table .sap-row-remove,
.scim-edit-table .sap-row-remove,
.nova-edit-table .sap-row-remove {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: var(--text-lg);
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  line-height: 1;
}

.sap-edit-table .sap-row-remove:hover,
.ldap-edit-table .sap-row-remove:hover,
.entra-edit-table .sap-row-remove:hover,
.scim-edit-table .sap-row-remove:hover,
.nova-edit-table .sap-row-remove:hover {
  color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 8%, transparent);
}

/* Row hover — all table types */
.sap-edit-table tbody tr:hover,
.ldap-edit-table tbody tr:hover,
.entra-edit-table tbody tr:hover,
.scim-edit-table tbody tr:hover,
.nova-edit-table tbody tr:hover {
  background: var(--bg-subtle2);
}

/* Description cells — consistent truncation across all types */
.sap-desc-cell {
  color: var(--text-muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SAP-specific: composite role expand arrow */
.sap-role-name-cell {
  cursor: pointer;
}

.sap-role-name-cell:hover {
  color: var(--status-info);
}

.sap-role-name-cell .arrow {
  display: inline-block;
  font-size: var(--text-2xs);
  margin-right: 0.3rem;
  transition: transform var(--transition-base);
}

.sap-role-name-cell .arrow.open {
  transform: rotate(90deg);
}

/* Indirect (business-role inherited) rows */
.indirect-row {
  background: var(--bg-subtle2);
}

.indirect-row td {
  color: var(--text-muted);
}

.indirect-row input:disabled {
  background: var(--bg-subtle);
  color: var(--text-faint);
  border-color: var(--border-color);
  cursor: not-allowed;
}

.indirect-badge {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  color: var(--color-indirect);
  margin-left: 1rem;
  margin-top: 0.1rem;
  white-space: nowrap;
}

.sap-children-row td {
  background: var(--bg-subtle2);
  font-size: var(--text-xs);
  padding: 0.2rem var(--space-2) !important;
}

.sap-children-row .sap-child-name {
  padding-left: 2rem !important;
  font-weight: var(--font-medium);
}

.sap-children-row .sap-child-desc {
  color: var(--text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Date inputs share the canonical look; this override exists only for the
   calendar-picker indicator and the min-width fix in tight grids. */
input[type="date"] {
  min-width: 0;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

/* Duration preset dropdown — canonical select look. */
.duration-select {
  color: var(--text-muted);
}

/* Login overlay */
.login-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: var(--bg-header);
  z-index: var(--z-toast);
  align-items: center;
  justify-content: center;
}

.login-overlay.hidden {
  display: none;
}

.login-card {
  background: var(--bg-card);
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-card h2 {
  font-size: var(--text-xl);
  margin-bottom: 0.3rem;
}

.login-card p {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.login-card .form-group {
  margin-bottom: var(--space-4);
}

.login-card .btn {
  width: 100%;
  margin-top: 0.5rem;
}

.login-error {
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
  color: var(--status-error-hover);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.remember-me {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 0.25rem;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.btn-entra {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6rem 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  cursor: pointer;
}

.btn-entra:hover {
  background: var(--bg-card);
  border-color: var(--text-muted);
}

/* Tab badge */
.tab-badge {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--status-error);
  color: var(--text-on-accent);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  line-height: 1;
}

.tab-badge.hidden {
  display: none;
}

/* Small dot on a tab pill that signals new chat activity. Sits in the same
   corner as .tab-badge but is purely decorative — no count, just presence. */
.tab-unread-dot {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-info);
  box-shadow: 0 0 0 2px var(--bg-header);
}
/* When both the count badge and the dot are visible on the same tab, nudge
   the dot inward so it doesn't overlap the badge. */
.tab-btn:has(.tab-badge:not(.hidden)) .tab-unread-dot {
  right: calc(0.35rem + 22px);
}
/* AI Toggle Switch */
.ai-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ai-toggle-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  opacity: 0.5;
}

.ai-toggle-switch {
  position: relative;
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}

.ai-toggle-btn {
  position: relative;
  z-index: 1;
  padding: 0.3rem 0.65rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  font-family: inherit;
  cursor: pointer;
  transition: color var(--transition-slow);
  white-space: nowrap;
}

.ai-toggle-btn:hover {
  color: rgba(255, 255, 255, 0.7);
}

.ai-toggle-btn.active {
  color: var(--text-on-accent);
}

.ai-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  height: calc(100% - 4px);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.ai-toggle-switch[data-active="off"] .ai-toggle-slider {
  background: rgba(255, 255, 255, 0.12);
}

.ai-toggle-switch[data-active="local"] .ai-toggle-slider {
  background: color-mix(in srgb, var(--status-success) 50%, transparent);
}

.ai-toggle-switch[data-active="cloud"] .ai-toggle-slider {
  background: color-mix(in srgb, var(--status-success-hover) 60%, transparent);
}

.ai-toggle-switch.ai-busy .ai-toggle-slider {
  background: color-mix(in srgb, var(--status-warning) 55%, transparent);
  animation: aiToggleBusy 1.2s ease-in-out infinite;
}

@keyframes aiToggleBusy {

  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-warning) 0%, transparent);
  }

  50% {
    box-shadow: 0 0 8px 3px color-mix(in srgb, var(--status-warning) 65%, transparent);
  }
}

/* AI Token Usage Badge */
.ai-token-badge {
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: default;
  transition: opacity 0.3s, color 0.3s;
}

.ai-token-badge:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
}

/* Header user section */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: var(--space-6);
}

.header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--avatar-color, rgba(255, 255, 255, 0.14));
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.header-avatar-btn {
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-base), background var(--transition-base);
  line-height: 1;
}

.header-avatar-btn:hover,
.header-avatar-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.logout-icon-btn {
  padding: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  line-height: 1;
}

.logout-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-on-accent);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-slow);
  font-family: inherit;
}

.logout-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

/* Workflow cards */
.workflow-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-xs);
  border-left: 3px solid var(--color-workflow);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.workflow-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.workflow-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-workflow);
  color: var(--text-on-accent);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}

.wf-step-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

/* canonical input/select look applies; no overrides needed */

.wf-step-remove {
  background: none;
  border: none;
  color: var(--border-input);
  cursor: pointer;
  font-size: var(--text-lg);
  padding: 0 0.3rem;
}

.wf-step-remove:hover {
  color: var(--status-error);
}

/* Request table */
.request-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.request-table thead {
  background: var(--bg-subtle);
}

.request-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}
.request-table th.text-right,
.request-table td.text-right {
  text-align: right;
}
.request-table th.text-center,
.request-table td.text-center {
  text-align: center;
}
.request-table th.text-left,
.request-table td.text-left {
  text-align: left;
}

.request-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.request-table tbody tr:last-child td {
  border-bottom: none;
}

.request-table tbody tr:hover {
  background: var(--bg-subtle);
}

/* Avatar/icon + name cell used for Requester and Target columns. */
.request-user-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.request-user-cell > .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Trailing column on each request-table row that shows an unread-chat
   badge. Width is fixed whether or not it has content so the column doesn't
   jump as messages come in and out. */
.request-table th.chat-unread-cell,
.request-table td.chat-unread-cell {
  width: 48px;
  text-align: center;
  padding-left: 0;
  padding-right: var(--space-3);
}
/* The visible indicator: a soft accent-tinted circle holding the chat
   bubble icon, with a small red counter badge anchored top-right. */
.chat-unread-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
}
.chat-unread-indicator .chat-unread-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-unread-indicator svg {
  display: block;
}
.chat-unread-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--status-error);
  color: var(--text-on-accent);
  border-radius: 9px;
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg-card);
}

.request-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.request-status.pending {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  color: var(--status-warning);
}

.request-status.approved {
  background: color-mix(in srgb, var(--status-success) 12%, transparent);
  color: var(--status-success);
}

.request-status.rejected {
  background: color-mix(in srgb, var(--status-error) 12%, transparent);
  color: var(--status-error);
}

.request-status.waiting {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
}

.request-status.cancelled {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
}

/* Mixed outcome — some targets approved, some rejected. Tinted between
   success and warning so it reads "partial". */
.request-status.partially_approved {
  background: color-mix(in srgb, var(--status-warning) 10%, color-mix(in srgb, var(--status-success) 8%, transparent));
  color: var(--status-warning);
}
.approval-progress {
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.approval-progress-bar {
  height: 6px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.approval-progress-fill {
  height: 100%;
  background: var(--status-success);
  transition: width var(--transition-base);
}

.approval-progress-text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Access Request Detail Modal */
.request-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.request-detail-admin-actions {
  display: flex;
  gap: var(--space-3);
  width: 100%;
}

.request-detail-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.request-admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  color: color-mix(in srgb, currentColor 65%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: color-mix(in srgb, currentColor 18%, transparent);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  line-height: 1;
}

.btn-danger-subtle {
  background: color-mix(in srgb, var(--status-error) 10%, transparent);
  color: var(--status-error);
  border: 1px solid color-mix(in srgb, var(--status-error) 30%, transparent);
}

.btn-danger-subtle:hover {
  background: color-mix(in srgb, var(--status-error) 18%, transparent);
}
/* --- System Log Tab --- */
.log-sub-tab {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  cursor: pointer;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.log-sub-tab.active {
  font-weight: var(--font-semibold);
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.log-sub-tab:hover:not(.active) {
  color: var(--text-secondary);
}

.log-filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.log-filters input[type="text"] {
  flex: 1;
  min-width: 180px;
}

.log-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.log-table thead {
  background: var(--bg-subtle);
}

.log-table th {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.log-table th.log-sortable {
  cursor: pointer;
}

.log-table th.log-sortable:hover {
  color: var(--accent);
}

.log-table td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.log-table tbody tr:last-child td {
  border-bottom: none;
}

.log-table tbody tr:hover {
  background: var(--bg-subtle);
}

.log-event-type {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  color: var(--text-secondary);
}

.log-event-type.auth {
  background: color-mix(in srgb, var(--color-workflow) 8%, transparent);
  color: var(--color-workflow);
}

.log-event-type.user {
  background: color-mix(in srgb, var(--status-info) 8%, transparent);
  color: var(--status-info);
}

.log-event-type.role {
  background: color-mix(in srgb, var(--status-warning) 8%, transparent);
  color: var(--status-warning);
}

.log-event-type.business_role {
  background: color-mix(in srgb, var(--color-event-business-role) 8%, transparent);
  color: var(--color-event-business-role);
}

.log-event-type.request {
  background: color-mix(in srgb, var(--status-success) 8%, transparent);
  color: var(--status-success);
}

.log-event-type.workflow {
  background: color-mix(in srgb, var(--accent-hover) 8%, transparent);
  color: var(--accent-hover);
}

.log-event-type.system {
  background: color-mix(in srgb, var(--color-event-system) 8%, transparent);
  color: var(--color-event-system);
}

.log-event-type.sync {
  background: color-mix(in srgb, var(--color-event-sync) 8%, transparent);
  color: var(--color-event-sync);
}

.log-event-type.org {
  background: color-mix(in srgb, var(--color-event-org-bg) 8%, transparent);
  color: var(--color-event-org);
}

.log-timestamp {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.log-details {
  font-size: var(--text-xs);
  color: var(--text-faint);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .dashboard-cols {
    grid-template-columns: 1fr;
  }
}

.dashboard-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 4rem;
}

.dashboard-column-full {
  margin-top: 1rem;
}

.dashboard-column.drop-active {
  outline: 2px dashed var(--color-focus, #3b82f6);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.dashboard-panel-slot {
  position: relative;
  cursor: grab;
}

.dashboard-panel-slot.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.dashboard-panel-slot.drop-target {
  outline: 2px dashed var(--color-focus, #3b82f6);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.dashboard-drag-handle {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  color: var(--text-faint);
  font-size: var(--text-md);
  cursor: grab;
  padding: 0 0.25rem;
  user-select: none;
}

.dashboard-drag-handle:hover {
  color: var(--text-secondary);
}

.dashboard-layout-drawer {
  position: fixed;
  top: 80px;
  right: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-lg);
  padding: 1rem;
  min-width: 260px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-overlay, 300);
}

.dashboard-layout-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.dashboard-layout-rows {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.dashboard-layout-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  cursor: pointer;
}
/* Search-combo (Department / Planstelle): display mode looks like a read-only
   input with grey suffix; clicking switches in a real <input> for type-ahead. */
.ou-search-combo {
  position: relative;
}

.ou-search-display {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-size: var(--text-base);
  cursor: pointer;
  min-height: 2.45rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: border-color var(--transition-base);
}

.ou-search-display:hover {
  border-color: var(--color-focus);
}

.ou-search-id {
  font-family: var(--font-mono, monospace);
  font-weight: var(--font-medium);
}

.ou-search-combo.is-disabled .ou-search-display {
  cursor: default;
  background-color: var(--bg-card);
  color: var(--text-muted);
}

.ou-search-input {
  /* same look as a regular .form-group input — already styled by the .form-group rule */
}
.log-details-row td {
  background: var(--bg-card);
  padding: var(--space-3);
}

.log-details-row pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Click-to-expand log rows: shared affordance for App Log, System Log,
   Provisioning Log. Hover background already comes from `.log-table tbody tr:hover`. */
.log-row-clickable {
  cursor: pointer;
}

/* --- Organization Tab --- */
.org-panel {
  display: flex;
  gap: 0;
  max-width: 1500px;
  margin: 0 auto;
  min-height: calc(100vh - 140px);
}

.org-sidebar {
  width: 300px;
  min-width: 300px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.org-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.org-sidebar-header h3 {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

.org-tree-search {
  padding: 0.4rem 0.6rem;
}

.org-tree-search input {
  width: 100%;
}
.org-tree-search input::placeholder {
  color: var(--text-faint);
}

.org-tree {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.org-node {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
  border-left: 3px solid transparent;
  user-select: none;
}

.org-node-rollup {
  background: color-mix(in srgb, var(--color-focus) 3%, transparent);
}

.org-node:hover {
  background: var(--bg-subtle);
}

.org-node.selected {
  background: color-mix(in srgb, var(--color-focus) 6%, transparent);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: var(--font-medium);
}

.org-node .org-toggle {
  width: 16px;
  font-size: var(--text-2xs);
  color: var(--text-faint);
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.org-node .org-toggle:empty {
  cursor: default;
}

.org-node .org-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-node .org-count {
  font-size: var(--text-xs);
  color: var(--text-faint);
  flex-shrink: 0;
}

.org-node .org-add-child {
  opacity: 0;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: var(--text-base);
  padding: 0 0.25rem;
  flex-shrink: 0;
  transition: opacity var(--transition-base);
}

.org-node:hover .org-add-child {
  opacity: 1;
}

.org-node.drag-over {
  background: color-mix(in srgb, var(--color-focus) 8%, transparent);
  border-left-color: var(--accent);
}

.org-user-draggable {
  cursor: grab;
  transition: opacity var(--transition-base), transform 0.15s;
}

.org-user-draggable:hover {
  background: var(--bg-subtle2);
}

.org-user-draggable.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.org-main {
  flex: 1;
  padding: 1.5rem 2rem;
  background: var(--bg-body);
  overflow-y: auto;
}

.org-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.org-detail-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.org-detail-section {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-4);
}

.org-detail-section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.org-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.org-detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  /* Same defaults as `.app-table` — row-like list. */
  font-size: var(--text-base);
  color: var(--text-muted);
  font-weight: var(--font-light);
}

.org-detail-item-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.org-detail-item .btn-remove {
  background: none;
  border: none;
  color: var(--border-input);
  cursor: pointer;
  font-size: var(--text-md);
  transition: color var(--transition-base);
}

.org-detail-item .btn-remove:hover {
  color: var(--status-error);
}

.org-inherit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.org-inherited-role {
  border-left: 3px solid var(--accent);
  opacity: 0.8;
}

.org-inherit-indicator {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  color: var(--accent);
}

.org-inherit-icon {
  font-size: var(--text-xs);
  color: var(--accent);
}

.org-manager-badge {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  color: var(--status-warning);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-left: 0.4rem;
  vertical-align: middle;
}

.org-manager-toggle {
  background: none;
  border: none;
  color: var(--border-input);
  cursor: pointer;
  font-size: var(--text-md);
  padding: 0 0.2rem;
  transition: color var(--transition-base);
  line-height: 1;
}

.org-manager-toggle:hover {
  color: var(--status-warning);
}

.org-manager-toggle.active {
  color: var(--status-warning);
}

.org-add-row {
  display: flex;
  gap: var(--space-2);
  margin-top: 0.5rem;
}

.org-add-row select {
  flex: 1;
}

.org-user-search-input {
  width: 200px;
}

.org-user-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

/* Infinite-scroll sentinel + "loading more" row at the bottom of the Users
   table. Sentinel is invisible (just a height anchor); the loading row is
   shown only while a fetch is in flight. */
.users-load-sentinel td { padding: 0; height: 1px; }
.users-loading-row td { padding: var(--space-3); }

.org-page-info {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-input);
  background: var(--bg-card);
  cursor: pointer;
}

.btn-sm:hover:not(:disabled) {
  background: var(--bg-subtle);
}

.btn-sm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
}

.btn-sm.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-sm.btn-danger {
  background: var(--status-error);
  color: var(--text-on-accent);
  border-color: transparent;
}

.btn-sm.btn-danger:hover {
  background: var(--status-error-hover);
}
/* --- Reconciliation --- */
.reconcile-section {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.reconcile-section:last-child {
  margin-bottom: 0;
}

.reconcile-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
}

.reconcile-section-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.reconcile-account-id {
  background: var(--border-card);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
}

.reconcile-section-header .btn {
  margin-left: auto;
}

.reconcile-content {
  /* no extra margin needed now */
}

.reconcile-summary {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.reconcile-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
  background: var(--bg-subtle2);
  color: var(--text-muted);
}

.reconcile-stat .stat-count {
  font-weight: var(--font-bold);
  font-size: var(--text-base);
}

.reconcile-stat.sync {
  border-color: var(--border-input);
}

.reconcile-stat.nova-only {
  border-color: color-mix(in srgb, var(--status-warning) 40%, transparent);
  background: color-mix(in srgb, var(--status-warning) 6%, transparent);
}

.reconcile-stat.backend-only {
  border-color: color-mix(in srgb, var(--status-info) 35%, transparent);
  background: color-mix(in srgb, var(--status-info) 6%, transparent);
}

.reconcile-stat.validity-issue {
  border-color: color-mix(in srgb, var(--status-error) 35%, transparent);
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
  color: var(--status-error-hover);
}

.reconcile-stat.filtered {
  border-color: color-mix(in srgb, var(--color-indirect) 40%, transparent);
  background: color-mix(in srgb, var(--color-indirect) 6%, transparent);
  color: var(--color-indirect);
}

.reconcile-mass-actions {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.reconcile-btn-nova {
  background: var(--bg-subtle2);
  color: var(--text-muted);
  border: 1px solid var(--border-card);
}

.reconcile-btn-nova:hover {
  background: var(--border-card);
  color: var(--text-muted);
}

.reconcile-btn-backend {
  background: var(--bg-subtle2);
  color: var(--text-muted);
  border: 1px solid var(--border-card);
}

.reconcile-btn-backend:hover {
  background: var(--border-card);
  color: var(--text-muted);
}

.reconcile-btn-merge {
  background: var(--bg-subtle2);
  color: var(--text-muted);
  border: 1px solid var(--border-card);
}

.reconcile-btn-merge:hover {
  background: var(--border-card);
  color: var(--text-muted);
}

.reconcile-table {
  width: 100%;
  border-collapse: collapse;
}

.reconcile-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border-card);
  vertical-align: middle;
}

.reconcile-table tr:last-child td {
  border-bottom: none;
}

/* Column widths: Status | Nova IAM | Backend | Validity | Action */
.reconcile-table th:nth-child(1),
.reconcile-table td:nth-child(1) {
  width: 80px;
}

.reconcile-table th:nth-child(4),
.reconcile-table td:nth-child(4) {
  min-width: 180px;
  white-space: nowrap;
}

.reconcile-table th:nth-child(5),
.reconcile-table td:nth-child(5) {
  width: 120px;
}

.reconcile-row-sync td {
  background: var(--bg-subtle2);
}

.reconcile-row-nova td {
  background: color-mix(in srgb, var(--status-warning) 6%, transparent);
}

.reconcile-row-backend td {
  background: color-mix(in srgb, var(--status-info) 6%, transparent);
}

.reconcile-status-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

.reconcile-status-badge.sync {
  background: var(--border-card);
  color: var(--text-muted);
}

.reconcile-status-badge.nova-only {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  color: var(--status-warning-hover);
}

.reconcile-status-badge.backend-only {
  background: color-mix(in srgb, var(--status-info) 15%, transparent);
  color: var(--status-info);
}

/* Validity badges */
.validity-badge {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  margin-left: 0.4rem;
  letter-spacing: 0.02em;
}

.validity-badge.expired {
  background: color-mix(in srgb, var(--status-error) 25%, transparent);
  color: var(--status-error-text);
}

.validity-badge.future {
  background: color-mix(in srgb, var(--status-info) 15%, transparent);
  color: var(--status-info-text);
}

.validity-badge.multi {
  background: color-mix(in srgb, var(--accent-hover) 15%, transparent);
  color: var(--accent-hover);
  cursor: help;
}

/* Validity issue row highlighting */
.reconcile-row-sync.validity-expired td {
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
}

.reconcile-row-sync.validity-future td {
  background: color-mix(in srgb, var(--status-info) 6%, transparent);
}

/* Filtered indirect roles section */
.reconcile-filtered-section {
  margin-top: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-indirect) 19%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-indirect) 6%, transparent);
}

.reconcile-filtered-header {
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.reconcile-filtered-header:hover {
  background: color-mix(in srgb, var(--color-indirect) 8%, transparent);
}

.reconcile-filtered-title {
  font-weight: var(--font-semibold);
  color: var(--color-indirect);
  font-size: var(--text-sm);
}

.reconcile-filtered-table {
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-indirect) 19%, transparent);
}

.reconcile-filtered-table td {
  background: color-mix(in srgb, var(--color-indirect) 6%, transparent);
}

.reconcile-btn-push,
.reconcile-btn-pull {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  font-size: var(--text-xs);
  padding: 0.35rem 0.65rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.reconcile-btn-push:hover,
.reconcile-btn-pull:hover {
  background: var(--bg-subtle2);
  border-color: var(--text-secondary);
}

.btn-xs {
  font-size: var(--text-xs);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}

.reconcile-all-sync {
  color: var(--text-muted);
  font-size: var(--text-base);
  padding: var(--space-2);
  background: var(--bg-subtle2);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  text-align: center;
}

/* --- User Detail Top-Level Tabs (Main, Connected Accounts, Reconciliation, Changelog) --- */
#user-detail-body,
#composite-modal-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.user-detail-panels {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 1rem 1.5rem;
}

.user-detail-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-card);
  margin: 0;
  padding: 0 1.5rem;
  background: var(--bg-subtle2);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 1px 0 var(--border-card);
}

.user-detail-dirty-hint {
  margin-right: auto;
  align-self: center;
  font-style: italic;
}

.user-detail-tab {
  padding: 0.75rem 1.25rem;
  border: none;
  background: none;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-base);
  font-family: inherit;
}

.user-detail-tab:hover {
  color: var(--text-primary);
  background: var(--bg-subtle2);
}

.user-detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-card);
}

.user-detail-panel {
  display: none;
}

.user-detail-panel.active {
  display: block;
}

/* --- Systems Sub-Tabs (targets / sources) --- */
.systems-subtab-bar {
  display: flex;
  border-bottom: 2px solid var(--border-card);
  margin-bottom: 1.5rem;
  gap: 0;
  flex-wrap: wrap;
  align-items: center;
}

.systems-subtab {
  padding: 0.75rem 1.25rem;
  border: none;
  background: none;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-base);
  font-family: inherit;
  white-space: nowrap;
}

.systems-subtab:hover {
  color: var(--text-primary);
  background: var(--bg-subtle2);
}

.systems-subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-card);
}

.systems-subtab-content {
  display: none;
}

.systems-subtab-content.active {
  display: block;
}

/* --- Roles Sub-Tabs --- */
.roles-subtab-bar {
  display: flex;
  border-bottom: 2px solid var(--border-card);
  margin-bottom: 1.5rem;
  gap: 0;
  flex-wrap: wrap;
  align-items: center;
}

.roles-subtab {
  padding: 0.75rem 1.25rem;
  border: none;
  background: none;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-base);
  font-family: inherit;
  white-space: nowrap;
}

.roles-subtab:hover {
  color: var(--text-primary);
  background: var(--bg-subtle2);
}

.roles-subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-card);
}

.roles-subtab .system-type-tag {
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* --- Roles → Systemrollen: sidebar layout for many target systems --- */
.roles-systems-layout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

/* Right pane: contain any table overflow within itself rather than letting
   the page horizontally scroll. min-width: 0 alone isn't enough when the
   table's intrinsic content width exceeds the available flex slot. */
.roles-systems-content {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.roles-systems-sidebar {
  flex: 0 0 260px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  position: sticky;
  top: var(--space-4);
}

.roles-systems-sidebar-search-wrap {
  margin-bottom: var(--space-3);
}

.roles-systems-sidebar-search {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--bg-body);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-primary);
  transition: border-color var(--transition-base);
}

.roles-systems-sidebar-search:focus {
  outline: none;
  border-color: var(--accent);
}

.roles-systems-group {
  margin-bottom: var(--space-3);
}

.roles-systems-group:last-child {
  margin-bottom: 0;
}

.roles-systems-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
}

.roles-systems-group-count {
  color: var(--text-faint);
  font-weight: var(--font-normal);
}

.roles-systems-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.roles-systems-item:hover {
  background: var(--bg-subtle2);
  color: var(--text-primary);
}

.roles-systems-item.active {
  background: var(--bg-subtle2);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: var(--font-medium);
}

.roles-systems-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-systems-empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/* --- Changelog Tab --- */
.changelog-table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-card);
}

.changelog-table thead {
  background: var(--bg-subtle2);
}

.changelog-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-card);
}

.changelog-table th:nth-child(1),
.changelog-table td:nth-child(1) {
  white-space: nowrap;
}

.changelog-table th:nth-child(2),
.changelog-table td:nth-child(2) {
  white-space: nowrap;
}

.changelog-table th:nth-child(3),
.changelog-table td:nth-child(3) {
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.changelog-table th:nth-child(4),
.changelog-table td:nth-child(4) {
  width: 99%;
}

.changelog-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.changelog-table tbody tr:last-child td {
  border-bottom: none;
}

.changelog-table tbody tr:hover {
  background: var(--bg-subtle2);
}

.changelog-event-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  color: var(--text-secondary);
  white-space: nowrap;
  word-break: break-word;
}

.changelog-event-badge.auth {
  background: color-mix(in srgb, var(--color-workflow) 8%, transparent);
  color: var(--color-workflow);
}

.changelog-event-badge.user {
  background: color-mix(in srgb, var(--status-info) 8%, transparent);
  color: var(--status-info);
}

.changelog-event-badge.role {
  background: color-mix(in srgb, var(--status-warning) 8%, transparent);
  color: var(--status-warning);
}

.changelog-event-badge.business_role {
  background: color-mix(in srgb, var(--color-event-business-role) 8%, transparent);
  color: var(--color-event-business-role);
}

.changelog-event-badge.request {
  background: color-mix(in srgb, var(--status-success) 8%, transparent);
  color: var(--status-success);
}

.changelog-event-badge.sync {
  background: color-mix(in srgb, var(--color-event-sync) 8%, transparent);
  color: var(--color-event-sync);
}

.changelog-timestamp {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- Audit-Log details: key/value chips --- */
.kv-chips {
  display: inline;
}

.kv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-2);
  margin: 1px 3px 1px 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  font-size: var(--text-xs);
  line-height: 1.7;
  vertical-align: middle;
  max-width: 100%;
  cursor: pointer;
}

.kv-chip.expanded {
  align-items: flex-start;
}

.kv-chip.expanded .kv-chip-value {
  max-width: none;
  overflow: visible;
  white-space: pre-wrap;
  word-break: break-word;
  text-overflow: clip;
}

/* When a chip inside an audit-log / changelog cell is expanded, lift the
   cell-level truncation so the expanded value can actually grow. */
.log-details:has(.kv-chip.expanded),
.changelog-details-cell:has(.kv-chip.expanded),
.changelog-details:has(.kv-chip.expanded) {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.kv-chip-key {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.kv-chip-key::after {
  content: ":";
  margin-right: 2px;
  opacity: 0.6;
}

.kv-chip-value {
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.kv-chip-value-id {
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--text-primary) 40%, transparent);
}

.kv-chip-value-id:hover {
  text-decoration-color: var(--accent);
  color: var(--accent);
}

.kv-chip-empty {
  color: var(--text-faint);
  font-style: italic;
}

.kv-chip-icon {
  font-weight: var(--font-bold);
  display: inline-flex;
  align-items: center;
}

.kv-chip.status-success {
  background: color-mix(in srgb, var(--status-success) 12%, transparent);
  color: var(--status-success);
}
.kv-chip.status-success .kv-chip-key,
.kv-chip.status-success .kv-chip-value { color: var(--status-success); }

.kv-chip.status-error {
  background: color-mix(in srgb, var(--status-error) 12%, transparent);
  color: var(--status-error);
}
.kv-chip.status-error .kv-chip-key,
.kv-chip.status-error .kv-chip-value { color: var(--status-error); }

.kv-chip.status-warning {
  background: color-mix(in srgb, var(--status-warning) 14%, transparent);
  color: var(--status-warning);
}
.kv-chip.status-warning .kv-chip-key,
.kv-chip.status-warning .kv-chip-value { color: var(--status-warning); }

.changelog-details-cell {
  overflow: hidden;
  max-width: 350px;
}

.changelog-details {
  font-size: var(--text-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 1.8em;
  line-height: 1.4;
  display: block;
  max-width: 100%;
}

.changelog-details.expandable {
  cursor: pointer;
  transition: color var(--transition-base), max-height 0.3s ease-out, white-space 0s 0.15s;
  padding-left: 1.4rem;
  position: relative;
}

.changelog-details.expandable::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--accent);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  text-shadow: 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.changelog-details.expandable:hover {
  color: var(--text-primary);
}

.changelog-details.expandable:hover::before {
  color: var(--accent-hover);
  text-shadow: 0 0 4px color-mix(in srgb, var(--accent-hover) 40%, transparent);
}

.changelog-details.expandable.expanded {
  white-space: pre-line;
  word-break: break-word;
  max-height: 500px;
  line-height: 1.6;
  transition: color var(--transition-base), max-height 0.3s ease-out, white-space 0s 0s;
}

.changelog-details.expandable.expanded::before {
  content: "▼";
}
/* --- Monitoring Tab --- */
.monitoring-header {
  margin-bottom: 1.5rem;
}

.monitoring-stats {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.monitoring-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  min-width: 120px;
  text-align: center;
}

.monitoring-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.monitoring-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}

.job-card {
  position: relative;
}

.job-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.job-card-actions button {
  padding: 0.4rem 0.8rem;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--transition-base);
}

.job-card-actions button:hover {
  background: var(--bg-subtle2);
}

.job-card-actions button.btn-primary {
  background: var(--accent-hover);
  color: var(--text-on-accent);
  border-color: var(--accent-hover);
}

.job-card-actions button.btn-primary:hover {
  background: var(--accent-hover);
}

.job-card-actions button.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.job-status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: capitalize;
}

.job-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.job-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-hover), var(--color-workflow));
  border-radius: 3px;
  transition: width 0.3s ease;
}

#runs-table {
  margin-top: 1rem;
}

#runs-table td {
  vertical-align: middle;
}

.run-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-subtle2);
  border-radius: var(--radius-lg);
}

.run-details-grid div {
  font-size: var(--text-base);
}

.run-error {
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-error) 25%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--status-error-hover);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

/* --- Settings Dropdown --- */
.settings-wrapper {
  position: relative;
}

.settings-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-sticky);
  color: var(--text-primary);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
}

.settings-dropdown.open {
  display: block;
  animation: settingsSlideIn 0.2s ease forwards;
}

@keyframes settingsSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-dropdown-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color);
}
.settings-dropdown-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.settings-dropdown-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--avatar-color, var(--accent));
  color: var(--text-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.settings-dropdown-user-info {
  min-width: 0;
  flex: 1;
}

.settings-dropdown-user-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-dropdown-user-email {
  font-size: var(--text-xs);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-dropdown-body {
  padding: 0.75rem 1rem 0;
  max-height: 420px;
  overflow-y: auto;
}

/* Settings folder (collapsible sub-sections) */
.settings-folder-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.55rem 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.settings-folder-toggle:hover {
  color: var(--accent-hover);
}

.settings-folder-arrow {
  transition: transform var(--transition-slow);
  flex-shrink: 0;
}

.settings-folder.open .settings-folder-arrow {
  transform: rotate(90deg);
}

.settings-folder-content {
  display: none;
  padding-left: 20px;
  /* 12px icon + 8px gap — aligns content with toggle title text */
  margin-top: var(--space-2);
}

.settings-folder.open .settings-folder-content {
  display: block;
}

.settings-section {
  margin-bottom: var(--space-4);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.settings-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 30px;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  cursor: pointer;
}
.form-hint {
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-top: var(--space-1);
  line-height: var(--leading-normal);
}

.settings-dropdown .form-group.compact {
  margin-bottom: var(--space-2);
}

.settings-dropdown .form-group.compact label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.settings-dropdown .form-group.compact input,
.settings-dropdown .form-group.compact select {
  width: 100%;
}

.settings-test-btn {
  margin-top: 0.35rem;
}

.settings-test-result {
  font-size: var(--text-xs);
  margin-top: 0.35rem;
  min-height: 0;
}

.settings-test-result.success {
  color: var(--status-success);
}

.settings-test-result.error {
  color: var(--status-error);
}

.settings-env-status {
  font-size: var(--text-sm);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
}

.settings-env-status .env-set {
  color: var(--status-success);
  font-weight: var(--font-semibold);
}

.settings-env-status .env-missing {
  color: var(--status-warning);
  font-weight: var(--font-semibold);
}

.settings-dropdown-footer {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

/* --- Reporting: results table --- */
/* Report results modal: auto-fit width to table content */
.report-results-modal {
  width: auto;
  min-width: 480px;
  max-width: 95vw;
  max-height: 85vh;
}

.report-results-table-wrap {
  overflow-x: auto;
  max-height: 60vh;
  overflow-y: auto;
}

.report-results-table-wrap .log-table {
  white-space: nowrap;
}

.report-results-table-wrap .log-table th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}

/* --- Report output sections --- */

/* Metric cards row */
.report-metrics {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.report-metric-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  min-width: 120px;
  text-align: center;
  flex: 1;
}

.report-metric-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.report-metric-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

/* Text sections */
.report-text {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
}

.report-text.heading {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.report-text.muted {
  font-size: var(--text-sm);
  color: var(--text-faint);
}

/* Table display modes */
.report-compact th {
  padding: 0.35rem 0.55rem;
  font-size: var(--text-2xs);
}

.report-compact td {
  padding: 0.25rem 0.55rem;
  font-size: var(--text-sm);
}

.report-striped tbody tr:nth-child(even) {
  background: var(--bg-subtle);
}

.report-striped tbody tr:nth-child(even):hover {
  background: var(--bg-subtle);
}

.report-bordered td,
.report-bordered th {
  border: 1px solid var(--border-color);
}

/* --- Free Report: iframe viewer modal --- */
.free-report-results-modal {
  width: 90vw;
  max-width: 1200px;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

/* --- Free Report Chat Builder --- */
.free-report-chat-modal {
  width: 95vw;
  max-width: 1600px;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

.free-report-chat-container {
  flex: 1;
  display: flex;
  min-height: 0;
  border-top: 1px solid var(--border-color);
}

.free-report-chat-panel {
  width: 40%;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
}

.free-report-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.free-report-chat-msg {
  max-width: 90%;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.free-report-chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 4px;
}

.free-report-chat-msg.assistant {
  align-self: flex-start;
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.free-report-chat-msg.assistant.error {
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
  color: var(--status-error-hover);
  border: 1px solid color-mix(in srgb, var(--status-error) 25%, transparent);
}

.free-report-chat-msg.system-msg {
  align-self: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: italic;
  max-width: 100%;
  text-align: center;
}

.free-report-chat-input-area {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  align-items: flex-end;
}

.free-report-chat-input-area textarea {
  flex: 1;
  resize: none;
}

.free-report-chat-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.free-report-chat-preview iframe {
  flex: 1;
  width: 100%;
  border: none;
  min-height: 0;
  height: 0;
}

.free-report-chat-preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-subtle);
  flex-shrink: 0;
}
/* Chat setup form (shown when no messages yet) */
.chat-setup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0.5rem 0;
}

.chat-setup-form .form-group {
  margin-bottom: 0;
}

.chat-setup-form .form-group label {
  font-size: var(--text-sm);
  margin-bottom: 0.25rem;
}

.chat-setup-form .form-group small {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* Typing indicator */
.chat-typing-indicator {
  display: flex;
  gap: 4px;
  padding: 0.6rem 0.9rem;
  align-self: flex-start;
}

.chat-typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-bounce 1.4s infinite;
}

.chat-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Report progress bar */
.report-progress {
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.report-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.report-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: reportProgress 1.2s ease-in-out infinite;
}

.report-progress-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

@keyframes reportProgress {
  0% {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

/* --- About Nova IAM (settings item + modal) --- */
.settings-about-row {
  margin-top: var(--space-4);
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-subtle);
}

.settings-about-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.45rem 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-align: left;
}

.settings-about-btn:hover {
  color: var(--accent);
}

.about-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.about-meta {
  margin-top: 0.75rem;
}

.about-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: 0.3rem 0;
}

.about-meta-label {
  color: var(--text-muted);
  min-width: 90px;
}

.about-meta-value {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

/* --- AI Analysis --- */
.ai-analyze-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  background: linear-gradient(135deg, var(--status-success), var(--status-success-hover));
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.ai-analyze-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--status-success) 40%, transparent);
}

.ai-analyze-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.ai-analyze-btn.ai-off {
  background: var(--border-input);
  color: var(--text-faint);
  cursor: not-allowed;
  box-shadow: none;
}

.ai-badge {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  background: color-mix(in srgb, var(--status-success) 50%, transparent);
  color: var(--text-on-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.04em;
  line-height: 1.2;
  vertical-align: middle;
  /* In a flex header the badge would otherwise stretch to the heading's
     height; keep it pill-sized and vertically centered. */
  align-self: center;
}

.ai-badge.ai-busy {
  animation: aiBadgePulse 1.4s ease-in-out infinite;
}

@keyframes aiBadgePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-success) 0%, transparent);
  }

  50% {
    box-shadow: 0 0 8px 3px color-mix(in srgb, var(--status-success) 55%, transparent);
  }
}

.ai-analyze-btn.ai-off .ai-badge,
.ai-badge.disabled {
  background: var(--text-faint);
}

/* Loading */
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: var(--text-base);
}

.ai-shimmer-bar {
  width: 220px;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.ai-shimmer-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--status-success), transparent);
  animation: aiShimmer 1.5s infinite;
}

@keyframes aiShimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* Result card */
.ai-result-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  margin-top: 0.75rem;
  overflow: hidden;
}

.ai-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--status-success) 6%, transparent), color-mix(in srgb, var(--status-success) 3%, transparent));
  border-bottom: 1px solid var(--border-color);
}

.ai-result-title {
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  color: var(--status-success-hover);
}

.ai-result-meta {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.ai-result-section {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.ai-result-section:last-child {
  border-bottom: none;
}

.ai-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--status-success);
  margin-bottom: 0.4rem;
}

.ai-result-section p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Risk bar */
.ai-risk-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.ai-risk-bar-track {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--border-color);
  opacity: 1;
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.ai-risk-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.6s ease-out;
  opacity: 1;
}

.ai-risk-bar-fill {
  box-shadow: none;
}

.ai-risk-label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  min-width: 70px;
  text-align: right;
}

.ai-risk-reasoning {
  margin-top: 0.25rem;
}

/* Anomalies */
.ai-anomaly-item {
  padding: 0.5rem 0.75rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--border-input);
  background: var(--bg-subtle2);
}

.ai-anomaly-item:last-child {
  margin-bottom: 0;
}

.ai-anomaly-item.ai-severity-info {
  border-left-color: var(--status-info);
  background: color-mix(in srgb, var(--status-info) 6%, transparent);
}

.ai-anomaly-item.ai-severity-warning {
  border-left-color: var(--status-warning);
  background: color-mix(in srgb, var(--status-warning) 6%, transparent);
}

.ai-anomaly-item.ai-severity-critical {
  border-left-color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
}

.ai-anomaly-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
}

.ai-anomaly-badge.ai-severity-info {
  background: color-mix(in srgb, var(--status-info) 15%, transparent);
  color: var(--status-info-text);
}

.ai-anomaly-badge.ai-severity-warning {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  color: var(--status-warning-text);
}

.ai-anomaly-badge.ai-severity-critical {
  background: color-mix(in srgb, var(--status-error) 25%, transparent);
  color: var(--status-error-text);
}

.ai-anomaly-finding,
.ai-anomaly-finding-input {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.ai-anomaly-explanation {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

.ai-no-anomalies {
  font-size: var(--text-base);
  color: var(--text-faint);
  font-style: italic;
  margin: 0;
}

/* Error */
.ai-error {
  padding: var(--space-4);
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-error) 25%, transparent);
  border-radius: var(--radius-lg);
  margin-top: 0.75rem;
}

.ai-error strong {
  color: var(--status-error-text);
  font-size: var(--text-base);
}

.ai-error p {
  color: var(--status-error-deep);
  font-size: var(--text-sm);
  margin: 0.4rem 0;
}

.ai-retry-btn {
  padding: 0.35rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--status-error) 25%, transparent);
  border-radius: var(--radius-md);
  color: var(--status-error-hover);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background var(--transition-base);
}

.ai-retry-btn:hover {
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
}

/* Editable fields */
.ai-editable {
  width: 100%;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.4rem 0.5rem;
  background: transparent;
  font-family: inherit;
  resize: vertical;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.ai-editable:hover {
  border-color: var(--border-color);
  background: var(--bg-subtle2);
}

.ai-editable:focus {
  outline: none;
  border-color: var(--status-success);
  background: var(--bg-card);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-success) 12%, transparent);
}

.ai-editable-inline {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.4rem;
  background: transparent;
  font-family: inherit;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.ai-editable-inline:hover {
  border-color: var(--border-color);
  background: var(--bg-subtle2);
}

.ai-editable-inline:focus {
  outline: none;
  border-color: var(--status-success);
  background: var(--bg-card);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-success) 12%, transparent);
}

/* Risk select */
.ai-risk-select {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  min-width: 90px;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.2rem 0.4rem;
  background: var(--bg-card);
  cursor: pointer;
  outline: none;
}

.ai-risk-select:focus {
  border-color: var(--status-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-success) 12%, transparent);
}

/* Anomaly severity select */
.ai-anomaly-severity-select {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  outline: none;
}

.ai-anomaly-severity-select:focus {
  border-color: var(--status-success);
}

/* Result footer with save button */
.ai-result-footer {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.ai-result-footer .btn-primary {
  background: var(--status-success-hover);
  border-color: var(--status-success-hover);
  color: var(--text-on-accent);
}

.ai-result-footer .btn-primary:hover {
  background: var(--status-success-hover);
}

/* Anomaly editable overrides */
.ai-anomaly-item .ai-editable {
  padding: 0.25rem 0.4rem;
  font-size: var(--text-sm);
}

.ai-anomaly-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0.25rem;
}

/* Risk score badges */
.risk-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.risk-not-scored {
  background: var(--bg-subtle);
  color: var(--text-faint);
}

.risk-none {
  background: color-mix(in srgb, var(--status-success) 6%, transparent);
  color: var(--status-success-hover);
}

.risk-low {
  background: color-mix(in srgb, var(--status-info) 15%, transparent);
  color: var(--status-info);
}

.risk-medium {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  color: var(--status-warning-hover);
}

.risk-critical {
  background: color-mix(in srgb, var(--status-error) 25%, transparent);
  color: var(--status-error-hover);
}

/* --- Risk score select: colored by current value --- */
.risk-select {
  border-left-width: 4px;
  border-left-style: solid;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.risk-select[data-risk="not_scored"] {
  border-left-color: var(--text-faint);
}

.risk-select[data-risk="no_risk"] {
  border-left-color: var(--status-success);
}

.risk-select[data-risk="low"] {
  border-left-color: var(--status-info);
}

.risk-select[data-risk="medium"] {
  border-left-color: var(--status-warning);
}

.risk-select[data-risk="critical"] {
  border-left-color: var(--status-error);
}

/* --- Business role area picker (colored dropdown) --- */
.cr-area-picker-wrapper {
  position: relative;
}

.cr-area-picker-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: border-color var(--transition-base);
}

.cr-area-picker-display:hover,
.cr-area-picker-display:focus {
  border-color: var(--accent);
  outline: none;
}

.cr-area-picker-name {
  flex: 1;
}

.cr-area-picker-arrow {
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.cr-area-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-faint);
}

.cr-area-dot-empty {
  background: transparent;
  border: 1px dashed var(--border-input);
}

.cr-area-picker-list .cr-area-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Business role Zuweisungen tab --- */
#composite-assignments-root {
  position: relative;
}

/* Top toolbar: global search + add-system */
.cr-asgmt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cr-global-search-wrapper {
  position: relative;
  flex: 1 1 360px;
  max-width: 420px;
  min-width: 220px;
}

.cr-global-search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}

input.cr-global-search,
input[type="search"].cr-global-search {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  height: 36px;
  padding: 0 var(--space-2) 0 2rem;
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: 1.2;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition-base);
}

input.cr-global-search::-webkit-search-decoration,
input.cr-global-search::-webkit-search-cancel-button,
input.cr-global-search::-webkit-search-results-button,
input.cr-global-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

input.cr-global-search:focus,
input[type="search"].cr-global-search:focus {
  border-color: var(--accent);
}

input.cr-global-search::placeholder {
  color: var(--text-faint);
}

/* Add-system: compact button + dropdown */
.cr-add-system-wrapper {
  position: relative;
  flex-shrink: 0;
}

.cr-add-system-btn {
  white-space: nowrap;
}

.cr-add-system-dropdown {
  position: fixed;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  margin-top: 0;
  min-width: 240px;
  max-height: min(60vh, 400px);
  overflow: hidden;
  overscroll-behavior: contain;
  z-index: 10001;
  border-top: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  flex-direction: column;
}

.cr-add-system-dropdown.open {
  display: flex;
}

.cr-add-system-search {
  flex: 0 0 auto;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

.cr-add-system-search-input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  color: var(--text-primary);
  outline: none;
}

.cr-add-system-search-input:focus {
  border-color: var(--accent);
}

.cr-add-system-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cr-add-system-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
}

.cr-add-system-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-system-type-badge {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
}

/* Sections: compact, scrollable */
.cr-section {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background: var(--bg-card);
  overflow: hidden;
}

/* Section header: one-liner, UPPERCASE label, count badge, +Rolle button, kebab */
.cr-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.75rem;
  background: var(--bg-subtle2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}

.cr-section-collapsed .cr-section-header {
  border-bottom: none;
}

.cr-section-chevron {
  background: none;
  border: none;
  padding: 0.15rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-base);
}

.cr-section-chevron:hover {
  background: var(--bg-subtle);
}

.cr-section-collapsed .cr-section-chevron {
  transform: rotate(-90deg);
}

.cr-section-label {
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-xs);
  color: var(--text-primary);
}

.cr-section-count {
  font-size: var(--text-xs);
  color: var(--text-faint);
  background: var(--bg-body);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.cr-section-spacer {
  flex: 1;
}

.cr-section-add-btn {
  font-size: var(--text-xs);
  padding: 0.25rem 0.6rem;
  background: var(--bg-card);
  color: var(--accent);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: var(--font-medium);
  transition: border-color var(--transition-base), background var(--transition-base);
}

.cr-section-add-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Kebab menu */
.cr-section-kebab-wrapper {
  position: relative;
}

.cr-section-kebab {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  display: inline-flex;
}

.cr-section-kebab:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.cr-section-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-1);
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 15;
  padding: var(--space-1) 0;
}

.cr-section-menu.open {
  display: block;
}

.cr-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.75rem;
  background: none;
  border: none;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.cr-menu-item:hover {
  background: var(--bg-subtle);
}

.cr-menu-item-danger {
  color: var(--danger);
}

.cr-menu-item-danger:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Section body: dense table, zebra, hover-reveal remove */
.cr-section-body {
  background: var(--bg-card);
}

.cr-role-table {
  width: 100%;
  border-collapse: collapse;
}

.cr-role-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
}

.cr-role-table tbody tr:last-child {
  border-bottom: none;
}

.cr-role-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg-subtle) 50%, transparent);
}

.cr-role-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.cr-role-table td {
  padding: 0.4rem 0.75rem;
  font-size: var(--text-sm);
  vertical-align: middle;
}

.cr-role-name-cell {
  width: 35%;
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.cr-role-desc-cell {
  color: var(--text-faint);
}

.cr-role-action-cell {
  width: 36px;
  text-align: right;
}

.cr-row-empty {
  padding: 0.75rem;
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
}

.cr-role-table tbody tr.cr-role-row-added {
  border-left: 3px solid var(--status-success);
}

.cr-role-table tbody tr.cr-role-row-removed {
  border-left: 3px solid var(--status-error);
  opacity: 0.6;
}

.cr-role-table tbody tr.cr-role-row-removed .cr-role-name-cell {
  text-decoration: line-through;
}

.cr-row-remove {
  background: none;
  border: none;
  font-size: var(--text-md);
  line-height: 1;
  padding: 0.15rem 0.35rem;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--transition-base), color var(--transition-base), background var(--transition-base);
}

.cr-role-table tbody tr:hover .cr-row-remove,
.cr-row-remove:focus {
  opacity: 1;
}

.cr-row-remove:hover {
  color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 12%, transparent);
}

/* Inline role picker (embedded in each system section) */
.cr-inline-picker {
  background: var(--bg-subtle);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cr-inline-picker[hidden] {
  display: none;
}

.cr-picker-input {
  margin-bottom: 0;
}

.cr-picker-list {
  overflow-y: auto;
  max-height: 320px;
}

.cr-picker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: none;
  background: none;
  text-align: left;
  font-size: var(--text-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.cr-picker-item:hover {
  background: var(--bg-subtle);
}

.cr-picker-item-name {
  color: var(--text-primary);
  font-weight: var(--font-medium);
  flex-shrink: 0;
}

.cr-picker-item-desc {
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.cr-picker-empty {
  padding: 0.75rem;
  color: var(--text-faint);
  text-align: center;
  font-style: italic;
  font-size: var(--text-sm);
}

/* Empty state card (no target systems assigned yet) */
.cr-asgmt-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  background: var(--bg-card);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  gap: var(--space-3);
}

.cr-asgmt-empty-icon {
  color: var(--text-faint);
  display: inline-flex;
  padding: var(--space-3);
  background: var(--bg-subtle);
  border-radius: 50%;
}

.cr-asgmt-empty-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.cr-asgmt-empty-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 340px;
  line-height: 1.5;
}

.cr-asgmt-empty-action {
  margin-top: var(--space-2);
}

/* --- LDAP Groups Browser --- */
.ldap-groups-container {
  display: flex;
  height: 480px;
}

.ldap-groups-tree {
  width: 40%;
  min-width: 240px;
  overflow-y: auto;
  border-right: 1px solid var(--border-color);
  padding: 0.5rem 0;
}

.ldap-groups-detail {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.ldap-group-node {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
  border-left: 3px solid transparent;
  user-select: none;
}

.ldap-group-node:hover {
  background: var(--bg-subtle);
}

.ldap-group-node.selected {
  background: color-mix(in srgb, var(--color-workflow) 6%, transparent);
  border-left-color: var(--color-workflow);
  color: var(--color-workflow);
  font-weight: var(--font-medium);
}

.ldap-group-toggle {
  width: 16px;
  font-size: var(--text-2xs);
  color: var(--text-faint);
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
}

.ldap-group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ldap-group-badge {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  flex-shrink: 0;
}

.ldap-group-detail-header h3 {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.ldap-group-detail-dn {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-family: var(--font-mono);
  margin-bottom: 0.25rem;
  word-break: break-all;
}

.ldap-group-detail-guid {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-family: var(--font-mono);
  margin-bottom: var(--space-3);
  user-select: all;
}

.ldap-group-detail-desc {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.ldap-group-detail-section {
  margin-bottom: var(--space-4);
}

.ldap-group-detail-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.ldap-group-detail-value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.ldap-group-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ldap-group-link {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  background: color-mix(in srgb, var(--color-workflow) 6%, transparent);
  color: var(--color-workflow);
  border: 1px solid color-mix(in srgb, var(--color-workflow) 19%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition-base);
}

.ldap-group-link:hover {
  background: color-mix(in srgb, var(--color-workflow) 12%, transparent);
}
.ldap-member-chip {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

/* LDAP Group Picker dropdown */
.ldap-group-picker {
  max-height: 280px;
  overflow-y: auto;
}

.ldap-group-picker .search-dropdown-item.ldap-picker-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ldap-group-picker .ldap-group-badge {
  margin-left: auto;
  flex-shrink: 0;
}

/* LDAP table description cell */
.ldap-desc-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* LDAP row add/remove markers */
.ldap-row-added {
  border-left: 3px solid var(--status-success);
}

.ldap-row-removed {
  border-left: 3px solid var(--status-error);
  opacity: 0.6;
}

.ldap-row-removed td:first-child {
  text-decoration: line-through;
}

/* LDAP DN cell */
.ldap-dn-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.ldap-subgroup-toggle {
  display: inline-block;
  width: 14px;
  font-size: var(--text-2xs);
  cursor: pointer;
  transition: transform var(--transition-base);
  text-align: center;
  margin-right: 0.2rem;
  color: var(--text-muted);
}

.ldap-subgroup-toggle:empty {
  cursor: default;
  width: 0;
  margin: 0;
}

.ldap-subgroup-toggle.open {
  transform: rotate(90deg);
}

.ldap-children-row td {
  background: var(--bg-subtle2);
  font-size: var(--text-xs);
  padding: 0.2rem 0.4rem !important;
}

.ldap-children-row .ldap-child-name {
  padding-left: 2rem !important;
  font-weight: var(--font-medium);
}

.ldap-children-row .ldap-child-desc {
  color: var(--text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.ldap-children-row .ldap-child-dn {
  color: var(--text-muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === System Health Monitoring === */

.monitoring-subtab-bar {
  display: flex;
  border-bottom: 2px solid var(--border-card);
  margin-bottom: 1.5rem;
  gap: 0;
  flex-wrap: wrap;
  align-items: center;
}

.monitoring-subtab {
  padding: 0.75rem 1.25rem;
  border: none;
  background: none;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-base);
  font-family: inherit;
  white-space: nowrap;
}

.monitoring-subtab:hover {
  color: var(--text-primary);
  background: var(--bg-subtle2);
}

.monitoring-subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-card);
}

.health-last-updated {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-bottom: 1.5rem;
}

.health-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--status-success);
  border-radius: 50%;
  animation: health-pulse 2s ease-in-out infinite;
}

@keyframes health-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.health-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  margin-bottom: var(--space-4);
}

.health-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 1rem 0;
}

.health-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-status-dot.ok {
  background: var(--status-success);
}

.health-status-dot.error {
  background: var(--status-error);
}

.health-status-dot.loading {
  background: var(--skeleton-shine);
}

.health-gauges-row {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.health-gauge {
  position: relative;
  width: 120px;
  height: 120px;
}

.health-gauge-svg {
  width: 100%;
  height: 100%;
}

.health-gauge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.health-gauge-value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.health-gauge-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.health-detail-cards {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.health-detail-card {
  background: var(--bg-subtle2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 0.6rem 1rem;
  min-width: 120px;
  flex: 1;
}

.health-detail-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.health-detail-value {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.health-offline-notice {
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-error) 25%, transparent);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  color: var(--status-error-hover);
  font-size: var(--text-base);
}

.health-models-section {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.health-models-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.health-models-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.health-model-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.7rem;
  background: var(--bg-subtle2);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.health-model-loaded {
  background: color-mix(in srgb, var(--status-success) 6%, transparent);
  border-color: color-mix(in srgb, var(--status-success) 40%, transparent);
}
/* ── Health Loading Skeleton ── */
.health-skeleton-bar {
  height: 18px;
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: health-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
  margin: 0.6rem 0;
}

@keyframes health-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ── Application Logs Subtab ── */
.app-log-filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.app-log-summary {
  display: flex;
  gap: 1.2rem;
  margin-bottom: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.app-log-stat {
  font-size: var(--text-base);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.app-log-stat-value {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}

.app-log-level {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.app-log-level.critical {
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
  color: var(--status-error-hover);
}

.app-log-level.error {
  background: color-mix(in srgb, var(--status-error) 6%, transparent);
  color: var(--status-error);
}

.app-log-level.warning {
  background: color-mix(in srgb, var(--status-warning) 6%, transparent);
  color: var(--status-warning-hover);
}

.app-log-level.info {
  background: color-mix(in srgb, var(--status-info) 6%, transparent);
  color: var(--status-info);
}

.app-log-level.debug {
  background: var(--bg-subtle2);
  color: var(--text-secondary);
}

/* --- Admin sidebar menu --- */
.admin-menu {
  padding: 0.5rem 0;
}

.admin-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 1.25rem;
  border: none;
  background: none;
  font-size: var(--text-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.admin-menu-item:hover {
  background: var(--bg-body);
  color: var(--text-primary);
}

.admin-menu-item.active {
  color: var(--accent);
  background: var(--bg-body);
  font-weight: var(--font-semibold);
  border-right: 3px solid var(--accent);
}

.admin-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-2) var(--space-4);
}

/* Collapsible admin menu group: parent button + chevron + indented children. */
.admin-menu-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.6rem 1.25rem;
  border: none;
  background: none;
  font-size: var(--text-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
}
.admin-menu-parent:hover {
  background: var(--bg-body);
  color: var(--text-primary);
}
.admin-menu-chevron {
  transition: transform var(--transition-base);
  opacity: 0.7;
  flex-shrink: 0;
}
.admin-menu-group.expanded .admin-menu-chevron {
  transform: rotate(180deg);
}
.admin-menu-children {
  display: none;
  background: color-mix(in srgb, var(--bg-body) 50%, transparent);
}
.admin-menu-group.expanded .admin-menu-children {
  display: block;
}
.admin-menu-child {
  padding-left: 2rem;
  font-size: var(--text-sm);
}

/* Admin search box in sidebar */
.admin-search-box {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.admin-search-box input {
  width: 100%;
}

/* Admin search results */
.admin-search-results {
  max-width: 720px;
  padding: var(--space-2) 0;
}

.admin-search-group {
  margin-bottom: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}

.admin-search-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 1rem;
  border: none;
  background: var(--bg-body);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-base);
}

.admin-search-group-header:hover {
  background: var(--bg-card);
}

.admin-search-group-header svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.admin-search-items {
  border-top: 1px solid var(--border-color);
}

.admin-search-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-base);
}

.admin-search-item:hover {
  background: var(--bg-body);
  color: var(--text-primary);
}

.admin-search-item+.admin-search-item {
  border-top: 1px solid var(--border-subtle);
}

/* ---------------------------------------------------------------------------
   Role Mining Assistant
   --------------------------------------------------------------------------- */
.mining-header {
  margin-bottom: 1.25rem;
}

.mining-source-toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mining-upload-section {
  margin-bottom: 1.5rem;
}

.mining-upload-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.mining-upload-area {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  transition: border-color var(--transition-base), background var(--transition-base);
  cursor: default;
}

.mining-upload-area:hover,
.mining-upload-area.dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-hover) 4%, transparent);
}

.mining-upload-icon {
  font-size: var(--text-xl);
  margin-bottom: 0.4rem;
}

.mining-upload-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
  margin-bottom: 0.3rem;
}

.mining-upload-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.mining-upload-hint code {
  background: color-mix(in srgb, var(--text-faint) 12%, transparent);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: var(--text-sm);
}

.mining-upload-area .btn-sm {
  margin-top: 0.6rem;
  padding: 0.3rem 0.8rem;
  font-size: var(--text-sm);
}

.mining-upload-filename {
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: var(--font-medium);
  word-break: break-all;
}

.mining-control-panel {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.mining-control-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
}

.mining-select,
.mining-input {
  min-width: 80px;
}
.mining-select {
  min-width: 160px;
}

/* Summary cards row */
.mining-summary {
  display: flex;
  gap: var(--space-4);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.mining-summary-card {
  flex: 1;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: center;
}

.mining-summary-card .value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

.mining-summary-card .label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Suggestion cards */
.mining-suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mining-suggestion-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.mining-suggestion-card:hover {
  border-color: var(--accent);
}

.mining-sugg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem 0.25rem;
  cursor: pointer;
  user-select: none;
}

.mining-sugg-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.mining-sugg-toggle {
  color: var(--text-muted);
  font-size: var(--text-base);
  transition: transform var(--transition-slow);
}

.mining-sugg-desc {
  padding: 0 1.25rem 0.25rem;
  color: var(--text-muted);
  font-size: var(--text-base);
  font-style: italic;
}

.mining-sugg-body {
  padding: 0.25rem 1.25rem 0.75rem;
}

.mining-sugg-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0.3rem;
  font-size: var(--text-base);
  flex-wrap: wrap;
}

.mining-sugg-label {
  color: var(--text-muted);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

/* Role badges inside mining cards */
.mining-role-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  background: color-mix(in srgb, var(--accent-hover) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent-hover) 20%, transparent);
  white-space: nowrap;
}

/* Department chips */
.mining-dept-chip {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: color-mix(in srgb, var(--text-faint) 15%, transparent);
  color: var(--text-secondary, var(--text-muted));
}

/* Overlap badges */
.mining-overlap-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.mining-overlap-badge.exact {
  background: color-mix(in srgb, var(--status-error) 15%, transparent);
  color: var(--status-error);
}

.mining-overlap-badge.subset {
  background: color-mix(in srgb, var(--status-warning) 15%, transparent);
  color: var(--status-warning);
}

.mining-overlap-badge.superset {
  background: color-mix(in srgb, var(--status-info) 15%, transparent);
  color: var(--status-info);
}

.mining-overlap-badge.partial {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  color: var(--status-warning-hover);
}

/* Expandable detail section */
.mining-sugg-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 1px solid transparent;
}

.mining-sugg-detail.open {
  max-height: 2000px;
  border-top-color: var(--border);
  padding: 0.75rem 1.25rem;
}

.mining-detail-section {
  margin-bottom: var(--space-4);
}

.mining-detail-heading {
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mining-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.mining-detail-table th {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.mining-detail-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text-faint) 8%, transparent);
}

/* Coverage bar */
.mining-coverage-bar-wrap {
  display: inline-block;
  width: 60px;
  height: 6px;
  background: color-mix(in srgb, var(--text-faint) 15%, transparent);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 0.3rem;
}

.mining-coverage-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* Loading / empty states */
.mining-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.mining-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-bottom: var(--space-3);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.mining-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.mining-dept-tree-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.mining-dept-tree {
  font-size: var(--text-base);
  line-height: 1.6;
}

.mining-dept-node {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mining-dept-node-icon {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  width: 0.8rem;
  text-align: center;
}

.mining-dept-node-id {
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: 0.6;
}

/* Mining view toggle */
.mining-view-toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Org tree view */
.mining-org-tree {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mining-org-dept {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.mining-org-dept-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1rem;
  cursor: pointer;
  user-select: none;
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
}

.mining-org-dept-header:hover {
  background: var(--bg-subtle);
}

.mining-org-dept-header .toggle {
  width: 1rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: transform var(--transition-slow);
}

.mining-org-dept.open .mining-org-dept-header .toggle {
  transform: rotate(0deg);
}

.mining-org-dept:not(.open) .mining-org-dept-header .toggle {
  transform: rotate(-90deg);
}

.mining-org-dept-stats {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--text-muted);
  margin-left: auto;
}

.mining-org-dept-body {
  display: none;
}

.mining-org-dept.open .mining-org-dept-body {
  display: block;
}

.mining-org-user {
  padding: 0.4rem 1rem 0.4rem 1.5rem;
  border-top: 1px solid var(--border);
}

.mining-org-user-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-base);
  padding: 0.2rem 0;
}

.mining-org-user-header:hover {
  color: var(--accent);
}

.mining-org-user-toggle {
  width: 0.8rem;
  font-size: var(--text-2xs);
  color: var(--text-muted);
  transition: transform var(--transition-slow);
}

.mining-org-user.open .mining-org-user-toggle {
  transform: rotate(0deg);
}

.mining-org-user:not(.open) .mining-org-user-toggle {
  transform: rotate(-90deg);
}

.mining-org-user-name {
  font-weight: var(--font-medium);
}

.mining-org-user-detail {
  display: none;
  padding: 0.5rem 0 0.5rem 2.3rem;
}

.mining-org-user.open .mining-org-user-detail {
  display: block;
}

.mining-org-sugg-group {
  margin-bottom: 0.6rem;
}

.mining-org-sugg-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mining-org-sugg-label .check {
  color: var(--status-success);
}

.mining-org-sugg-label .muted {
  color: var(--text-secondary);
}

.mining-org-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-left: 0.75rem;
  margin-top: 0.2rem;
}

.mining-role-badge.unexplained {
  opacity: 0.5;
  border-style: dashed;
}

.mining-org-coverage {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.mining-org-coverage-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.mining-org-no-match {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  padding: 0.2rem 0;
}

/* Strategy chat layout */
.mining-with-chat {
  display: flex;
  gap: 0;
  min-height: 500px;
}

.mining-chat-panel {
  width: 35%;
  min-width: 300px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) 0 0 8px;
  background: var(--bg-card);
}

.mining-chat-header {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mining-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 200px;
}

.mining-chat-welcome {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}

.mining-chat-input-area {
  display: flex;
  gap: var(--space-2);
  padding: 0.6rem;
  border-top: 1px solid var(--border);
  align-items: flex-end;
}

.mining-chat-input-area textarea {
  flex: 1;
  resize: none;
  min-height: 2.5rem;
  max-height: 6rem;
}

.mining-chat-input-area button {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  border: none;
  background: var(--accent);
  color: var(--text-on-accent);
  cursor: pointer;
  font-size: var(--text-base);
  white-space: nowrap;
}

.mining-chat-input-area button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mining-results-panel {
  flex: 1;
  min-width: 0;
}

/* Strategy card */
.mining-strategy-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.6rem 0.8rem;
  margin-bottom: var(--space-3);
}

.mining-strategy-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0.4rem;
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
}

.mining-strategy-params {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mining-strategy-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: var(--text-xs);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.mining-strategy-pill .label {
  color: var(--text-muted);
}

.mining-strategy-pill .value {
  font-weight: var(--font-semibold);
}

.mining-post-proc-tag {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 10px;
  font-size: var(--text-xs);
  background: color-mix(in srgb, var(--status-success) 15%, transparent);
  color: var(--status-success);
  font-weight: var(--font-semibold);
}

/* --- User Lifecycle --- */
.lifecycle-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

.lifecycle-banner-disabled {
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-warning) 19%, transparent);
  color: var(--status-warning-hover);
}

.lifecycle-banner-deleted {
  background: color-mix(in srgb, var(--status-error-hover) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-error-hover) 25%, transparent);
  color: var(--status-error-hover);
}

.user-row-disabled {
  opacity: 0.55;
}

.user-row-disabled:hover {
  opacity: 0.75;
}

.badge-lifecycle {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.badge-disabled {
  background: color-mix(in srgb, var(--status-warning) 18%, transparent);
  color: var(--status-warning-hover);
}

.badge-deleted {
  background: color-mix(in srgb, var(--status-error-hover) 15%, transparent);
  color: var(--status-error-hover);
}

.badge-onboarding {
  background: color-mix(in srgb, var(--status-info) 15%, transparent);
  color: var(--status-info);
}
.recycle-bin-row {
  opacity: 0.7;
}

.recycle-bin-row:hover {
  opacity: 1;
}

/* Dark mode adjustments — lighter text for dark backgrounds */
[data-theme="dark"] .lifecycle-banner-disabled {
  color: var(--status-warning);
}

[data-theme="dark"] .lifecycle-banner-deleted {
  color: var(--status-error);
}

[data-theme="dark"] .badge-disabled {
  color: var(--status-warning);
}

[data-theme="dark"] .badge-deleted {
  color: var(--status-error);
}

.joiner-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
}

.joiner-select-bar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}

.joiner-select-bar-left label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-base);
  cursor: pointer;
  letter-spacing: 0.01em;
}

.joiner-select-count {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 0.15rem 0.55rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--status-success) 15%, transparent);
  color: var(--status-success);
  transition: opacity var(--transition-base);
}

.joiner-select-count.zero {
  opacity: 0;
}

.joiner-row {
  transition: background var(--transition-base);
}

.joiner-row.selected {
  background: color-mix(in srgb, var(--status-success) 5%, transparent);
}

.joiner-row:hover {
  background: var(--bg-hover);
}

.joiner-row.selected:hover {
  background: color-mix(in srgb, var(--status-success) 8%, transparent);
}

/* ─── AI Chat Assistant ─── */
.ai-chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-overlay);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform var(--transition-slow), box-shadow 0.2s;
}

.ai-chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 45%, transparent);
}

.ai-chat-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-overlay);
  width: 560px;
  height: 700px;
  max-height: calc(100vh - 48px);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  /* Resizable */
  resize: both;
  min-width: 380px;
  min-height: 400px;
  max-width: calc(100vw - 48px);
}

.ai-chat-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}

.ai-chat-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
  color: var(--text-primary);
}

.ai-chat-header-actions {
  display: flex;
  gap: 4px;
}

/* Generic icon-only action button — used for close buttons on modals/drawers/forms and for icon actions in headers (AI chat). Square, transparent, muted icon with subtle hover. */
.icon-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
}

.icon-action-btn:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}

/* Subtle ghost button — transparent, muted, brightens on hover. Used for reset / restore-defaults actions (icon + label). Sibling to .btn-ghost-danger. */
.btn-ghost-subtle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 8px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.btn-ghost-subtle:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}

.ai-chat-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}

.ai-chat-tabs::-webkit-scrollbar {
  display: none;
}

.ai-chat-tab-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: center;
  min-width: 0;
}

.ai-chat-tab-btn svg {
  flex-shrink: 0;
}

.ai-chat-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ai-chat-tab-btn:hover:not(.active) {
  color: var(--text-secondary);
}

/* Chat history sidebar — overlays the messages area */
.ai-chat-history {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--bg-card);
}

.ai-chat-history.open {
  display: flex;
}

.ai-chat-history.open+.ai-chat-messages {
  display: none;
}

.ai-chat-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  color: var(--text-primary);
}

.ai-chat-history-clear {
  background: none;
  border: none;
  color: var(--status-error);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-base);
}

.ai-chat-history-clear:hover {
  background: color-mix(in srgb, var(--status-error) 10%, transparent);
}

.ai-chat-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.ai-chat-history-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.ai-chat-history-item {
  position: relative;
  padding: 10px 32px 10px 12px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-base);
  margin-bottom: 2px;
}

.ai-chat-history-item:hover {
  background: var(--bg-subtle);
}

.ai-chat-history-item.active {
  background: color-mix(in srgb, var(--accent-hover) 8%, transparent);
  border-left: 3px solid var(--accent);
}

.ai-chat-history-item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-chat-history-item-meta {
  display: flex;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.ai-chat-history-delete {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: var(--radius-sm);
}

.ai-chat-history-item:hover .ai-chat-history-delete {
  opacity: 1;
}

.ai-chat-history-delete:hover {
  color: var(--status-error);
  background: color-mix(in srgb, var(--status-error) 10%, transparent);
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-chat-bubble {
  max-width: 92%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: var(--text-base);
  line-height: 1.5;
  word-wrap: break-word;
}

.ai-chat-bubble-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--text-on-accent);
  border-bottom-right-radius: 4px;
}

.ai-chat-bubble-assistant {
  align-self: flex-start;
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  max-width: 96%;
}

.ai-chat-bubble-error {
  background: color-mix(in srgb, var(--status-error) 10%, transparent);
  color: var(--status-error);
}

/* Markdown tables inside chat bubbles */
.ai-chat-bubble table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: var(--text-sm);
}

.ai-chat-bubble th,
.ai-chat-bubble td {
  padding: 4px 8px;
  text-align: left;
  border: 1px solid var(--border-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.ai-chat-bubble th {
  background: var(--bg-card);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.ai-chat-bubble tr:hover td {
  background: color-mix(in srgb, var(--accent-hover) 4%, transparent);
}

.ai-chat-bubble .ai-chat-table-wrap {
  overflow-x: auto;
  margin: 8px -4px;
  padding: 0 4px;
  scrollbar-width: thin;
}

.ai-chat-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.ai-chat-request-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
}

.ai-chat-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.ai-chat-card-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
  word-break: break-all;
}

.ai-chat-card-reason {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 8px;
}

.ai-chat-req-btn {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  padding: 5px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition-base);
}

.ai-chat-req-btn:hover {
  background: var(--accent-hover);
}

.ai-chat-req-btn-disabled {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  padding: 5px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: default;
}

.ai-chat-req-btn-done {
  background: color-mix(in srgb, var(--status-success) 15%, transparent);
  color: var(--status-success);
  border: 1px solid color-mix(in srgb, var(--status-success) 19%, transparent);
  padding: 5px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: default;
}

.ai-chat-req-btn-error {
  background: color-mix(in srgb, var(--status-error) 10%, transparent);
  color: var(--status-error);
  border: 1px solid color-mix(in srgb, var(--status-error) 12%, transparent);
  padding: 5px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: default;
}

/* Action result cards (created access requests, etc.) */
.ai-chat-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.ai-chat-action-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: color-mix(in srgb, var(--status-success) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-success) 25%, transparent);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
}

.ai-chat-action-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.ai-chat-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-chat-action-label {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--status-success);
}

.ai-chat-action-detail {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.ai-chat-action-id {
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: 0.7;
}

.ai-chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  align-items: flex-end;
}

.ai-chat-input-area textarea {
  flex: 1;
  resize: none;
  max-height: 100px;
}

.ai-chat-send-btn {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.ai-chat-send-btn:hover {
  background: var(--accent-hover);
}

/* Typing indicator */
.ai-chat-typing {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  align-self: flex-start;
}

.ai-chat-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
  animation: aiChatDot 1.2s infinite;
}

.ai-chat-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-chat-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes aiChatDot {

  0%,
  80%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  40% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Welcome state */
.ai-chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  flex: 1;
}

.ai-chat-welcome-icon {
  margin-bottom: 12px;
}

.ai-chat-welcome h3 {
  margin: 0 0 8px;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.ai-chat-welcome p {
  margin: 0 0 20px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.ai-chat-welcome-examples {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ai-chat-example-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 8px 14px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.ai-chat-example-btn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

/* --- Admin Chat (inline in admin tab) --- */
.admin-chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  max-width: 900px;
}

.admin-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
}

.admin-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-chat-messages .ai-chat-bubble {
  max-width: 85%;
}

.admin-chat-messages .ai-chat-bubble-user {
  max-width: 70%;
}

.admin-chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border-subtle);
  align-items: flex-end;
}

.admin-chat-input-area textarea {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 120px;
}

.admin-chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 3rem 1rem;
}

.admin-chat-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 600px;
}

.admin-chat-prompt-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.admin-chat-prompt-btn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.admin-chat-history {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  background: var(--bg-card);
  max-height: 350px;
  overflow: hidden;
}

.admin-chat-history-item:hover {
  background: var(--bg-subtle);
}

.admin-chat-history-item.active {
  background: var(--accent-subtle);
}

/* ============================================================================
   Dashboard
   ============================================================================ */

/* --- Entrance animation --- */
@keyframes dashEntrance {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dash-entrance {
  opacity: 0;
  animation: dashEntrance 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: calc(var(--entrance-i, 0) * 60ms);
}

/* --- Skeleton loading --- */
@keyframes skeletonShimmer {
  0% {
    background-position: -200px 0;
  }

  100% {
    background-position: 200px 0;
  }
}

.skeleton-pulse {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--border-color) 50%, var(--bg-subtle) 75%);
  background-size: 400px 100%;
  animation: skeletonShimmer 1.4s ease infinite;
  border-radius: 4px;
}

.dashboard-skeleton-card {
  border: 1px solid var(--border-card) !important;
  background: var(--bg-card) !important;
}

/* --- Greeting header --- */
.dashboard-greeting {
  margin-bottom: 1rem;
}

.dashboard-greeting-text {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  display: block;
  line-height: 1.3;
}

.dashboard-greeting-sub {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-top: 0.15rem;
  display: block;
}

/* --- KPI Row --- */
.dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.dashboard-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 1.15rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .dashboard-kpi-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dashboard-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: var(--accent);
}

.dashboard-kpi-accent-users::before {
  background: linear-gradient(90deg, var(--accent), var(--kpi-users-end));
}

.dashboard-kpi-accent-requests::before {
  background: linear-gradient(90deg, var(--status-warning), var(--kpi-requests-end));
}

.dashboard-kpi-accent-risk::before {
  background: linear-gradient(90deg, var(--status-error), var(--kpi-risk-end));
}

.dashboard-kpi-accent-systems::before {
  background: linear-gradient(90deg, var(--status-success), var(--kpi-systems-end));
}

.dashboard-kpi-accent-joiner::before {
  background: linear-gradient(90deg, var(--status-success), var(--kpi-joiner-end));
}

.dashboard-kpi-accent-mover::before {
  background: linear-gradient(90deg, var(--status-info), var(--kpi-mover-end));
}

.dashboard-kpi-accent-leaver::before {
  background: linear-gradient(90deg, var(--status-error), var(--kpi-leaver-end));
}

.dashboard-kpi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.dashboard-kpi-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard-kpi-sparkline {
  flex-shrink: 0;
}

.dashboard-sparkline {
  display: block;
}

.dashboard-kpi-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dashboard-kpi-suffix {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: lowercase;
  margin-left: 0.15rem;
}

.dashboard-kpi-accent-risk .dashboard-kpi-value {
  color: var(--status-error);
}

.dashboard-kpi-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* --- Middle row --- */
.dashboard-middle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.dashboard-middle-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dashboard-middle-right>.dashboard-panel:first-child {
  flex: 1;
}

/* --- Risk row (single panel) --- */
.dashboard-risk-row {
  margin-bottom: 1.25rem;
}

/* --- Bottom row --- */
.dashboard-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

/* --- Panels --- */
.dashboard-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .dashboard-panel:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.dashboard-panel-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

/* --- Risk glow (when critical > 0) --- */
.dashboard-panel-risk-glow {
  border-color: color-mix(in srgb, var(--status-error) 25%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-error) 8%, transparent), inset 0 0 30px color-mix(in srgb, var(--status-error) 3%, transparent);
}

.dashboard-panel-risk-glow:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--status-error) 12%, transparent), inset 0 0 30px color-mix(in srgb, var(--status-error) 3%, transparent);
}

/* --- Risk bar --- */
.dashboard-risk-bar {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.6rem;
  background: var(--bg-subtle);
}

.dashboard-risk-segment {
  min-width: 3px;
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.dashboard-risk-segment:first-child {
  border-radius: 6px 0 0 6px;
}

.dashboard-risk-segment:last-child {
  border-radius: 0 6px 6px 0;
}

/* --- Risk legend --- */
.dashboard-risk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-bottom: 0.25rem;
}

.dashboard-risk-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.dashboard-risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Risk table --- */
.dashboard-risk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.dashboard-risk-table th {
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-risk-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.dashboard-risk-table tr:hover {
  background: var(--bg-subtle);
  border-radius: 6px;
}

.dashboard-risk-table tr:last-child td {
  border-bottom: none;
}

/* --- Activity list --- */
.dashboard-activity-list {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
}

.dashboard-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  border-radius: 6px;
  transition: background 0.15s ease;
}

.dashboard-activity-item:last-child {
  border-bottom: none;
}

.dashboard-activity-item:hover {
  background: var(--bg-subtle);
}

.dashboard-activity-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  margin-top: 1px;
}

.dashboard-activity-body {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.dashboard-activity-row-1 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.dashboard-activity-user {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.dashboard-activity-target {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-activity-desc {
  color: var(--text-muted);
}

.dashboard-activity-time {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--text-faint);
  white-space: nowrap;
  margin-top: 2px;
}

/* Icon-circle tints per category — the event pill uses .log-event-type, which has its own tint rules */
.dashboard-activity-icon.pill-role {
  background: color-mix(in srgb, var(--status-info) 14%, transparent);
  color: var(--status-info);
}

.dashboard-activity-icon.pill-user {
  background: color-mix(in srgb, var(--status-success) 14%, transparent);
  color: var(--status-success);
}

.dashboard-activity-icon.pill-system {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-secondary);
}

.dashboard-activity-icon.pill-sync {
  background: color-mix(in srgb, var(--status-warning) 14%, transparent);
  color: var(--status-warning);
}

.dashboard-activity-icon.pill-provision {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.dashboard-activity-icon.pill-request {
  background: color-mix(in srgb, var(--status-info) 14%, transparent);
  color: var(--status-info);
}

.dashboard-activity-icon.pill-org {
  background: color-mix(in srgb, var(--status-success) 14%, transparent);
  color: var(--status-success);
}

.dashboard-activity-icon.pill-job {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-secondary);
}

.dashboard-activity-icon.pill-workflow {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.dashboard-activity-icon.pill-admin {
  background: color-mix(in srgb, var(--status-error) 14%, transparent);
  color: var(--status-error);
}

.dashboard-activity-icon.pill-muted {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
}

/* --- Donut chart --- */
.dashboard-donut {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 0;
}

.dashboard-donut-chart {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: background 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Donut hole */
.dashboard-donut-chart::after {
  content: '';
  position: absolute;
  top: 26px;
  left: 26px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--bg-card);
}

/* Percentage label in center of donut */
.dashboard-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  z-index: 1;
}

.dashboard-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dashboard-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.dashboard-legend-count {
  color: var(--text-muted);
  font-weight: var(--font-medium);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* --- Pulse dot (system health) --- */
@keyframes dashPulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-success) 50%, transparent);
  }

  50% {
    opacity: 0.85;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--status-success) 0%, transparent);
  }
}

.dashboard-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-success);
  flex-shrink: 0;
  animation: dashPulse 2s ease-in-out infinite;
}

/* --- System health cards --- */
.dashboard-system-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.dashboard-system-card:last-child {
  margin-bottom: 0;
}

.dashboard-system-card:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.dashboard-system-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.dashboard-system-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.dashboard-system-type-badge {
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  color: var(--text-on-accent);
  padding: 0.14rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard-system-card-stats {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Quick actions --- */
.dashboard-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.dashboard-quick-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  transition: all 0.18s ease;
  font-family: inherit;
}

.dashboard-quick-btn:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 12%, transparent);
}

.dashboard-quick-btn-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  transition: color 0.18s ease;
}

.dashboard-quick-btn:hover .dashboard-quick-btn-icon {
  color: var(--accent);
}

/* --- Dashboard Greeting Row + Refresh Button --- */
.dashboard-greeting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dashboard-refresh-icon {
  flex-shrink: 0;
}

.dashboard-refresh-spinning .dashboard-refresh-icon {
  animation: dashRefreshSpin 0.8s linear infinite;
}

.roles-refresh-btn.is-spinning > svg {
  animation: dashRefreshSpin 0.8s linear infinite;
}

@keyframes dashRefreshSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* --- Insights Row (Compliance + Access Decay) --- */
.dashboard-insights-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* --- Compliance Gauge --- */
.dashboard-gauge {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0 0.25rem;
}

.dashboard-gauge-svg {
  overflow: visible;
}

.dashboard-gauge-arc {
  transition: stroke-dasharray 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboard-gauge-score-text {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  fill: var(--text-primary);
  font-family: inherit;
}

.dashboard-gauge-grade-text {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: inherit;
}

/* --- Sub-score Bars --- */
.dashboard-subscores {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.5rem;
}

.dashboard-subscore {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dashboard-subscore-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  width: 110px;
  flex-shrink: 0;
}

.dashboard-subscore-track {
  flex: 1;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.dashboard-subscore-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboard-subscore-pct {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* --- Access Decay List --- */
.dashboard-decay-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dashboard-decay-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  transition: border-color 0.15s;
}

.dashboard-decay-item:hover {
  border-color: var(--accent);
}

.dashboard-decay-indicator {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
}

.dashboard-decay-body {
  flex: 1;
  min-width: 0;
}

.dashboard-decay-primary {
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-decay-user {
  font-weight: var(--font-semibold);
  cursor: pointer;
}

.dashboard-decay-user:hover {
  text-decoration: underline;
}

.dashboard-decay-role {
  color: var(--text-muted);
}

.dashboard-decay-risk {
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 0.25rem;
}

.dashboard-decay-secondary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- Dashboard responsive --- */
@media (max-width: 900px) {
  .dashboard-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-middle-row {
    grid-template-columns: 1fr;
  }

  .dashboard-insights-row {
    grid-template-columns: 1fr;
  }

  .dashboard-bottom-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .dashboard-kpi-row {
    grid-template-columns: 1fr;
  }

  .dashboard-donut {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Responsive: smaller screens */
@media (max-width: 480px) {
  .ai-chat-panel {
    width: calc(100vw - 16px);
    right: 8px;
    bottom: 8px;
    height: calc(100vh - 16px);
    max-height: none;
    border-radius: var(--radius-xl);
    resize: none;
    min-width: 0;
  }

  .ai-chat-fab {
    bottom: 16px;
    right: 16px;
  }
}

/* ─── Inline-style replacements ─────────────────────────────────────────── */

/* Mining source divider */
.mining-source-divider {
  border-left: 1px solid var(--border);
  margin: 0 0.25rem;
  align-self: stretch;
}
/* Role detail: description paragraphs */
.role-detail-desc-p {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0;
}

.role-detail-desc-p.mt-sm {
  margin-top: var(--space-2);
}

/* Mining org tree: parent-only department header */
.mining-org-parent-header {
  padding: 0.4rem 0.5rem;
  margin-top: 0.25rem;
}

/* ─── Semantic data-attribute color mappings ──────────────────────────────
   JS emits data attributes; CSS resolves them to --semantic-color.
   Consumers use: color: var(--semantic-color); background: var(--semantic-color); etc. */

/* Status */
[data-status-color="completed"],
[data-status-color="enabled"] {
  --semantic-color: var(--status-success);
}

[data-status-color="failed"] {
  --semantic-color: var(--status-error);
}

[data-status-color="running"] {
  --semantic-color: var(--status-info);
}

[data-status-color="cancelled"] {
  --semantic-color: var(--status-warning);
}

[data-status-color] {
  --semantic-color: var(--text-muted);
}

/* Risk */
[data-risk="critical"] {
  --semantic-color: var(--status-error);
}

[data-risk="high"] {
  --semantic-color: var(--status-warning-hover);
}

[data-risk="medium"] {
  --semantic-color: var(--status-warning);
}

[data-risk="low"] {
  --semantic-color: var(--status-info);
}

[data-risk="no_risk"] {
  --semantic-color: var(--status-success);
}

[data-risk="not_scored"] {
  --semantic-color: var(--text-faint);
}

/* Health / compliance thresholds */
[data-health="excellent"] {
  --semantic-color: var(--status-success);
}

[data-health="good"] {
  --semantic-color: var(--status-warning);
}

[data-health="fair"] {
  --semantic-color: var(--status-warning-hover);
}

[data-health="critical"] {
  --semantic-color: var(--status-error);
}

/* Decay / freshness */
[data-decay="fresh"] {
  --semantic-color: var(--status-success);
}

[data-decay="aging"] {
  --semantic-color: var(--status-warning);
}

[data-decay="stale"] {
  --semantic-color: var(--status-warning-hover);
}

[data-decay="decayed"] {
  --semantic-color: var(--status-error);
}

[data-decay="never_synced"] {
  --semantic-color: var(--text-faint);
}

/* System type */
[data-system-type="sap"] {
  --semantic-color: var(--color-system-sap);
}

[data-system-type="ldap"] {
  --semantic-color: var(--color-system-ldap);
}

[data-system-type="entra"] {
  --semantic-color: var(--color-entra);
}

[data-system-type="scim"] {
  --semantic-color: var(--color-scim);
}

/* ─── HR Integration Tile ───────────────────────────────────────────────── */
.dashboard-hr-row {
  margin-bottom: 1.25rem;
}

.dashboard-hr-counts {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.hr-count-block {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: filter var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  user-select: none;
}

.hr-count-block.cursor-pointer:hover {
  filter: brightness(1.05);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.hr-count-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1;
}

.hr-count-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.hr-count-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* Modal row highlight */
.hr-modal-row.selected {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
/* ============================================================
   Generic chat panel (used by request detail modal; reusable)
   ============================================================ */

/* ── Access-request detail: redesigned layout ───────────────────────────── */

.request-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.request-detail-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.request-detail-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.request-detail-header .request-detail-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}
.request-detail-id-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
}

.request-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.request-detail-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.request-detail-meta-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.request-detail-meta-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
  min-width: 0;
}
.request-detail-meta-value > span:not(.avatar) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Two-line target cell for group requests: name on top, "N members" below. */
.req-target-meta-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.request-detail-meta-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.request-detail-roles-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.request-detail-roles-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.request-detail-roles-summary {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.request-detail-roles-summary strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}
.req-roles-table {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  /* Same defaults as `.app-table` — this is a div-based table that lives in
     the request-detail modal and should follow the global cell rules. */
  font-size: var(--text-base);
  color: var(--text-muted);
  font-weight: var(--font-light);
}
/* Approval-steps column is sized for ~5 avatars (base .avatar ~28px each +
   4 × space-2 gaps + 4px room for the badge overflow). The role column
   takes the rest. */
.req-roles-table-head {
  display: grid;
  grid-template-columns: 1fr calc((28px * 5 + var(--space-2) * 4 + 4px) * 1.25);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.req-roles-th {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.req-roles-row {
  display: grid;
  grid-template-columns: 1fr calc((28px * 5 + var(--space-2) * 4 + 4px) * 1.25);
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.req-roles-row:first-child { border-top: 0; }

.req-role-cell {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.req-role-cell .role-dot {
  flex-shrink: 0;
}
.req-role-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.req-role-name-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.req-role-scope {
  /* defaults from .req-roles-table (muted + 300) — no overrides. */
}

.req-steps-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

/* Avatar wrapper that anchors the status badge at the bottom-right. */
.approver-chip {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

/* Round white-background bubble overlaid on an approver avatar. The icon
   inside picks up its colour from the status modifier class. */
.approver-status-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-card);
  /* Tight ring against any avatar background so the badge "pops". */
  box-shadow: 0 0 0 1.5px var(--bg-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.approver-status-badge svg {
  width: 12px;
  height: 12px;
  display: block;
}
.approver-status-badge.approved { color: var(--status-success); }
.approver-status-badge.rejected { color: var(--status-error); }
.approver-status-badge.pending  { color: var(--status-warning); }
.approver-status-badge.waiting  { color: var(--text-faint); }
.avatar.avatar-placeholder {
  background: transparent;
  color: var(--text-faint);
  border: 1px dashed var(--border-input);
  font-weight: var(--font-medium);
}

.request-detail-footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}
.request-detail-override {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.request-detail-override-tag {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}
.request-detail-override-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.request-detail-footer-actions {
  display: flex;
  gap: var(--space-2);
}
.request-detail-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.request-detail-action-btn > svg {
  display: block;
  flex-shrink: 0;
}

.request-detail-with-chat {
  display: flex;
  gap: 0;
  padding: 0;
  align-items: stretch;
}
.request-detail-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: var(--space-4);
  overflow-y: auto;
}
.request-detail-chat {
  flex: 0 0 380px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin: var(--space-4);
  overflow: hidden;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.request-detail-chat.chat-panel {
  height: auto;
}

.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}
.chat-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.chat-header-actions {
  display: none;
  gap: var(--space-1);
}
.chat-header-btn {
  background: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-base);
  font-size: var(--text-md);
}
.chat-header-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }

.chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.chat-empty, .chat-loading, .chat-error {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--space-4) 0;
}

.chat-bubble-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 85%;
  align-self: flex-start;
}
.chat-bubble-row.mine {
  align-self: flex-end;
  align-items: flex-end;
}
.chat-bubble {
  background: var(--bg-card);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xs);
}
.chat-bubble-row.mine .chat-bubble {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
}
.chat-bubble.system {
  align-self: center;
  max-width: 100%;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--space-1) var(--space-2);
}
.chat-system-time {
  margin-left: var(--space-2);
  color: var(--text-faint);
  font-style: normal;
}
.chat-bubble-text { white-space: pre-wrap; word-break: break-word; }
.chat-bubble-meta {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-faint);
  padding: 0 var(--space-1);
}
.chat-bubble-author {
  font-weight: var(--font-normal);
  color: inherit;
}
/* Middle-dot separator between meta items (author / time / readers) */
.chat-bubble-meta > * + *::before {
  content: "·";
  margin: 0 6px;
  color: var(--text-faint);
}
.chat-bubble-readers {
  display: inline-flex; align-items: center; gap: 2px;
}
.chat-bubble-readers .avatar {
  width: 14px; height: 14px; font-size: var(--text-2xs);
}
.chat-readers-overflow {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-left: 2px;
}

.chat-composer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}
/* Layout-only overrides; visual styling comes from .form-control. */
.chat-composer textarea.chat-input {
  flex: 1 1 auto;
  resize: none;
}
.chat-composer .chat-send { flex-shrink: 0; }
.chat-composer-disabled {
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: italic;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

/* ============================================================
   Header notification bell
   ============================================================ */

.notif-wrapper {
  position: relative;
  margin-right: var(--space-2);
}
.notif-bell-btn {
  position: relative;
  background: none; border: none; cursor: pointer;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-base), color var(--transition-base);
}
.notif-bell-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }
.notif-bell-btn.has-unread { color: var(--accent); }
.notif-bell-count {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 18px; height: 18px;
  background: var(--status-error);
  color: var(--text-on-accent, #fff);
  border-radius: 9px;
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
}

.notif-bell-popover {
  display: none;
  position: absolute;
  top: 100%; right: 0;
  min-width: 280px; max-width: 360px;
  max-height: 60vh; overflow-y: auto;
  margin-top: var(--space-1);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  padding: var(--space-2);
}
.notif-bell-popover.open { display: block; }
.notif-empty {
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}
.notif-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.notif-item:hover { background: var(--bg-subtle); }
.notif-item-count {
  background: var(--status-error);
  color: var(--text-on-accent, #fff);
  border-radius: 10px;
  padding: 0 8px;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

/* Provisioning Run Tracker (live step UI for backend provisioning) */
.prov-tracker-overlay .modal-body { max-height: 70vh; overflow-y: auto; }
.prov-progress-fill.prov-status-running  { background: var(--status-info); }
.prov-progress-fill.prov-status-success  { background: var(--status-success); }
.prov-progress-fill.prov-status-partial  { background: var(--status-warning); }
.prov-progress-fill.prov-status-failed   { background: var(--status-error); }

.prov-systems {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.prov-system-group {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-subtle);
}
.prov-system-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.prov-system-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.prov-system-type {
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
}

.prov-step {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  border-top: 1px dashed var(--border-color);
}
.prov-step:first-child { border-top: none; }
.prov-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-weight: var(--font-bold);
  color: var(--text-muted);
}
.prov-step-label { color: var(--text-primary); }
.prov-step-status {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.prov-step-message {
  grid-column: 2 / 4;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  word-break: break-word;
}

.prov-step-pending  .prov-step-icon  { color: var(--text-faint); }
.prov-step-running  .prov-step-icon  { color: var(--status-info); animation: prov-spin 1.2s linear infinite; }
.prov-step-success  .prov-step-icon  { color: var(--status-success); }
.prov-step-failed   .prov-step-icon  { color: var(--status-error); }
.prov-step-skipped  .prov-step-icon  { color: var(--text-faint); }

.prov-step-success  .prov-step-status { color: var(--status-success); }
.prov-step-failed   .prov-step-status { color: var(--status-error); }
.prov-step-running  .prov-step-status { color: var(--status-info); }
.prov-step-skipped  .prov-step-status { color: var(--text-faint); }

@keyframes prov-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.req-detail-section {
  margin-top: var(--space-6);
}
.req-detail-section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: normal;
}
.req-detail-prov-tracker { min-height: 60px; }

/* ==========================================================================
   Assignments tab — collapsible (accordion) sections + global apply footer
   ========================================================================== */

.detail-section--collapsible .detail-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: default;
  transition: background var(--transition-base);
}

.detail-section--collapsible.is-open .detail-section-title {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.detail-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: left;
}

.detail-section-toggle:hover {
  color: var(--accent);
}

.detail-section-toggle::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.15rem;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.detail-section--collapsible.is-open .detail-section-toggle::before {
  transform: rotate(90deg);
}

.detail-section-title-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
}

.detail-section-status {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
}

.detail-section-dirty-dot {
  display: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--status-warning, #f59e0b);
  flex-shrink: 0;
}

.detail-section--dirty .detail-section-dirty-dot {
  display: inline-block;
}

.role-provisioning-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: var(--space-2);
  vertical-align: middle;
  flex-shrink: 0;
}

.role-provisioning-dot--ok {
  background: var(--status-success);
}

.role-provisioning-dot--off {
  background: transparent;
  border: 1px solid var(--text-muted);
}

.auto-provision-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: transparent;
  border: 0;
}

.auto-provision-hint--on {
  color: color-mix(in srgb, var(--status-success) 70%, var(--text-muted));
}

.auto-provision-hint--off {
  color: var(--text-muted);
}

.auto-provision-hint-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.55;
}

.auto-provision-hint-icon svg {
  width: 11px;
  height: 11px;
}

.auto-provision-hint-text {
  flex: 1;
}

.auto-provision-hint-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  opacity: 0.7;
  font-weight: var(--font-normal);
  transition: opacity var(--transition-base);
}

.auto-provision-hint-link:hover {
  opacity: 1;
  border-bottom-style: solid;
}

.composite-prop-hint {
  margin-right: auto;
}

.composite-prop-hint .auto-provision-hint {
  margin-bottom: 0;
}

.detail-section--collapsible .detail-section-body {
  padding: var(--space-3) 0.65rem;
  border: 1px solid var(--border-subtle);
  border-top: 0;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background: var(--bg-card);
}

.detail-section--collapsible:not(.is-open) .detail-section-body {
  display: none;
}

.detail-section--no-account .detail-section-status {
  color: var(--status-warning, #f59e0b);
}

.assignment-apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.assignment-apply-btn:disabled:hover {
  background: var(--accent);
}

/* Composite role: AI-generated description — icon inside textarea */
.composite-desc-wrapper {
  position: relative;
}

.composite-desc-wrapper:has(.composite-ai-icon-btn) textarea {
  padding-right: 2.5rem;
}

.composite-ai-icon-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.composite-ai-icon-btn:hover {
  color: var(--status-info);
  border-color: var(--status-info);
  background: color-mix(in srgb, var(--status-info) 8%, var(--bg-card));
  box-shadow: var(--shadow-sm);
}

.composite-ai-icon-btn:focus-visible {
  outline: 2px solid var(--status-info);
  outline-offset: 1px;
}

.composite-ai-icon-btn__badge {
  position: absolute;
  top: -5px;
  right: -6px;
  font-size: var(--text-2xs);
  padding: 1px 4px;
  pointer-events: none;
}

/* AI suggestion dialog body */
.composite-ai-suggestion-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: pre-wrap;
  line-height: 1.6;
  padding: var(--space-2) 0;
}

.composite-ai-suggestion-error-box {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-3);
  border: 1px solid var(--status-error);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--status-error) 8%, var(--bg-card));
}

/* ============================================================================
   JML Onboarding Preview — Card carousel (joiner with N > 1)
   ============================================================================ */

.jml-card-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.jml-card-nav-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: var(--text-sm);
}

.jml-card-nav-title-main {
  font-weight: var(--font-semibold);
}

.jml-card-nav-title-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.jml-card-nav-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: var(--text-md);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
}

.jml-card-nav-btn:hover:not(:disabled) {
  background: var(--bg-card);
  border-color: var(--accent);
  color: var(--accent);
}

.jml-card-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.jml-card-dots {
  display: flex;
  gap: var(--space-1);
  justify-content: center;
  padding: var(--space-1) 0;
}

.jml-card-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--border-color);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-base);
}

.jml-card-dot:hover {
  background: var(--text-secondary);
}

.jml-card-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

.jml-card-body {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  background: var(--bg-body);
}

.jml-card-counter {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding: var(--space-1) 0;
}

.jml-step-status {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  line-height: 1;
  margin-left: var(--space-2);
}