/* ============================================================================
   admin_refined.css — Admin module visual refresh (editorial direction)
   ----------------------------------------------------------------------------
   First pilot of the platform-wide design refresh, scoped tightly to the
   Admin tab only. Loaded AFTER dashboard.css so its rules win on conflict.

   Scope token: every rule is prefixed with `#tab-admin .pa-admin-refined`
   so insurer-side dashboard outside Admin is visually untouched. The
   `.pa-admin-refined` class is applied to the admin shell wrapper by
   admin_module.js on mount. The double scope is defensive — if a future
   refactor changes the container id, the class still anchors the styles.

   Visual vocabulary (translated from /tmp/insurance-platform-zip/admin.jsx):
     * Page header: uppercase eyebrow + Space Grotesk title + descriptive sub
     * Sub-tab strip: pill chips, 999 radius, violet for active
     * KPI cards: 14px radius, 1px border, hero number in Space Grotesk
     * Tables: uppercase letter-spaced header, mono for IDs/dates, alt rows
     * Status pills: 999 radius, semantic colour, optional leading dot
     * Buttons: filled-violet primary, outline secondary, ghost tertiary
     * Form inputs: 8px radius, 2px violet focus ring
     * Cards / panels: white, 14px radius, soft border + subtle hover lift
     * Toggles: switch-style, 999 radius, violet on-state

   Tokens (extends `:root` in dashboard.css):
     --silver-strong, --mist-strong already exist for AA contrast.
     We only add semantic and editorial extras as scoped local props.

   ============================================================================ */


/* ── Scope-local tokens (kept inside the admin scope, no global pollution) ── */

