/* ============================================================================
 * Midnight Glass — Admin console theme
 * ----------------------------------------------------------------------------
 * Cách tiếp cận an toàn:
 *   1) Override CSS variables công khai của PatternFly v5 (PF5 components đọc
 *      các biến này khi render — không cần đụng DOM/React).
 *   2) Bổ sung selector cho component-level (masthead, sidebar, card, table,
 *      modal, button, input...) chỉ thay visual, không thay behavior.
 *   3) Background "ambience" (glow + grid) đặt qua body::before/::after,
 *      z-index:0 — components ở trên (z-index:1).
 *
 * Rollback: xoá hoặc làm rỗng file này → quay về theme mặc định.
 * ============================================================================ */

:root,
html.pf-v5-theme-dark {
  /* ===== Design tokens ===== */
  --theme-bg: #07090f;
  --theme-bg-2: #0c1019;
  --theme-surface: rgba(255, 255, 255, 0.04);
  --theme-surface-2: rgba(255, 255, 255, 0.06);
  --theme-surface-3: rgba(255, 255, 255, 0.10);
  --theme-border: rgba(255, 255, 255, 0.08);
  --theme-border-strong: rgba(255, 255, 255, 0.16);
  --theme-text: #f1f5f9;
  --theme-text-muted: rgba(241, 245, 249, 0.55);
  --theme-text-soft: rgba(241, 245, 249, 0.75);
  --theme-primary: #1d9e75;
  --theme-primary-2: #14b8a6;
  --theme-primary-soft: rgba(29, 158, 117, 0.16);
  --theme-primary-glow: rgba(29, 158, 117, 0.45);
  --theme-accent: #6366f1;
  --theme-success: #34d399;
  --theme-warning: #fbbf24;
  --theme-danger: #f87171;
  --theme-radius: 10px;
  --theme-radius-lg: 14px;
  --theme-font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Inter",
    "Segoe UI", Roboto, sans-serif;
}

/* ============================================================================
 * Layer 1 — Override PF5 v5 global tokens
 * Các component PF5 đọc các biến này → đổi đồng loạt mà không phải selector từng cái.
 * ============================================================================ */
