/*
 * CyberCursor sign-in theme (Keycloak 26.8 login, keycloak.v2 templates).
 *
 * PatternFly is not loaded. This file is the whole stylesheet: the console design tokens
 * (copied from web/src/ui/tokens.css, values unchanged) plus styles for every pf-v5 class
 * the inherited templates emit, so pages we do not override still match the console.
 */

:root {
  --cc-gray-0: #ffffff;
  --cc-gray-25: #fafbfc;
  --cc-gray-50: #f7f8fa;
  --cc-gray-75: #f3f5f8;
  --cc-gray-100: #edf0f4;
  --cc-gray-150: #e3e7ee;
  --cc-gray-200: #d3d9e2;
  --cc-gray-400: #8a94a6;
  --cc-gray-500: #7d8799;
  --cc-gray-600: #5f6a7d;
  --cc-gray-700: #4b5567;
  --cc-gray-900: #141b27;
  --cc-ink-950: #0c1525;
  --cc-ink-900: #111b2e;
  --cc-ink-850: #17223a;
  --cc-ink-800: #1e2b47;
  --cc-ink-text: #a9b4c6;
  --cc-ink-text-strong: #d5dce7;
  --cc-ink-text-muted: #7887a0;
  --cc-cobalt-50: #eef2fb;
  --cc-cobalt-200: #b6c8f0;
  --cc-cobalt-500: #3d6bdb;
  --cc-cobalt-600: #2350c2;
  --cc-cobalt-700: #1c43a6;
  --cc-cobalt-800: #183a8e;

  --cc-bg-surface: var(--cc-gray-0);
  --cc-bg-subtle: var(--cc-gray-50);
  --cc-bg-hover: #f2f4f7;
  --cc-text-primary: var(--cc-gray-900);
  --cc-text-secondary: var(--cc-gray-700);
  --cc-text-muted: var(--cc-gray-600);
  --cc-text-placeholder: var(--cc-gray-500);
  --cc-text-link: var(--cc-cobalt-600);
  --cc-text-link-hover: var(--cc-cobalt-700);
  --cc-border-subtle: var(--cc-gray-150);
  --cc-border-default: var(--cc-gray-200);
  --cc-border-strong: var(--cc-gray-400);
  --cc-border-focus: var(--cc-cobalt-500);
  --cc-accent: var(--cc-cobalt-600);
  --cc-accent-hover: var(--cc-cobalt-700);
  --cc-accent-active: var(--cc-cobalt-800);

  --cc-success-solid: #1b7a44;
  --cc-success-text: #17693a;
  --cc-success-bg: #ebf6ef;
  --cc-success-border: #c3e3cf;
  --cc-warning-solid: #e2a21f;
  --cc-warning-text: #7a4e00;
  --cc-warning-bg: #fcf3dd;
  --cc-warning-border: #f1dca6;
  --cc-danger-solid: #c42f37;
  --cc-danger-text: #a3232b;
  --cc-danger-bg: #fcedee;
  --cc-danger-border: #f0c3c6;
  --cc-info-text: #1f4aa8;
  --cc-info-bg: #edf2fc;
  --cc-info-border: #c6d5f3;

  --cc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cc-radius-2: 4px;
  --cc-radius-3: 6px;
  --cc-focus-ring: 0 0 0 2px var(--cc-bg-surface), 0 0 0 4px var(--cc-border-focus);
  --cc-duration: 160ms;
  --cc-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Sign-in sizing: one step up from the console's dense 13px/36px scale. */
  --cc-signin-control: 40px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --cc-duration: 0ms; }
}

/* ===================================================================== Base */

*, *::before, *::after { box-sizing: border-box; }

html.cc-signin-html, body.cc-signin { margin: 0; min-height: 100%; }