#tab-admin .pa-admin-refined {
  /* Local violet shades */
  --pa-violet: var(--violet, #6C40EC);
  --pa-violet-light: var(--violet-light, #8B5CF6);
  --pa-violet-dark: var(--violet-dark, #4F2DB8);
  --pa-violet-tint-08: rgba(108, 64, 236, 0.08);
  --pa-violet-tint-12: rgba(108, 64, 236, 0.12);
  --pa-violet-tint-16: rgba(108, 64, 236, 0.16);
  --pa-violet-tint-20: rgba(108, 64, 236, 0.20);

  /* Semantic */
  --pa-success: var(--color-success, #22C55E);
  --pa-warning: var(--color-warning, #F59E0B);
  --pa-error: var(--color-error, #EF4444);
  --pa-info: var(--color-info, #3B82F6);

  /* Editorial palette */
  --pa-obsidian: var(--obsidian, #1A1A1A);
  --pa-alabaster: var(--alabaster, #F2F0EB);
  --pa-mist: var(--mist-strong, #5C5470);
  --pa-silver: var(--silver-strong, #7A7A7A);
  --pa-panel-inset: #FAF8F2;
  --pa-row-alt: rgba(20, 21, 37, 0.025);
  --pa-border: rgba(20, 21, 37, 0.08);
  --pa-border-strong: rgba(20, 21, 37, 0.14);

  /* Editorial radii */
  --pa-radius-pill: 999px;
  --pa-radius-button: 8px;
  --pa-radius-card: 14px;
  --pa-radius-panel: 18px;
  --pa-radius-chip: 4px;

  /* Typography references */
  --pa-font-ui: var(--font-ui, 'Inter', sans-serif);
  --pa-font-heading: var(--font-heading, 'Space Grotesk', sans-serif);
  --pa-font-mono: var(--font-mono, 'JetBrains Mono', monospace);

  font-family: var(--pa-font-ui);
  color: var(--pa-obsidian);
}


/* ============================================================================
   1. PAGE HEADER — eyebrow + Space Grotesk title + sub paragraph
   ============================================================================ */

/* Override the existing h2 + p that admin_module.js renders */
#tab-admin .pa-admin-refined > .admin-module-shell > h2,
#tab-admin .pa-admin-refined h2[data-pa-refined="title"] {
  font-family: var(--pa-font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: 1.1;
  color: var(--pa-obsidian);
  margin: 0 0 8px 0 !important;
}

/* The eyebrow is injected by JS as the new ::before but we keep it as a
   real element so screen readers see it in order — see admin_module.js. */
#tab-admin .pa-admin-refined [data-pa-refined="eyebrow"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pa-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pa-violet);
  margin-bottom: 12px;
}

#tab-admin .pa-admin-refined [data-pa-refined="eyebrow"]::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--pa-violet);
}

#tab-admin .pa-admin-refined p[data-pa-refined="description"],
#tab-admin .pa-admin-refined > .admin-module-shell > p {
  font-family: var(--pa-font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pa-mist) !important;
  max-width: 720px;
  margin: 0 0 28px 0 !important;
}


/* ============================================================================
   2. SUB-TAB STRIP — pill chips
   ============================================================================ */

#tab-admin .pa-admin-refined .admin-sub-nav {
  display: flex !important;
  gap: 8px !important;
  border-bottom: none !important;
  margin-bottom: 28px !important;
  padding-bottom: 0 !important;
  flex-wrap: wrap;
}

#tab-admin .pa-admin-refined .admin-sub-nav-item {
  padding: 7px 14px !important;
  border-radius: var(--pa-radius-pill) !important;
  border: 1px solid var(--pa-border-strong) !important;
  background: transparent !important;
  color: var(--pa-obsidian) !important;
  font-family: var(--pa-font-ui);
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--pa-border-strong) !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#tab-admin .pa-admin-refined .admin-sub-nav-item:hover {
  background: var(--pa-violet-tint-08) !important;
  border-color: var(--pa-violet) !important;
  color: var(--pa-violet) !important;
}

#tab-admin .pa-admin-refined .admin-sub-nav-item:focus-visible {
  outline: 2px solid var(--pa-violet);
  outline-offset: 2px;
}

#tab-admin .pa-admin-refined .admin-sub-nav-item.active {
  background: var(--pa-violet) !important;
  border-color: var(--pa-violet) !important;
  border-bottom-color: var(--pa-violet) !important;
  color: white !important;
  font-weight: 600 !important;
}


/* ============================================================================
   3. KPI CARDS — Tenant Users KPI strip
   ============================================================================ */

#tab-admin .pa-admin-refined .admin-users-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

#tab-admin .pa-admin-refined .admin-users-kpi-strip > div {
  background: white !important;
  border-radius: var(--pa-radius-card) !important;
  border: 1px solid var(--pa-border) !important;
  padding: 16px 18px !important;
  text-align: left !important;
  box-shadow: 0 1px 2px rgba(20, 21, 37, 0.03);
  transition: border-color 0.15s, box-shadow 0.15s;
}

#tab-admin .pa-admin-refined .admin-users-kpi-strip > div:hover {
  border-color: var(--pa-border-strong) !important;
  box-shadow: 0 2px 8px rgba(20, 21, 37, 0.05);
}

/* The hero number — first child div in each KPI tile */
#tab-admin .pa-admin-refined .admin-users-kpi-strip > div > div:first-child {
  font-family: var(--pa-font-heading) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  line-height: 1.1 !important;
  margin-bottom: 6px;
}

/* The label — second child div */
#tab-admin .pa-admin-refined .admin-users-kpi-strip > div > div:nth-child(2) {
  font-family: var(--pa-font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--pa-mist) !important;
  margin-top: 0 !important;
}


/* ============================================================================
   4. TABLES — Users / Roles / Product config
   ============================================================================ */

#tab-admin .pa-admin-refined table.admin-users-table,
#tab-admin .pa-admin-refined table.data-table,
#tab-admin .pa-admin-refined .admin-product-required-docs-card table {
  width: 100%;
  background: white !important;
  border-radius: var(--pa-radius-card) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  font-size: 12.5px !important;
  border: 1px solid var(--pa-border);
}

#tab-admin .pa-admin-refined table.admin-users-table thead,
#tab-admin .pa-admin-refined table.data-table thead,
#tab-admin .pa-admin-refined .admin-product-required-docs-card table thead {
  background: var(--pa-panel-inset) !important;
}

