/* ============================================================================
   Samurai — Keycloak admin console skin (PatternFly 5 / keycloak.v2)
   Re-tokenizes the operator console to the app's look: deep-ink dark surface,
   Rubik/Heebo, coral→pink→violet accents, violet focus ring.
   Admin console is a React SPA (mostly English/mixed) — we skin it dark, but do
   NOT force RTL (operator tool; forcing direction breaks its dense layouts).
   Layered over keycloak.v2's stylesheet.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Rubik:wght@400;500;600;700;800;900&display=swap');

:root,
:where(html) {
  color-scheme: dark;

  /* Brand tokens */
  --ink-950: #18222e;
  --ink-900: #1c2733;
  --ink-850: #20303f;
  --ink-800: #243140;
  --panel: #283a4c;
  --panel-2: #2f4356;
  --line: #3a4f64;
  --line-soft: #324456;
  --coral: #ee6c5d;
  --coral-2: #f28a72;
  --pink: #d585a6;
  --violet: #a290da;
  --violet-2: #b6a8e6;
  --text: #eaf1f8;
  --muted: #9eb1c3;
  --faint: #7e92a6;
  --grad: linear-gradient(135deg, #ee6c5d 0%, #d585a6 48%, #a290da 100%);
  --ring: 0 0 0 3px rgba(162, 144, 218, 0.32);

  /* ---- Map PatternFly v5 globals onto the brand ---- */
  --pf-v5-global--FontFamily--text: 'Heebo', system-ui, 'Noto Sans Hebrew', Arial, sans-serif;
  --pf-v5-global--FontFamily--heading: 'Rubik', system-ui, 'Noto Sans Hebrew', sans-serif;
  --pf-v5-global--FontFamily--monospace: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --pf-v5-global--FontFamily--redhatfont: 'Heebo', system-ui, 'Noto Sans Hebrew', Arial, sans-serif;

  --pf-v5-global--BackgroundColor--100: var(--ink-900);
  --pf-v5-global--BackgroundColor--200: var(--ink-850);
  --pf-v5-global--BackgroundColor--300: var(--ink-800);
  --pf-v5-global--BackgroundColor--dark-100: var(--ink-950);
  --pf-v5-global--BackgroundColor--dark-200: var(--ink-900);
  --pf-v5-global--BackgroundColor--dark-300: var(--ink-850);
  --pf-v5-global--BackgroundColor--dark-400: var(--panel);
  --pf-v5-global--BackgroundColor--light-100: var(--panel);
  --pf-v5-global--BackgroundColor--light-200: var(--panel-2);
  --pf-v5-global--BackgroundColor--light-300: var(--panel-2);

  --pf-v5-global--Color--100: var(--text);
  --pf-v5-global--Color--200: var(--muted);
  --pf-v5-global--Color--300: var(--faint);
  --pf-v5-global--Color--light-100: var(--text);
  --pf-v5-global--Color--light-200: var(--muted);
  --pf-v5-global--Color--dark-100: var(--text);
  --pf-v5-global--Color--dark-200: var(--muted);

  --pf-v5-global--BorderColor--100: var(--line);
  --pf-v5-global--BorderColor--200: var(--line-soft);
  --pf-v5-global--BorderColor--300: var(--line-soft);

  --pf-v5-global--primary-color--100: var(--coral);
  --pf-v5-global--primary-color--200: var(--coral-2);
  --pf-v5-global--secondary-color--100: var(--muted);
  --pf-v5-global--active-color--100: var(--violet);
  --pf-v5-global--active-color--400: var(--violet);
  --pf-v5-global--link--Color: var(--violet-2);
  --pf-v5-global--link--Color--hover: var(--coral-2);

  --pf-v5-global--danger-color--100: var(--coral);
  --pf-v5-global--danger-color--200: #d9534f;
  --pf-v5-global--success-color--100: #43b483;
  --pf-v5-global--warning-color--100: #e3a948;
  --pf-v5-global--info-color--100: var(--violet);

  --pf-v5-global--BorderRadius--sm: 10px;
  --pf-v5-global--BorderRadius--lg: 16px;
  --pf-v5-global--FocusColor--100: var(--violet);
  --pf-v5-global--BoxShadow--sm: 0 4px 14px -8px rgba(0, 0, 0, 0.5);
  --pf-v5-global--BoxShadow--md: 0 12px 30px -16px rgba(0, 0, 0, 0.55);
  --pf-v5-global--BoxShadow--lg: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}

