/* Đặt Gia Công login theme — "Voyage Utility" tokens on top of PatternFly 5 (keycloak.v2).
   Flat white surfaces, 1px borders instead of shadows, navy for actions, bold type.
   Mirrors packages/ui: styles.css tokens, primitives.tsx (Input CONTROL, Button, Field, InlineAlert),
   interactive.tsx (Checkbox, SegmentedTabs). Loaded after PatternFly and keycloak.v2's styles.css. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-vietnamese-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens (packages/ui/src/styles.css) ───────────────────────────────────────── */

:root {
  color-scheme: light; /* darkMode=false: never let the UA paint dark form controls */

  --dgc-primary: #0e44b8;
  --dgc-primary-hover: #0b3796;
  --dgc-primary-active: #092b77;
  --dgc-primary-soft: #eef3ff;
  --dgc-primary-soft-hover: #e1e9ff;
  --dgc-ink: #111827;
  --dgc-ink-2: #374151; /* labels, secondary body */
  --dgc-muted: #6b7280;
  --dgc-muted-2: #9ca3af; /* placeholders only */
  --dgc-canvas: #ffffff;
  --dgc-surface: #f7f7f7;
  --dgc-surface-2: #f8f9fa;
  --dgc-surface-3: #f3f4f6; /* disabled fields */
  --dgc-line: #e5e7eb; /* every card/input border */
  --dgc-line-strong: #d1d5db; /* hover border, checkbox border */
  --dgc-danger: #ef4444; /* error borders and icons */
  --dgc-danger-ink: #b91c1c; /* error text */
  --dgc-danger-soft: #fee2e2;
  --dgc-warning: #d97706;
  --dgc-warning-ink: #b45309;
  --dgc-warning-soft: #fef3c7;
  --dgc-success: #16a34a;
  --dgc-success-ink: #15803d;
  --dgc-success-soft: #dcfce7;
  --dgc-required: #d83d0c; /* the * after required labels */

  --dgc-ring: 0 0 0 3px rgba(14, 68, 184, 0.2); /* focus = primary border + this soft ring */
  --dgc-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.2);
  --dgc-radius: 8px;
  --dgc-control-h: 48px; /* inputs, input groups */
  --dgc-button-h: 44px; /* buttons, tap targets */
  --dgc-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --dgc-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  --pf-v5-global--FontFamily--text: var(--dgc-font);
  --pf-v5-global--FontFamily--heading: var(--dgc-font);
  --pf-v5-global--FontFamily--monospace: var(--dgc-mono);
  --pf-v5-global--primary-color--100: var(--dgc-primary);
  --pf-v5-global--primary-color--200: var(--dgc-primary-hover);
  --pf-v5-global--link--Color: var(--dgc-primary);
  --pf-v5-global--link--Color--hover: var(--dgc-primary-hover);
  --pf-v5-global--BorderRadius--sm: var(--dgc-radius);
  --pf-v5-global--BorderColor--100: var(--dgc-line);
  --pf-v5-global--FontSize--md: 15px;
  --pf-v5-global--Color--100: var(--dgc-ink);
  --pf-v5-global--Color--200: var(--dgc-muted);
  --pf-v5-global--danger-color--100: var(--dgc-danger);
  --pf-v5-global--BackgroundColor--dark-100: var(--dgc-surface-2);
}

html.login-pf,
.login-pf body,
.pf-v5-c-login {
  background: var(--dgc-surface-2); /* replaces keycloak.v2's dark background image */
  color: var(--dgc-ink);
  font-family: var(--dgc-font);
}

body {
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--dgc-line-strong) transparent;
}

::selection {
  background: #dbe5ff;
}

:focus-visible {
  outline-color: var(--dgc-primary);
}

/* ── Page and card ─────────────────────────────────────────────────────────────── */

/* Phones: 16px side gutter, card fills the rest. */
.pf-v5-c-login {
  --pf-v5-c-login__container--MaxWidth: 34rem;
  padding: 24px 16px;
}

@media (min-width: 1200px) {
  .pf-v5-c-login__container {
    grid-template-columns: minmax(0, 34rem);
    padding-inline: 0;
  }
  .pf-v5-c-login__header {
    margin-top: 0;
  }
}

.pf-v5-c-login__header {
  margin-bottom: 20px;
  padding-inline: 0;
  text-align: center;
}

.pf-v5-c-login__header .pf-v5-c-brand {
  margin-bottom: 0;
}

.dgc-brand,
#kc-header-wrapper {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--dgc-primary) !important; /* keycloak.v2 forces a light colour with !important */
  text-transform: none;
}

.pf-v5-c-login__main {
  background: var(--dgc-canvas);
  border: 1px solid var(--dgc-line);
  border-radius: 16px;
  box-shadow: none;
  margin-bottom: 0;
}

/* Header: language switcher on its own row at the top right, title below at full width,
   so a long title never has to share its line with the switcher. */
