/* CHERT Identity — account console (keycloak.v3, PatternFly 5) styled like chertresearch.com.
 *
 * Every colour, font and radius comes from chert-tokens.css (copied verbatim from
 * branding/CHERT-Design-System.md §9) and chert-fonts.css (self-hosted Inter + IBM Plex Sans Arabic);
 * no raw hex here. Logical properties only — the console renders dir="rtl" for Arabic and mirrors.
 * Layout: the site's dark band for the masthead and side navigation (orange marks the current page),
 * a cream workspace with white cards, orange pill primary buttons with ink text, ink links
 * underlined in orange (orange text never sits on a light surface). Dark mode is off (theme.properties). */

/* ---- PatternFly hooks ---- */
:root {
  --pf-v5-global--FontFamily--text: var(--font-ui);
  --pf-v5-global--FontFamily--heading: var(--font-ui);
  --pf-v5-global--link--Color: var(--chert-ink);
  --pf-v5-global--link--Color--hover: var(--chert-ink);
  --pf-v5-global--primary-color--100: var(--chert-orange-deep);
  --pf-v5-global--BorderRadius--sm: 10px;
  --pf-v5-c-page--BackgroundColor: var(--chert-cream);
  --pf-v5-c-page__main-section--BackgroundColor: transparent;
}
html[lang="ar"] {
  --pf-v5-global--FontFamily--text: var(--font-ar);
  --pf-v5-global--FontFamily--heading: var(--font-ar);
}
body { font-family: var(--font-ui); color: var(--chert-ink); background: var(--chert-cream); }
html[lang="ar"] body { font-family: var(--font-ar); }
.keycloak__loading-container { background: var(--chert-dark) !important; color: var(--chert-dark-text) !important; }

/* ---- masthead: the site's dark nav ---- */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--chert-dark);
  background-color: var(--chert-dark) !important;
  background-image: radial-gradient(60% 140% at 85% 0%, color-mix(in srgb, var(--chert-orange) 18%, transparent), transparent 70%) !important;
  border-block-end: 1px solid var(--chert-dark-border);
  min-height: 64px;
}
.pf-v5-c-masthead__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.pf-v5-c-masthead__brand img { background: none !important; padding: 0 !important; border-radius: 0 !important;
  width: 30px !important; height: 30px !important; max-height: 30px; object-fit: contain; }
.pf-v5-c-masthead__brand::after {
  content: "CHERT Identity"; color: var(--chert-dark-text); font-family: var(--font-ui); font-weight: 800; font-size: 18px;
  letter-spacing: .02em; white-space: nowrap;
}
html[lang="ar"] .pf-v5-c-masthead__brand::after { content: "هوية تشيرت"; font-family: var(--font-ar); letter-spacing: normal; }
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  color: var(--chert-dark-text); background: transparent; border-radius: var(--radius-pill);
  --pf-v5-c-menu-toggle--before--BorderColor: var(--chert-dark-border);
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle::before { border-radius: var(--radius-pill); border-color: var(--chert-dark-border) !important; }
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover::before, .pf-v5-c-masthead .pf-v5-c-menu-toggle[aria-expanded="true"]::before { border-color: var(--chert-orange) !important; }
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain { color: var(--chert-dark-text); }
.pf-v5-c-avatar { border: 2px solid var(--chert-orange); }

/* ---- side navigation: dark, orange current marker ---- */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--chert-dark);
  background-color: var(--chert-dark) !important; border-inline-end: 1px solid var(--chert-dark-border);
}
.pf-v5-c-page__sidebar-body { padding-block-start: 12px; }
.pf-v5-c-nav { --pf-v5-c-nav__link--Color: var(--chert-dark-muted); --pf-v5-c-nav__link--hover--Color: var(--chert-dark-text);
  --pf-v5-c-nav__link--m-current--Color: var(--chert-dark-text); --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: color-mix(in srgb, var(--chert-dark-text) 6%, transparent);
  --pf-v5-c-nav__link--m-current--BackgroundColor: color-mix(in srgb, var(--chert-orange) 14%, transparent);
  --pf-v5-c-nav__link--before--BorderColor: transparent; --pf-v5-c-nav__link--after--BorderColor: transparent;
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--chert-orange); }
.pf-v5-c-nav__link { margin-inline: 10px; border-radius: 10px; font-weight: 600; color: var(--chert-dark-muted); }
.pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link.pf-m-current:hover { color: var(--chert-dark-text); }
.pf-v5-c-nav__link::before { border: 0 !important; }
.pf-v5-c-nav__link::after { border-color: transparent !important; }
.pf-v5-c-nav__link.pf-m-current::after { border-color: var(--chert-orange) !important; border-inline-start-width: 3px !important; border-radius: 3px; }
.pf-v5-c-nav__item { border: 0 !important; }
.pf-v5-c-nav__subnav .pf-v5-c-nav__link { font-weight: 500; font-size: 14px; }

