/* ================================================================
   Proctor Design System — Keycloak Admin Console
   Keycloak 26 / parent=keycloak.v2 (React + PatternFly v5)

   Tokens lifted directly from labinventory/templates/base.html:
     --brand:       #1d3461
     --brand-light: #243e78
     --brand-bg:    #edf0f8
     --bg:          #f4f4f5
     --surface:     #ffffff
     --surface2:    #fafafa
     --border:      #e4e4e7
     --border2:     #d4d4d8
     --text:        #18181b
     --text2:       #71717a
     --text3:       #a1a1aa
     --shadow-s:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)
     --shadow-m:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)
     --radius:      10px
     --radius-sm:   6px
================================================================ */

/* ── Reset + font ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased;
  background: #f4f4f5 !important;
  color: #18181b !important;
}

/* ── PF5 global token overrides ──────────────────────────────── */
:root, :host {
  --pf-v5-global--primary-color--100:    #1d3461;
  --pf-v5-global--primary-color--200:    #243e78;
  --pf-v5-global--active-color--100:     #1d3461;
  --pf-v5-global--link--Color:           #1d3461;
  --pf-v5-global--link--Color--hover:    #243e78;
  --pf-v5-global--link--Color--visited:  #1d3461;
  --pf-v5-global--BackgroundColor--100:  #ffffff;
  --pf-v5-global--BackgroundColor--200:  #f4f4f5;
  --pf-v5-global--BorderColor--100:      #e4e4e7;
  --pf-v5-global--BorderColor--200:      #e4e4e7;
  --pf-v5-global--Color--100:            #18181b;
  --pf-v5-global--Color--200:            #71717a;
  --pf-v5-global--FontFamily--sans-serif:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ── Page scaffold ───────────────────────────────────────────── */
.pf-v5-c-page { background: #f4f4f5 !important; }

.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  background: #f4f4f5 !important;
  color: #18181b !important;
}

/* ── Masthead — white topbar, navy brand, 56px ───────────────── */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor:   #ffffff !important;
  --pf-v5-global--Color--100:            #18181b !important;
  --pf-v5-global--Color--200:            #71717a !important;
  --pf-v5-global--BorderColor--100:      #e4e4e7 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e4e4e7 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
  min-height: 56px !important;
}

.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle,
.pf-v5-c-masthead__content,
.pf-v5-c-masthead__main {
  color: #18181b !important;
}

.pf-v5-c-masthead .pf-v5-c-button:hover { color: #1d3461 !important; }

/* ── Masthead user/admin dropdown toggle ─────────────────────── */
/* The "Root Admin" button — borderless, no outline, clean text */
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: #18181b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.13s !important;
}

.pf-v5-c-masthead .pf-v5-c-dropdown__toggle:hover {
  background: #f4f4f5 !important;
  color: #1d3461 !important;
}

/* Kill the PF5 ::after caret border that shows as black outline */
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle::after,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle::before {
  border-color: #71717a transparent transparent !important;
  outline: none !important;
}

/* Kill PF5 button ::after border ring on all masthead buttons */
.pf-v5-c-masthead .pf-v5-c-button::after { border-width: 0 !important; border-color: transparent !important; }

/* ── Kill menu-toggle border box (::before = top/left/right, ::after = bottom underline) ── */
/* The token --item-border-color--base resolves to black-800 — zero it out */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--item-border-color--base: transparent !important;
  --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: transparent !important;
  --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: transparent !important;
  --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: transparent !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle::before,
.pf-v5-c-masthead .pf-v5-c-menu-toggle::after {
  border-color: transparent !important;
  border-width: 0 !important;
}

/* Masthead dropdown menu */
.pf-v5-c-masthead + * .pf-v5-c-dropdown__menu,
.pf-v5-c-page__header .pf-v5-c-dropdown__menu {
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04) !important;
}

/* ── Kill double border: masthead__main ::before + toolbar content-section ── */
.pf-v5-c-masthead__main::before {
  display: none !important;
}

.pf-v5-c-toolbar__content-section {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Also kill the page__header dark token overrides bleeding in */
.pf-v5-c-page__header {
  --pf-v5-global--Color--100: #18181b !important;
  --pf-v5-global--BorderColor--100: #e4e4e7 !important;
}

/* Logo */
.pf-v5-c-brand { height: 28px !important; width: auto !important; }
.keycloak__pageheader_brand { height: 28px !important; max-width: 180px !important; }

/* ── Sidebar — white, nav matches topbar ────────────────────── */
.pf-v5-c-page__sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e4e4e7 !important;
}