body.cc-signin {
  background: var(--cc-bg-surface);
  color: var(--cc-text-primary);
  font-family: var(--cc-font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Zero-specificity resets, so component spacing below always wins. */
:where(.cc-signin) :where(h1, h2, p, ol, ul, fieldset) { margin: 0; }
:where(.cc-signin) fieldset { padding: 0; border: 0; min-width: 0; }
:where(.cc-signin) img { display: block; max-width: 100%; }

:where(.cc-signin) a { color: var(--cc-text-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
:where(.cc-signin) a:hover { color: var(--cc-text-link-hover); text-decoration-color: currentColor; }
.cc-signin a:focus-visible, .cc-signin button:focus-visible, .cc-signin select:focus-visible { outline: none; box-shadow: var(--cc-focus-ring); border-radius: var(--cc-radius-2); }

.cc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cc-svg { flex: none; width: 16px; height: 16px; }

/* Console icon set as masks, so properties-driven <i> icons need no icon font. */
.cc-glyph {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--cc-glyph) center / contain no-repeat;
  mask: var(--cc-glyph) center / contain no-repeat;
}
.cc-glyph--eye { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.cc-glyph--eye-off { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 5.7A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-2.7 3.4M14.1 14.2a3 3 0 0 1-4.3-4.3M6.6 6.7C4 8.4 2.5 12 2.5 12S6 18.5 12 18.5a9.4 9.4 0 0 0 5.3-1.6M3.5 3.5l17 17'/%3E%3C/svg%3E"); }
.cc-glyph--alert { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E"); }
.cc-glyph--warning { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.8 17.5a2 2 0 0 0 1.7 3h15a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E"); }
.cc-glyph--check { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.cc-glyph--info { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E"); }
.cc-glyph--phone { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 17.5h2'/%3E%3C/svg%3E"); }
.cc-glyph--key { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M16.5 6.5l3 3M14.5 8.5l2 2'/%3E%3C/svg%3E"); }
.cc-glyph--copy { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11.5' height='11.5' rx='1.5'/%3E%3Cpath d='M15.5 8.5V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v9.5a1 1 0 0 0 1 1h3.5'/%3E%3C/svg%3E"); }
.cc-glyph--chevron-right { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.cc-glyph--chevron-down { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.cc-glyph--refresh { --cc-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10.5A7.5 7.5 0 0 0 6.2 7L4.5 8.8M4.5 4.5v4.3h4.3M4.5 13.5A7.5 7.5 0 0 0 17.8 17l1.7-1.8M19.5 19.5v-4.3h-4.3'/%3E%3C/svg%3E"); }

/* =================================================================== Layout */

.cc-signin__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.cc-signin__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 40px 24px;
  background: var(--cc-bg-surface);
}

.cc-signin__header { display: flex; align-items: center; min-height: 36px; }
.cc-signin__logo { width: 148px; height: auto; }

.cc-signin__content {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 48px 0 40px;
}

.cc-signin__panel { width: 100%; max-width: 384px; }

.cc-signin__step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--cc-text-muted);
  font-size: 12px;
  line-height: 16px;
}
.cc-signin__step-track { display: inline-flex; gap: 4px; }
.cc-signin__step-track span { width: 20px; height: 3px; border-radius: 2px; background: var(--cc-gray-150); }
.cc-signin__step-track span.is-done { background: var(--cc-accent); }

.cc-signin__title {
  color: var(--cc-text-primary);
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.015em;
}

.cc-signin__subtitle {
  margin-top: 8px;
  color: var(--cc-text-muted);
  font-size: 14px;
  line-height: 21px;
}

.cc-signin__required { margin-top: 12px; color: var(--cc-text-muted); font-size: 12px; }
.cc-signin__locale { margin-top: 16px; }

.cc-signin__form { margin-top: 28px; }
.cc-identity + .cc-signin__form, .cc-alert + .cc-signin__form { margin-top: 20px; }

.cc-signin__alternate { margin-top: 12px; }
.cc-signin__info { margin-top: 20px; color: var(--cc-text-muted); }

.cc-signin__help {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--cc-border-subtle);
  color: var(--cc-text-muted);
  font-size: 13px;
  line-height: 19px;
}

.cc-signin__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--cc-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.cc-signin__notice { display: flex; gap: 8px; max-width: 420px; }
.cc-signin__notice .cc-svg { width: 14px; height: 14px; margin-top: 2px; color: var(--cc-gray-500); }

.cc-signin__links { display: flex; gap: 16px; }
.cc-signin .cc-signin__links a { color: var(--cc-text-muted); text-decoration: none; }
.cc-signin .cc-signin__links a:hover { color: var(--cc-text-primary); text-decoration: underline; }

/* The product panel is decorative context; it only appears when there is room for it,
   and the screenshot is a CSS background so narrow windows never download it. */
.cc-signin__aside { display: none; }

@media (min-width: 1080px) {
  .cc-signin__layout { grid-template-columns: minmax(520px, 5fr) minmax(0, 7fr); }
  .cc-signin__main { padding: 32px 56px 28px; }

  .cc-signin__aside {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    overflow: hidden;
    padding: clamp(48px, 9vh, 96px) 0 0 clamp(48px, 5vw, 80px);
    background-color: var(--cc-ink-950);
    background-image:
      linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
    color: var(--cc-ink-text);
    border-left: 1px solid var(--cc-ink-800);
  }

  .cc-signin__aside-copy { max-width: 470px; padding-right: 48px; }

  .cc-signin__aside-title {
    color: var(--cc-gray-0);
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.02em;
  }

  .cc-signin__aside-text {
    margin-top: 14px;
    color: var(--cc-ink-text);
    font-size: 15px;
    line-height: 23px;
  }

  .cc-signin__shot {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    margin-top: clamp(36px, 6vh, 56px);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-right: 0;
    border-bottom: 0;
    border-radius: 10px 0 0 0;
    background: var(--cc-bg-surface);
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.42), 0 2px 8px rgb(0 0 0 / 0.24);
  }

  .cc-signin__shot-bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    background: var(--cc-ink-900);
    border-bottom: 1px solid var(--cc-ink-800);
  }
  .cc-signin__shot-bar > span:not(.cc-signin__shot-url) { width: 9px; height: 9px; border-radius: 50%; background: var(--cc-ink-800); }
  .cc-signin__shot-url {
    margin-left: 14px;
    padding: 2px 10px;
    border-radius: 4px;
    background: var(--cc-ink-850);
    color: var(--cc-ink-text-muted);
    font-size: 11px;
    line-height: 16px;
  }

  .cc-signin__shot-image {
    flex: 1;
    min-height: 0;
    background-color: var(--cc-bg-surface);
    background-image: url("../img/console-devices-1x.webp");
    background-image: image-set(url("../img/console-devices-1x.webp") 1x, url("../img/console-devices-2x.webp") 2x);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 1440px auto;
  }

}

@media (max-width: 560px) {
  .cc-signin__main { padding: 20px 20px 20px; }
  .cc-signin__content { align-items: flex-start; padding: 40px 0 32px; }
  .cc-signin__title { font-size: 24px; line-height: 30px; }
  .cc-signin__footer { flex-direction: column; }
}

/* ===================================================================== Forms */

.pf-v5-c-form { display: grid; gap: 18px; }
.pf-v5-c-form__group { display: grid; gap: 6px; min-width: 0; }
.pf-v5-c-form__group-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.pf-v5-c-form__label {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--cc-text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}
.pf-v5-c-form__label-required, .pf-v5-c-check__label-required { color: var(--cc-danger-text); }

/* Text inputs: the wrapper span is the visible box so status icons can sit inside it. */
.pf-v5-c-form-control {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--cc-signin-control);
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-2);
  background: var(--cc-bg-surface);
  transition: border-color var(--cc-duration) var(--cc-ease), box-shadow var(--cc-duration) var(--cc-ease);
}
.pf-v5-c-form-control:hover { border-color: var(--cc-gray-600); }
.pf-v5-c-form-control:focus-within { border-color: var(--cc-border-focus); box-shadow: 0 0 0 3px rgb(61 107 219 / 0.18); }
.pf-v5-c-form-control.pf-m-error { border-color: var(--cc-danger-solid); }
.pf-v5-c-form-control.pf-m-error:focus-within { box-shadow: 0 0 0 3px rgb(196 47 55 / 0.16); }
.pf-v5-c-form-control.pf-m-readonly { background: var(--cc-bg-subtle); border-color: var(--cc-border-default); }

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea,
.cc-signin input.pf-v5-c-form-control {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: inherit;
  outline: none;
  background: transparent;
  color: var(--cc-text-primary);
  font: inherit;
  font-size: 14px;
}
.pf-v5-c-form-control > textarea { padding: 10px 12px; }
.pf-v5-c-form-control input::placeholder { color: var(--cc-text-placeholder); }
.pf-v5-c-form-control input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--cc-bg-surface) inset; -webkit-text-fill-color: var(--cc-text-primary); }

.pf-v5-c-form-control__utilities { display: flex; align-items: center; padding-right: 12px; color: var(--cc-danger-solid); pointer-events: none; }
.pf-v5-c-form-control__icon { display: inline-flex; }

/* Input groups (password + visibility toggle) read as one control. */
.pf-v5-c-input-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-2);
  background: var(--cc-bg-surface);
  transition: border-color var(--cc-duration) var(--cc-ease), box-shadow var(--cc-duration) var(--cc-ease);
}
.pf-v5-c-input-group:hover { border-color: var(--cc-gray-600); }
.pf-v5-c-input-group:focus-within { border-color: var(--cc-border-focus); box-shadow: 0 0 0 3px rgb(61 107 219 / 0.18); }
.pf-v5-c-input-group:has(.pf-m-error) { border-color: var(--cc-danger-solid); }
.pf-v5-c-input-group__item { display: flex; min-width: 0; }
.pf-v5-c-input-group__item.pf-m-fill { flex: 1; }
.pf-v5-c-input-group .pf-v5-c-form-control { flex: 1; height: calc(var(--cc-signin-control) - 2px); border: 0; box-shadow: none; }

.pf-v5-c-button.pf-m-control {
  width: 42px;
  height: calc(var(--cc-signin-control) - 2px);
  padding: 0;
  border: 0;
  border-left: 1px solid var(--cc-border-subtle);
  border-radius: 0 var(--cc-radius-2) var(--cc-radius-2) 0;
  background: transparent;
  color: var(--cc-text-muted);
}
.pf-v5-c-button.pf-m-control:hover { background: var(--cc-bg-hover); color: var(--cc-text-primary); }
.pf-v5-c-input-group__item:first-child .pf-v5-c-button.pf-m-control { border-left: 0; border-right: 1px solid var(--cc-border-subtle); border-radius: var(--cc-radius-2) 0 0 var(--cc-radius-2); }

/* Helper and error text. */
.pf-v5-c-form__helper-text:empty, .pf-v5-c-helper-text:empty { display: none; }
.pf-v5-c-helper-text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; line-height: 18px; }
.pf-v5-c-helper-text__item { display: flex; align-items: flex-start; gap: 6px; color: var(--cc-text-muted); }
.pf-v5-c-helper-text__item.pf-m-error, .pf-v5-c-helper-text__item-text.pf-m-error, .kc-feedback-text.pf-m-error, [id^="input-error"] { color: var(--cc-danger-text); }
[id^="input-error-container"] .pf-v5-c-helper-text__item.pf-m-error::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The status icon inside the field already marks the error; the message line carries the words. */
.pf-v5-c-form-control.pf-m-error .pf-v5-c-form-control__utilities { display: none; }

.pf-v5-c-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cc-text-secondary); }
.pf-v5-c-check__input { width: 16px; height: 16px; margin: 0; accent-color: var(--cc-accent); }
.pf-v5-c-check label.pf-v5-c-check { cursor: pointer; }