.pf-v5-c-login__main > div.pf-v5-c-login__main-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
  padding: 32px 40px 20px;
  border-top: 0; /* keycloak.v2's 4px blue top bar */
}

.pf-v5-c-login__main-header:has(.pf-v5-c-login__main-header-utilities) {
  padding-top: 16px;
}

.pf-v5-c-login__main-header #kc-page-title {
  grid-row: 2;
  grid-column: 1;
}

.pf-v5-c-login__main-header .pf-v5-c-login__main-header-utilities {
  grid-row: 1;
  grid-column: 1;
  justify-self: end;
  margin-right: 0; /* right edge in line with the fields and buttons below */
  min-height: var(--dgc-button-h);
}

#kc-page-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--dgc-ink);
  overflow-wrap: anywhere;
}

.pf-v5-c-login__main-body {
  padding: 0 40px 32px;
}

/* attempted-username block above the form (PatternFly only spaces it from 768px) */
.pf-v5-c-login__main-body > .pf-v5-c-form.pf-v5-u-mb-md-on-md {
  margin-bottom: 20px !important;
}

.pf-v5-c-login__main > .pf-v5-c-login__main-footer:empty {
  display: none;
}

@media (max-width: 575.98px) {
  .pf-v5-c-login {
    padding: 20px 16px 24px;
  }
  .pf-v5-c-login__header {
    margin-bottom: 16px;
  }
  .pf-v5-c-login__main > div.pf-v5-c-login__main-header {
    padding: 24px 20px 16px;
  }
  .pf-v5-c-login__main-header:has(.pf-v5-c-login__main-header-utilities) {
    padding-top: 12px;
  }
  .pf-v5-c-login__main-header .pf-v5-c-login__main-header-utilities {
    margin-right: 0;
  }
  .pf-v5-c-login__main-body {
    padding: 0 20px 24px;
  }
  #kc-page-title {
    font-size: 24px;
  }
}

/* ── Language switcher (dgc.js) — SegmentedTabs look ────────────────────────────── */

/* With JS the native select never paints; dgc.js removes .dgc-js again if it can't build the switcher. */
.dgc-js .pf-v5-c-login__main-header-utilities > .pf-v5-c-form-control,
.dgc-lang-slot > [hidden] {
  display: none !important;
}

.dgc-lang__list {
  display: inline-flex;
  gap: 0;
  margin: 0;
  padding: 0 3px;
  list-style: none;
  border: 1px solid var(--dgc-line);
  border-radius: var(--dgc-radius);
  background: var(--dgc-surface-2);
}

/* 44px tap target at every width; the visible pill is 36px: the transparent border keeps the track colour. */
.dgc-lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  height: var(--dgc-button-h);
  padding: 0 11px;
  border: solid transparent;
  border-width: 4px 1px;
  border-radius: 10px;
  background-clip: padding-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--dgc-ink-2);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.pf-v5-c-login .dgc-lang__item:hover {
  color: var(--dgc-ink);
  text-decoration: none;
}

.pf-v5-c-login .dgc-lang__item[aria-current] {
  background-color: var(--dgc-canvas);
  color: var(--dgc-primary);
  font-weight: 700;
  cursor: default;
}

.dgc-lang__item:focus-visible {
  outline: 2px solid var(--dgc-primary);
  outline-offset: -3px;
}

/* No-JS fallback: the native select in the same slot, drawn as a compact control. */
.pf-v5-c-login__main-header-utilities > .pf-v5-c-form-control {
  width: auto;
  min-height: calc(var(--dgc-button-h) + 2px);
}

.pf-v5-c-login__main-header-utilities > .pf-v5-c-form-control > select {
  min-height: var(--dgc-button-h);
  font-size: 14px;
  font-weight: 600;
}

/* ── Form layout, labels, helper text ──────────────────────────────────────────── */

.pf-v5-c-form {
  --pf-v5-c-form--GridGap: 20px;
}

.pf-v5-c-form__group-label {
  padding-bottom: 6px !important; /* PatternFly utility pf-v5-u-pb-xs is !important */
}

.pf-v5-c-form__label {
  display: inline-block;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

.pf-v5-c-form__label-text {
  font-weight: 600;
  color: var(--dgc-ink-2);
}

.pf-v5-c-form__label-required,
.pf-v5-c-check__label-required {
  margin-left: 0;
  font-weight: 600;
  color: var(--dgc-required);
}

/* "* Thông tin bắt buộc" above the register form */
.pf-v5-c-login__main-body .subtitle {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--dgc-muted);
}

.pf-v5-c-helper-text {
  gap: 4px;
  font-size: 13px;
}

.pf-v5-c-helper-text__item-text,
.kc-feedback-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--dgc-muted);
}

.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text,
.pf-v5-c-helper-text__item-text.pf-m-error,
.pf-v5-c-login__main-body .pf-m-error.kc-feedback-text {
  font-weight: 500;
  color: var(--dgc-danger-ink);
}