#tab-admin .pa-admin-refined table.admin-users-table thead th,
#tab-admin .pa-admin-refined table.data-table thead th,
#tab-admin .pa-admin-refined .admin-product-required-docs-card table thead th {
  padding: 12px 16px !important;
  font-family: var(--pa-font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--pa-mist) !important;
  background: var(--pa-panel-inset) !important;
  border-bottom: 1px solid var(--pa-border) !important;
  text-align: left;
}

#tab-admin .pa-admin-refined table.admin-users-table tbody td,
#tab-admin .pa-admin-refined table.data-table tbody td,
#tab-admin .pa-admin-refined .admin-product-required-docs-card table tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--pa-border) !important;
  color: var(--pa-obsidian) !important;
  font-size: 12.5px;
  vertical-align: middle;
}

#tab-admin .pa-admin-refined table.admin-users-table tbody tr:last-child td,
#tab-admin .pa-admin-refined table.data-table tbody tr:last-child td,
#tab-admin .pa-admin-refined .admin-product-required-docs-card table tbody tr:last-child td {
  border-bottom: 0 !important;
}

#tab-admin .pa-admin-refined table.admin-users-table tbody tr:nth-child(even),
#tab-admin .pa-admin-refined table.data-table tbody tr:nth-child(even),
#tab-admin .pa-admin-refined .admin-product-required-docs-card table tbody tr:nth-child(even) {
  background: var(--pa-row-alt) !important;
}

#tab-admin .pa-admin-refined table.admin-users-table tbody tr:hover td,
#tab-admin .pa-admin-refined table.data-table tbody tr:hover td,
#tab-admin .pa-admin-refined .admin-product-required-docs-card table tbody tr:hover td {
  background: var(--pa-violet-tint-08) !important;
}

/* Email / id / last-login cells should be mono */
#tab-admin .pa-admin-refined table.admin-users-table tbody td:nth-child(2),
#tab-admin .pa-admin-refined table.admin-users-table tbody td:nth-child(5),
#tab-admin .pa-admin-refined table.admin-users-table tbody td:nth-child(6) {
  font-family: var(--pa-font-mono) !important;
  font-size: 11.5px !important;
  color: var(--pa-mist) !important;
}

/* Document type column in the product config docs table — mono */
#tab-admin .pa-admin-refined .admin-product-required-docs-card table tbody td:first-child {
  font-family: var(--pa-font-mono) !important;
  font-size: 11.5px !important;
}


/* ============================================================================
   5. STATUS PILLS / BADGES — semantic mappings
   ============================================================================ */

/* Generic status cell — last column in users table; wrap text contents
   visually as pills using a data-attr override pattern is intrusive, so
   we rely on the simple pattern: the user row's last cell gets pill
   treatment when its text matches a known status word. The cells are
   rendered as plain text today, so we apply pill chrome to the cell
   itself. Tests confirm only known statuses ('active', 'inactive',
   'pending-invite') flow into this column. */

#tab-admin .pa-admin-refined table.admin-users-table tbody td:last-child {
  text-align: right;
  font-family: var(--pa-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Inline status pill — the existing role and product-config code emit
   spans with class data-hooks; map them to pill chrome. */
#tab-admin .pa-admin-refined .admin-product-doc-condition-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: var(--pa-radius-chip) !important;
  background: rgba(245, 158, 11, 0.14) !important;
  color: #b45309 !important;
  font-family: var(--pa-font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}


/* ============================================================================
   6. BUTTONS — primary + secondary + ghost
   ============================================================================ */

/* Invite-user dropdown (the only filled-violet button in admin) */
#tab-admin .pa-admin-refined select[data-action="invite-user"] {
  padding: 9px 16px !important;
  border-radius: var(--pa-radius-pill) !important;
  background: linear-gradient(135deg, var(--pa-violet-light), var(--pa-violet)) !important;
  color: white !important;
  border: 1px solid var(--pa-violet) !important;
  font-family: var(--pa-font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(108, 64, 236, 0.28);
  transition: box-shadow 0.15s, transform 0.1s;
}

#tab-admin .pa-admin-refined select[data-action="invite-user"]:hover {
  box-shadow: 0 6px 18px rgba(108, 64, 236, 0.36) !important;
  transform: translateY(-1px);
}