/* ---- workspace ---- */
.pf-v5-c-page__main { background: var(--chert-cream); }
.pf-v5-c-page__main-section { padding-inline: 32px !important; }
.pf-v5-c-page__main-section.pf-m-light, .pf-v5-c-page__main-section:first-child {
  background: transparent !important;
}
.pf-v5-c-page__main-section h1, .pf-v5-c-page__main-section .pf-v5-c-title.pf-m-2xl, .pf-v5-c-page__main-section .pf-v5-c-title.pf-m-3xl {
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--chert-ink);
}
html[lang="ar"] .pf-v5-c-page__main-section h1 { letter-spacing: normal; line-height: 1.4; }
.pf-v5-c-page__main-section h1::before {
  content: ""; display: block; width: 24px; height: 2px; margin-block-end: 12px; border-radius: 2px; background: var(--chert-orange);
}
.pf-v5-c-page__main-section h2, .pf-v5-c-title.pf-m-xl, .pf-v5-c-title.pf-m-lg { font-weight: 700; color: var(--chert-ink); }
.pf-v5-c-content p, .pf-v5-c-page__main-section p { color: var(--chert-muted); }

/* cards, panels, data lists and tables sit on white cards */
.pf-v5-c-page__main-section > .pf-v5-c-card,
.pf-v5-c-page__main-section .pf-v5-c-data-list,
.pf-v5-c-page__main-section .pf-v5-c-table,
.pf-v5-c-page__main-section .pf-v5-c-form,
.pf-v5-c-page__main-section .pf-v5-c-empty-state {
  background: var(--chert-surface); border: 1px solid var(--chert-border); border-radius: 16px;
}
.pf-v5-c-page__main-section .pf-v5-c-form { padding: 24px; }
.pf-v5-c-card .pf-v5-c-form, .pf-v5-c-card .pf-v5-c-data-list, .pf-v5-c-card .pf-v5-c-table, .pf-v5-c-form .pf-v5-c-form {
  border: 0 !important; padding: 0; background: transparent; border-radius: 0; }
.pf-v5-c-page__main-section .pf-v5-c-data-list { overflow: hidden; --pf-v5-c-data-list--BorderTopColor: transparent; }
.pf-v5-c-data-list__item { --pf-v5-c-data-list__item--BorderBottomColor: var(--chert-border); }
.pf-v5-c-data-list__item:last-child { border-block-end: 0; }
.pf-v5-c-page__main-section .pf-v5-c-table { overflow: hidden; }
.pf-v5-c-table { --pf-v5-c-table--BackgroundColor: var(--chert-surface); --pf-v5-c-table--BorderColor: var(--chert-border);
  --pf-v5-c-table--cell--Color: var(--chert-ink); }
.pf-v5-c-table thead th { color: var(--chert-muted); font-size: 13px; }
.pf-v5-c-card { --pf-v5-c-card--BackgroundColor: var(--chert-surface); border-radius: 16px; box-shadow: none; }
.pf-v5-c-description-list__term .pf-v5-c-description-list__text { color: var(--chert-muted); font-weight: 600; }
.pf-v5-c-jump-links__link { --pf-v5-c-jump-links__link--before--BorderColor: var(--chert-border); }
.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link::before { border-color: var(--chert-orange) !important; }
.pf-v5-c-jump-links__link-text { color: var(--chert-ink); }