/* Sidebar inner body padding */
.pf-v5-c-page__sidebar-body {
  padding: 8px 12px !important;
}

.pf-v5-c-nav { background: #ffffff !important; }

/* Override PF5 nav padding tokens for roomier items */
.pf-v5-c-nav {
  --pf-v5-c-nav__link--PaddingTop:    10px !important;
  --pf-v5-c-nav__link--PaddingBottom: 10px !important;
  --pf-v5-c-nav__link--PaddingLeft:   14px !important;
  --pf-v5-c-nav__link--PaddingRight:  14px !important;
  --pf-v5-c-nav__section-title--FontSize: 11px !important;
  --pf-v5-c-nav__section-title--Color: #a1a1aa !important;
  --pf-v5-c-nav__section-title--BorderBottomColor: transparent !important;
  --pf-v5-c-nav__section-title--BorderBottomWidth: 0 !important;
  --pf-v5-c-nav__section--first-child--PaddingTop: 8px !important;
  --pf-v5-c-nav__section__item--MarginTop: 2px !important;
}

.pf-v5-c-nav__link {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #71717a !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  /* Left accent border — transparent by default, 3px wide so layout is stable */
  border-left: 3px solid transparent !important;
  margin-bottom: 1px !important;
  transition: color 0.13s, background 0.13s !important;
}

.pf-v5-c-nav__link:hover {
  background: #f4f4f5 !important;
  color: #18181b !important;
  border-left-color: transparent !important;
}

.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav__link.pf-m-current {
  color: #1d3461 !important;
  font-weight: 600 !important;
  background: #edf0f8 !important;
  border-left-color: #1d3461 !important;
}

/* Section titles: MANAGE / CONFIGURE — uppercase, spaced */
.pf-v5-c-nav__section-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #a1a1aa !important;
  border-top: none !important;
  border-bottom: none !important;
  padding-top: 16px !important;
  padding-bottom: 6px !important;
  padding-left: 14px !important;
}

/* No dividers between sections */
.pf-v5-c-nav__section + .pf-v5-c-nav__section { border-top: none !important; }
.pf-v5-c-nav .pf-v5-c-divider { display: none !important; }

/* Remove PF5 ::before and ::after pseudo-borders on nav links */
.pf-v5-c-nav__link::before,
.pf-v5-c-nav__link::after { display: none !important; }

/* ── Realm selector (top of sidebar) ─────────────────────────── */
/* The realm picker is a context-switcher — style like a clean select */
.pf-v5-c-context-selector {
  width: 100% !important;
}

.pf-v5-c-context-selector__toggle {
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 6px !important;
  color: #18181b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  width: 100% !important;
  box-shadow: none !important;
}

.pf-v5-c-context-selector__toggle:hover {
  background: #edf0f8 !important;
  border-color: #d4d4d8 !important;
  color: #1d3461 !important;
}

.pf-v5-c-context-selector__menu {
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04) !important;
}

.pf-v5-c-context-selector__menu-list-item button {
  font-size: 13px !important;
  color: #18181b !important;
}

.pf-v5-c-context-selector__menu-list-item button:hover {
  background: #f4f4f5 !important;
  color: #1d3461 !important;
}

/* ── Cards ────────────────────────────────────────────────────── */
.pf-v5-c-card {
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
  color: #18181b !important;
}

.pf-v5-c-card__title,
.pf-v5-c-card__title-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #18181b !important;
}