html.pf-v5-theme-dark,
html.pf-v5-theme-dark body {
  /* Background scale */
  --pf-v5-global--BackgroundColor--100: var(--theme-bg-2);
  --pf-v5-global--BackgroundColor--200: var(--theme-bg);
  --pf-v5-global--BackgroundColor--300: rgba(255, 255, 255, 0.04);
  --pf-v5-global--BackgroundColor--400: rgba(255, 255, 255, 0.06);
  --pf-v5-global--BackgroundColor--light-100: var(--theme-bg-2);
  --pf-v5-global--BackgroundColor--dark-100: var(--theme-bg);
  --pf-v5-global--BackgroundColor--dark-200: var(--theme-bg-2);
  --pf-v5-global--BackgroundColor--dark-300: rgba(255, 255, 255, 0.04);
  --pf-v5-global--BackgroundColor--dark-400: rgba(255, 255, 255, 0.06);

  /* Foreground */
  --pf-v5-global--Color--100: var(--theme-text);
  --pf-v5-global--Color--200: var(--theme-text-muted);
  --pf-v5-global--Color--light-100: var(--theme-text);
  --pf-v5-global--Color--light-200: var(--theme-text-muted);
  --pf-v5-global--Color--dark-100: var(--theme-text);
  --pf-v5-global--Color--dark-200: var(--theme-text-muted);

  /* Borders */
  --pf-v5-global--BorderColor--100: var(--theme-border);
  --pf-v5-global--BorderColor--200: var(--theme-border-strong);
  --pf-v5-global--BorderColor--300: var(--theme-border);
  --pf-v5-global--BorderColor--light-100: var(--theme-border);
  --pf-v5-global--BorderColor--dark-100: var(--theme-border);

  /* Primary brand */
  --pf-v5-global--primary-color--100: var(--theme-primary);
  --pf-v5-global--primary-color--200: var(--theme-primary-2);
  --pf-v5-global--primary-color--light-100: var(--theme-primary);
  --pf-v5-global--primary-color--dark-100: var(--theme-primary);
  --pf-v5-global--active-color--100: var(--theme-primary);
  --pf-v5-global--active-color--200: var(--theme-primary-2);

  /* Link */
  --pf-v5-global--link--Color: var(--theme-primary-2);
  --pf-v5-global--link--Color--hover: var(--theme-primary);
  --pf-v5-global--link--Color--light: var(--theme-primary-2);
  --pf-v5-global--link--TextDecoration--hover: underline;

  /* Status */
  --pf-v5-global--success-color--100: var(--theme-success);
  --pf-v5-global--success-color--200: var(--theme-success);
  --pf-v5-global--warning-color--100: var(--theme-warning);
  --pf-v5-global--warning-color--200: var(--theme-warning);
  --pf-v5-global--danger-color--100: var(--theme-danger);
  --pf-v5-global--danger-color--200: var(--theme-danger);

  /* Typography */
  --pf-v5-global--FontFamily--text: var(--theme-font);
  --pf-v5-global--FontFamily--heading: var(--theme-font);
  --pf-v5-global--FontFamily--text--vf-sans-serif: var(--theme-font);
  --pf-v5-global--FontFamily--heading--vf-sans-serif: var(--theme-font);

  /* Geometry */
  --pf-v5-global--BorderRadius--sm: 6px;
  --pf-v5-global--BorderRadius--lg: 12px;

  /* Shadows */
  --pf-v5-global--BoxShadow--sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --pf-v5-global--BoxShadow--md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --pf-v5-global--BoxShadow--lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --pf-v5-global--BoxShadow--xl: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
 * Layer 2 — Background ambience (orbs + grid)
 * Không ảnh hưởng pointer / z-order của UI vì pointer-events:none và z-index:0.
 * ============================================================================ */
html.pf-v5-theme-dark,
html.pf-v5-theme-dark body {
  background: var(--theme-bg) !important;
  color: var(--theme-text);
  font-family: var(--theme-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.pf-v5-theme-dark body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(700px circle at 8% 15%, rgba(29, 158, 117, 0.16), transparent 50%),
    radial-gradient(620px circle at 92% 80%, rgba(99, 102, 241, 0.14), transparent 50%),
    radial-gradient(480px circle at 50% 50%, rgba(212, 83, 126, 0.06), transparent 60%);
}
html.pf-v5-theme-dark body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Đặt app container trên ambience */
html.pf-v5-theme-dark #app,
html.pf-v5-theme-dark .pf-v5-c-page {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* ============================================================================
 * Layer 3 — Component-level polish (glassmorphism + brand accents)
 * ============================================================================ */

/* ===== Masthead (top bar) ===== */
html.pf-v5-theme-dark .pf-v5-c-masthead {
  background: rgba(7, 9, 15, 0.6) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--theme-border);
  box-shadow: none !important;
}
html.pf-v5-theme-dark .pf-v5-c-masthead__brand img,
html.pf-v5-theme-dark .pf-v5-c-brand {
  filter: drop-shadow(0 0 16px var(--theme-primary-glow));
}

/* ===== Sidebar / Nav ===== */
html.pf-v5-theme-dark .pf-v5-c-page__sidebar,
html.pf-v5-theme-dark .pf-v5-c-page__sidebar-body,
html.pf-v5-theme-dark .pf-v5-c-nav {
  background: rgba(12, 16, 25, 0.42) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--theme-border);
}
html.pf-v5-theme-dark .pf-v5-c-nav__link {
  color: var(--theme-text-muted) !important;
  border-radius: 10px !important;
  font-weight: 500;
  margin: 2px 8px;
  padding: 9px 14px !important;
  transition: background 0.15s, color 0.15s;
}
html.pf-v5-theme-dark .pf-v5-c-nav__link:hover {
  background: var(--theme-surface-2) !important;
  color: var(--theme-text) !important;
}
html.pf-v5-theme-dark .pf-v5-c-nav__link.pf-m-current,
html.pf-v5-theme-dark .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  background: linear-gradient(135deg, var(--theme-primary-soft), rgba(99, 102, 241, 0.10)) !important;
  color: var(--theme-text) !important;
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--theme-primary), 0 0 16px rgba(29, 158, 117, 0.12);
}
html.pf-v5-theme-dark .pf-v5-c-nav__section-title,
html.pf-v5-theme-dark .pf-v5-c-nav__subnav .pf-v5-c-nav__section-title {
  color: var(--theme-text-muted) !important;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ===== Main content / page sections ===== */
html.pf-v5-theme-dark .pf-v5-c-page__main,
html.pf-v5-theme-dark .pf-v5-c-page__main-section {
  background: transparent !important;
}

/* ===== Cards / panels ===== */
html.pf-v5-theme-dark .pf-v5-c-card,
html.pf-v5-theme-dark .pf-v5-c-panel {
  background: var(--theme-surface) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius-lg) !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
html.pf-v5-theme-dark .pf-v5-c-card:hover {
  border-color: var(--theme-border-strong) !important;
}
html.pf-v5-theme-dark .pf-v5-c-card__title,
html.pf-v5-theme-dark .pf-v5-c-card__header {
  border-bottom-color: var(--theme-border);
}

/* ===== Tables ===== */
html.pf-v5-theme-dark .pf-v5-c-table {
  background: transparent !important;
  color: var(--theme-text);
}
html.pf-v5-theme-dark .pf-v5-c-table thead {
  background: rgba(255, 255, 255, 0.03) !important;
}
html.pf-v5-theme-dark .pf-v5-c-table thead th {
  color: var(--theme-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-bottom: 1px solid var(--theme-border) !important;
}
html.pf-v5-theme-dark .pf-v5-c-table tbody tr {
  background: transparent !important;
  transition: background 0.15s;
}
html.pf-v5-theme-dark .pf-v5-c-table tbody tr:hover {
  background: var(--theme-surface-2) !important;
}
html.pf-v5-theme-dark .pf-v5-c-table tbody td,
html.pf-v5-theme-dark .pf-v5-c-table tbody th {
  border-bottom: 1px solid var(--theme-border) !important;
  color: var(--theme-text);
}

/* ===== Buttons ===== */
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-2)) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 24px var(--theme-primary-glow);
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 32px var(--theme-primary-glow);
  filter: brightness(1.05);
}
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary:active {
  transform: translateY(0);
}
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border-strong) !important;
  backdrop-filter: blur(8px);
}
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary:hover {
  background: var(--theme-surface-2) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-tertiary {
  color: var(--theme-text-soft) !important;
  border-color: var(--theme-border) !important;
  background: transparent !important;
}
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-link {
  color: var(--theme-primary-2) !important;
}
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-link:hover {
  color: var(--theme-primary) !important;
}
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(239, 68, 68, 0.35);
}