/* ===== Page surface ===================================================== */
html,
body,
#app,
.pf-v5-c-page,
.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  color: var(--text);
  font-family: var(--pf-v5-global--FontFamily--text);
  background:
    radial-gradient(1100px 720px at 88% -8%, rgba(238, 108, 93, 0.1), transparent 60%),
    radial-gradient(900px 700px at 4% 102%, rgba(162, 144, 218, 0.12), transparent 55%),
    linear-gradient(180deg, var(--ink-850), var(--ink-900) 60%, var(--ink-950)) fixed;
}
.pf-v5-c-page__main-section.pf-m-light,
.pf-v5-c-page__main-section {
  background-color: transparent;
}

h1, h2, h3, h4,
.pf-v5-c-title {
  font-family: var(--pf-v5-global--FontFamily--heading);
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ===== Masthead ========================================================= */
.pf-v5-c-masthead,
.pf-v5-c-page__header {
  background: rgba(24, 34, 46, 0.9);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
  position: relative;
}
/* Signature gradient hairline under the masthead. */
.pf-v5-c-masthead::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad);
  opacity: 0.85;
}
.pf-v5-c-masthead__brand,
.pf-v5-c-brand {
  height: 34px;
  width: auto;
}
.pf-v5-c-masthead__toggle .pf-v5-c-button {
  color: var(--muted);
}

/* ===== Sidebar / nav ==================================================== */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v5-c-nav {
  background: rgba(28, 39, 51, 0.72);
  border-inline-end: 1px solid var(--line-soft);
}
.pf-v5-c-nav__link {
  color: var(--muted);
  border-radius: 10px;
  font-weight: 500;
}
.pf-v5-c-nav__link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current='page'] {
  color: var(--text);
  background: rgba(162, 144, 218, 0.14);
  box-shadow: inset 3px 0 0 0 var(--coral);
}
.pf-v5-c-nav__section-title {
  color: var(--faint);
  font-family: var(--pf-v5-global--FontFamily--heading);
}
/* Realm selector at the top of the sidebar */
.pf-v5-c-menu-toggle {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pf-v5-c-menu-toggle:hover {
  border-color: var(--violet);
}

/* ===== Cards / panels =================================================== */
.pf-v5-c-card,
.pf-v5-c-panel,
.pf-v5-l-gallery > * {
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 88%, black));
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.5);
  color: var(--text);
}
.pf-v5-c-card__title,
.pf-v5-c-card__header,
.pf-v5-c-card__title-text {
  color: var(--text);
}
.pf-v5-c-card__footer {
  border-top: 1px solid var(--line-soft);
}

/* ===== Tabs ============================================================= */
.pf-v5-c-tabs {
  --pf-v5-c-tabs__link--Color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.pf-v5-c-tabs__link {
  color: var(--muted);
  font-family: var(--pf-v5-global--FontFamily--heading);
  font-weight: 500;
}
.pf-v5-c-tabs__link:hover {
  color: var(--text);
}
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  color: var(--text);
}
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
  background: var(--grad);
  border-radius: 3px;
}

/* ===== Inputs / forms =================================================== */
.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea,
input.pf-v5-c-form-control,
select.pf-v5-c-form-control,
textarea.pf-v5-c-form-control {
  background: var(--ink-900);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pf-v5-c-form-control::placeholder,
.pf-v5-c-form-control > input::placeholder {
  color: var(--faint);
}
.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus,
input.pf-v5-c-form-control:focus,
textarea.pf-v5-c-form-control:focus {
  border-color: var(--violet);
  box-shadow: var(--ring);
  outline: none;
}
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: var(--muted);
}
.pf-v5-c-form__helper-text {
  color: var(--faint);
}
.pf-v5-c-form__group-label-help {
  color: var(--violet-2);
}

/* ===== Switch (feature toggles everywhere in the console) =============== */
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  background: var(--coral);
}
.pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle {
  box-shadow: var(--ring);
}