#tab-admin .pa-admin-refined select[data-action="invite-user"]:focus-visible {
  outline: 2px solid var(--pa-violet);
  outline-offset: 2px;
}

/* Field-redaction "Open matrix" CTA */
#tab-admin .pa-admin-refined button[data-action="open-redaction-matrix"] {
  padding: 9px 18px !important;
  border-radius: var(--pa-radius-pill) !important;
  background: linear-gradient(135deg, var(--pa-violet-light), var(--pa-violet)) !important;
  color: white !important;
  border: 1px solid var(--pa-violet) !important;
  font-family: var(--pa-font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(108, 64, 236, 0.28);
  transition: box-shadow 0.15s, transform 0.1s;
}

#tab-admin .pa-admin-refined button[data-action="open-redaction-matrix"]:hover {
  box-shadow: 0 6px 18px rgba(108, 64, 236, 0.36) !important;
  transform: translateY(-1px);
}

#tab-admin .pa-admin-refined button[data-action="open-redaction-matrix"]:focus-visible {
  outline: 2px solid var(--pa-violet);
  outline-offset: 2px;
}

/* Pagination buttons — secondary outline treatment */
#tab-admin .pa-admin-refined .admin-users-filter-bar + table + div button,
#tab-admin .pa-admin-refined > .admin-module-shell #admin-sub-panel > div:last-child button {
  padding: 7px 14px !important;
  border-radius: var(--pa-radius-pill) !important;
  border: 1px solid var(--pa-border-strong) !important;
  background: white !important;
  color: var(--pa-obsidian) !important;
  font-family: var(--pa-font-ui);
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#tab-admin .pa-admin-refined > .admin-module-shell #admin-sub-panel > div:last-child button:not(:disabled):hover {
  background: var(--pa-violet-tint-08) !important;
  border-color: var(--pa-violet) !important;
  color: var(--pa-violet) !important;
}

#tab-admin .pa-admin-refined > .admin-module-shell #admin-sub-panel > div:last-child button:disabled {
  background: var(--pa-panel-inset) !important;
  color: var(--pa-mist) !important;
  cursor: not-allowed;
  opacity: 0.6;
}


/* ============================================================================
   7. FORM INPUTS — search, select, radio
   ============================================================================ */

#tab-admin .pa-admin-refined input[type="search"],
#tab-admin .pa-admin-refined input[type="text"],
#tab-admin .pa-admin-refined input[type="email"],
#tab-admin .pa-admin-refined .admin-users-filter-bar input {
  padding: 10px 14px !important;
  border: 1px solid var(--pa-border-strong) !important;
  border-radius: var(--pa-radius-button) !important;
  background: white !important;
  font-family: var(--pa-font-ui) !important;
  font-size: 13px !important;
  color: var(--pa-obsidian) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#tab-admin .pa-admin-refined input[type="search"]::placeholder,
#tab-admin .pa-admin-refined input[type="text"]::placeholder,
#tab-admin .pa-admin-refined input[type="email"]::placeholder,
#tab-admin .pa-admin-refined .admin-users-filter-bar input::placeholder {
  color: var(--pa-mist) !important;
}

#tab-admin .pa-admin-refined input[type="search"]:focus,
#tab-admin .pa-admin-refined input[type="text"]:focus,
#tab-admin .pa-admin-refined input[type="email"]:focus,
#tab-admin .pa-admin-refined .admin-users-filter-bar input:focus {
  outline: none !important;
  border-color: var(--pa-violet) !important;
  box-shadow: 0 0 0 3px var(--pa-violet-tint-16) !important;
}

#tab-admin .pa-admin-refined select:not([data-action="invite-user"]),
#tab-admin .pa-admin-refined .admin-users-filter-bar select:not([data-action="invite-user"]),
#tab-admin .pa-admin-refined #admin-product-select {
  padding: 10px 14px !important;
  border: 1px solid var(--pa-border-strong) !important;
  border-radius: var(--pa-radius-button) !important;
  background: white !important;
  font-family: var(--pa-font-ui) !important;
  font-size: 13px !important;
  color: var(--pa-obsidian) !important;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#tab-admin .pa-admin-refined select:not([data-action="invite-user"]):focus,
