/* ==========================================================================
   DarkUI — cyberpunk dark theme for Keycloak
   Extends keycloak.v2. Overrides PatternFly custom properties where possible
   so the change cascades, rather than fighting individual component classes.
   ========================================================================== */

:root {
  --du-bg:          #07080d;
  --du-bg-2:        #0d0f18;
  --du-surface:     #12141f;
  --du-surface-2:   #191c2b;
  --du-border:      #262b40;

  --du-cyan:        #00f0ff;
  --du-magenta:     #ff2e97;
  --du-violet:      #7c5cff;

  --du-text:        #e6e9f5;
  --du-text-dim:    #8b93b0;
  --du-text-faint:  #5a6180;

  --du-danger:      #ff3b5c;
  --du-success:     #00e5a0;

  --du-glow-cyan:   0 0 12px rgba(0, 240, 255, .35);
  --du-glow-mag:    0 0 12px rgba(255, 46, 151, .35);

  --du-radius:      10px;
  --du-mono:        ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
}

/* --- PatternFly global overrides ---------------------------------------- */
:root,
.pf-v5-c-page,
.pf-v5-c-login {
  --pf-v5-global--BackgroundColor--100: var(--du-surface);
  --pf-v5-global--BackgroundColor--200: var(--du-bg-2);
  --pf-v5-global--Color--100:           var(--du-text);
  --pf-v5-global--Color--200:           var(--du-text-dim);
  --pf-v5-global--link--Color:          var(--du-cyan);
  --pf-v5-global--link--Color--hover:   #7df9ff;
  --pf-v5-global--primary-color--100:   var(--du-violet);
  --pf-v5-global--BorderColor--100:     var(--du-border);
  --pf-v5-global--danger-color--100:    var(--du-danger);
  --pf-v5-global--success-color--100:   var(--du-success);
}

/* --- Page ---------------------------------------------------------------- */
html, body,
.login-pf, .login-pf body,
.pf-v5-c-background-image,
.pf-v5-c-login {
  background: var(--du-bg) !important;
  color: var(--du-text);
}

/* Ambient glow + faint grid. Fixed so it does not scroll with content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(124, 92, 255, .18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 105%, rgba(255, 46, 151, .12), transparent 70%),
    radial-gradient(ellipse 45% 40% at 12% 95%,  rgba(0, 240, 255, .10), transparent 70%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.016) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 44px);
}

.login-pf-page, .pf-v5-c-login__container { position: relative; z-index: 1; }

/* --- Card ---------------------------------------------------------------- */
.card-pf,
.pf-v5-c-login__main {
  position: relative;
  background: linear-gradient(180deg, var(--du-surface) 0%, #0f111b 100%) !important;
  border: 1px solid var(--du-border) !important;
  border-radius: var(--du-radius) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.6),
    0 0 0 1px rgba(124,92,255,.06),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
  overflow: hidden;
}

/* Neon hairline along the top edge — the single strongest cue, kept subtle. */
.card-pf::before,
.pf-v5-c-login__main::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--du-cyan) 22%, var(--du-violet) 50%, var(--du-magenta) 78%, transparent);
  opacity: .85;
}

/* --- Header / brand ------------------------------------------------------ */
#kc-header, #kc-header-wrapper,
.pf-v5-c-login__header { background: transparent !important; }

#kc-header-wrapper {
  padding: 26px 0 10px !important;
  font-family: var(--du-mono);
  font-size: 13px !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--du-text-dim) !important;
  text-shadow: 0 0 18px rgba(0,240,255,.25);
}

#kc-page-title,
.pf-v5-c-login__main-header-desc,
.pf-v5-c-title {
  color: var(--du-text) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

/* Logo — square PNG. Replace resources/img/logo.png with your own. */
.login-pf-brand,
.kc-logo-text {
  background-image: url('../img/logo.png') !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 76px !important;
  height: 76px !important;
  margin: 6px auto 14px !important;
  border-radius: 16px;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, .22));
}

