/* ============================================================
   TABLANO LOGIN THEME
   Design tokens and classes mirror tablano-account so the two
   apps share a consistent visual language.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,300..400&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Typography */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Surfaces & backgrounds */
  --color-bg: #f4f7f9;
  --color-surface: #ffffff;
  --color-surface-hover: #f0f5f8;
  --color-surface-selected: #e0f2fe;

  /* Text */
  --color-text: #1a2535;
  --color-text-muted: #64748b;
  --color-text-subtle: #94a3b8;
  --color-text-disabled: #cbd5e1;
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* Accent (brand blue) */
  --color-accent: #039eef;
  --color-accent-hover: #0285cc;
  --color-accent-active: #0369a1;
  --color-accent-subtle: #e0f2fe;
  --color-accent-focus-ring: rgba(3, 158, 239, 0.12);

  /* Semantic */
  --color-success: #22c55e;
  --color-success-subtle: #dcfce7;
  --color-success-text: #166534;
  --color-error: #ef4444;
  --color-error-subtle: #fee2e2;
  --color-error-text: #991b1b;
  --color-error-focus-ring: rgba(239, 68, 68, 0.12);
  --color-warning: #f59e0b;
  --color-warning-subtle: #fef3c7;
  --color-warning-text: #92400e;
  --color-info: #3b82f6;
  --color-info-subtle: #eff6ff;
  --color-info-text: #1e40af;

  /* Border radius */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Motion */
  --transition: 150ms ease;

  /* Typography scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* Line heights */
  --line-height-normal: 1.5;
  --line-height-tight: 1.25;

  /* Lucide icon data-URIs (stroke color set via mask + currentColor) */
  --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
  --icon-alert-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  --icon-alert-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cline x1='12' x2='12' y1='9' y2='13'/%3E%3Cline x1='12' x2='12.01' y1='17' y2='17'/%3E%3C/svg%3E");
  --icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --icon-refresh-cw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --icon-shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --icon-smartphone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");

  /* Keycloak realm logo — realm.displayNameHtml expected to contain
     <div class="kc-logo-text"><span>tablano</span></div> */
  --keycloak-logo-url: url('../img/tablano-logo.svg');
  --keycloak-logo-width: 260px;
  --keycloak-logo-height: 60px;
}

/* ============================================================
   BASE
   ============================================================ */

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

[hidden] {
  display: none !important;
}

html.tab-html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.tab-body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-bg);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.tab-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.tab-login__container {
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tab-login__header {
  display: flex;
  justify-content: center;
}

/* Logo — .kc-logo-text comes from the realm's HTML display name. */
#kc-header-wrapper {
  display: flex;
  justify-content: center;
}

div.kc-logo-text {
  background-image: var(--keycloak-logo-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: var(--keycloak-logo-width);
  height: var(--keycloak-logo-height);
  max-width: 100%;
}

div.kc-logo-text span {
  display: none;
}

/* ============================================================
   CARD
   ============================================================ */

.tab-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tab-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.tab-card__header-utilities {
  flex-shrink: 0;
}

.tab-card__title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.tab-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tab-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Hide wrapper elements that render unconditionally in FTL but end
   up with no element children (whitespace only). Flexbox `gap` is
   not applied to display:none children, so surrounding spacing
   collapses too. Covers: footers, per-field error containers, and
   the password helper strip when no forgot-password / remember-me. */
.tab-card__footer:not(:has(*)),
[id^='input-error-container-']:not(:has(*)),
.tab-field__helper:not(:has(.tab-field__helper-inner > *)),
.tab-field__helper-inner:not(:has(*)),
#kc-info:not(:has(*)),
#kc-info-wrapper:not(:has(*)) {
  display: none;
}

