/*
 * Anzai Home Keycloak theme.
 *
 * Keep layout, responsive behavior, sizing, visibility, and interaction
 * geometry owned by Keycloak and PatternFly. This file maps the Anzai Home
 * design system onto their public custom properties and adds only the small
 * number of brand and contrast rules that those properties cannot express.
 */

/* =========================================================
   Design tokens
   ========================================================= */

:root {
  --ah-ink-900: #132a3a;
  --ah-ink-700: #29485c;
  --ah-ink-500: #587081;
  --ah-accent-700: #00666c;
  --ah-accent-600: #007c83;
  --ah-accent-100: #ddf4f2;
  --ah-surface: #ffffff;
  --ah-background: #f6f8f7;
  --ah-surface-muted: #e4ebe9;
  --ah-border: #c5d1ce;
  --ah-success: #197a55;
  --ah-warning: #a86600;
  --ah-danger: #b33a3a;
  --ah-info: #256b8e;
  --ah-radius-sm: 6px;
  --ah-radius-md: 12px;
  --ah-radius-lg: 20px;
  --ah-shadow-sm: 0 4px 16px rgba(19, 42, 58, 0.06);
  --ah-shadow-md: 0 8px 28px rgba(19, 42, 58, 0.08);
  --ah-focus-color: rgba(0, 124, 131, 0.12);

  /* Body / UI */
  --ah-font-sans:
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;

  /* Heading / editorial */
  --ah-font-serif:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  /* Code / technical */
  --ah-font-mono:
    ui-monospace,
    "SFMono-Regular",
    Consolas,
    monospace;

  /* Semantic roles */
  --ah-font-body: var(--ah-font-sans);
  --ah-font-heading: var(--ah-font-serif);
  --ah-font-code: var(--ah-font-mono);
}

/* =========================================================
   PatternFly global mappings
   ========================================================= */

:root {
  /* PatternFly 4 (Login) */
  --pf-global--FontFamily--sans-serif: var(--ah-font-body);
  --pf-global--FontFamily--heading--sans-serif: var(--ah-font-body);
  --pf-global--FontFamily--monospace: var(--ah-font-code);

  /* PatternFly 5 (Account and Admin Consoles) */
  --pf-v5-global--FontFamily--text: var(--ah-font-body);
  --pf-v5-global--FontFamily--heading: var(--ah-font-body);
  --pf-v5-global--FontFamily--monospace: var(--ah-font-code);
  --pf-v5-global--Color--100: var(--ah-ink-900);
  --pf-v5-global--Color--200: var(--ah-ink-700);
  --pf-v5-global--Color--300: var(--ah-ink-500);
  --pf-v5-global--BackgroundColor--100: var(--ah-surface);
  --pf-v5-global--BackgroundColor--150: var(--ah-background);
  --pf-v5-global--BackgroundColor--200: var(--ah-surface-muted);
  --pf-v5-global--BorderColor--100: var(--ah-border);
  --pf-v5-global--primary-color--100: var(--ah-accent-600);
  --pf-v5-global--primary-color--200: var(--ah-accent-700);
  --pf-v5-global--success-color--100: var(--ah-success);
  --pf-v5-global--warning-color--100: var(--ah-warning);
  --pf-v5-global--danger-color--100: var(--ah-danger);
  --pf-v5-global--info-color--100: var(--ah-info);
  --pf-v5-global--BorderRadius--sm: var(--ah-radius-sm);
  --pf-v5-global--BorderRadius--lg: var(--ah-radius-md);
  --pf-v5-global--BoxShadow--sm: var(--ah-shadow-sm);
  --pf-v5-global--BoxShadow--md: var(--ah-shadow-md);
}

/* =========================================================
   Shared components
   ========================================================= */

body:is([data-page-id="account"], [data-page-id="admin"])
  :where(
    .pf-v5-c-button,
    .pf-v5-c-form-control,
    .pf-v5-c-menu-toggle,
    .pf-v5-c-nav__link,
    a
  ):focus-visible {
  outline-color: var(--ah-accent-600);
  box-shadow: 0 0 0 4px var(--ah-focus-color);
}

/* =========================================================
   Login
   ========================================================= */

body[data-page-id^="login-"] {
  color: var(--ah-ink-900);
  background: var(--ah-background);
  font-family: var(--ah-font-body);
}

body[data-page-id^="login-"] #kc-header {
  color: var(--ah-ink-900);
}

body[data-page-id^="login-"] #kc-header-wrapper {
  color: inherit;
  font-family: var(--ah-font-heading);
  font-size: 0;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-shadow: none;
}

body[data-page-id^="login-"] #kc-header-wrapper::before {
  display: block;
  width: min(100%, 320px);
  aspect-ratio: 32 / 9;
  margin-inline: auto;
  background: url("../img/logo.svg") center / contain no-repeat;
  content: "";
}