/* ---- form fields: cream with an orange focus ring, like the sign-in page ---- */
.pf-v5-c-form__label-text { font-weight: 600; color: var(--chert-ink); }
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderRadius: 10px;
  --pf-v5-c-form-control--BackgroundColor: var(--chert-surface-alt);
  --pf-v5-c-form-control--before--BorderColor: var(--chert-border);
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--chert-border-strong);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--chert-orange-deep);
  border-radius: 10px; background: var(--chert-surface-alt);
}
.pf-v5-c-form-control::before { border-radius: 10px; border-color: var(--chert-border) !important; }
.pf-v5-c-form-control::after { border-radius: 10px; }
.pf-v5-c-form-control:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--chert-orange) 30%, transparent); }
.pf-v5-c-form-control:focus-within::before { border-color: var(--chert-orange-deep) !important; }
.pf-v5-c-form-control > input:focus, .pf-v5-c-form-control > select:focus { outline: none; }
.pf-v5-c-form-control.pf-m-readonly, .pf-v5-c-form-control.pf-m-disabled { background: var(--chert-surface-alt); opacity: .75; }
.pf-v5-c-page__main-section .pf-v5-c-menu-toggle:not(.pf-m-plain) { border-radius: 10px; background: var(--chert-surface-alt); }
.pf-v5-c-page__main-section .pf-v5-c-menu-toggle:not(.pf-m-plain)::before { border-radius: 10px; border-color: var(--chert-border) !important; }

/* ---- buttons ---- */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--chert-orange);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--chert-orange-deep);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--chert-orange-deep);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--chert-orange-deep);
  --pf-v5-c-button--m-primary--Color: var(--chert-ink);
  --pf-v5-c-button--m-primary--hover--Color: var(--chert-ink);
  --pf-v5-c-button--m-primary--focus--Color: var(--chert-ink);
  --pf-v5-c-button--m-primary--active--Color: var(--chert-ink);
  background-color: var(--chert-orange) !important; color: var(--chert-ink) !important;   /* primary buttons use ink text */
  border-radius: var(--radius-pill) !important; font-weight: 700; padding-inline: 20px;
}
.pf-v5-c-button.pf-m-primary:hover, .pf-v5-c-button.pf-m-primary:focus { background-color: var(--chert-orange-deep) !important; }
.pf-v5-c-button.pf-m-secondary, .pf-v5-c-button.pf-m-tertiary {
  --pf-v5-c-button--m-secondary--Color: var(--chert-ink); --pf-v5-c-button--m-secondary--hover--Color: var(--chert-ink);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--chert-border-strong);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--chert-orange-deep);
  color: var(--chert-ink) !important; border-radius: var(--radius-pill) !important; font-weight: 600;
}
.pf-v5-c-button.pf-m-secondary::after, .pf-v5-c-button.pf-m-tertiary::after { border-radius: var(--radius-pill); }
.pf-v5-c-button.pf-m-danger { border-radius: var(--radius-pill) !important; }
.pf-v5-c-page__main .pf-v5-c-button.pf-m-link, .pf-v5-c-page__main .pf-v5-c-button.pf-m-inline, .pf-v5-c-page__main a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):not(.pf-v5-c-jump-links__link) {
  --pf-v5-c-button--m-link--Color: var(--chert-ink); --pf-v5-c-button--m-link--hover--Color: var(--chert-ink);
  color: var(--chert-ink) !important; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--chert-orange-deep); text-underline-offset: 3px;
}
.pf-v5-c-page__main .pf-v5-c-button.pf-m-link svg { color: var(--chert-orange-deep); }

/* ---- labels, alerts ---- */
.pf-v5-c-label { border-radius: var(--radius-pill); }
.pf-v5-c-label.pf-m-green { --pf-v5-c-label--m-green--BackgroundColor: var(--chert-success-tint); }
.pf-v5-c-alert { border-radius: 12px; }

/* ---- small screens ---- */
@media (max-width: 768px) {
  .pf-v5-c-page__main-section { padding-inline: 16px !important; }
  .pf-v5-c-masthead__brand::after { font-size: 16px; }
}