.cc-select, .pf-v5-c-form-control > select { appearance: auto; }

/* ================================================================== Buttons */

.pf-v5-c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cc-signin-control);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--cc-radius-2);
  background: transparent;
  color: var(--cc-text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--cc-duration) var(--cc-ease), border-color var(--cc-duration) var(--cc-ease), color var(--cc-duration) var(--cc-ease);
}
.cc-signin a.pf-v5-c-button { text-decoration: none; }
.pf-v5-c-button.pf-m-block { display: flex; width: 100%; }

.pf-v5-c-button.pf-m-primary { background: var(--cc-accent); color: var(--cc-gray-0); box-shadow: 0 1px 2px rgb(12 21 37 / 0.12); }
.pf-v5-c-button.pf-m-primary:hover { background: var(--cc-accent-hover); color: var(--cc-gray-0); }
.pf-v5-c-button.pf-m-primary:active { background: var(--cc-accent-active); }

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary { border-color: var(--cc-border-default); background: var(--cc-bg-surface); color: var(--cc-text-primary); }
.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-tertiary:hover { border-color: var(--cc-gray-400); background: var(--cc-bg-hover); color: var(--cc-text-primary); }

.pf-v5-c-button.pf-m-link { min-height: 0; padding: 0; color: var(--cc-text-link); font-weight: 500; }
.pf-v5-c-button.pf-m-link:hover { color: var(--cc-text-link-hover); text-decoration: underline; }