/* Error / policy messages under a field */
[id^="input-error-container-"]:has(> *),
.pf-v5-c-form__group > [id^="input-error-otp"],
.form-group [id^="input-error-"] {
  display: block;
  margin-top: 6px;
}

ul.pf-v5-c-helper-text__item-text {
  margin: 0;
  padding-left: 18px;
}

/* Empty helper rows (password fields without "forgot password") take no space. */
.pf-v5-c-form__helper-text:not(:has(.pf-v5-c-helper-text > *)) {
  display: none;
}

/* Under the password: "Ghi nhớ đăng nhập" on the left, "Quên mật khẩu?" on the right. */
.pf-v5-c-input-group + .pf-v5-c-form__helper-text {
  margin-top: 4px;
}

.pf-v5-c-input-group + .pf-v5-c-form__helper-text > .pf-v5-c-helper-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
}

/* ── Text inputs, textarea, select ─────────────────────────────────────────────── */
/* The box is PatternFly's wrapper (span/div.pf-v5-c-form-control); a bare input/select/textarea that carries
   the class itself (base templates) gets the same box. States only swap the two variables. */

.pf-v5-c-form-control:not(input, textarea, select),
:is(input, textarea, select).pf-v5-c-form-control:not(.pf-v5-c-form-control *),
.pf-v5-c-input-group {
  --dgc-border: var(--dgc-line);
  --dgc-shadow: none;
  box-sizing: border-box;
  min-height: var(--dgc-control-h);
  border: 1px solid var(--dgc-border);
  border-radius: var(--dgc-radius);
  background-color: var(--dgc-canvas);
  box-shadow: var(--dgc-shadow);
  color: var(--dgc-ink);
  font-family: var(--dgc-font);
  font-size: 16px; /* under 16px iOS Safari zooms on focus */
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pf-v5-c-form-control:not(input, textarea, select) {
  align-items: center;
  column-gap: 0;
}

/* PatternFly draws the box with pseudo-elements (light sides + dark bottom line). */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none !important;
}

.pf-v5-c-form-control:not(input, textarea, select):hover,
:is(input, textarea, select).pf-v5-c-form-control:not(.pf-v5-c-form-control *):hover,
.pf-v5-c-input-group:hover {
  --dgc-border: var(--dgc-line-strong);
}

.pf-v5-c-form-control:not(input, textarea, select):focus-within,
:is(input, textarea, select).pf-v5-c-form-control:not(.pf-v5-c-form-control *):focus,
.pf-v5-c-input-group:focus-within {
  --dgc-border: var(--dgc-primary);
  --dgc-shadow: var(--dgc-ring);
}

/* Error: red border that stays red on focus (ring turns red too). */
.pf-v5-c-form-control.pf-m-error:not(input, textarea, select),
.pf-v5-c-form-control:not(input, textarea, select):has(> [aria-invalid="true"]),
:is(input, textarea, select).pf-v5-c-form-control[aria-invalid="true"]:not(.pf-v5-c-form-control *),
.pf-v5-c-input-group:has(.pf-m-error, [aria-invalid="true"]) {
  --dgc-border: var(--dgc-danger);
}

.pf-v5-c-form-control.pf-m-error:not(input, textarea, select):focus-within,
.pf-v5-c-form-control:not(input, textarea, select):has(> [aria-invalid="true"]):focus-within,
:is(input, textarea, select).pf-v5-c-form-control[aria-invalid="true"]:not(.pf-v5-c-form-control *):focus,
.pf-v5-c-input-group:has(.pf-m-error, [aria-invalid="true"]):focus-within {
  --dgc-border: var(--dgc-danger);
  --dgc-shadow: var(--dgc-ring-danger);
}

/* Read-only (attempted username) and disabled (read-only profile attributes). */
.pf-v5-c-form-control.pf-m-readonly:not(input, textarea, select),
.pf-v5-c-input-group:has(.pf-m-readonly) {
  background-color: var(--dgc-surface-2);
}

.pf-v5-c-form-control.pf-m-disabled:not(input, textarea, select),
.pf-v5-c-form-control:not(input, textarea, select):has(> :disabled),
:is(input, textarea, select).pf-v5-c-form-control:disabled:not(.pf-v5-c-form-control *) {
  --dgc-border: var(--dgc-line);
  background-color: var(--dgc-surface-3);
  color: var(--dgc-muted);
  cursor: not-allowed;
}

/* The field inside the box: no border, no outline (the box shows focus), 46px tall. */
.pf-v5-c-form-control > :is(input, select, textarea),
:is(input, textarea, select).pf-v5-c-form-control:not(.pf-v5-c-form-control *) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--dgc-ink);
  -webkit-appearance: none;
  appearance: none;
}

.pf-v5-c-form-control > :is(input, select, textarea) {
  min-height: calc(var(--dgc-control-h) - 2px);
  border: 0;
  border-radius: calc(var(--dgc-radius) - 1px);
  background: transparent;
  box-shadow: none;
}