#tab-admin .pa-admin-refined #admin-product-select:focus {
  outline: none !important;
  border-color: var(--pa-violet) !important;
  box-shadow: 0 0 0 3px var(--pa-violet-tint-16) !important;
}


/* ============================================================================
   8. CARDS / PANELS — tenant feature sections, role cards, product cards
   ============================================================================ */

/* Tenant features section card */
#tab-admin .pa-admin-refined .admin-tenant-features-section {
  background: white !important;
  border-radius: var(--pa-radius-card) !important;
  border: 1px solid var(--pa-border) !important;
  overflow: hidden;
  margin-bottom: 18px !important;
  box-shadow: 0 1px 2px rgba(20, 21, 37, 0.03);
}

#tab-admin .pa-admin-refined .admin-tenant-features-section > h3 {
  margin: 0 !important;
  padding: 16px 22px !important;
  font-family: var(--pa-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pa-violet) !important;
  background: var(--pa-panel-inset) !important;
  border-bottom: 1px solid var(--pa-border) !important;
}

/* Feature toggle row — refined spacing + typography */
#tab-admin .pa-admin-refined .admin-feature-toggle-row {
  padding: 16px 22px !important;
  border-bottom: 1px solid var(--pa-border) !important;
  background: white !important;
  transition: background 0.15s;
}

#tab-admin .pa-admin-refined .admin-feature-toggle-row:last-child {
  border-bottom: 0 !important;
}

#tab-admin .pa-admin-refined .admin-feature-toggle-row:hover {
  background: var(--pa-violet-tint-08) !important;
}

#tab-admin .pa-admin-refined .admin-feature-toggle-row > div > div:first-child {
  font-family: var(--pa-font-ui) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--pa-obsidian) !important;
}

#tab-admin .pa-admin-refined .admin-feature-toggle-row > div > div:last-child {
  font-family: var(--pa-font-ui) !important;
  font-size: 12px !important;
  color: var(--pa-mist) !important;
  margin-top: 4px !important;
  line-height: 1.45;
}

/* Role cards — refined chrome */
#tab-admin .pa-admin-refined .admin-role-card {
  background: white !important;
  border-radius: var(--pa-radius-card) !important;
  border: 1px solid var(--pa-border) !important;
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 2px rgba(20, 21, 37, 0.03);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

#tab-admin .pa-admin-refined .admin-role-card:hover {
  border-color: var(--pa-border-strong) !important;
  box-shadow: 0 4px 12px rgba(20, 21, 37, 0.06);
  transform: translateY(-1px);
}

/* Role-code label gets mono + obsidian */
#tab-admin .pa-admin-refined .admin-role-card > div:first-child > span:first-child {
  font-family: var(--pa-font-mono) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--pa-obsidian) !important;
  letter-spacing: -0.2px;
}

/* User-count chip — pill, mono, alabaster */
#tab-admin .pa-admin-refined .admin-role-card > div:first-child > span:last-child {
  background: var(--pa-panel-inset) !important;
  color: var(--pa-mist) !important;
  font-family: var(--pa-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: var(--pa-radius-pill) !important;
  letter-spacing: 0.3px;
}

/* Permission summary line */
#tab-admin .pa-admin-refined .admin-role-card > div:nth-child(2) {
  font-family: var(--pa-font-ui) !important;
  font-size: 12px !important;
  color: var(--pa-mist) !important;
  line-height: 1.5 !important;
}

/* Parlour-bind line for external_partner cards */
#tab-admin .pa-admin-refined .admin-role-card > div:last-child {
  font-family: var(--pa-font-ui) !important;
  font-size: 11px !important;
  color: var(--pa-violet) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Roles pane subtitle / title */
#tab-admin .pa-admin-refined .admin-roles-pane > h3 {
  font-family: var(--pa-font-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--pa-obsidian) !important;
  margin: 0 0 6px 0 !important;
}

#tab-admin .pa-admin-refined .admin-roles-pane > p {
  font-family: var(--pa-font-ui) !important;
  font-size: 12.5px !important;
  color: var(--pa-mist) !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.5;
}