/* ===== Form / inputs ===== */
html.pf-v5-theme-dark .pf-v5-c-form-control,
html.pf-v5-theme-dark .pf-v5-c-form-control input,
html.pf-v5-theme-dark .pf-v5-c-form-control textarea,
html.pf-v5-theme-dark .pf-v5-c-form-control select,
html.pf-v5-theme-dark .pf-v5-c-text-input-group,
html.pf-v5-theme-dark .pf-v5-c-text-input-group__text-input {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(8px);
}
html.pf-v5-theme-dark .pf-v5-c-form-control:focus,
html.pf-v5-theme-dark .pf-v5-c-form-control:focus-within {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 4px var(--theme-primary-soft) !important;
  outline: none !important;
}
html.pf-v5-theme-dark .pf-v5-c-form__label {
  color: var(--theme-text) !important;
  font-weight: 600;
}
html.pf-v5-theme-dark .pf-v5-c-form__helper-text {
  color: var(--theme-text-muted) !important;
}

/* ===== Switch / Checkbox / Radio ===== */
html.pf-v5-theme-dark .pf-v5-c-switch__toggle {
  background: var(--theme-surface-3);
}
html.pf-v5-theme-dark .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-2)) !important;
  box-shadow: 0 0 12px var(--theme-primary-glow);
}
html.pf-v5-theme-dark .pf-v5-c-check__input:checked,
html.pf-v5-theme-dark .pf-v5-c-radio__input:checked {
  accent-color: var(--theme-primary);
}