.pf-v5-c-form-control > :is(input, select, textarea):is(:focus, :focus-visible),
:is(input, textarea, select).pf-v5-c-form-control:not(.pf-v5-c-form-control *):is(:focus, :focus-visible) {
  outline: none;
}

.pf-v5-c-form-control > :is(input, textarea)::placeholder,
input.pf-v5-c-form-control::placeholder,
textarea.pf-v5-c-form-control::placeholder {
  color: var(--dgc-muted-2);
  opacity: 1;
}

.pf-v5-c-form-control > :disabled,
.pf-v5-c-form-control:disabled {
  color: var(--dgc-muted);
  -webkit-text-fill-color: var(--dgc-muted);
  cursor: not-allowed;
}

.pf-v5-c-form-control > [readonly] {
  color: var(--dgc-ink-2);
}

/* Browser autofill: keep the white box instead of a pale-yellow/blue rectangle. */
.pf-v5-c-form-control > input:-webkit-autofill,
input.pf-v5-c-form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--dgc-canvas) inset;
  -webkit-text-fill-color: var(--dgc-ink);
  caret-color: var(--dgc-ink);
}

/* Error icon inside the field. */
.pf-v5-c-form-control:has(> .pf-v5-c-form-control__utilities) > :is(input, select) {
  padding-right: 42px;
}

.pf-v5-c-form-control__utilities {
  align-self: center;
  padding-right: 14px;
}

.pf-v5-c-form-control__icon {
  padding-top: 0;
  font-size: 16px;
  line-height: 1;
}

.pf-v5-c-form-control__icon.pf-m-status {
  color: var(--dgc-danger);
}

/* Textarea grows with its content. */
.pf-v5-c-form-control:has(> textarea) {
  align-items: stretch;
}

.pf-v5-c-form-control > textarea,
textarea.pf-v5-c-form-control {
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

/* Native select (user-profile "select" attributes): same box, chevron on the right. */
.pf-v5-c-form-control > select {
  grid-column: 1 / -1;
  padding-right: 40px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.pf-v5-c-form-control > select[multiple] {
  padding: 6px;
}

.pf-v5-c-form-control__toggle-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  padding: 0;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--dgc-muted);
  font-size: 14px;
  line-height: 1;
}

select option,
select optgroup {
  background: var(--dgc-canvas);
  color: var(--dgc-ink);
}

/* Browsers with customizable selects (Chromium 135+) draw the open list with the tokens as well;
   others keep the OS list. */
@supports (appearance: base-select) {
  .pf-v5-c-form-control > select:not([multiple]),
  .pf-v5-c-form-control > select:not([multiple])::picker(select) {
    appearance: base-select;
  }
  .pf-v5-c-form-control > select:not([multiple]) {
    display: flex;
    align-items: center;
  }
  .pf-v5-c-form-control > select::picker-icon {
    display: none; /* PatternFly's chevron stays */
  }
  .pf-v5-c-form-control > select::picker(select) {
    margin-block: 6px; /* the list may open above or below the field */
    padding: 6px;
    max-height: min(320px, 60vh);
    border: 1px solid var(--dgc-line);
    border-radius: var(--dgc-radius);
    background: var(--dgc-canvas);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    scrollbar-width: thin;
    scrollbar-color: var(--dgc-line-strong) transparent;
  }
  .pf-v5-c-form-control > select option {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 15px;
    display: flex;
    align-items: center;
  }
  .pf-v5-c-form-control > select option:hover,
  .pf-v5-c-form-control > select option:focus-visible {
    background: var(--dgc-surface-2);
    outline: none;
  }
  .pf-v5-c-form-control > select option:checked {
    background: var(--dgc-primary-soft);
    color: var(--dgc-primary);
    font-weight: 600;
  }
  .pf-v5-c-form-control > select option::checkmark {
    display: none;
  }
}

/* ── Input group: password + eye, attempted username + restart, clipboard ────────── */
/* The group is the box (see above); its items lose their own borders, so input and button read as one control. */

.pf-v5-c-input-group {
  display: flex;
  align-items: stretch;
  /* no overflow:hidden — the restart-login tooltip has to escape */
}

.pf-v5-c-input-group > .pf-v5-c-input-group__item,
.pf-v5-c-input-group > * + * {
  margin: 0;
  border: 0;
  background: transparent;
}

.pf-v5-c-input-group .pf-v5-c-form-control:not(input, textarea, select) {
  min-height: calc(var(--dgc-control-h) - 2px);
  border-width: 0;
  background-color: transparent;
  box-shadow: none;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--after--BorderWidth: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dgc-control-h);
  min-width: var(--dgc-control-h);
  min-height: calc(var(--dgc-control-h) - 2px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dgc-muted);
  font-size: 16px;
  transition: background-color 0.15s, color 0.15s;
}

.pf-v5-c-input-group__item:first-child .pf-v5-c-button.pf-m-control {
  border-radius: calc(var(--dgc-radius) - 1px) 0 0 calc(var(--dgc-radius) - 1px);
}

