/* ChapChin login theme on PatternFly 5. Colours, type, spacing, radius and motion
   come only from css/tokens.css («سنگ و سیگنال»). Layout is sign-in.dc.html pattern
   1j «ستون ورود». Hairline borders are 1px like engine/console/static/console.css. */

/* PatternFly custom properties -> console tokens. tokens.css already flips the
   colour tokens under prefers-color-scheme; these aliases follow it. The parent's
   dark-mode script only toggles .pf-v5-theme-dark, so map the same tokens there. */
/* PatternFly sets its component variables on the component element itself
   (.pf-v5-c-button { --pf-v5-c-button--m-primary--BackgroundColor: #06c }), so the
   same block is also set on every PF component under .chapchin-bg, which wins. */
:root,
.pf-v5-theme-dark,
.chapchin-bg [class*="pf-v5-c-"] {
  --pf-v5-global--BackgroundColor--100: var(--color-surface);
  --pf-v5-global--BackgroundColor--200: var(--color-bg);
  --pf-v5-global--BackgroundColor--300: var(--color-surface-2);
  --pf-v5-global--BackgroundColor--light-100: var(--color-surface);
  --pf-v5-global--BackgroundColor--dark-100: var(--color-chrome);
  --pf-v5-global--Color--100: var(--color-ink);
  --pf-v5-global--Color--200: var(--color-ink-muted);
  --pf-v5-global--Color--400: var(--color-ink-faint);
  --pf-v5-global--Color--light-100: var(--color-on-primary);
  --pf-v5-global--BorderColor--100: var(--color-line);
  --pf-v5-global--BorderColor--200: var(--color-line-strong);
  --pf-v5-global--BorderRadius--sm: var(--radius-sm);
  --pf-v5-global--BorderRadius--md: var(--radius-md);
  --pf-v5-global--BorderRadius--lg: var(--radius-lg);
  --pf-v5-global--BorderRadius--300: var(--radius-md);
  --pf-v5-global--FontFamily--sans-serif: var(--font-family);
  --pf-v5-global--FontFamily--heading--sans-serif: var(--font-family);
  --pf-v5-global--FontFamily--text: var(--font-family);
  --pf-v5-global--FontFamily--monospace: var(--type-mono-family);
  --pf-v5-global--FontSize--xs: var(--text-11);
  --pf-v5-global--FontSize--sm: var(--text-12);
  --pf-v5-global--FontSize--md: var(--text-14);
  --pf-v5-global--FontSize--lg: var(--text-15);
  --pf-v5-global--FontSize--xl: var(--text-17);
  --pf-v5-global--FontSize--2xl: var(--text-20);
  --pf-v5-global--FontSize--3xl: var(--text-24);
  --pf-v5-global--FontSize--4xl: var(--text-26);
  --pf-v5-global--link--Color: var(--color-primary);
  --pf-v5-global--link--hover--Color: var(--color-primary-hover);
  --pf-v5-global--link--TextDecoration: none;
  --pf-v5-global--link--hover--TextDecoration: underline;
  --pf-v5-global--primary--100: var(--color-primary);
  --pf-v5-global--primary--200: var(--color-primary-hover);
  --pf-v5-global--danger--100: var(--color-danger);
  --pf-v5-global--danger--200: var(--color-on-danger-soft);
  --pf-v5-global--warning--100: var(--color-signal);
  --pf-v5-global--success--100: var(--color-status-healthy);
  --pf-v5-global--info--100: var(--color-ink-muted);

  --pf-v5-c-button--m-primary--BackgroundColor: var(--color-primary);
  --pf-v5-c-button--m-primary--Color: var(--color-on-primary);
  --pf-v5-c-button--m-primary--BorderColor: var(--color-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--color-primary-hover);
  --pf-v5-c-button--m-primary--hover--Color: var(--color-on-primary);
  --pf-v5-c-button--m-primary--hover--BorderColor: var(--color-primary-hover);
  --pf-v5-c-button--m-secondary--BackgroundColor: var(--color-surface);
  --pf-v5-c-button--m-secondary--Color: var(--color-ink-2);
  --pf-v5-c-button--m-secondary--BorderColor: var(--color-line-strong);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--color-hover);
  --pf-v5-c-button--m-secondary--hover--Color: var(--color-ink);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--color-line-strong);
  --pf-v5-c-button--m-link--Color: var(--color-primary);
  --pf-v5-c-button--m-link--hover--Color: var(--color-primary-hover);
  --pf-v5-c-button--BorderRadius: var(--radius-md);
  --pf-v5-c-button--FontSize: var(--text-14);
  --pf-v5-c-button--FontWeight: 700;
  --pf-v5-c-button--Height: var(--control-h);

  --pf-v5-c-form-control--BackgroundColor: var(--color-surface);
  --pf-v5-c-form-control--Color: var(--color-ink);
  --pf-v5-c-form-control--BorderColor: var(--color-ink-faint);
  --pf-v5-c-form-control--BorderRadius: var(--radius-md);
  --pf-v5-c-form-control--focus--BorderColor: var(--color-primary);
  --pf-v5-c-form-control--focus--BoxShadow: 0 0 0 var(--focus-offset) var(--color-primary-soft);
  --pf-v5-c-form-control--disabled--BackgroundColor: var(--color-chip);
  --pf-v5-c-form-control--disabled--Color: var(--color-ink-faint);
  --pf-v5-c-form__label--Color: var(--color-ink);
  --pf-v5-c-form__label--FontWeight: 700;
  --pf-v5-c-form__label--FontSize: var(--text-13);
  --pf-v5-c-helper-text--Color: var(--color-ink-muted);
  --pf-v5-c-helper-text__item-text--m-error--Color: var(--color-danger);

  --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--color-danger-soft);
  --pf-v5-c-alert--m-inline--m-danger--BoxShadow: var(--color-danger);
  --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--color-signal-soft);
  --pf-v5-c-alert--m-inline--m-warning--BoxShadow: var(--color-signal);
  --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--color-success-soft);
  --pf-v5-c-alert--m-inline--m-success--BoxShadow: var(--color-status-healthy);
  --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--color-chip);
  --pf-v5-c-alert--m-inline--m-info--BoxShadow: var(--color-status-off);
  --pf-v5-c-alert__title--Color: var(--color-ink);
  --pf-v5-c-alert__description--Color: var(--color-ink-2);

  --pf-v5-c-login__main--BackgroundColor: var(--color-surface);
  --pf-v5-c-login__container--BackgroundColor: transparent;
  --pf-v5-global--BoxShadow--md: var(--shadow-none);
  --pf-v5-global--spacer--xs: var(--space-4);
  --pf-v5-global--spacer--sm: var(--space-8);
  --pf-v5-global--spacer--md: var(--space-16);
  --pf-v5-global--spacer--lg: var(--space-24);
  --pf-v5-global--spacer--xl: var(--space-32);
}