/* ===== Modals ===== */
html.pf-v5-theme-dark .pf-v5-c-modal-box {
  background: rgba(12, 16, 25, 0.85) !important;
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid var(--theme-border-strong) !important;
  border-radius: var(--theme-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  color: var(--theme-text);
}
html.pf-v5-theme-dark .pf-v5-c-modal-box__header,
html.pf-v5-theme-dark .pf-v5-c-modal-box__footer {
  border-color: var(--theme-border);
}
html.pf-v5-theme-dark .pf-v5-c-backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ===== Dropdowns / Menus / Select ===== */
html.pf-v5-theme-dark .pf-v5-c-menu,
html.pf-v5-theme-dark .pf-v5-c-dropdown__menu,
html.pf-v5-theme-dark .pf-v5-c-select__menu,
html.pf-v5-theme-dark .pf-v5-c-context-selector__menu,
html.pf-v5-theme-dark .pf-v5-c-app-launcher__menu {
  background: rgba(12, 16, 25, 0.92) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--theme-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
html.pf-v5-theme-dark .pf-v5-c-menu__item,
html.pf-v5-theme-dark .pf-v5-c-dropdown__menu-item {
  color: var(--theme-text-soft) !important;
}
html.pf-v5-theme-dark .pf-v5-c-menu__item:hover,
html.pf-v5-theme-dark .pf-v5-c-dropdown__menu-item:hover {
  background: var(--theme-surface-2) !important;
  color: var(--theme-text) !important;
}

/* ===== Tabs ===== */
html.pf-v5-theme-dark .pf-v5-c-tabs {
  background: transparent !important;
}
html.pf-v5-theme-dark .pf-v5-c-tabs__link {
  color: var(--theme-text-muted) !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
html.pf-v5-theme-dark .pf-v5-c-tabs__link:hover {
  color: var(--theme-text) !important;
}
html.pf-v5-theme-dark .pf-v5-c-tabs__item.pf-m-current > .pf-v5-c-tabs__link,
html.pf-v5-theme-dark .pf-v5-c-tabs__link.pf-m-current {
  color: var(--theme-text) !important;
  border-bottom-color: var(--theme-primary) !important;
}

/* ===== Labels / chips / badges ===== */
html.pf-v5-theme-dark .pf-v5-c-label,
html.pf-v5-theme-dark .pf-v5-c-chip {
  border-radius: 20px !important;
  font-weight: 600;
  font-size: 11px;
}
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-green {
  background: rgba(52, 211, 153, 0.14) !important;
  color: var(--theme-success) !important;
  border: 1px solid rgba(52, 211, 153, 0.24) !important;
}
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-red {
  background: rgba(248, 113, 113, 0.14) !important;
  color: var(--theme-danger) !important;
  border: 1px solid rgba(248, 113, 113, 0.24) !important;
}
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-blue,
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-purple {
  background: rgba(99, 102, 241, 0.14) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.24) !important;
}
html.pf-v5-theme-dark .pf-v5-c-label.pf-m-orange {
  background: rgba(251, 191, 36, 0.14) !important;
  color: var(--theme-warning) !important;
  border: 1px solid rgba(251, 191, 36, 0.24) !important;
}

/* ===== Alerts ===== */
html.pf-v5-theme-dark .pf-v5-c-alert {
  background: var(--theme-surface) !important;
  backdrop-filter: blur(8px);
  border-radius: var(--theme-radius) !important;
}
html.pf-v5-theme-dark .pf-v5-c-alert.pf-m-success {
  border-left: 3px solid var(--theme-success) !important;
}
html.pf-v5-theme-dark .pf-v5-c-alert.pf-m-danger {
  border-left: 3px solid var(--theme-danger) !important;
}
html.pf-v5-theme-dark .pf-v5-c-alert.pf-m-warning {
  border-left: 3px solid var(--theme-warning) !important;
}
html.pf-v5-theme-dark .pf-v5-c-alert.pf-m-info {
  border-left: 3px solid var(--theme-accent) !important;
}

/* ===== Toolbar / search ===== */
html.pf-v5-theme-dark .pf-v5-c-toolbar {
  background: transparent !important;
}

/* ===== Pagination ===== */
html.pf-v5-theme-dark .pf-v5-c-pagination {
  color: var(--theme-text-muted);
}

/* ===== Page header / titles ===== */
html.pf-v5-theme-dark .pf-v5-c-content h1,
html.pf-v5-theme-dark .pf-v5-c-title.pf-m-headline,
html.pf-v5-theme-dark .pf-v5-c-title.pf-m-2xl,
html.pf-v5-theme-dark .pf-v5-c-title.pf-m-xl {
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--theme-text), rgba(241, 245, 249, 0.7));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Scrollbar (Webkit) ===== */
html.pf-v5-theme-dark *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.pf-v5-theme-dark *::-webkit-scrollbar-track {
  background: transparent;
}
html.pf-v5-theme-dark *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.pf-v5-theme-dark *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ===== Loading state (from index.ftl) ===== */
.keycloak__loading-container {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}
.pf-c-spinner__clipper,
.pf-c-spinner__lead-ball,
.pf-c-spinner__tail-ball,
.pf-v5-c-spinner__clipper,
.pf-v5-c-spinner__lead-ball,
.pf-v5-c-spinner__tail-ball {
  border-color: var(--theme-primary) !important;
}

/* ============================================================================
 * Layer 3b — Mở rộng coverage cho component còn lại
 * ============================================================================ */

/* ===== Toolbar — items, filters, search input ===== */
html.pf-v5-theme-dark .pf-v5-c-toolbar__content,
html.pf-v5-theme-dark .pf-v5-c-toolbar__group,
html.pf-v5-theme-dark .pf-v5-c-toolbar__item {
  color: var(--theme-text-soft);
}
html.pf-v5-theme-dark .pf-v5-c-toolbar__expandable-content {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
}

/* ===== Search input dạng group ===== */
html.pf-v5-theme-dark .pf-v5-c-text-input-group__main {
  background: transparent !important;
}
html.pf-v5-theme-dark .pf-v5-c-text-input-group__group {
  border-radius: 10px !important;
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  backdrop-filter: blur(8px);
}
html.pf-v5-theme-dark .pf-v5-c-text-input-group__icon {
  color: var(--theme-text-muted) !important;
}

/* ===== Breadcrumb ===== */
html.pf-v5-theme-dark .pf-v5-c-breadcrumb {
  color: var(--theme-text-muted);
}
html.pf-v5-theme-dark .pf-v5-c-breadcrumb__link {
  color: var(--theme-text-muted) !important;
}
html.pf-v5-theme-dark .pf-v5-c-breadcrumb__link:hover {
  color: var(--theme-text) !important;
}
html.pf-v5-theme-dark .pf-v5-c-breadcrumb__item-divider {
  color: var(--theme-text-muted);
  opacity: 0.5;
}

/* ===== Pagination — số / nút ===== */
html.pf-v5-theme-dark .pf-v5-c-pagination__nav-control .pf-v5-c-button {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text) !important;
}
html.pf-v5-theme-dark .pf-v5-c-pagination__nav-control .pf-v5-c-button:hover:not(:disabled) {
  background: var(--theme-surface-2) !important;
  border-color: var(--theme-border-strong) !important;
}

