/*
 * signaH — Login Theme
 * Dark theme matching signah-website (#1A0A0D background)
 */

/* ── Design Tokens ────────────────────────────────────── */

:root {
  /* Page / surface */
  --sh-bg-page:          #1A0A0D;
  --sh-bg-card:          #2A0A0D;
  --sh-bg-raised:        #3B0000;
  --sh-bg-input:         #1A0A0D;

  /* Borders */
  --sh-border:           rgba(252, 165, 165, 0.1);
  --sh-border-mid:       rgba(252, 165, 165, 0.2);
  --sh-border-strong:    rgba(252, 165, 165, 0.35);

  /* Text */
  --sh-text-primary:     #FECACA;   /* blush */
  --sh-text-secondary:   rgba(252, 165, 165, 0.7);
  --sh-text-muted:       rgba(252, 165, 165, 0.45);
  --sh-text-white:       #FAF8F5;

  /* Brand / accent */
  --sh-crimson:          #9B2335;
  --sh-crimson-deep:     #7A1228;
  --sh-rose:             #F87171;
  --sh-blush:            #FECACA;

  /* Semantic */
  --sh-danger:           #F87171;
  --sh-danger-bg:        rgba(248, 113, 113, 0.12);
  --sh-success:          #34D399;
  --sh-success-bg:       rgba(52, 211, 153, 0.12);
  --sh-warning:          #FBBF24;
  --sh-warning-bg:       rgba(251, 191, 36, 0.12);
  --sh-info:             #60A5FA;
  --sh-info-bg:          rgba(96, 165, 250, 0.12);

  /* Typography */
  --sh-font:             system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sh-font-mono:        ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Shape */
  --sh-radius-sm:        4px;
  --sh-radius-md:        8px;
  --sh-radius-lg:        12px;
  --sh-radius-xl:        16px;

  /* Sizing */
  --sh-input-height:     44px;
  --sh-btn-height:       44px;

  /* Shadows */
  --sh-shadow-card:      0 4px 24px rgba(0, 0, 0, 0.5);
  --sh-shadow-focus:     0 0 0 3px rgba(155, 35, 53, 0.45);
}

/* ── Reset & Base ─────────────────────────────────────── */

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

html,
html body,
html body.login-pf,
html #kc-container {
  background-color: #1A0A0D !important;
  background-image: none !important;
}

body {
  font-family: var(--sh-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--sh-text-primary);
  background-color: var(--sh-bg-page);
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Page layout ──────────────────────────────────────── */

.sh-navbar {
  flex-shrink: 0;
}

#kc-container-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 1rem 2rem; /* 64px nav + 16px breathing room */
}

/* ── Card ─────────────────────────────────────────────── */

.card-pf,
.login-pf-page .card-pf {
  background: var(--sh-bg-card);
  border: 1px solid var(--sh-border-mid);
  border-radius: var(--sh-radius-xl);
  box-shadow: var(--sh-shadow-card);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* ── Header / logo inside card ────────────────────────── */

#kc-header-wrapper {
  text-align: center;
  margin-bottom: 1.75rem;
}

#kc-header-wrapper::before { display: none !important; }

#kc-header-wrapper .kc-logo-text,
#kc-header-wrapper span { display: none; }

/* ── Page title ───────────────────────────────────────── */

#kc-page-title,
.login-pf-page h1 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--sh-text-secondary);
  text-align: center;
  margin: 0 0 1.5rem;
}

/* ── Form groups ──────────────────────────────────────── */

.form-group,
.pf-c-form__group {
  margin-bottom: 1.25rem;
  display: block !important;
  grid-template-columns: unset !important;
}

.pf-c-form__group-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.35rem;
  padding: 0 !important;
}

label,
.pf-c-form__label {
  display: inline;
  font-size: 13px;
  font-weight: 500;
  color: var(--sh-text-secondary);
}

.pf-c-form__label-required,
.required {
  color: var(--sh-danger);
  font-size: 12px;
  margin-left: 2px;
}

.pf-c-form__group-control { padding: 0 !important; }

.sh-required-note {
  font-size: 12px;
  color: var(--sh-text-muted);
  margin-bottom: 1.25rem;
  text-align: right;
}

/* ── Inputs ───────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea,
.form-control,
.pf-c-form-control {
  display: block;
  width: 100%;
  height: var(--sh-input-height);
  padding: 0 0.875rem;
  font-family: var(--sh-font);
  font-size: 15px;
  color: var(--sh-text-primary);
  background-color: var(--sh-bg-input);
  border: 1px solid var(--sh-border-mid);
  border-radius: var(--sh-radius-md);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.pf-c-form-control:focus {
  border-color: var(--sh-crimson);
  box-shadow: var(--sh-shadow-focus);
}

input::placeholder { color: var(--sh-text-muted); }

textarea {
  height: auto;
  min-height: 100px;
  padding-top: 0.625rem;
  resize: vertical;
}

.kc-password-toggle,
.pf-c-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.kc-password-toggle input,
.pf-c-input-group input { flex: 1; }

/* ── Buttons ──────────────────────────────────────────── */