.pf-v5-c-input-group__item:last-child .pf-v5-c-button.pf-m-control {
  border-radius: 0 calc(var(--dgc-radius) - 1px) calc(var(--dgc-radius) - 1px) 0;
}

.pf-v5-c-button.pf-m-control::after {
  display: none;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover {
  background: var(--dgc-surface-2);
  color: var(--dgc-ink);
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:focus {
  outline: none;
}

/* The group already shows the ring; this marks which part (the button) has the keyboard focus. */
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:focus-visible {
  outline: 2px solid var(--dgc-primary);
  outline-offset: -5px;
  border-radius: calc(var(--dgc-radius) + 2px);
  color: var(--dgc-primary);
}

/* "Khởi động lại đăng nhập" tooltip above the restart button (keycloak.v2 puts it off to the right). */
.pf-v5-c-login .kc-login-tooltip .kc-tooltip-text {
  display: none;
  top: auto;
  right: 0;
  bottom: calc(100% + 8px);
  left: auto;
  z-index: 2;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--dgc-ink);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
}

.pf-v5-c-login .kc-login-tooltip .kc-tooltip-text::after {
  display: none;
}

.pf-v5-c-login .kc-login-tooltip:is(:hover, :focus-visible) .kc-tooltip-text {
  display: block;
}

/* Code clipboard (recovery codes, device code) */
.pf-v5-c-clipboard-copy__expandable-content {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--dgc-line);
  border-radius: var(--dgc-radius);
  background: var(--dgc-surface-2);
  font-family: var(--dgc-mono);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* ── Checkboxes and radios (Checkbox in interactive.tsx) ───────────────────────── */

.pf-v5-c-login input:is([type="checkbox"], [type="radio"]) {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--dgc-line-strong);
  border-radius: 5px;
  background: var(--dgc-canvas) no-repeat center / 14px 14px;
  align-self: center;
  cursor: pointer;
  transform: none;
  vertical-align: middle;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.pf-v5-c-login input[type="radio"] {
  border-radius: 50%;
}

.pf-v5-c-login input:is([type="checkbox"], [type="radio"]):hover {
  border-color: var(--dgc-muted-2);
}

.pf-v5-c-login input[type="checkbox"]:checked {
  border-color: var(--dgc-primary);
  background-color: var(--dgc-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pf-v5-c-login input[type="radio"]:checked {
  border-color: var(--dgc-primary);
  background-color: var(--dgc-primary);
  background-image: radial-gradient(circle, #fff 0 3.5px, transparent 4px);
  background-size: 100% 100%;
}

.pf-v5-c-login input:is([type="checkbox"], [type="radio"]):focus-visible {
  outline: none;
  border-color: var(--dgc-primary);
  box-shadow: var(--dgc-ring);
}

.pf-v5-c-login input:is([type="checkbox"], [type="radio"])[aria-invalid="true"]:not(:checked) {
  border-color: var(--dgc-danger);
}

.pf-v5-c-login input:is([type="checkbox"], [type="radio"]):disabled {
  border-color: var(--dgc-line);
  background-color: var(--dgc-surface-3);
  cursor: not-allowed;
}

.pf-v5-c-login input:is([type="checkbox"], [type="radio"]):disabled:checked {
  border-color: var(--dgc-line-strong);
  background-color: var(--dgc-line-strong);
}

/* Windows high contrast: fall back to the system controls, which follow the forced palette. */
@media (forced-colors: active) {
  .pf-v5-c-login input:is([type="checkbox"], [type="radio"]) {
    -webkit-appearance: auto;
    appearance: auto;
  }
}

/* Row = box + label, 44px tall tap area. keycloak.v2 nests label.pf-v5-c-check inside div.pf-v5-c-check. */
.pf-v5-c-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--dgc-button-h);
  cursor: pointer;
}

div.pf-v5-c-check:has(> label.pf-v5-c-check) {
  display: block;
  min-height: 0;
}

.pf-v5-c-check__label {
  font-size: 15px;
  line-height: 1.4;
  color: var(--dgc-ink);
  cursor: pointer;
}

.pf-v5-c-check:has(> input:disabled),
.pf-v5-c-check:has(> input:disabled) .pf-v5-c-check__label {
  color: var(--dgc-muted);
  cursor: not-allowed;
}

/* Bare "input + label" pairs: terms acceptance, user-profile radio/checkbox lists. */
.pf-v5-c-login__main-body :not(.pf-v5-c-check):has(> input:is([type="checkbox"], [type="radio"]) + label) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--dgc-button-h);
}

.pf-v5-c-login__main-body input:is([type="checkbox"], [type="radio"]) + label {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--dgc-ink);
  cursor: pointer;
  white-space: normal;
}

#kc-registration-terms-text {
  margin-top: 4px;
  font-size: 14px;
  color: var(--dgc-ink-2);
}

/* ── Buttons (Button in primitives.tsx): one height, same type in every variant ── */