/* Templates disable the submit button on submit; show that the request is in flight. */
.pf-v5-c-button:disabled, .pf-v5-c-button[aria-disabled="true"], .pf-v5-c-button.pf-m-aria-disabled { cursor: progress; }
.pf-v5-c-button.pf-m-primary:disabled { background: var(--cc-accent-hover); }
.pf-v5-c-button.pf-m-primary:disabled::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: var(--cc-gray-0);
  border-radius: 50%;
  animation: cc-spin 700ms linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

.pf-v5-c-form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.pf-v5-c-form__actions > .pf-v5-c-button { flex: 1 1 auto; }

/* =================================================================== Alerts */

.cc-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 12px;
  border: 1px solid var(--cc-info-border);
  border-radius: var(--cc-radius-3);
  background: var(--cc-info-bg);
  color: var(--cc-info-text);
  font-size: 13px;
  line-height: 19px;
}
.cc-alert .cc-svg { margin-top: 1px; }
.cc-alert--danger { border-color: var(--cc-danger-border); background: var(--cc-danger-bg); color: var(--cc-danger-text); }
.cc-alert--warning { border-color: var(--cc-warning-border); background: var(--cc-warning-bg); color: var(--cc-warning-text); }
/* Required-action prompts (set up an authenticator, change a password) arrive as warnings;
   they are expected steps, so they read as information rather than a problem. */