.btn,
.pf-c-button,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--sh-btn-height);
  padding: 0 1.25rem;
  font-family: var(--sh-font);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--sh-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}

/* Primary — crimson fill */
.btn-primary,
.pf-c-button.pf-m-primary,
input[type="submit"],
button[type="submit"],
#kc-login,
#kc-register-submit {
  background-color: var(--sh-crimson);
  color: var(--sh-text-white);
  border-color: var(--sh-crimson);
  width: 100%;
}

.btn-primary:hover,
.pf-c-button.pf-m-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
#kc-login:hover {
  background-color: var(--sh-crimson-deep);
  border-color: var(--sh-crimson-deep);
}

.btn-primary:focus,
input[type="submit"]:focus,
button[type="submit"]:focus { box-shadow: var(--sh-shadow-focus); }

.btn-primary:active,
input[type="submit"]:active { transform: scale(0.99); }

/* Secondary — ghost */
.btn-default,
.pf-c-button.pf-m-secondary,
#kc-login-social .zocial,
.social-link {
  background-color: transparent;
  color: var(--sh-text-primary);
  border-color: var(--sh-border-mid);
}

.btn-default:hover,
.pf-c-button.pf-m-secondary:hover {
  background-color: var(--sh-bg-raised);
  border-color: var(--sh-border-strong);
}

/* Link style */
.btn-link,
.pf-c-button.pf-m-link {
  background: none;
  border-color: transparent;
  color: var(--sh-rose);
  padding: 0;
  height: auto;
}

.btn-link:hover,
.pf-c-button.pf-m-link:hover {
  color: var(--sh-blush);
  text-decoration: underline;
}

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

a { color: var(--sh-rose); text-decoration: none; }
a:hover { color: var(--sh-blush); text-decoration: underline; }

#kc-forgot-pw,
.login-pf-signup a,
#kc-registration a { font-size: 13px; }

/* ── Checkbox ─────────────────────────────────────────── */

.checkbox,
.pf-c-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sh-text-secondary);
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sh-crimson);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Divider ──────────────────────────────────────────── */

.login-pf-social-section hr,
#kc-social-providers::before {
  border: none;
  border-top: 1px solid var(--sh-border);
  margin: 1.5rem 0;
}

/* ── Social / Identity Providers ─────────────────────── */

#kc-social-providers { margin-top: 1.25rem; }

#kc-social-providers ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#kc-social-providers .zocial,
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--sh-btn-height);
  padding: 0 1rem;
  font-size: 14px;
  font-weight: 500;
  background: var(--sh-bg-raised);
  border: 1px solid var(--sh-border-mid);
  border-radius: var(--sh-radius-md);
  color: var(--sh-text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

#kc-social-providers .zocial:hover,
.social-link:hover {
  background-color: #4A0000;
  border-color: var(--sh-border-strong);
}

/* ── Alerts ───────────────────────────────────────────── */

.alert,
.pf-c-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.75rem 1rem;
  border-radius: var(--sh-radius-md);
  font-size: 14px;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
}

.alert-error,
.pf-c-alert.pf-m-danger {
  background-color: var(--sh-danger-bg);
  border-color: rgba(248, 113, 113, 0.4);
  color: #FCA5A5;
}

.alert-warning,
.pf-c-alert.pf-m-warning {
  background-color: var(--sh-warning-bg);
  border-color: rgba(251, 191, 36, 0.4);
  color: #FCD34D;
}

.alert-success,
.pf-c-alert.pf-m-success {
  background-color: var(--sh-success-bg);
  border-color: rgba(52, 211, 153, 0.4);
  color: #6EE7B7;
}

.alert-info,
.pf-c-alert.pf-m-info {
  background-color: var(--sh-info-bg);
  border-color: rgba(96, 165, 250, 0.4);
  color: #93C5FD;
}

.pf-c-form__helper-text.pf-m-error,
.has-error .help-block,
span.kc-feedback-text {
  font-size: 13px;
  color: var(--sh-danger);
  margin-top: 4px;
  display: block;
}

/* ── OTP / TOTP ───────────────────────────────────────── */

#kc-totp-secret-key,
.kc-totp-code {
  font-family: var(--sh-font-mono);
  font-size: 14px;
  background: var(--sh-bg-raised);
  border: 1px solid var(--sh-border-mid);
  border-radius: var(--sh-radius-md);
  padding: 0.75rem 1rem;
  word-break: break-all;
  letter-spacing: 0.05em;
  color: var(--sh-text-primary);
}

/* ── Registration / sign-up link ──────────────────────── */

#kc-registration,
.login-pf-signup {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 14px;
  color: var(--sh-text-secondary);
  padding-top: 1.25rem;
  border-top: 1px solid var(--sh-border);
  background: transparent !important;
}

/* ── Info text ────────────────────────────────────────── */

#kc-info,
#kc-info-wrapper,
.login-pf-page .kc-info {
  text-align: center;
  font-size: 13px;
  color: var(--sh-text-muted);
  margin-top: 1rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 480px) {
  .card-pf {
    padding: 1.75rem 1.25rem;
    border-radius: var(--sh-radius-lg);
  }
}