/* ===== Tag / Chip ===== */
html.pf-v5-theme-dark .pf-v5-c-chip {
  background: var(--theme-surface-2) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 20px !important;
}
html.pf-v5-theme-dark .pf-v5-c-chip__text {
  color: var(--theme-text);
}
html.pf-v5-theme-dark .pf-v5-c-chip__button {
  color: var(--theme-text-muted) !important;
}

/* ===== Tree view (nhóm, authentication flow) ===== */
html.pf-v5-theme-dark .pf-v5-c-tree-view {
  background: transparent !important;
}
html.pf-v5-theme-dark .pf-v5-c-tree-view__node {
  background: transparent !important;
  color: var(--theme-text-soft) !important;
  border-radius: 8px !important;
}
html.pf-v5-theme-dark .pf-v5-c-tree-view__node:hover {
  background: var(--theme-surface-2) !important;
  color: var(--theme-text) !important;
}
html.pf-v5-theme-dark .pf-v5-c-tree-view__node.pf-m-current {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-text) !important;
  font-weight: 600;
}

/* ===== Data list (alt to table) ===== */
html.pf-v5-theme-dark .pf-v5-c-data-list {
  background: transparent !important;
}
html.pf-v5-theme-dark .pf-v5-c-data-list__item {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  margin-bottom: 8px;
  backdrop-filter: blur(8px);
}
html.pf-v5-theme-dark .pf-v5-c-data-list__item:hover {
  border-color: var(--theme-border-strong) !important;
}