.tab-card__footer-band {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.tab-card__footer-band-item {
  display: inline;
}

/* ============================================================
   FORM
   ============================================================ */

.tab-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.tab-form__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tab-content-wrap + .tab-content-wrap {
  margin-top: 1rem;
}

.tab-mt {
  margin-top: 1rem;
}

.tab-fill {
  flex: 1;
  min-width: 0;
}

.tab-required-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

/* ============================================================
   FIELD
   ============================================================ */

.tab-field {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.tab-field__label-wrap {
  display: flex;
}

.tab-field__label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.tab-field__label-text {
  display: inline;
}

.tab-field__required,
.pf-v5-c-form__label-required {
  color: var(--color-error);
}

.tab-field__helper {
  margin-top: 0.125rem;
}

.tab-field__helper-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tab-field__helper-item {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.tab-field__helper-item-text {
  font-size: var(--font-size-xs);
}

.tab-field__error-text {
  font-size: var(--font-size-xs);
  color: var(--color-error);
}

/* ============================================================
   INPUT (wrapper) + native input/select/textarea
   ============================================================ */

.tab-input {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.tab-input > input,
.tab-input > select,
.tab-input > textarea {
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  line-height: var(--line-height-normal);
}

.tab-input > input:focus,
.tab-input > select:focus,
.tab-input > textarea:focus {
  outline: none;
}

.tab-input > input::placeholder,
.tab-input > textarea::placeholder {
  color: var(--color-text-subtle);
}

.tab-input:hover:not(:focus-within):not(.tab-input--readonly) {
  border-color: var(--color-border-strong);
}

.tab-input:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}

.tab-input--readonly,
.tab-input:has(> input[readonly]),
.tab-input:has(> input:disabled) {
  background-color: var(--color-surface-hover);
  cursor: default;
}

.tab-input--error,
.tab-field--error .tab-input {
  border-color: var(--color-error);
}

.tab-input--error:focus-within,
.tab-field--error .tab-input:focus-within {
  box-shadow: 0 0 0 3px var(--color-error-focus-ring);
}

/* Textarea specifics */
.tab-input:has(> textarea) {
  padding: 0;
}

.tab-input > textarea {
  padding: 0.4375rem 0.625rem;
  resize: vertical;
  min-height: 6rem;
}

/* Select specifics: reserve space for the chevron overlay */
.tab-input:has(> select) {
  position: relative;
  padding-right: 2rem;
}

.tab-input > select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.tab-input__util {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

.tab-input__util svg {
  width: 1em;
  height: 1em;
}

.tab-input__toggle {
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   INPUT GROUP (input + adjacent button, e.g. password + eye)
   ============================================================ */

.tab-input-group {
  display: flex;
  align-items: stretch;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.tab-input-group:hover:not(:focus-within) {
  border-color: var(--color-border-strong);
}

.tab-input-group:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}

.tab-input-group--error,
.tab-field--error .tab-input-group {
  border-color: var(--color-error);
}

.tab-input-group--error:focus-within,
.tab-field--error .tab-input-group:focus-within {
  box-shadow: 0 0 0 3px var(--color-error-focus-ring);
}

/* Inner input inside a group: no border, no shadow, fill height */
.tab-input-group .tab-input,
.tab-input-group .tab-input:focus-within,
.tab-input-group .tab-input:hover {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  width: 100%;
}

.tab-input-group__item {
  display: flex;
  align-items: center;
}

/* Icon button inside a group */
.tab-input-group .tab-btn--icon {
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  padding: 0 0.75rem;
  box-shadow: none;
}

.tab-input-group .tab-btn--icon:hover,
.tab-input-group .tab-btn--icon:focus {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
  outline: none;
  box-shadow: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

.tab-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.tab-btn:disabled,
.tab-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.tab-btn--primary {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
.tab-btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}
.tab-btn--primary:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
}

.tab-btn--secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.tab-btn--secondary:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
}

.tab-btn--link {
  background: transparent;
  color: var(--color-accent);
  border-color: transparent;
  padding: 0.25rem 0.5rem;
}
.tab-btn--link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.tab-btn--block {
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: var(--font-size-md);
}

.tab-btn--icon {
  padding: 0.375rem 0.5rem;
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.tab-btn--icon:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

/* ============================================================
   CHECKBOX (custom-styled native input)
   ============================================================ */

.tab-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}

.tab-check__input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  transition:
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
  flex-shrink: 0;
}

.tab-check__input::before {
  content: '';
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background-color: currentColor;
  mask-image: var(--icon-check);
  -webkit-mask-image: var(--icon-check);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  opacity: 0;
  transition: opacity var(--transition);
}

.tab-check__input:hover {
  border-color: var(--color-accent);
}

.tab-check__input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}

.tab-check__input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.tab-check__input:checked::before {
  opacity: 1;
}

.tab-check__label {
  cursor: pointer;
  user-select: none;
}

.tab-check__required {
  color: var(--color-error);
  margin-left: 0.125rem;
}

/* ============================================================
   ALERTS
   ============================================================ */

.tab-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  border-left: 4px solid transparent;
}

.tab-alert__icon {
  flex-shrink: 0;
}

.tab-alert__title {
  flex: 1;
  min-width: 0;
}

.tab-alert--danger {
  background-color: var(--color-error-subtle);
  border-left-color: var(--color-error);
  color: var(--color-error-text);
}

.tab-alert--warning {
  background-color: var(--color-warning-subtle);
  border-left-color: var(--color-warning);
  color: var(--color-warning-text);
}

.tab-alert--success {
  background-color: var(--color-success-subtle);
  border-left-color: var(--color-success);
  color: var(--color-success-text);
}

.tab-alert--info {
  background-color: var(--color-info-subtle);
  border-left-color: var(--color-info);
  color: var(--color-info-text);
}

/* ============================================================
   LANGUAGE SELECT
   ============================================================ */

.tab-language-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Hide the UI selector — browser locale detection and switching
     via URL parameter still work, this only removes the header
     control. Remove this line to re-enable the visible selector. */
  display: none;
}