.pf-v5-c-card__body { color: #18181b !important; }

.pf-v5-c-card__header {
  background: #fafafa !important;
  border-bottom: 1px solid #e4e4e7 !important;
  padding: 10px 16px !important;
  border-radius: 10px 10px 0 0 !important;
}

/* ── Content area: generous padding ──────────────────────────── */
.pf-v5-c-page__main-section {
  padding: 24px !important;
}

/* ── Toolbar / page header sections ──────────────────────────── */
.pf-v5-c-toolbar,
.pf-v5-c-toolbar__content,
.pf-v5-c-page__main-breadcrumb,
.pf-v5-c-page__main-section.pf-m-light {
  background: #ffffff !important;
  color: #18181b !important;
  border-bottom: 1px solid #e4e4e7 !important;
}

h1, h2, h3, h4 {
  color: #18181b !important;
  font-weight: 600 !important;
}

/* ── Buttons — match .btn-primary/.btn-secondary from base.html ─ */
.pf-v5-c-button.pf-m-primary {
  background: #1d3461 !important;
  border: 1px solid #1d3461 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  transition: background 0.13s, border-color 0.13s, box-shadow 0.13s !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: #243e78 !important;
  border-color: #243e78 !important;
  box-shadow: 0 2px 8px rgba(29,52,97,.2) !important;
}

.pf-v5-c-button.pf-m-secondary {
  background: #ffffff !important;
  border: 1px solid #d4d4d8 !important;
  color: #71717a !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background: #fafafa !important;
  border-color: #a1a1aa !important;
  color: #18181b !important;
}

.pf-v5-c-button.pf-m-danger {
  background: #ffffff !important;
  border: 1px solid rgba(220,38,38,.3) !important;
  color: #dc2626 !important;
  border-radius: 6px !important;
}

.pf-v5-c-button.pf-m-danger:hover {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
}

.pf-v5-c-button.pf-m-link { color: #1d3461 !important; }
.pf-v5-c-button.pf-m-link:hover { color: #243e78 !important; }
.pf-v5-c-button.pf-m-plain { color: #71717a !important; }
.pf-v5-c-button.pf-m-plain:hover { color: #1d3461 !important; }

/* ── Form inputs — match .form-control from base.html ─────────── */
.pf-v5-c-form-control {
  font-family: inherit !important;
  font-size: 13px !important;
  border: 1px solid #d4d4d8 !important;
  border-radius: 6px !important;
  color: #18181b !important;
  background: #ffffff !important;
  height: 36px !important;
  padding: 7px 11px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.pf-v5-c-form-control::placeholder { color: #a1a1aa !important; }

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within {
  border-color: #1d3461 !important;
  box-shadow: 0 0 0 3px rgba(29,52,97,.1) !important;
  outline: none !important;
}

/* Labels — match .form-label from base.html */
.pf-v5-c-form__label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: #71717a !important;
  margin-bottom: 5px !important;
}

.pf-v5-c-form__helper-text {
  font-size: 12px !important;
  color: #a1a1aa !important;
}

/* ── Tables — match .table from base.html ─────────────────────── */
.pf-v5-c-table {
  font-family: inherit !important;
  font-size: 13px !important;
  background: #ffffff !important;
  color: #18181b !important;
}

.pf-v5-c-table thead th,
.pf-v5-c-table thead td {
  background: #fafafa !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #71717a !important;
  border-bottom: 1px solid #e4e4e7 !important;
  padding: 10px 14px !important;
}

.pf-v5-c-table tbody tr td {
  padding: 10px 14px !important;
  color: #18181b !important;
  border-bottom: 1px solid #e4e4e7 !important;
  background: #ffffff !important;
}

.pf-v5-c-table tbody tr:hover td { background: #fafafa !important; }

/* ── Alerts ───────────────────────────────────────────────────── */
.pf-v5-c-alert { border-radius: 6px !important; font-family: inherit !important; font-size: 13px !important; }
.pf-v5-c-alert.pf-m-success { background: #f0fdf4 !important; border-color: rgba(22,163,74,.2) !important; }
.pf-v5-c-alert.pf-m-danger  { background: #fef2f2 !important; border-color: rgba(220,38,38,.2) !important; }
.pf-v5-c-alert.pf-m-warning { background: #fffbeb !important; border-color: rgba(217,119,6,.2) !important; }
.pf-v5-c-alert.pf-m-info    { background: #eff6ff !important; border-color: rgba(29,78,216,.2) !important; }
.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title { color: #16a34a !important; }
.pf-v5-c-alert.pf-m-danger  .pf-v5-c-alert__title { color: #dc2626 !important; }
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title { color: #d97706 !important; }
.pf-v5-c-alert.pf-m-info    .pf-v5-c-alert__title { color: #1d4ed8 !important; }

/* ── Labels / badges — match .bid from base.html ──────────────── */
.pf-v5-c-label { border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; }
.pf-v5-c-label.pf-m-blue  { background: #edf0f8 !important; color: #1d3461 !important; border-color: rgba(29,52,97,.18) !important; }
.pf-v5-c-label.pf-m-green { background: #f0fdf4 !important; color: #16a34a !important; border-color: rgba(22,163,74,.2)  !important; }
.pf-v5-c-label.pf-m-red   { background: #fef2f2 !important; color: #dc2626 !important; border-color: rgba(220,38,38,.2) !important; }

/* ── Tabs ─────────────────────────────────────────────────────── */
.pf-v5-c-tabs__link {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #71717a !important;
  background: transparent !important;
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  color: #1d3461 !important;
  font-weight: 600 !important;
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
  background-color: #1d3461 !important;
}

.pf-v5-c-tabs { background: transparent !important; border-bottom: 1px solid #e4e4e7 !important; }

/* ── Dropdown / menus ─────────────────────────────────────────── */
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu {
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04) !important;
}

.pf-v5-c-menu__item-text,
.pf-v5-c-dropdown__menu-item {
  font-size: 13px !important;
  color: #18181b !important;
  background: transparent !important;
}

.pf-v5-c-menu__list-item:hover .pf-v5-c-menu__item,
.pf-v5-c-dropdown__menu-item:hover {
  background: #f4f4f5 !important;
  color: #1d3461 !important;
}

/* ── Modals ───────────────────────────────────────────────────── */
.pf-v5-c-modal-box {
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04) !important;
  color: #18181b !important;
}

.pf-v5-c-modal-box__header {
  background: #fafafa !important;
  border-bottom: 1px solid #e4e4e7 !important;
}

.pf-v5-c-modal-box__footer {
  background: #fafafa !important;
  border-top: 1px solid #e4e4e7 !important;
}

.pf-v5-c-backdrop { background: rgba(0,0,0,.3) !important; }

/* ── Spinner ──────────────────────────────────────────────────── */
.pf-v5-c-spinner { --pf-v5-c-spinner--Color: #1d3461 !important; }

/* Loading screen (index.ftl) */
.keycloak__loading-container {
  background: #f4f4f5 !important;
  color: #18181b !important;
}

.pf-v5-c-spinner.pf-m-xl .pf-v5-c-spinner__path { stroke: #1d3461 !important; }

/* ── Toggle / switch ──────────────────────────────────────────── */
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  background: #1d3461 !important;
  border-color: #1d3461 !important;
}

.pf-v5-c-switch__toggle { background: #d4d4d8 !important; }

/* ── Breadcrumbs ──────────────────────────────────────────────── */
.pf-v5-c-breadcrumb__item { color: #71717a !important; font-size: 13px !important; }
.pf-v5-c-breadcrumb__link { color: #1d3461 !important; }
.pf-v5-c-breadcrumb__link:hover { color: #243e78 !important; }

/* ── Links ────────────────────────────────────────────────────── */
a { color: #1d3461 !important; text-decoration: none; }
a:hover { color: #243e78 !important; text-decoration: underline; }

/* ── Scrollbars ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* ── Selection ────────────────────────────────────────────────── */
::selection { background: rgba(29,52,97,.12); }

/* ── Focus: kill browser defaults, use Proctor ring ──────────── */
/* Remove ALL default outlines globally */
*, *:focus, *:focus-within, *:focus-visible {
  outline: none !important;
}

/* Restore accessible focus ring only for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.pf-v5-c-button:focus-visible,
.pf-v5-c-nav__link:focus-visible,
.pf-v5-c-tabs__link:focus-visible,
.pf-v5-c-select__toggle:focus-visible,
.pf-v5-c-dropdown__toggle:focus-visible,
.pf-v5-c-menu__item:focus-visible {
  outline: 2px solid #1d3461 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(29,52,97,.1) !important;
}

/* Kill PF5 button ::after focus ring (uses border on ::after pseudo) */
.pf-v5-c-button {
  --pf-v5-c-button--after--BorderColor: transparent !important;
  --pf-v5-c-button--focus--after--BorderWidth: 0 !important;
}
.pf-v5-c-button::after { border-color: transparent !important; border-width: 0 !important; }

/* Kill PF5 nav link ::after focus border */
.pf-v5-c-nav__link:focus { outline: none !important; background: #f4f4f5 !important; }
.pf-v5-c-nav__link::after { display: none !important; }

/* Kill PF5 tabs ::before underline focus state */
.pf-v5-c-tabs__link:focus::before { display: none !important; }