/* ===== Tooltip ===== */
html.pf-v5-theme-dark .pf-v5-c-tooltip {
  background: rgba(12, 16, 25, 0.95) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border-strong) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html.pf-v5-theme-dark .pf-v5-c-tooltip__content {
  color: var(--theme-text) !important;
}
html.pf-v5-theme-dark .pf-v5-c-tooltip__arrow {
  background: rgba(12, 16, 25, 0.95) !important;
}

/* ===== Popover ===== */
html.pf-v5-theme-dark .pf-v5-c-popover__content,
html.pf-v5-theme-dark .pf-v5-c-popover {
  background: rgba(12, 16, 25, 0.92) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border-strong) !important;
  border-radius: var(--theme-radius) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
html.pf-v5-theme-dark .pf-v5-c-popover__title-text,
html.pf-v5-theme-dark .pf-v5-c-popover__body {
  color: var(--theme-text) !important;
}
html.pf-v5-theme-dark .pf-v5-c-popover__arrow {
  background: rgba(12, 16, 25, 0.92) !important;
  border-color: var(--theme-border-strong) !important;
}

/* ===== Empty state ===== */
html.pf-v5-theme-dark .pf-v5-c-empty-state {
  background: transparent !important;
  color: var(--theme-text-muted);
}
html.pf-v5-theme-dark .pf-v5-c-empty-state__icon {
  color: var(--theme-text-muted) !important;
  opacity: 0.6;
}
html.pf-v5-theme-dark .pf-v5-c-empty-state__title-text,
html.pf-v5-theme-dark .pf-v5-c-empty-state__body {
  color: var(--theme-text-soft) !important;
}

/* ===== Bullseye container (centered loading/empty) ===== */
html.pf-v5-theme-dark .pf-v5-c-bullseye,
html.pf-v5-theme-dark .pf-v5-l-bullseye {
  background: transparent !important;
}

/* ===== Banner (info ribbon) ===== */
html.pf-v5-theme-dark .pf-v5-c-banner {
  background: var(--theme-surface-2) !important;
  color: var(--theme-text) !important;
  border-bottom: 1px solid var(--theme-border) !important;
  backdrop-filter: blur(8px);
}
html.pf-v5-theme-dark .pf-v5-c-banner.pf-m-warning {
  background: rgba(251, 191, 36, 0.10) !important;
  border-bottom-color: rgba(251, 191, 36, 0.30) !important;
}
html.pf-v5-theme-dark .pf-v5-c-banner.pf-m-danger {
  background: rgba(248, 113, 113, 0.10) !important;
  border-bottom-color: rgba(248, 113, 113, 0.30) !important;
}

/* ===== Notification badge (chấm số trên icon) ===== */
html.pf-v5-theme-dark .pf-v5-c-notification-badge {
  color: var(--theme-text-muted) !important;
}
html.pf-v5-theme-dark .pf-v5-c-notification-badge.pf-m-unread {
  color: var(--theme-text) !important;
}
html.pf-v5-theme-dark .pf-v5-c-notification-badge.pf-m-unread::after,
html.pf-v5-theme-dark .pf-v5-c-notification-badge.pf-m-attention::after {
  background: var(--theme-primary) !important;
  box-shadow: 0 0 8px var(--theme-primary-glow);
}

