/* =============================================================
   NOIR — Account Console Theme  (PatternFly v5 override)
   Parent: keycloak.v3
   Strategy: override PF5 global CSS variables, then patch
             any structural elements that don't use variables.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

/* ── 1. Palette raw values ─────────────────────────────────── */
:root {
  /* Our brand colors */
  --noir-bg:           #12100c;
  --noir-surface:      #1c1710;
  --noir-surface-2:    #241e14;
  --noir-surface-3:    #2e2618;
  --noir-border:       rgba(180, 130, 60, 0.16);
  --noir-border-focus: rgba(195, 133, 47, 0.60);
  --noir-text:         #f0e6cc;
  --noir-text-muted:   #9e8a6a;
  --noir-text-subtle:  #5a4e38;
  --noir-accent:       #aa6c19;
  --noir-accent-h:     #c3852f;
  --noir-accent-p:     #95520c;
  --noir-accent-dim:   rgba(170, 108, 25, 0.16);
  --noir-danger:       #c0392b;
  --noir-danger-dim:   rgba(192, 57, 43, 0.14);
  --noir-success:      #5d9e4e;
  --noir-warning:      #c8860a;
}

/* ── 2. PatternFly v5 global variables ─────────────────────── */
:root,
.pf-v5-theme-dark,
[data-pf-theme="dark"] {
  /* Page / background */
  --pf-v5-global--BackgroundColor--100:         var(--noir-bg);
  --pf-v5-global--BackgroundColor--150:         var(--noir-surface);
  --pf-v5-global--BackgroundColor--200:         var(--noir-surface-2);
  --pf-v5-global--BackgroundColor--dark-100:    var(--noir-bg);
  --pf-v5-global--BackgroundColor--dark-200:    var(--noir-surface);
  --pf-v5-global--BackgroundColor--dark-300:    var(--noir-surface-2);
  --pf-v5-global--BackgroundColor--dark-400:    var(--noir-surface-3);

  /* Primary color (buttons, links, active states) */
  --pf-v5-global--primary-color--100:           var(--noir-accent);
  --pf-v5-global--primary-color--200:           var(--noir-accent-h);
  --pf-v5-global--active-color--100:            var(--noir-accent);
  --pf-v5-global--active-color--400:            var(--noir-accent-dim);
  --pf-v5-global--primary-color--dark-100:      var(--noir-accent);

  /* Links */
  --pf-v5-global--link--Color:                  var(--noir-accent-h);
  --pf-v5-global--link--Color--dark:            var(--noir-accent-h);
  --pf-v5-global--link--Color--hover:           var(--noir-accent);
  --pf-v5-global--link--Color--dark--hover:     var(--noir-accent);

  /* Borders */
  --pf-v5-global--BorderColor--100:             rgba(180, 130, 60, 0.22);
  --pf-v5-global--BorderColor--200:             rgba(180, 130, 60, 0.14);
  --pf-v5-global--BorderColor--300:             rgba(180, 130, 60, 0.08);
  --pf-v5-global--BorderColor--dark-100:        rgba(180, 130, 60, 0.22);

  /* Text */
  --pf-v5-global--Color--100:                   var(--noir-text);
  --pf-v5-global--Color--200:                   var(--noir-text-muted);
  --pf-v5-global--Color--300:                   var(--noir-text-subtle);
  --pf-v5-global--Color--dark-100:              var(--noir-text);
  --pf-v5-global--Color--dark-200:              var(--noir-text-muted);
  --pf-v5-global--Color--light-100:             var(--noir-text);
  --pf-v5-global--Color--light-200:             var(--noir-text-muted);
  --pf-v5-global--Color--light-300:             var(--noir-text-subtle);

  /* Semantic */
  --pf-v5-global--danger-color--100:            var(--noir-danger);
  --pf-v5-global--danger-color--200:            #e05a4a;
  --pf-v5-global--success-color--100:           var(--noir-success);
  --pf-v5-global--warning-color--100:           var(--noir-warning);
  --pf-v5-global--info-color--100:              var(--noir-accent-h);

  /* Form / input */
  --pf-v5-global--FormControl--BackgroundColor: var(--noir-surface-2);

  /* Focus ring */
  --pf-v5-global--focus-ring--Color:            var(--noir-accent);
  --pf-v5-global--focus-ring--BoxShadow:        0 0 0 3px rgba(170,108,25,0.30);

  /* Box shadow */
  --pf-v5-global--BoxShadow--sm:                0 2px 8px rgba(0,0,0,0.45);
  --pf-v5-global--BoxShadow--md:                0 6px 20px rgba(0,0,0,0.55);
  --pf-v5-global--BoxShadow--lg:                0 16px 36px rgba(0,0,0,0.65);
}