/* Product config gating card */
#tab-admin .pa-admin-refined .admin-product-gating-card {
  background: white !important;
  border-radius: var(--pa-radius-card) !important;
  border: 1px solid var(--pa-border) !important;
  padding: 20px 22px !important;
  margin-bottom: 22px !important;
  box-shadow: 0 1px 2px rgba(20, 21, 37, 0.03);
}

#tab-admin .pa-admin-refined .admin-product-gating-card > div:first-child {
  font-family: var(--pa-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pa-violet) !important;
  margin-bottom: 6px !important;
}

#tab-admin .pa-admin-refined .admin-product-gating-card > div:nth-child(2) {
  font-family: var(--pa-font-ui) !important;
  font-size: 12.5px !important;
  color: var(--pa-mist) !important;
  margin-bottom: 16px !important;
  line-height: 1.5;
}

/* Radio cards for STRICT / FLEXIBLE */
#tab-admin .pa-admin-refined .admin-product-policy-radio-card {
  border: 1px solid var(--pa-border-strong) !important;
  background: white !important;
  border-radius: var(--pa-radius-card) !important;
  padding: 14px 16px !important;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

#tab-admin .pa-admin-refined .admin-product-policy-radio-card:hover {
  border-color: var(--pa-violet) !important;
  background: var(--pa-violet-tint-08) !important;
}

#tab-admin .pa-admin-refined .admin-product-policy-radio-card.selected {
  border: 2px solid var(--pa-violet) !important;
  background: var(--pa-violet-tint-08) !important;
  box-shadow: 0 0 0 3px var(--pa-violet-tint-12) !important;
}

#tab-admin .pa-admin-refined .admin-product-policy-radio-card > span {
  font-family: var(--pa-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--pa-obsidian) !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

#tab-admin .pa-admin-refined .admin-product-policy-radio-card > div {
  font-family: var(--pa-font-ui) !important;
  font-size: 12px !important;
  color: var(--pa-mist) !important;
  margin-top: 6px !important;
  line-height: 1.5;
}

/* Required-docs card header (h3) */
#tab-admin .pa-admin-refined .admin-product-required-docs-card {
  background: white !important;
  border-radius: var(--pa-radius-card) !important;
  border: 1px solid var(--pa-border) !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 21, 37, 0.03);
}

#tab-admin .pa-admin-refined .admin-product-required-docs-card > h3 {
  margin: 0 !important;
  padding: 16px 22px !important;
  font-family: var(--pa-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pa-violet) !important;
  background: var(--pa-panel-inset) !important;
  border-bottom: 1px solid var(--pa-border) !important;
}


/* ============================================================================
   9. TOGGLES — switch-style on the tenant features checkboxes
   ============================================================================ */

#tab-admin .pa-admin-refined input[type="checkbox"][data-flag-checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px !important;
  height: 22px !important;
  border-radius: var(--pa-radius-pill) !important;
  background: var(--pa-panel-inset) !important;
  border: 1px solid var(--pa-border-strong) !important;
  position: relative;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

#tab-admin .pa-admin-refined input[type="checkbox"][data-flag-checkbox]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--pa-radius-pill);
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.15s;
}

#tab-admin .pa-admin-refined input[type="checkbox"][data-flag-checkbox]:checked {
  background: var(--pa-violet) !important;
  border-color: var(--pa-violet) !important;
}

#tab-admin .pa-admin-refined input[type="checkbox"][data-flag-checkbox]:checked::before {
  left: 20px;
}

#tab-admin .pa-admin-refined input[type="checkbox"][data-flag-checkbox]:focus-visible {
  outline: 2px solid var(--pa-violet);
  outline-offset: 2px;
}


/* ============================================================================
   10. ALERT / BANNER BLOCKS (warning + info notes)
   ============================================================================ */

/* Tenant-features warning banner */
#tab-admin .pa-admin-refined .admin-tenant-warning-banner {
  border-radius: var(--pa-radius-card) !important;
  padding: 14px 18px !important;
  margin-bottom: 22px !important;
  font-family: var(--pa-font-ui) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  background: rgba(245, 158, 11, 0.10) !important;
  border: 1px solid rgba(245, 158, 11, 0.30) !important;
  color: #92400e !important;
}