/* page and the single sign-in column (sign-in.dc.html 1a, 1j) */
html.chapchin-bg { background: var(--color-bg); color-scheme: light; }
html.chapchin-bg:has(.pf-v5-theme-dark),
html.chapchin-bg.pf-v5-theme-dark { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html.chapchin-bg:not([data-theme="light"]) { color-scheme: dark; }
}

body#keycloak-bg,
body.chapchin-page,
.pf-v5-c-login.chapchin-page {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--text-13);
  line-height: var(--type-caption-line-height);
}

body#keycloak-bg,
.chapchin-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-16);
  box-sizing: border-box;
}

/* drop the stock Keycloak chrome: no logo band, no background image, no card shadow */
.pf-v5-c-login__header,
#kc-header { display: none; }

.chapchin-shell.pf-v5-c-login__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: min(400px, 100%);
  grid-template-columns: none;
  grid-template-areas: none;
}
.chapchin-shell-wide { width: min(calc(var(--space-48) * 10), 100%); }

.chapchin-col.pf-v5-c-login__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: var(--space-32);
  box-shadow: var(--shadow-none);
  border-top: 1px solid var(--color-line);
}
@media (max-width: 480px) {
  .chapchin-col.pf-v5-c-login__main { padding: var(--space-24) var(--space-20); }
  .chapchin-col .pf-v5-c-button { min-height: var(--touch-min); }
}

/* the ChapChin logo + «میز چپ‌چین» / «کنسول مالک» (design/ui README fix 14,
   owner decision 2026-10-18); the parent hides #kc-header, the brand row shows it */