/* ── 3. Font override ───────────────────────────────────────── */
html,
body,
.pf-v5-c-page,
.pf-v5-c-nav,
.pf-v5-c-card,
.pf-v5-c-form,
.pf-v5-c-button {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* ── 4. Page shell ──────────────────────────────────────────── */
html, body {
  background: var(--noir-bg) !important;
  color: var(--noir-text) !important;
  -webkit-font-smoothing: antialiased;
}

.pf-v5-c-page {
  background: var(--noir-bg) !important;
}

/* ── 5. Masthead / top nav ──────────────────────────────────── */
.pf-v5-c-masthead,
.pf-v5-c-page__header {
  background: var(--noir-surface) !important;
  border-bottom: 1px solid var(--noir-border) !important;
  box-shadow: 0 1px 0 rgba(180,130,60,0.10) !important;
}

.pf-v5-c-masthead__brand,
.pf-v5-c-brand {
  filter: brightness(0.9) sepia(0.2) !important;
}

.pf-v5-c-masthead__brand img {
  display: none;
}

.pf-v5-c-masthead__brand {
  background: url('../img/ek_logo.png') no-repeat left center;
  background-size: contain;
  width: 140px;
  height: 32px;
}

/* ── 6. Sidebar / nav ───────────────────────────────────────── */
.pf-v5-c-page__sidebar,
.pf-v5-c-nav {
  background: var(--noir-surface) !important;
  border-right: 1px solid var(--noir-border) !important;
}

.pf-v5-c-nav__item,
.pf-v5-c-nav__link {
  color: var(--noir-text-muted) !important;
  font-size: 14px !important;
}

.pf-v5-c-nav__link:hover {
  background: var(--noir-surface-2) !important;
  color: var(--noir-text) !important;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current] {
  background: rgba(170, 108, 25, 0.14) !important;
  color: var(--noir-accent-h) !important;
  border-left: 3px solid var(--noir-accent) !important;
  font-weight: 500 !important;
}

/* hide applications (keycloak clients) link */
.pf-v5-c-nav__link[href*="applications"] {
  display: none !important;
}

[data-testid="applications-page"] {
  display: none !important;
}

/* hide admin console link */
a[href*="/admin"] {
  display: none !important;
}

/* ── 7. Page main content ───────────────────────────────────── */
.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  background: var(--noir-surface) !important;
}

.pf-v5-c-page__main-section.pf-m-light {
  background: var(--noir-surface) !important;
  border-bottom: 1px solid var(--noir-border) !important;
}

.pf-v5-c-jump-links {
  display: none;
}