#tab-admin .pa-admin-refined .admin-tenant-warning-banner strong {
  font-weight: 700;
}

/* Product-config safety note */
#tab-admin .pa-admin-refined .admin-product-safety-note {
  border-radius: var(--pa-radius-card) !important;
  padding: 14px 18px !important;
  margin-bottom: 22px !important;
  font-family: var(--pa-font-ui) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  background: var(--pa-violet-tint-08) !important;
  border: 1px solid var(--pa-violet-tint-20) !important;
  color: var(--pa-obsidian) !important;
}

#tab-admin .pa-admin-refined .admin-product-safety-note strong {
  font-family: var(--pa-font-heading);
  color: var(--pa-violet);
  font-weight: 700;
}


/* ============================================================================
   11. FILTER BAR + LAYOUT TWEAKS
   ============================================================================ */

#tab-admin .pa-admin-refined .admin-users-filter-bar {
  gap: 10px !important;
  margin-bottom: 18px !important;
  padding: 14px 16px !important;
  background: white !important;
  border-radius: var(--pa-radius-card) !important;
  border: 1px solid var(--pa-border) !important;
  align-items: center;
}

/* Product picker label + spacing */
#tab-admin .pa-admin-refined > .admin-module-shell #admin-sub-panel label[for="admin-product-select"] {
  font-family: var(--pa-font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--pa-mist) !important;
}

/* Roles panes — gap + alignment */
#tab-admin .pa-admin-refined .admin-roles-panes {
  gap: 24px !important;
  margin-bottom: 24px !important;
}

/* Field-redaction CTA bottom block */
#tab-admin .pa-admin-refined > .admin-module-shell #admin-sub-panel > div:last-child:not(.admin-roles-panes) {
  background: white !important;
  border-radius: var(--pa-radius-card) !important;
  border: 1px solid var(--pa-border) !important;
  padding: 18px 22px !important;
  margin-top: 16px !important;
  box-shadow: 0 1px 2px rgba(20, 21, 37, 0.03);
}


/* ============================================================================
   12. MODAL — field redaction matrix
   ============================================================================ */

#tab-admin .pa-admin-refined ~ #admin-redaction-modal-overlay,
body > #admin-redaction-modal-overlay {
  /* Modal lives in document body so the scope token won't match;
     we use the id selector which is unique to the admin redaction modal. */
}

#admin-redaction-modal-overlay > div {
  border-radius: var(--pa-radius-panel) !important;
  font-family: var(--pa-font-ui);
  padding: 28px !important;
  box-shadow: 0 24px 64px rgba(20, 21, 37, 0.32);
}

#admin-redaction-modal-overlay h3 {
  font-family: var(--pa-font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--obsidian, #1A1A1A);
  letter-spacing: -0.3px;
}

#admin-redaction-modal-overlay p {
  font-size: 13px !important;
  color: var(--mist-strong, #5C5470) !important;
  line-height: 1.5;
}


/* ============================================================================
   13. LOADING STATE
   ============================================================================ */

#tab-admin .pa-admin-refined .admin-tenant-features-loading,
#tab-admin .pa-admin-refined > .admin-module-shell #admin-sub-panel > div:only-child[style*="Loading"] {
  font-family: var(--pa-font-ui);
  font-size: 13px;
  color: var(--pa-mist);
  padding: 24px 0;
  letter-spacing: 0.2px;
}


/* ============================================================================
   14. KPI CARD COLOUR ACCENTS — preserved from inline `color` style
   ----------------------------------------------------------------------------
   The KPI tiles in admin_users.js render the hero number with the colour
   coming from KPI_CARDS[i].color via inline style. Our override sets
   font-family but leaves `color` to the inline value, so the semantic
   palette (info=blue, success=green, violet=violet, warning=amber, etc.)
   continues to work without any JS change.
   ============================================================================ */


/* ============================================================================
   15. REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  #tab-admin .pa-admin-refined *,
  #tab-admin .pa-admin-refined *::before,
  #tab-admin .pa-admin-refined *::after {
    transition: none !important;
    animation: none !important;
  }
}