/* ===== Progress bar ===== */
html.pf-v5-theme-dark .pf-v5-c-progress__bar {
  background: var(--theme-surface-2) !important;
  border-radius: 999px;
  overflow: hidden;
}
html.pf-v5-theme-dark .pf-v5-c-progress__indicator {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-2)) !important;
  box-shadow: 0 0 12px var(--theme-primary-glow);
}

/* ===== Divider ===== */
html.pf-v5-theme-dark .pf-v5-c-divider {
  border-color: var(--theme-border) !important;
  background: var(--theme-border) !important;
}

/* ===== Card-grid (welcome screen quick actions) ===== */
html.pf-v5-theme-dark .pf-v5-l-gallery .pf-v5-c-card,
html.pf-v5-theme-dark .pf-v5-l-grid__item .pf-v5-c-card {
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
html.pf-v5-theme-dark .pf-v5-l-gallery .pf-v5-c-card:hover,
html.pf-v5-theme-dark .pf-v5-l-grid__item .pf-v5-c-card:hover {
  transform: translateY(-2px);
  border-color: var(--theme-border-strong) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ===== Clipboard copy ===== */
html.pf-v5-theme-dark .pf-v5-c-clipboard-copy,
html.pf-v5-theme-dark .pf-v5-c-clipboard-copy__group {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  backdrop-filter: blur(8px);
}
html.pf-v5-theme-dark .pf-v5-c-clipboard-copy__text {
  color: var(--theme-text) !important;
}

/* ===== Code block (config preview) ===== */
html.pf-v5-theme-dark .pf-v5-c-code-block,
html.pf-v5-theme-dark .pf-v5-c-code-block__content {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  color: #cdd9e5 !important;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace !important;
}
html.pf-v5-theme-dark .pf-v5-c-code-editor__main {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
}

/* ===== Action list (toolbar dưới form) ===== */
html.pf-v5-theme-dark .pf-v5-c-action-list {
  gap: 8px;
}

/* ===== Jump links (anchor nav) ===== */
html.pf-v5-theme-dark .pf-v5-c-jump-links__link {
  color: var(--theme-text-muted) !important;
}
html.pf-v5-theme-dark .pf-v5-c-jump-links__link.pf-m-current,
html.pf-v5-theme-dark .pf-v5-c-jump-links__item.pf-m-current > .pf-v5-c-jump-links__link {
  color: var(--theme-primary) !important;
  font-weight: 600;
}

/* ===== Skeleton loader (loading placeholder) ===== */
html.pf-v5-theme-dark .pf-v5-c-skeleton {
  background: linear-gradient(90deg, var(--theme-surface), var(--theme-surface-2), var(--theme-surface)) !important;
  background-size: 200% 100% !important;
  animation: hv-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px !important;
}
@keyframes hv-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Page section variants (light/secondary cards) ===== */
html.pf-v5-theme-dark .pf-v5-c-page__main-section.pf-m-light,
html.pf-v5-theme-dark .pf-v5-c-page__main-section.pf-m-light-100 {
  background: transparent !important;
}
html.pf-v5-theme-dark .pf-v5-c-page__main-section.pf-m-dark-100,
html.pf-v5-theme-dark .pf-v5-c-page__main-section.pf-m-dark-200 {
  background: transparent !important;
}

/* ===== Description list (cấu hình hiển thị key/value) ===== */
html.pf-v5-theme-dark .pf-v5-c-description-list__term,
html.pf-v5-theme-dark .pf-v5-c-description-list__group .pf-v5-c-description-list__term {
  color: var(--theme-text-muted) !important;
  font-weight: 600;
}
html.pf-v5-theme-dark .pf-v5-c-description-list__description {
  color: var(--theme-text) !important;
}

/* ===== Login realm select dropdown (top-left) ===== */
html.pf-v5-theme-dark .pf-v5-c-context-selector__toggle,
html.pf-v5-theme-dark .pf-v5-c-options-menu__toggle {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 10px !important;
}

/* ===== Icon accent (info/warning icons trong help text) ===== */
html.pf-v5-theme-dark .pf-v5-c-icon.pf-m-info,
html.pf-v5-theme-dark .pf-v5-c-icon__content.pf-m-info {
  color: var(--theme-accent) !important;
}

/* ===== Card có nhấn (selected/active) ===== */
html.pf-v5-theme-dark .pf-v5-c-card.pf-m-selected,
html.pf-v5-theme-dark .pf-v5-c-card.pf-m-selected-raised {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 1px var(--theme-primary), 0 8px 32px var(--theme-primary-glow) !important;
}

/* ===== Toggle group (radio dạng nút) ===== */
html.pf-v5-theme-dark .pf-v5-c-toggle-group__button {
  background: var(--theme-surface) !important;
  color: var(--theme-text-soft) !important;
  border-color: var(--theme-border) !important;
}
html.pf-v5-theme-dark .pf-v5-c-toggle-group__button.pf-m-selected {
  background: var(--theme-primary-soft) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-primary) !important;
}

/* ===== Wizard ===== */
html.pf-v5-theme-dark .pf-v5-c-wizard__nav {
  background: rgba(0, 0, 0, 0.25) !important;
  border-right: 1px solid var(--theme-border) !important;
}
html.pf-v5-theme-dark .pf-v5-c-wizard__nav-link {
  color: var(--theme-text-muted) !important;
}
html.pf-v5-theme-dark .pf-v5-c-wizard__nav-link.pf-m-current {
  color: var(--theme-text) !important;
  font-weight: 600;
}
html.pf-v5-theme-dark .pf-v5-c-wizard__nav-link.pf-m-current::before {
  background: var(--theme-primary) !important;
  box-shadow: 0 0 8px var(--theme-primary-glow);
}

/* ============================================================================
 * Layer 3c — Visual enhancements (do enhance.js inject vào DOM)
 * ============================================================================ */

/* Chip số đếm cạnh nav item */
.theme-nav-count {
  margin-left: auto;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--theme-text-muted);
  background: var(--theme-surface-2);
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transition: all 0.2s;
}
html.pf-v5-theme-dark .pf-v5-c-nav__link.pf-m-current .theme-nav-count,
html.pf-v5-theme-dark .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link .theme-nav-count {
  color: var(--theme-primary);
  background: rgba(29, 158, 117, 0.12);
  border-color: rgba(29, 158, 117, 0.3);
}