/* Wordmark under the logo, since a square mark carries no name. */
.login-pf-page .login-pf-header::after,
#kc-header-wrapper::after {
  content: "DARKAUTH";
  display: block;
  margin-top: 2px;
  font-family: var(--du-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .34em;
  text-indent: 0;
  background: linear-gradient(90deg, var(--du-cyan), var(--du-violet) 55%, var(--du-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Labels -------------------------------------------------------------- */
label,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: var(--du-text-dim) !important;
  font-family: var(--du-mono);
  font-size: 11px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500 !important;
}

/* --- Inputs -------------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], select, textarea,
.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
  background: #0a0c14 !important;
  color: var(--du-text) !important;
  border: 1px solid var(--du-border) !important;
  border-radius: 8px !important;
  padding: 11px 13px !important;
  font-size: 14px !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: none !important;
}

input::placeholder { color: var(--du-text-faint) !important; }

input:hover, .pf-v5-c-form-control:hover { border-color: #33395c !important; }

input:focus, select:focus, textarea:focus,
.pf-v5-c-form-control:focus-within {
  outline: none !important;
  border-color: var(--du-cyan) !important;
  background: #0c0f19 !important;
  box-shadow: var(--du-glow-cyan), inset 0 0 0 1px rgba(0,240,255,.12) !important;
}

/* Kill Chrome's yellow autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--du-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #0a0c14 inset !important;
  caret-color: var(--du-text);
}

/* --- Buttons ------------------------------------------------------------- */
input[type="submit"], button[type="submit"],
.btn-primary, .pf-v5-c-button.pf-m-primary {
  position: relative;
  background: linear-gradient(135deg, var(--du-violet) 0%, var(--du-magenta) 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .04em;
  padding: 12px 18px !important;
  width: 100%;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 6px 22px rgba(124,92,255,.32), var(--du-glow-mag);
}

input[type="submit"]:hover, button[type="submit"]:hover,
.btn-primary:hover, .pf-v5-c-button.pf-m-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(124,92,255,.44), 0 0 20px rgba(255,46,151,.45);
}

input[type="submit"]:active, button[type="submit"]:active { transform: translateY(0); }

.btn-default, .pf-v5-c-button.pf-m-secondary, .pf-v5-c-button.pf-m-link {
  background: transparent !important;
  border: 1px solid var(--du-border) !important;
  color: var(--du-text-dim) !important;
  border-radius: 8px !important;
}
.btn-default:hover, .pf-v5-c-button.pf-m-secondary:hover {
  border-color: var(--du-cyan) !important;
  color: var(--du-cyan) !important;
  box-shadow: var(--du-glow-cyan);
}

/* --- Links --------------------------------------------------------------- */
a, .pf-v5-c-button.pf-m-link {
  color: var(--du-cyan) !important;
  text-decoration: none;
  transition: text-shadow .16s ease, color .16s ease;
}
a:hover { color: #7df9ff !important; text-shadow: 0 0 10px rgba(0,240,255,.5); }

/* --- Alerts -------------------------------------------------------------- */
.alert, .pf-v5-c-alert {
  border-radius: 8px !important;
  border: 1px solid var(--du-border) !important;
  background: var(--du-surface-2) !important;
  color: var(--du-text) !important;
}
.alert-error,   .pf-v5-c-alert.pf-m-danger  { border-left: 3px solid var(--du-danger)  !important; }
.alert-success, .pf-v5-c-alert.pf-m-success { border-left: 3px solid var(--du-success) !important; }
.alert-warning, .pf-v5-c-alert.pf-m-warning { border-left: 3px solid #ffb020 !important; }

/* --- Checkbox / misc ----------------------------------------------------- */
.checkbox label, #kc-form-options label { text-transform: none; letter-spacing: 0; font-family: inherit; }
#kc-info, #kc-info-wrapper { background: transparent !important; color: var(--du-text-dim) !important; }
hr { border-color: var(--du-border) !important; }

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==== ACCOUNT CONSOLE POLISH — managed by 07c, do not edit inline ==== */

/* --- Masthead ------------------------------------------------------------ */
.pf-v5-c-masthead, .pf-v6-c-masthead,
header.pf-v5-c-masthead, header.pf-v6-c-masthead {
  background: linear-gradient(180deg, #0a0c14 0%, #07080d 100%) !important;
  border-bottom: 1px solid var(--du-border) !important;
  box-shadow: 0 1px 0 rgba(124, 92, 255, .12);
}

/* Brand mark. content: url() replaces the <img> source in Blink and Gecko. */
.pf-v5-c-masthead__brand img, .pf-v6-c-masthead__brand img,
.pf-v5-c-brand, .pf-v6-c-brand,
header img[alt*="logo" i], header img[alt*="Keycloak" i] {
  content: url('../img/logo.png') !important;
  height: 30px !important;
  width: auto !important;
  max-width: none !important;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, .28));
}

/* --- Sidebar nav --------------------------------------------------------- */
.pf-v5-c-nav, .pf-v6-c-nav,
.pf-v5-c-page__sidebar, .pf-v6-c-page__sidebar,
.pf-v5-c-page__sidebar-body, .pf-v6-c-page__sidebar-body {
  background: #0a0c14 !important;
  border-right: 1px solid var(--du-border) !important;
}

/* Resting state: quiet. Only the active item earns the accent. */
.pf-v5-c-nav__link, .pf-v6-c-nav__link {
  color: var(--du-text-dim) !important;
  border-left: 2px solid transparent !important;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.pf-v5-c-nav__link:hover, .pf-v6-c-nav__link:hover {
  color: var(--du-text) !important;
  background: rgba(124, 92, 255, .07) !important;
  border-left-color: rgba(124, 92, 255, .45) !important;
}

.pf-v5-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v6-c-nav__item.pf-m-current > .pf-v6-c-nav__link,
.pf-v5-c-nav__link[aria-current], .pf-v6-c-nav__link[aria-current] {
  color: var(--du-cyan) !important;
  background: linear-gradient(90deg, rgba(0, 240, 255, .10), transparent 70%) !important;
  border-left-color: var(--du-cyan) !important;
  font-weight: 600 !important;
  text-shadow: 0 0 12px rgba(0, 240, 255, .35);
}

/* PatternFly draws its own current-item marker; ours replaces it. */
.pf-v5-c-nav__link::before, .pf-v6-c-nav__link::before { display: none !important; }

/* --- Content surfaces ---------------------------------------------------- */
.pf-v5-c-page__main, .pf-v6-c-page__main,
.pf-v5-c-page__main-section, .pf-v6-c-page__main-section {
  background: var(--du-bg) !important;
}

.pf-v5-c-card, .pf-v6-c-card,
.pf-v5-c-panel, .pf-v6-c-panel {
  background: var(--du-surface) !important;
  border: 1px solid var(--du-border) !important;
  border-radius: var(--du-radius) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45) !important;
}

/* --- Headings ------------------------------------------------------------ */
.pf-v5-c-title, .pf-v6-c-title, h1, h2, h3 {
  color: var(--du-text) !important;
  letter-spacing: -.01em;
}

.pf-v5-c-content--h2, .pf-v6-c-content--h2 { border-bottom: 1px solid var(--du-border); padding-bottom: 8px; }

/* --- Jump-to-section rail ------------------------------------------------ */
.pf-v5-c-jump-links__link.pf-m-current, .pf-v6-c-jump-links__link.pf-m-current {
  color: var(--du-cyan) !important;
}
.pf-v5-c-jump-links__list, .pf-v6-c-jump-links__list { border-color: var(--du-border) !important; }

/* --- Buttons and toggles ------------------------------------------------- */
.pf-v5-c-button.pf-m-primary, .pf-v6-c-button.pf-m-primary {
  background: linear-gradient(135deg, var(--du-violet), var(--du-magenta)) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(124, 92, 255, .3);
}
.pf-v5-c-button.pf-m-primary:hover, .pf-v6-c-button.pf-m-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 22px rgba(124, 92, 255, .45);
}

.pf-v5-c-switch__toggle, .pf-v6-c-switch__toggle { background: var(--du-border) !important; }
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle,
.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle {
  background: linear-gradient(135deg, var(--du-violet), var(--du-cyan)) !important;
}

/* --- Dropdowns / menus --------------------------------------------------- */
.pf-v5-c-menu, .pf-v6-c-menu,
.pf-v5-c-dropdown__menu, .pf-v6-c-dropdown__menu {
  background: var(--du-surface-2) !important;
  border: 1px solid var(--du-border) !important;
  border-radius: 8px !important;
}
.pf-v5-c-menu__list-item:hover, .pf-v6-c-menu__list-item:hover {
  background: rgba(124, 92, 255, .12) !important;
}

/* --- Tables -------------------------------------------------------------- */
.pf-v5-c-table, .pf-v6-c-table { background: transparent !important; color: var(--du-text) !important; }
.pf-v5-c-table thead, .pf-v6-c-table thead {
  font-family: var(--du-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--du-text-dim) !important;
}
.pf-v5-c-table tbody tr, .pf-v6-c-table tbody tr { border-bottom: 1px solid var(--du-border) !important; }

/* ==== END ACCOUNT CONSOLE POLISH ==== */