body[data-page-id="login-login-config-totp"] .cc-alert--warning,
body[data-page-id="login-login-update-password"] .cc-alert--warning,
body[data-page-id="login-login-update-profile"] .cc-alert--warning { border-color: var(--cc-info-border); background: var(--cc-info-bg); color: var(--cc-info-text); }
.cc-alert--success { border-color: var(--cc-success-border); background: var(--cc-success-bg); color: var(--cc-success-text); }

/* Inherited alert markup (recovery codes, WebAuthn) maps onto the same look. */
.pf-v5-c-alert { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--cc-info-border); border-radius: var(--cc-radius-3); background: var(--cc-info-bg); color: var(--cc-info-text); font-size: 13px; }
.pf-v5-c-alert.pf-m-warning { border-color: var(--cc-warning-border); background: var(--cc-warning-bg); color: var(--cc-warning-text); }
.pf-v5-c-alert.pf-m-danger { border-color: var(--cc-danger-border); background: var(--cc-danger-bg); color: var(--cc-danger-text); }
.pf-v5-c-alert__title { margin: 0; font-size: 13px; font-weight: 600; }

/* ============================================================ Account chip */

.cc-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 10px 12px;
  border: 1px solid var(--cc-border-default);
  border-radius: var(--cc-radius-3);
  background: var(--cc-bg-subtle);
}
.cc-identity__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cc-ink-800);
  color: var(--cc-gray-0);
  font-size: 13px;
  font-weight: 600;
}
.cc-identity__text { display: grid; flex: 1; min-width: 0; }
.cc-identity__label { color: var(--cc-text-muted); font-size: 12px; line-height: 16px; }
.cc-identity__name { overflow: hidden; color: var(--cc-text-primary); font-size: 14px; font-weight: 600; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.cc-signin .cc-identity__switch { flex: none; font-size: 13px; font-weight: 500; text-decoration: none; }
.cc-signin .cc-identity__switch:hover { text-decoration: underline; }

/* ======================================================= Authenticator code */

.cc-otp .pf-v5-c-form-control { height: 48px; }
.cc-otp #otp {
  padding: 0 14px;
  font-family: var(--cc-font-mono);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.32em;
}
.cc-otp #otp::placeholder { letter-spacing: 0.32em; }