/* Stat dashboard cards trên welcome page */
.theme-welcome-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.theme-stat-card {
  position: relative;
  background: var(--theme-surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-lg);
  padding: 20px 24px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.theme-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.theme-stat-card:hover {
  border-color: var(--theme-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.theme-stat-label {
  color: var(--theme-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.theme-stat-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--theme-text), rgba(241, 245, 249, 0.7));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.theme-stat-sub {
  color: var(--theme-text-muted);
  font-size: 12px;
}
.theme-stat-sub strong {
  color: var(--theme-primary);
  font-weight: 600;
}

/* User avatar trong table */
.theme-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(var(--theme-avatar-hue, 165), 50%, 32%);
  color: hsl(var(--theme-avatar-hue, 165), 70%, 88%);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-right: 12px;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* Page header subtitle */
.theme-page-sub {
  color: var(--theme-text-muted);
  font-size: 13px;
  margin-top: 4px;
  margin-bottom: 8px;
  font-weight: 500;
}

/* ============================================================================
 * Layer 4 — De-branding overrides (giữ từ trước)
 * ============================================================================ */

/* Ẩn logo/strapline thương hiệu trong About modal */
.pf-v5-c-about-modal-box__brand,
.pf-v5-c-about-modal-box__brand-image,
.pf-v5-c-about-modal-box__hero,
.pf-v5-c-about-modal-box__strapline {
  display: none !important;
}

/* Ẩn link trỏ ra docs ngoài (cộng hợp với rebrand.js) */
a[href*="keycloak.org"],
a[href*="keycloak.com"],
a[href*="keycloak.github.io"] {
  display: none !important;
}

/* Constrain masthead brand logo height */
.pf-v5-c-masthead__brand img,
img.pf-v5-c-brand {
  max-height: 32px;
  width: auto;
}