.pf-v5-c-button:is(.pf-m-primary, .pf-m-secondary, .pf-m-tertiary, .pf-m-danger, .pf-m-warning),
.pf-v5-c-button.pf-m-link:not(.pf-m-inline) {
  --pf-v5-c-button--after--BorderWidth: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--dgc-button-h);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--dgc-radius);
  font-family: var(--dgc-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pf-v5-c-button:is(.pf-m-primary, .pf-m-secondary, .pf-m-tertiary, .pf-m-danger, .pf-m-warning, .pf-m-link)::after {
  display: none;
}

.pf-v5-c-button.pf-m-block {
  display: flex;
  width: 100%;
}

.pf-v5-c-button.pf-m-primary {
  background-color: var(--dgc-primary);
  color: #fff;
}
.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--dgc-primary-hover);
  color: #fff;
}
.pf-v5-c-button.pf-m-primary:active {
  background-color: var(--dgc-primary-active);
}

.pf-v5-c-button:is(.pf-m-secondary, .pf-m-tertiary) {
  border-color: var(--dgc-line);
  background-color: var(--dgc-canvas);
  color: var(--dgc-ink);
}
.pf-v5-c-button:is(.pf-m-secondary, .pf-m-tertiary):hover {
  border-color: var(--dgc-line-strong);
  background-color: var(--dgc-surface);
  color: var(--dgc-ink);
}

.pf-v5-c-button.pf-m-link {
  background-color: transparent;
  color: var(--dgc-primary);
}
.pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover {
  background-color: var(--dgc-primary-soft);
  color: var(--dgc-primary);
}

.pf-v5-c-button.pf-m-danger {
  background-color: var(--dgc-danger);
  color: #fff;
}
.pf-v5-c-button.pf-m-danger:hover {
  background-color: var(--dgc-danger-ink);
}

.pf-v5-c-button:is(.pf-m-primary, .pf-m-secondary, .pf-m-tertiary, .pf-m-danger, .pf-m-link):focus-visible {
  outline: 2px solid var(--dgc-primary);
  outline-offset: 2px;
}

.pf-v5-c-button:is(:disabled, .pf-m-disabled, .pf-m-aria-disabled, [aria-disabled="true"]) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Action rows: stacked full-width buttons, or side by side at equal width ("Tiếp tục | Hủy"). */
.pf-v5-c-form__actions {
  --pf-v5-c-form__actions--MarginTop: 0;
  --pf-v5-c-form__actions--MarginRight: 0;
  --pf-v5-c-form__actions--MarginBottom: 0;
  --pf-v5-c-form__actions--MarginLeft: 0;
  --pf-v5-c-form__actions--child--MarginTop: 0;
  --pf-v5-c-form__actions--child--MarginRight: 0;
  --pf-v5-c-form__actions--child--MarginBottom: 0;
  --pf-v5-c-form__actions--child--MarginLeft: 0;
  display: flex;
  gap: 12px;
}

.pf-v5-c-form__actions.pf-v5-u-flex-wrap {
  flex-direction: column;
}

.pf-v5-c-form__actions.pf-v5-u-flex-nowrap > .pf-v5-c-button {
  flex: 1 1 0;
  min-width: 0;
}

#kc-form-buttons {
  margin-top: 4px;
}

#try-another-way {
  margin-top: 16px !important;
}

/* ── Links ─────────────────────────────────────────────────────────────────────── */

.pf-v5-c-login a:not(.pf-v5-c-button, .dgc-lang__item) {
  color: var(--dgc-primary);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
  border-radius: 4px;
}

.pf-v5-c-login a:not(.pf-v5-c-button, .dgc-lang__item):hover {
  color: var(--dgc-primary-hover);
  text-decoration: underline;
}

.pf-v5-c-login a:not(.pf-v5-c-button):focus-visible {
  outline: 2px solid var(--dgc-primary);
  outline-offset: 2px;
}

/* Stand-alone links get a 44px tap area. */
.pf-v5-c-helper-text__item a,
#kc-info-wrapper a,
#kc-form-options a,
#mode-manual,
#mode-barcode {
  display: inline-flex;
  align-items: center;
  min-height: var(--dgc-button-h);
}

.pf-v5-c-login :is(.pf-v5-c-helper-text__item a, #kc-info-wrapper a, #kc-form-options a, #mode-manual, #mode-barcode):focus-visible {
  outline-offset: 0;
}

/* ── Footer band ("Chưa có tài khoản? Tạo tài khoản", instructions) ─────────────── */

.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-band:first-child,
.pf-v5-c-login__main-footer-band:last-child {
  margin-top: 24px;
  padding: 12px 0 0;
  border-top: 1px solid var(--dgc-line);
  text-align: center;
  font-size: 14px;
  color: var(--dgc-ink-2);
}

.pf-v5-c-login__main-footer-band > * + * {
  padding-top: 0;
}