.chapchin-shell #kc-header.chapchin-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
}
.chapchin-brand-logo img { display: block; height: var(--brand-lockup); width: auto; }
.chapchin-brand-sub { font-size: var(--text-12); color: var(--color-ink-muted); line-height: 1.25; }
/* the brand band: the logo's ribbon gradient, only here */
main.chapchin-col { border-top: 4px solid transparent; border-image: var(--brand-gradient) 1; }

.chapchin-col-head.pf-v5-c-login__main-header {
  display: flex; flex-direction: column; gap: var(--space-8);
  border: 0; padding: 0; margin: 0;
}
.chapchin-title.pf-v5-c-title {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-20);
  font-weight: 800;
  line-height: var(--type-page-title-line-height);
  color: var(--color-ink);
}
.chapchin-lead {
  margin: 0;
  font-size: var(--text-13);
  line-height: var(--type-body-line-height);
  color: var(--color-ink-muted);
}
.chapchin-langs { align-self: flex-start; }
.chapchin-langs select {
  height: var(--control-h);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-12);
}

.chapchin-col-body.pf-v5-c-login__main-body { display: flex; flex-direction: column; gap: var(--space-16); }
.chapchin-col-foot.pf-v5-c-login__main-footer { display: flex; flex-direction: column; gap: var(--space-12); }

/* status message in the column (1j «پیام وضعیت در ستون»): colour, shape and text */
.pf-v5-c-alert.pf-m-inline {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 0; border-radius: var(--radius-md);
  font-size: var(--text-12); line-height: var(--type-caption-line-height);
  box-shadow: none;
}
.pf-v5-c-alert.pf-m-inline .pf-v5-c-alert__icon { display: none; }
.pf-v5-c-alert.pf-m-inline::before {
  content: ""; flex: none; display: inline-block;
  width: var(--space-8); height: var(--space-8);
}
.pf-v5-c-alert.pf-m-inline .pf-v5-c-alert__title { font-weight: 700; }
.pf-v5-c-alert.pf-m-danger { background: var(--color-danger-soft); color: var(--color-on-danger-soft); }
.pf-v5-c-alert.pf-m-danger::before {
  width: var(--space-6); height: var(--space-6); margin: var(--space-2);
  background: var(--color-danger); transform: rotate(45deg);
}
.pf-v5-c-alert.pf-m-warning { background: var(--color-signal-soft); color: var(--color-on-signal-soft); }
.pf-v5-c-alert.pf-m-warning::before {
  background: var(--color-signal); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pf-v5-c-alert.pf-m-success { background: var(--color-success-soft); color: var(--color-on-success-soft); }
.pf-v5-c-alert.pf-m-success::before {
  border-radius: var(--radius-pill); background: var(--color-status-healthy);
}
.pf-v5-c-alert.pf-m-info { background: var(--color-chip); color: var(--color-ink-2); }
.pf-v5-c-alert.pf-m-info::before {
  width: var(--space-12); height: var(--space-2); border-radius: var(--radius-xs);
  background: var(--color-status-off);
}

/* buttons and fields */
.pf-v5-c-button { height: var(--control-h); border-radius: var(--radius-md); font-weight: 700; }
.pf-v5-c-button.pf-m-block { width: 100%; }
.pf-v5-c-button.pf-m-aria-disabled,
.pf-v5-c-button:disabled {
  background: var(--color-chip); color: var(--color-ink-faint);
  border-color: var(--color-chip); cursor: default;
}
.pf-v5-c-form-control { height: var(--control-h); border-color: var(--color-ink-faint); border-radius: var(--radius-md); }
.pf-v5-c-form-control:focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* lost-key note and the secure address under the column (design 1a) */
.chapchin-lostkey {
  margin: 0; padding-top: var(--space-12);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-12); line-height: var(--type-caption-line-height);
  color: var(--color-ink-muted);
}
.chapchin-secure {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  font-size: var(--text-12); color: var(--color-ink-muted); text-align: center;
}
.chapchin-secure .mono {
  direction: ltr; unicode-bidi: isolate;
  font-family: var(--type-mono-family); font-size: var(--text-12);
}

.chapchin-info-band { display: block; }
.chapchin-note { font-size: var(--text-12); color: var(--color-ink-muted); line-height: var(--type-caption-line-height); }

/* username shown as a readonly chip on the later steps */
.pf-v5-c-input-group .pf-v5-c-form-control.pf-m-readonly { background: var(--color-surface-2); }