.cc-otp__devices { display: grid; gap: 8px; }
.cc-otp__devices legend { margin-bottom: 6px; }

.pf-v5-c-tile {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cc-border-default);
  border-radius: var(--cc-radius-3);
  background: var(--cc-bg-surface);
  color: var(--cc-text-primary);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.pf-v5-c-tile:hover { border-color: var(--cc-gray-400); }
.pf-v5-c-tile.pf-m-selected { border-color: var(--cc-accent); background: var(--cc-cobalt-50); box-shadow: inset 0 0 0 1px var(--cc-accent); }
.pf-v5-c-tile__header { display: flex; align-items: center; gap: 10px; }
.pf-v5-c-tile__icon { display: inline-flex; color: var(--cc-text-muted); }
.pf-v5-c-tile__title { font-size: 14px; font-weight: 500; }

/* ================================================== Authenticator setup page */

#kc-totp-settings { display: grid; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: cc-step; }
#kc-totp-settings > li { position: relative; padding-left: 36px; counter-increment: cc-step; color: var(--cc-text-secondary); }
#kc-totp-settings > li::before {
  content: counter(cc-step);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--cc-border-default);
  border-radius: 50%;
  background: var(--cc-bg-subtle);
  color: var(--cc-text-primary);
  font-size: 12px;
  font-weight: 600;
}
#kc-totp-settings p + p { margin-top: 6px; }
#kc-totp-supported-apps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
#kc-totp-supported-apps li { padding: 2px 10px; border: 1px solid var(--cc-border-default); border-radius: 999px; background: var(--cc-bg-subtle); color: var(--cc-text-primary); font-size: 12px; line-height: 20px; }
#kc-totp-settings ul:not(#kc-totp-supported-apps) { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
#kc-totp-secret-key {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--cc-border-default);
  border-radius: var(--cc-radius-2);
  background: var(--cc-bg-subtle);
  color: var(--cc-text-primary);
  font-family: var(--cc-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  word-break: break-all;
}
#kc-totp-settings .kc-qr-code { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }
.kc-qr-code img { width: 168px; height: 168px; padding: 8px; border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-3); background: var(--cc-bg-surface); image-rendering: pixelated; }
#kc-totp-settings-form { margin-top: 28px; }
#kc-totp-settings-form #totp { font-family: var(--cc-font-mono); font-size: 16px; letter-spacing: 0.2em; }
#kc-totp-settings-form .pf-v5-c-form__label + .pf-v5-c-form__label-required, #kc-totp-settings-form label { margin-bottom: 0; }
#kc-totp-settings-form .pf-v5-c-form__group > .pf-v5-c-form__label { margin-bottom: 0; }

/* ======================================================== Information pages */