/* ── 8. Cards ───────────────────────────────────────────────── */
.pf-v5-c-card {
  background: var(--noir-surface) !important;
  border: 1px solid var(--noir-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

.pf-v5-c-card__header {
  border-bottom: 1px solid var(--noir-border) !important;
}

.pf-v5-c-card__title {
  color: var(--noir-text) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

/* ── 9. Form inputs ─────────────────────────────────────────── */
.pf-v5-c-form-control,
.pf-v5-c-form-control input,
input.pf-v5-c-form-control {
  background: var(--noir-surface-2) !important;
  border-color: var(--noir-border) !important;
  color: var(--noir-text) !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within {
  border-color: var(--noir-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(170,108,25,0.18) !important;
}

.pf-v5-c-form__label-text {
  color: var(--noir-text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.pf-v5-c-form__helper-text {
  color: var(--noir-text-subtle) !important;
  font-size: 12px !important;
}

/* ── 10. Buttons ────────────────────────────────────────────── */
.pf-v5-c-button.pf-m-primary {
  background: var(--noir-accent) !important;
  border-color: var(--noir-accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  box-shadow: 0 3px 14px rgba(170,108,25,0.28) !important;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: var(--noir-accent-h) !important;
  border-color: var(--noir-accent-h) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 20px rgba(170,108,25,0.38) !important;
}

.pf-v5-c-button.pf-m-primary:active {
  background: var(--noir-accent-p) !important;
  border-color: var(--noir-accent-p) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.pf-v5-c-button.pf-m-secondary {
  border-color: var(--noir-border) !important;
  color: var(--noir-text-muted) !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background: var(--noir-surface-2) !important;
  border-color: var(--noir-border-focus) !important;
  color: var(--noir-text) !important;
}

.pf-v5-c-button.pf-m-link {
  color: var(--noir-accent-h) !important;
}

.pf-v5-c-button.pf-m-link:hover {
  color: var(--noir-accent) !important;
}

.pf-v5-c-button.pf-m-danger {
  background: var(--noir-danger) !important;
  border-color: var(--noir-danger) !important;
  border-radius: 8px !important;
}

/* ── 11. Alerts ─────────────────────────────────────────────── */
.pf-v5-c-alert.pf-m-danger {
  background: var(--noir-danger-dim) !important;
  border-color: rgba(192,57,43,0.25) !important;
  color: #e05a4a !important;
}

.pf-v5-c-alert.pf-m-success {
  background: rgba(93,158,78,0.10) !important;
  border-color: rgba(93,158,78,0.25) !important;
  color: #6dbe5e !important;
}

.pf-v5-c-alert.pf-m-warning {
  background: rgba(200,134,10,0.10) !important;
  border-color: rgba(200,134,10,0.25) !important;
  color: var(--noir-warning) !important;
}

.pf-v5-c-alert.pf-m-info {
  background: var(--noir-accent-dim) !important;
  border-color: rgba(170,108,25,0.25) !important;
  color: var(--noir-accent-h) !important;
}

/* ── 12. Tabs ───────────────────────────────────────────────── */
.pf-v5-c-tabs__link {
  color: var(--noir-text-muted) !important;
  background: transparent !important;
  border-color: var(--noir-border) !important;
}

.pf-v5-c-tabs__link:hover {
  color: var(--noir-text) !important;
}

.pf-v5-c-tabs__link.pf-m-current,
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  color: var(--noir-accent-h) !important;
  border-bottom-color: var(--noir-accent) !important;
  font-weight: 500 !important;
}

.pf-v5-c-tabs {
  border-bottom: 1px solid var(--noir-border) !important;
}

/* ── 13. Dropdown / Select ──────────────────────────────────── */
.pf-v5-c-dropdown__menu,
.pf-v5-c-select__menu,
.pf-v5-c-menu {
  background: var(--noir-surface) !important;
  border: 1px solid var(--noir-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  border-radius: 8px !important;
}

.pf-v5-c-dropdown__menu-item,
.pf-v5-c-select__menu-item,
.pf-v5-c-menu__item {
  color: var(--noir-text-muted) !important;
}

.pf-v5-c-dropdown__menu-item:hover,
.pf-v5-c-select__menu-item:hover,
.pf-v5-c-menu__item:hover {
  background: var(--noir-surface-2) !important;
  color: var(--noir-text) !important;
}

/* ── 14. Table ──────────────────────────────────────────────── */
.pf-v5-c-table {
  background: var(--noir-surface) !important;
  border: 1px solid var(--noir-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.pf-v5-c-table thead th,
.pf-v5-c-table__th {
  background: var(--noir-surface-2) !important;
  color: var(--noir-text-subtle) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--noir-border) !important;
}

.pf-v5-c-table__td {
  color: var(--noir-text-muted) !important;
  border-bottom: 1px solid rgba(180,130,60,0.08) !important;
}

.pf-v5-c-table tr:hover td {
  background: var(--noir-surface-2) !important;
}

/* ── 15. Divider ────────────────────────────────────────────── */
.pf-v5-c-divider {
  background: var(--noir-border) !important;
}

/* ── 16. Chip / badge ───────────────────────────────────────── */
.pf-v5-c-chip {
  background: var(--noir-surface-2) !important;
  border-color: var(--noir-border) !important;
  color: var(--noir-text-muted) !important;
  border-radius: 6px !important;
}

.pf-v5-c-badge {
  background: rgba(170,108,25,0.18) !important;
  color: var(--noir-accent-h) !important;
}

/* ── 17. Spinner ────────────────────────────────────────────── */
.pf-v5-c-spinner__clipper,
.pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: var(--noir-accent) !important;
}

/* ── 18. Modal ──────────────────────────────────────────────── */
.pf-v5-c-modal-box {
  background: var(--noir-surface) !important;
  border: 1px solid var(--noir-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7) !important;
}

.pf-v5-c-modal-box__header {
  border-bottom: 1px solid var(--noir-border) !important;
}

.pf-v5-c-modal-box__footer {
  border-top: 1px solid var(--noir-border) !important;
}

/* ── 19. Backdrop ───────────────────────────────────────────── */
.pf-v5-c-backdrop {
  background: rgba(10, 8, 5, 0.75) !important;
  backdrop-filter: blur(3px) !important;
}

/* ── 20. Empty state ────────────────────────────────────────── */
.pf-v5-c-empty-state__icon {
  color: var(--noir-accent) !important;
}

.pf-v5-c-empty-state__title {
  color: var(--noir-text) !important;
}

.pf-v5-c-empty-state__body {
  color: var(--noir-text-muted) !important;
}

/* ── 21. Pagination ─────────────────────────────────────────── */
.pf-v5-c-pagination__nav-control .pf-v5-c-button:hover {
  background: var(--noir-surface-2) !important;
}

/* ── 22. Switch / Toggle ────────────────────────────────────── */
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  background: var(--noir-accent) !important;
}

.pf-v5-c-switch__toggle {
  background: var(--noir-surface-3) !important;
  border-color: var(--noir-border) !important;
}

/* ── 23. Notification drawer ────────────────────────────────── */
.pf-v5-c-notification-drawer {
  background: var(--noir-surface) !important;
  border-left: 1px solid var(--noir-border) !important;
}

/* ── 24. Breadcrumb ─────────────────────────────────────────── */
.pf-v5-c-breadcrumb__item {
  color: var(--noir-text-muted) !important;
}

.pf-v5-c-breadcrumb__link {
  color: var(--noir-accent-h) !important;
}

/* ── 25. Page title & heading ───────────────────────────────── */
.pf-v5-c-title,
h1, h2, h3, h4 {
  color: var(--noir-text) !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── Toolbar ────────────────────────────────────────── */
.pf-v5-c-toolbar {
  background: var(--noir-surface) !important;
}

/* ── 26. Code / Mono ────────────────────────────────────────── */
code, pre, kbd,
.pf-v5-c-code-block {
  font-family: 'DM Mono', monospace !important;
  background: var(--noir-surface-3) !important;
  color: var(--noir-text-muted) !important;
  border: 1px solid var(--noir-border) !important;
  border-radius: 6px !important;
}

/* ── 27. Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--noir-bg); }
::-webkit-scrollbar-thumb { background: var(--noir-surface-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--noir-border-focus); }

/* ── 28. Selection ──────────────────────────────────────────── */
::selection {
  background: rgba(170,108,25,0.30);
  color: var(--noir-text);
}