/* ===== Buttons ========================================================== */
.pf-v5-c-button.pf-m-primary {
  color: #fff;
  background: var(--grad);
  background-size: 160% 160%;
  background-position: 0% 50%;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 0 10px 24px -12px rgba(238, 108, 93, 0.7);
  transition: background-position 0.3s ease, box-shadow 0.2s ease;
}
.pf-v5-c-button.pf-m-primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 14px 30px -12px rgba(162, 144, 218, 0.7);
}
.pf-v5-c-button.pf-m-secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pf-v5-c-button.pf-m-secondary:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--violet);
}
.pf-v5-c-button.pf-m-tertiary {
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.pf-v5-c-button.pf-m-link {
  color: var(--violet-2);
}
.pf-v5-c-button.pf-m-link:hover {
  color: var(--coral-2);
}
.pf-v5-c-button.pf-m-danger {
  color: #fff;
  background: var(--coral);
  border-radius: 10px;
}
.pf-v5-c-button.pf-m-control {
  background: var(--ink-900);
  border: 1px solid var(--line);
  color: var(--muted);
}

/* ===== Links ============================================================ */
a {
  color: var(--violet-2);
  text-decoration: none;
}
a:hover {
  color: var(--coral-2);
}

/* ===== Dropdown / menu / select ========================================= */
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-select__menu {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--pf-v5-global--BoxShadow--lg);
}
.pf-v5-c-menu__item,
.pf-v5-c-dropdown__menu-item {
  color: var(--text);
}
.pf-v5-c-menu__item:hover,
.pf-v5-c-dropdown__menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ===== Modal / drawer =================================================== */
.pf-v5-c-modal-box,
.pf-v5-c-drawer__panel {
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 90%, black));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: var(--pf-v5-global--BoxShadow--lg);
  color: var(--text);
}
.pf-v5-c-modal-box__title,
.pf-v5-c-modal-box__title-text {
  color: var(--text);
  font-family: var(--pf-v5-global--FontFamily--heading);
}
.pf-v5-c-modal-box__header,
.pf-v5-c-modal-box__footer {
  border-color: var(--line-soft);
}
.pf-v5-c-backdrop {
  background: rgba(16, 22, 30, 0.6);
  backdrop-filter: blur(4px);
}

/* ===== Tables =========================================================== */
.pf-v5-c-table {
  color: var(--text);
  background: transparent;
}
.pf-v5-c-table thead th,
.pf-v5-c-table__sort .pf-v5-c-table__button {
  color: var(--muted);
  font-family: var(--pf-v5-global--FontFamily--heading);
  border-color: var(--line-soft);
}
.pf-v5-c-table tbody tr {
  border-color: var(--line-soft);
}
.pf-v5-c-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.pf-v5-c-table__expandable-row {
  background: rgba(0, 0, 0, 0.15);
}

/* ===== Toolbar / pagination ============================================= */
.pf-v5-c-toolbar,
.pf-v5-c-pagination {
  background: transparent;
  color: var(--muted);
}

/* ===== Alerts ========================================================== */
.pf-v5-c-alert {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
}
.pf-v5-c-alert.pf-m-danger {
  background: rgba(238, 108, 93, 0.14);
  border-color: rgba(238, 108, 93, 0.45);
}
.pf-v5-c-alert.pf-m-success {
  background: rgba(67, 180, 131, 0.14);
  border-color: rgba(67, 180, 131, 0.4);
}
.pf-v5-c-alert.pf-m-warning {
  background: rgba(227, 169, 72, 0.14);
  border-color: rgba(227, 169, 72, 0.4);
}
.pf-v5-c-alert.pf-m-info {
  background: rgba(162, 144, 218, 0.14);
  border-color: rgba(162, 144, 218, 0.45);
}

/* ===== Labels / chips / badges ========================================= */
.pf-v5-c-label,
.pf-v5-c-chip,
.pf-v5-c-badge {
  border-radius: 999px;
}
.pf-v5-c-badge.pf-m-read {
  background: rgba(162, 144, 218, 0.18);
  color: var(--violet-2);
}

/* ===== Breadcrumb / jump links ========================================= */
.pf-v5-c-breadcrumb__link {
  color: var(--muted);
}
.pf-v5-c-breadcrumb__link:hover {
  color: var(--coral-2);
}
.pf-v5-c-jump-links__link-text {
  color: var(--muted);
}

/* ===== Code / clipboard copy =========================================== */
.pf-v5-c-code-block,
.pf-v5-c-clipboard-copy__text,
.pf-v5-c-code-editor {
  background: var(--ink-950);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--pf-v5-global--FontFamily--monospace);
}

/* ===== Empty state ===================================================== */
.pf-v5-c-empty-state__title-text {
  color: var(--text);
}
.pf-v5-c-empty-state__body {
  color: var(--muted);
}

/* ===== Login (master-realm admin sign-in reuses login theme, but the v2
   console renders a themed spinner on boot) ============================= */
.pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: var(--coral);
}

/* ===== Scrollbars ====================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}