#kc-error-message, #kc-info-message { margin-top: 16px; color: var(--cc-text-secondary); }
#kc-error-message p + p, #kc-info-message p + p { margin-top: 16px; }
#kc-error-message a, #kc-info-message a, #instruction1 + p a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cc-signin-control);
  border: 1px solid var(--cc-border-default);
  border-radius: var(--cc-radius-2);
  color: var(--cc-text-primary);
  font-weight: 600;
  text-decoration: none;
}
#kc-error-message a:hover, #kc-info-message a:hover { background: var(--cc-bg-hover); border-color: var(--cc-gray-400); color: var(--cc-text-primary); }
#traceId { color: var(--cc-text-muted); font-family: var(--cc-font-mono); font-size: 12px; }
.instruction { color: var(--cc-text-secondary); }
#instruction1 { margin-top: 16px; line-height: 1.7; }
#kc-logout-confirm .instruction { margin-top: 12px; }
#kc-logout-confirm #kc-form-buttons { margin-top: 24px; }
#kc-logout-confirm #kc-info-message:empty { display: none; }

/* ============================================ Inherited layout and utilities */

.pf-v5-c-list { margin: 0; padding-left: 20px; }
.pf-v5-c-list > li + li { margin-top: 6px; }
.kc-login-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--cc-text-muted); font-size: 12px; }
.kc-login-divider::before, .kc-login-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--cc-border-subtle); }
#kc-recovery-codes-list { columns: 2; font-family: var(--cc-font-mono); }
#kc-social-providers ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
#kc-social-providers img { width: 18px; height: 18px; object-fit: contain; }
.pf-v5-c-clipboard-copy__group { display: flex; }
.pf-v5-c-clipboard-copy__expandable-content { margin-top: 8px; padding: 10px; border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-2); background: var(--cc-bg-subtle); font-family: var(--cc-font-mono); font-size: 12px; }
.pf-v5-c-data-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pf-v5-c-data-list__item { border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-3); }
.pf-v5-c-data-list__item.pf-m-clickable:hover { border-color: var(--cc-gray-400); background: var(--cc-bg-hover); cursor: pointer; }
.pf-v5-c-data-list__item-row { display: flex; align-items: center; gap: 12px; padding: 12px; }
.pf-v5-l-grid { display: grid; gap: 8px; }

.pf-v5-u-w-100 { width: 100%; }
.pf-v5-u-display-flex { display: flex; }
.pf-v5-u-flex-direction-column { flex-direction: column; }
.pf-v5-u-flex-wrap, .pf-v5-u-flex-wrap-wrap { flex-wrap: wrap; }
.pf-v5-u-flex-nowrap { flex-wrap: nowrap; }
.pf-v5-u-justify-content-space-between { justify-content: space-between; }
.pf-v5-u-align-items-center { align-items: center; }
.pf-v5-u-m-auto { margin: auto; }
.pf-v5-u-mb-md { margin-bottom: 16px; }
.pf-v5-u-mt-md, .pf-v5-u-mt-md-on-md { margin-top: 16px; }
.pf-v5-u-mb-md-on-md { margin-bottom: 16px; }
.pf-v5-u-my-sm { margin-top: 8px; margin-bottom: 8px; }
.pf-v5-u-pt-xs { padding-top: 4px; }
.pf-v5-u-pt-sm { padding-top: 8px; }
.pf-v5-u-pt-md { padding-top: 16px; }
.pf-v5-u-pb-xs { padding-bottom: 4px; }
.pf-v5-u-pb-sm { padding-bottom: 8px; }
.pf-v5-u-pb-md { padding-bottom: 16px; }
.pf-v5-u-pb-lg { padding-bottom: 24px; }
.pf-v5-u-pt-0 { padding-top: 0; }
.pf-v5-u-pl-0 { padding-left: 0; }
.pf-v5-u-pr-0 { padding-right: 0; }
.pf-v5-u-font-size-sm { font-size: 12px; }
.pf-v5-u-font-size-md { font-size: 14px; }
.pf-v5-u-font-weight-bold { font-weight: 600; }
.pf-v5-u-color-200 { color: var(--cc-text-muted); }