body[data-page-id^="login-"] .card-pf {
  background: var(--ah-surface);
  border: 1px solid var(--ah-border);
  border-radius: var(--ah-radius-lg);
  box-shadow: var(--ah-shadow-sm);
}

body[data-page-id^="login-"] .pf-v5-c-login__main-header {
  border-top: 0;
}

body[data-page-id^="login-"] #kc-page-title {
  color: var(--ah-ink-900);
  font-family: var(--ah-font-heading);
}

body[data-page-id^="login-"]
  :where(input, select, textarea, button) {
  font-family: var(--ah-font-body);
}

body[data-page-id^="login-"] :where(code, pre),
body[data-page-id^="login-"]
  :is(
    #code,
    #device-user-code,
    #kc-recovery-codes-list,
    #kc-totp-secret-key,
    #otp,
    #recoveryCodeInput,
    #totp,
    #certificate_subjectDN
  ) {
  font-family: var(--ah-font-code);
}

body[data-page-id^="login-"] :is(a, .pf-c-button.pf-m-link) {
  color: var(--ah-accent-600);
}

body[data-page-id^="login-"] :is(a, .pf-c-button.pf-m-link):hover {
  color: var(--ah-accent-700);
}

body[data-page-id^="login-"] .pf-c-button.pf-m-primary {
  background-color: var(--ah-accent-600);
}

body[data-page-id^="login-"] .pf-c-button.pf-m-primary:hover {
  background-color: var(--ah-accent-700);
}

body[data-page-id^="login-"] .pf-c-form-control:focus {
  border-color: var(--ah-accent-600);
  box-shadow: 0 0 0 4px var(--ah-focus-color);
}

body[data-page-id^="login-"] :is(.pf-c-alert, #kc-info-wrapper) {
  border-color: var(--ah-border);
  border-radius: var(--ah-radius-md);
}

body[data-page-id^="login-"] #kc-info-wrapper {
  color: var(--ah-ink-500);
  background: var(--ah-surface-muted);
}

/*
 * Keycloak's menu-button script controls aria-expanded, while the parent
 * theme relies on CSS for the initial hidden state. Keep the menu hidden until
 * hover/focus so locale options never render permanently expanded.
 */
body[data-page-id^="login-"] #kc-locale ul {
  display: none;
}

body[data-page-id^="login-"] #kc-locale-dropdown {
  display: inline-block;
}

body[data-page-id^="login-"] #kc-locale-dropdown:is(:hover, :focus-within) ul {
  display: block;
}

/* =========================================================
   Account Console
   ========================================================= */

body[data-page-id="account"] {
  font-family: var(--ah-font-body);
}

body[data-page-id="account"] :where(code, pre) {
  font-family: var(--ah-font-code);
}

body[data-page-id="account"] .pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: var(--ah-background);
}

body[data-page-id="account"] .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--ah-surface);
}

body[data-page-id="account"] .pf-v5-c-nav__link {
  --pf-v5-c-nav__link--Color: var(--ah-ink-700);
  --pf-v5-c-nav__link--hover--Color: var(--ah-accent-700);
  --pf-v5-c-nav__link--m-current--Color: var(--ah-accent-700);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--ah-accent-100);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--ah-accent-600);
}

/* =========================================================
   Admin Console
   ========================================================= */

body[data-page-id="admin"] {
  font-family: var(--ah-font-body);
}

body[data-page-id="admin"] :where(code, pre) {
  font-family: var(--ah-font-code);
}

body[data-page-id="admin"] .pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: var(--ah-background);
}

body[data-page-id="admin"] .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--ah-surface);
  color: var(--ah-ink-900);
  box-shadow: inset 0 -1px 0 var(--ah-border);
}

body[data-page-id="admin"] .pf-v5-c-masthead
  :is(.pf-v5-c-button, .pf-v5-c-menu-toggle) {
  color: var(--ah-ink-700);
}

body[data-page-id="admin"] #page-sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--ah-surface-muted);
  --pf-v5-c-page__sidebar--BoxShadow: inset -1px 0 0 var(--ah-border);
}

body[data-page-id="admin"] #page-sidebar .pf-v5-c-nav__section-title {
  --pf-v5-c-nav__section-title--Color: var(--ah-ink-500);
}

body[data-page-id="admin"] #page-sidebar .pf-v5-c-nav__link {
  --pf-v5-c-nav__link--Color: var(--ah-ink-700);
  --pf-v5-c-nav__link--hover--Color: var(--ah-accent-700);
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--ah-accent-100);
  --pf-v5-c-nav__link--m-current--Color: var(--ah-accent-700);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--ah-accent-100);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--ah-accent-600);
}
body[data-page-id^="login-"] #kc-header-wrapper .ah-admin-login-label {
  display: block;
  margin-top: 0.75rem;
  color: var(--ah-ink-700);
  font-family: var(--ah-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}