.tab-language-select__control {
  appearance: none;
  -webkit-appearance: none;
  min-width: 8.5rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.375rem 2rem 0.375rem 0.625rem;
  cursor: pointer;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.tab-language-select__control:hover {
  border-color: var(--color-border-strong);
}

.tab-language-select__control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}

.tab-language-select__chevron {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}

/* Cross-browser <option> styling — most browsers only honor
   background-color, color, and (partially) padding on <option>. */
.tab-language-select__control option {
  padding: 0.375rem 0.5rem;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
}

.tab-language-select__control option:checked {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

/* Modern customizable <select> (Chrome 135+). Enables the picker
   popover to be styled like our own dropdown. Falls back to native
   rendering in browsers that don't support appearance: base-select. */
@supports (appearance: base-select) {
  .tab-language-select__control {
    appearance: base-select;
  }

  .tab-language-select__control::picker-icon {
    display: none;
  }

  .tab-language-select__control::picker(select) {
    appearance: base-select;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.25rem;
    min-width: 8rem;
  }

  .tab-language-select__control::picker(select) option {
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-xs);
    background-color: transparent;
    color: var(--color-text);
  }

  .tab-language-select__control::picker(select) option:hover,
  .tab-language-select__control::picker(select) option:focus {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
    outline: none;
  }

  .tab-language-select__control::picker(select) option:checked {
    background-color: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
  }
}

/* ============================================================
   ICONS
   Lucide SVG data URIs applied via mask-image. Colored via
   currentColor so parent text color drives the icon color.
   ============================================================ */

.tab-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  flex-shrink: 0;
  vertical-align: -0.125em;
}

.tab-icon-eye { mask-image: var(--icon-eye); -webkit-mask-image: var(--icon-eye); }
.tab-icon-eye-off { mask-image: var(--icon-eye-off); -webkit-mask-image: var(--icon-eye-off); }
.tab-icon-alert-circle { mask-image: var(--icon-alert-circle); -webkit-mask-image: var(--icon-alert-circle); }
.tab-icon-alert-triangle { mask-image: var(--icon-alert-triangle); -webkit-mask-image: var(--icon-alert-triangle); }
.tab-icon-check-circle { mask-image: var(--icon-check-circle); -webkit-mask-image: var(--icon-check-circle); }
.tab-icon-info { mask-image: var(--icon-info); -webkit-mask-image: var(--icon-info); }
.tab-icon-chevron-down { mask-image: var(--icon-chevron-down); -webkit-mask-image: var(--icon-chevron-down); }
.tab-icon-chevron-right { mask-image: var(--icon-chevron-right); -webkit-mask-image: var(--icon-chevron-right); }
.tab-icon-refresh-cw { mask-image: var(--icon-refresh-cw); -webkit-mask-image: var(--icon-refresh-cw); }
.tab-icon-copy { mask-image: var(--icon-copy); -webkit-mask-image: var(--icon-copy); }
.tab-icon-check { mask-image: var(--icon-check); -webkit-mask-image: var(--icon-check); }
.tab-icon-shield-check { mask-image: var(--icon-shield-check); -webkit-mask-image: var(--icon-shield-check); }
.tab-icon-smartphone { mask-image: var(--icon-smartphone); -webkit-mask-image: var(--icon-smartphone); }