.pf-v5-c-login__main-footer-band .pf-v5-u-font-size-sm {
  display: block;
  padding-top: 4px;
  font-size: 14px !important;
  color: var(--dgc-muted) !important;
}

.pf-v5-c-login__main-footer-band-item {
  padding-top: 0;
}

/* register.ftl puts the back link band inside the form grid. */
.pf-v5-c-form > .pf-v5-c-login__main-footer-band {
  margin-top: 4px;
}

/* ── Alerts (InlineAlert) ──────────────────────────────────────────────────────── */

.pf-v5-c-alert.pf-m-inline {
  --dgc-alert-bg: var(--dgc-primary-soft);
  --dgc-alert-fg: var(--dgc-primary);
  --dgc-alert-border: rgba(14, 68, 184, 0.15);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px !important;
  padding: 12px 14px;
  border: 1px solid var(--dgc-alert-border);
  border-radius: var(--dgc-radius);
  background: var(--dgc-alert-bg);
  box-shadow: none;
  color: var(--dgc-alert-fg);
  font-size: 14px;
  line-height: 1.45;
}

.pf-v5-c-alert.pf-m-inline::before,
.pf-v5-c-alert.pf-m-inline::after {
  display: none;
}

.pf-v5-c-alert.pf-m-danger {
  --dgc-alert-bg: var(--dgc-danger-soft);
  --dgc-alert-fg: var(--dgc-danger-ink);
  --dgc-alert-border: rgba(239, 68, 68, 0.2);
}
.pf-v5-c-alert.pf-m-warning {
  --dgc-alert-bg: var(--dgc-warning-soft);
  --dgc-alert-fg: var(--dgc-warning-ink);
  --dgc-alert-border: rgba(217, 119, 6, 0.2);
}
.pf-v5-c-alert.pf-m-success {
  --dgc-alert-bg: var(--dgc-success-soft);
  --dgc-alert-fg: var(--dgc-success-ink);
  --dgc-alert-border: rgba(22, 163, 74, 0.2);
}

.pf-v5-c-alert.pf-m-inline .pf-v5-c-alert__icon {
  flex: none;
  margin: 1px 0 0;
  font-size: 16px;
  line-height: 1.2;
  color: inherit;
}

.pf-v5-c-alert.pf-m-inline .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-inline .kc-feedback-text {
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: inherit;
}

.pf-v5-c-alert.pf-m-inline .pf-v5-c-alert__description {
  font-size: 14px;
  color: inherit;
}

/* ── Text pages: error, info, verify email, page expired ───────────────────────── */

.pf-v5-c-login__main-body .instruction,
#kc-error-message p,
#kc-info-message p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--dgc-ink-2);
}

/* "« Quay lại ứng dụng": the one action on the page, drawn like the other back buttons. */
#kc-error-message p > a,
#kc-info-message p > a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--dgc-button-h);
  margin-top: 20px;
  padding: 0 16px;
  border: 1px solid var(--dgc-line);
  border-radius: var(--dgc-radius);
  background: var(--dgc-canvas);
  color: var(--dgc-ink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

#kc-error-message p > a:hover,
#kc-info-message p > a:hover {
  border-color: var(--dgc-line-strong);
  background: var(--dgc-surface);
  color: var(--dgc-ink);
  text-decoration: none;
}

#traceId {
  font-size: 13px;
  color: var(--dgc-muted);
}

/* ── OTP setup (login-config-totp.ftl) ─────────────────────────────────────────── */

#kc-totp-settings {
  display: grid;
  gap: 18px;
  margin: 0 0 24px !important;
  padding: 0;
  list-style: none;
  counter-reset: dgc-step;
}

#kc-totp-settings > li {
  position: relative;
  margin: 0;
  padding-left: 36px;
  counter-increment: dgc-step;
}

/* numbered step badge */
#kc-totp-settings > li::before {
  content: counter(dgc-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dgc-primary-soft);
  color: var(--dgc-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

#kc-totp-settings p {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dgc-ink);
}

#kc-totp-settings p:last-child {
  margin-bottom: 0;
}

#kc-totp-supported-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

#kc-totp-supported-apps > li {
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--dgc-line);
  border-radius: 9999px;
  background: var(--dgc-surface-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dgc-ink-2);
  white-space: nowrap;
}

/* manual mode: type / algorithm / digits / period */
#kc-totp-settings > li ul:not(#kc-totp-supported-apps) {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dgc-ink-2);
}

#kc-totp-secret-key {
  display: inline-block;
  max-width: 100%;
  margin: 2px 0;
  padding: 10px 12px;
  border: 1px solid var(--dgc-line);
  border-radius: var(--dgc-radius);
  background: var(--dgc-surface-2);
  font-family: var(--dgc-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--dgc-ink);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.kc-qr-code {
  align-items: flex-start !important; /* line up with the step text, not the card centre */
  gap: 4px;
  margin: 8px 0 0 !important;
}