/* Alert icons inherit color from their alert variant */
.tab-alert--danger .tab-alert__icon { color: var(--color-error); }
.tab-alert--warning .tab-alert__icon { color: var(--color-warning); }
.tab-alert--success .tab-alert__icon { color: var(--color-success); }
.tab-alert--info .tab-alert__icon { color: var(--color-info); }

/* ============================================================
   TOOLTIP (attempted-username restart button)
   ============================================================ */

.tab-tooltip {
  position: relative;
}

.tab-tooltip__text {
  position: absolute;
  left: 110%;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-text);
  color: var(--color-text-inverse);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 10;
}

.tab-tooltip:hover .tab-tooltip__text,
.tab-tooltip:focus-visible .tab-tooltip__text {
  visibility: visible;
  opacity: 0.9;
}

/* ============================================================
   TOTP CONFIG STEP LIST
   Renders the numbered instruction list on the TOTP setup page
   as circular accent badges instead of native OL markers.
   ============================================================ */

#kc-totp-settings {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  counter-reset: totp-step;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#kc-totp-settings > li {
  counter-increment: totp-step;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  align-items: start;
}

#kc-totp-settings > li::before {
  content: counter(totp-step);
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  /* Shift the badge up so its number visually aligns with the first
     line of text (which has line-height 1.5 by default). */
  margin-top: -0.1875rem;
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* All step content stacks in the second column. */
#kc-totp-settings > li > * {
  grid-column: 2;
  margin: 0;
}

/* QR code spans the full grid width and centers horizontally within
   the card. The image includes a required quiet-zone padding that
   we don't try to compensate for — instead we center it visually.
   Parent ID prefix boosts specificity above `#kc-totp-settings > li > *`. */
#kc-totp-settings #kc-totp-secret-qr-code {
  grid-column: 1 / -1;
  justify-self: center;
}

/* Nested list of supported authenticator apps in step 1. */
#kc-totp-supported-apps {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

#kc-totp-supported-apps > li {
  position: relative;
  padding-left: 0.875rem;
}

#kc-totp-supported-apps > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}

/* ============================================================
   OTP CREDENTIAL PICKER
   Shown at login when the user has multiple OTP credentials.
   Inline JS in login-otp.ftl toggles the --selected modifier on
   the clicked card and removes it from the others.
   ============================================================ */

.tab-otp-list {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--transition),
    background-color var(--transition);
}

.tab-otp-list + .tab-otp-list {
  margin-top: 0.5rem;
}

.tab-otp-list:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-hover);
}

.tab-otp-list.tab-otp-list__item--selected {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

.tab-otp-list__item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.tab-otp-list__item-icon {
  display: inline-flex;
  color: var(--color-text-muted);
  font-size: 1.25rem;
}

.tab-otp-list.tab-otp-list__item--selected .tab-otp-list__item-icon {
  color: var(--color-accent);
}

.tab-otp-list__item-title {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.tab-otp-list.tab-otp-list__item--selected .tab-otp-list__item-title {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   MISC
   ============================================================ */

#kc-recovery-codes-list {
  columns: 2;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 1rem 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .tab-login {
    padding: 1.5rem 1rem;
  }

  .tab-card {
    padding: 1.25rem;
  }

  .tab-card__header {
    flex-direction: column;
    align-items: stretch;
  }
}