.kc-qr-code img {
  box-sizing: border-box;
  width: 184px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid var(--dgc-line);
  border-radius: 12px;
  background: #fff; /* QR codes need a light quiet zone even under forced dark mode */
  box-shadow: none;
  image-rendering: pixelated;
}

/* Fields under the steps: keycloak.v2 wraps the label in another .pf-v5-c-form__label div. */
#kc-totp-settings-form .pf-v5-c-form__group > .pf-v5-c-form__label {
  display: block;
  padding-bottom: 6px;
}

#kc-totp-settings-form #kc-form-options {
  margin-top: -4px;
}

/* ── Choose a sign-in method (select-authenticator.ftl) ────────────────────────── */

.select-auth-container.pf-v5-c-data-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
}

.select-auth-container .pf-v5-c-data-list__item {
  margin: 0;
  border: 1px solid var(--dgc-line);
  border-radius: 12px;
  background: var(--dgc-canvas);
  box-shadow: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.select-auth-container .pf-v5-c-data-list__item::before {
  display: none;
}

.select-auth-container .pf-v5-c-data-list__item:hover {
  border-color: var(--dgc-primary);
  background: var(--dgc-primary-soft);
}

.select-auth-container .pf-v5-c-data-list__item:has(:focus-visible) {
  border-color: var(--dgc-primary);
  box-shadow: var(--dgc-ring);
}

.select-auth-box-parent {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
}

.select-auth-box-parent:focus-visible {
  outline: none;
}

/* beats PatternFly's ≥768px ".pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__item-content" (flex + 24px bottom padding) */
.select-auth-container.pf-v5-c-data-list .select-auth-box-parent .pf-v5-c-data-list__item-content {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0;
}

.select-auth-box-parent .pf-v5-c-data-list__cell {
  padding: 0 !important;
  margin: 0;
}

.select-auth-box-parent .pf-v5-c-data-list__cell.pf-m-icon {
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--dgc-primary-soft);
  color: var(--dgc-primary);
  font-size: 18px;
}

.select-auth-box-parent .pf-v5-c-data-list__cell.pf-m-icon i {
  font-size: 18px;
}

.select-auth-box-parent .pf-v5-c-data-list__cell:not(.pf-m-icon) {
  grid-column: 2;
}

.select-auth-box-parent .select-auth-box-desc {
  grid-row: 2;
}

.select-auth-box-headline {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dgc-ink);
}

.select-auth-box-desc {
  font-size: 13px !important;
  line-height: 1.4;
  color: var(--dgc-muted) !important;
}

.select-auth-box-parent .pf-v5-c-data-list__item-action {
  margin: 0;
  padding: 0;
  color: var(--dgc-muted);
}

/* OTP device picker (login-otp.ftl with more than one device) */
#kc-otp-login-form .pf-v5-c-tile {
  display: inline-flex;
  align-items: center;
  min-height: var(--dgc-button-h);
  margin: 0 8px 8px 0;
  padding: 0 14px;
  border: 1px solid var(--dgc-line);
  border-radius: var(--dgc-radius);
  background: var(--dgc-canvas);
  transform: none;
}

#kc-otp-login-form .pf-v5-c-tile::before,
#kc-otp-login-form .pf-v5-c-tile::after {
  display: none;
}

#kc-otp-login-form .pf-v5-c-tile:hover {
  border-color: var(--dgc-line-strong);
}

#kc-otp-login-form .pf-v5-c-tile.pf-m-selected {
  border-color: var(--dgc-primary);
  background: var(--dgc-primary-soft);
}

#kc-otp-login-form .pf-v5-c-tile__header {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#kc-otp-login-form .pf-v5-c-tile__icon {
  margin: 0;
  font-size: 18px;
  color: var(--dgc-muted);
}

#kc-otp-login-form .pf-v5-c-tile.pf-m-selected .pf-v5-c-tile__icon,
#kc-otp-login-form .pf-v5-c-tile.pf-m-selected .pf-v5-c-tile__title {
  color: var(--dgc-primary);
}

#kc-otp-login-form .pf-v5-c-tile__title {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--dgc-ink);
}

/* ── Identity providers (social-providers.ftl) ─────────────────────────────────── */

.kc-login-divider {
  gap: 12px;
  margin: 20px 0 16px;
  font-size: 13px;
  color: var(--dgc-muted);
}

.kc-login-divider::before,
.kc-login-divider::after {
  border-bottom-color: var(--dgc-line);
}

#kc-social-providers ul.pf-v5-c-login__main-body {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 !important;
  list-style: none;
}

#kc-social-providers ul.pf-v5-l-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#kc-social-providers ul > li {
  padding: 0 !important;
}

#kc-social-providers .pf-v5-c-button.pf-m-tertiary {
  justify-content: center !important;
  gap: 10px;
}

#kc-social-providers .pf-v5-c-button.pf-m-tertiary .pf-v5-u-m-auto {
  margin: 0 !important;
}

#kc-social-providers img,
#kc-social-providers picture {
  width: 20px;
  height: 20px;
}

/* ── Motion ────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}