/* ==========================================================================
   Ironclad Keycloak Theme - Custom Styles
   Branded for ironclad.chat
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* ---------- CSS Custom Properties (matched to ironclad-chat webapp) ---------- */
:root {
    --ic-bg-primary: #15191E;
    --ic-bg-secondary: #15191E;
    --ic-card-bg: #21262C;
    --ic-card-border: #34393F;
    --ic-input-bg: #2A3039;
    --ic-input-border: #34393F;
    --ic-input-focus-border: #0DBD8B;
    --ic-accent: #0DBD8B;
    --ic-accent-hover: #0A9B6F;
    --ic-accent-glow: rgba(13, 189, 139, 0.25);
    --ic-text-primary: #FFFFFF;
    --ic-text-secondary: #A9B2BC;
    --ic-text-muted: #6F7882;
    --ic-danger: #FF5B55;
    --ic-warning: #FFA726;
    --ic-success: #0DBD8B;
    --ic-info: #0086E6;
    --ic-radius: 12px;
    --ic-radius-sm: 8px;
    --ic-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --ic-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --ic-transition: 0.2s ease;
}

/* ---------- Global Reset ---------- */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--ic-bg-primary);
    background-attachment: fixed;
    color: var(--ic-text-primary);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Hide default Keycloak header text ---------- */
#kc-header {
    display: none;
}

#kc-header-wrapper {
    display: none;
}

/* ---------- Login Container ---------- */
.login-pf {
    background: transparent;
}

.login-pf body,
.login-pf {
    background: var(--ic-bg-primary);
    background-attachment: fixed;
}

#kc-content {
    padding: 0;
}

#kc-content-wrapper {
    padding: 0;
}

/* ---------- Login Card ---------- */
#kc-form-wrapper,
.card-pf {
    background: var(--ic-card-bg);
    border: 1px solid var(--ic-card-border);
    border-radius: var(--ic-radius);
    box-shadow: var(--ic-shadow);
    padding: 2.5rem;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}

#kc-login {
    max-width: 440px;
    margin: 0 auto;
}

#kc-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

#kc-form {
    width: 100%;
}

/* ---------- Logo ---------- */
.ic-logo-wrapper {
    text-align: center;
    margin-bottom: 2rem;
}

.ic-logo-wrapper img {
    max-width: 200px;
    height: auto;
}

/* ---------- Page Title ---------- */
#kc-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ic-text-primary);
    text-align: center;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

/* ---------- Labels ---------- */
label,
.control-label {
    color: var(--ic-text-secondary) !important;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    display: block;
}

/* ---------- Input Fields ---------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
.form-control,
#kc-form-login input[type="text"],
#kc-form-login input[type="password"] {
    background: var(--ic-input-bg) !important;
    border: 1px solid var(--ic-input-border) !important;
    border-radius: var(--ic-radius-sm) !important;
    color: var(--ic-text-primary) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
    font-family: 'Open Sans', sans-serif !important;
    width: 100% !important;
    transition: border-color var(--ic-transition), box-shadow var(--ic-transition) !important;
    outline: none !important;
    height: auto !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
.form-control:focus {
    border-color: var(--ic-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--ic-accent-glow) !important;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
.form-control::placeholder {
    color: var(--ic-text-muted) !important;
    opacity: 1 !important;
}

/* ---------- Form Groups ---------- */
.form-group {
    margin-bottom: 1.25rem;
}

/* ---------- Checkbox / Remember Me ---------- */
#kc-form-options {
    margin-bottom: 1rem;
}

#kc-form-options label {
    color: var(--ic-text-secondary) !important;
    font-size: 0.8125rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

input[type="checkbox"] {
    accent-color: var(--ic-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ---------- Primary Button ---------- */
input[type="submit"],
button[type="submit"],
.btn-primary,
#kc-login {
    background: var(--ic-accent) !important;
    color: #0a0a1a !important;
    border: none !important;
    border-radius: var(--ic-radius-sm) !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: 'Open Sans', sans-serif !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: background var(--ic-transition), transform var(--ic-transition), box-shadow var(--ic-transition) !important;
    text-transform: none !important;
    letter-spacing: 0;
    line-height: 1.5 !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.btn-primary:hover {
    background: var(--ic-accent-hover) !important;
    box-shadow: 0 4px 16px var(--ic-accent-glow) !important;
    transform: translateY(-1px);
}

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

input[type="submit"]:focus,
button[type="submit"]:focus,
.btn-primary:focus {
    box-shadow: 0 0 0 3px var(--ic-accent-glow) !important;
    outline: none !important;
}

/* ---------- Secondary / Default Buttons ---------- */
.btn-default {
    background: transparent !important;
    color: var(--ic-accent) !important;
    border: 1px solid var(--ic-card-border) !important;
    border-radius: var(--ic-radius-sm) !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all var(--ic-transition) !important;
}

.btn-default:hover {
    border-color: var(--ic-accent) !important;
    background: rgba(13, 189, 139, 0.08) !important;
}

/* ---------- Links ---------- */
a,
a:link {
    color: var(--ic-accent);
    text-decoration: none;
    transition: color var(--ic-transition);
}

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

#kc-registration a,
#kc-form-options a,
.kc-form-options a {
    color: var(--ic-accent) !important;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Forgot password link */
span.kc-forgot a,
.kc-form-options .kc-forgot a {
    color: var(--ic-text-secondary) !important;
    font-weight: 400;
}

span.kc-forgot a:hover,
.kc-form-options .kc-forgot a:hover {
    color: var(--ic-accent) !important;
}

/* ---------- Divider ---------- */
.ic-divider {
    display: flex;
    align-items: center;
    margin: 1.75rem 0;
    gap: 1rem;
}

.ic-divider::before,
.ic-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ic-card-border);
}

.ic-divider span {
    color: var(--ic-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    white-space: nowrap;
    text-transform: lowercase;
}

/* ---------- Fingerprint / WebAuthn Button ---------- */
.ic-webauthn-section {
    text-align: center;
}

.ic-fingerprint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(13, 189, 139, 0.12) 0%, rgba(13, 189, 139, 0.04) 100%);
    border: 2px solid var(--ic-accent);
    cursor: pointer;
    transition: all var(--ic-transition);
    padding: 0;
    outline: none;
    position: relative;
}

.ic-fingerprint-btn svg {
    width: 36px;
    height: 36px;
    fill: var(--ic-accent);
    transition: fill var(--ic-transition), transform var(--ic-transition);
}

.ic-fingerprint-btn:hover {
    background: linear-gradient(135deg, rgba(13, 189, 139, 0.2) 0%, rgba(13, 189, 139, 0.1) 100%);
    box-shadow: 0 0 24px var(--ic-accent-glow), 0 0 48px rgba(13, 189, 139, 0.1);
    transform: scale(1.05);
}

.ic-fingerprint-btn:hover svg {
    transform: scale(1.1);
}

.ic-fingerprint-btn:active {
    transform: scale(0.97);
}

.ic-fingerprint-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--ic-accent-glow);
}

.ic-fingerprint-label {
    display: block;
    margin-top: 0.75rem;
    color: var(--ic-text-secondary);
    font-size: 0.8125rem;
    font-weight: 400;
}

/* Pulse animation on the fingerprint button */
@keyframes ic-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 189, 139, 0.35);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(13, 189, 139, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 189, 139, 0);
    }
}

.ic-fingerprint-btn--pulse {
    animation: ic-pulse 2s infinite;
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--ic-radius-sm);
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    border: 1px solid;
}

.alert-error,
.alert-danger {
    background: rgba(231, 76, 60, 0.12);
    border-color: rgba(231, 76, 60, 0.3);
    color: #ff7b6b;
}

.alert-warning {
    background: rgba(243, 156, 18, 0.12);
    border-color: rgba(243, 156, 18, 0.3);
    color: #ffc048;
}

.alert-success {
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.3);
    color: #5dde9e;
}

.alert-info {
    background: rgba(13, 189, 139, 0.08);
    border-color: rgba(13, 189, 139, 0.2);
    color: var(--ic-accent);
}

.kc-feedback-text {
    font-size: 0.875rem;
}

/* ---------- Social Providers ---------- */
#kc-social-providers {
    margin-top: 1.5rem;
    padding-top: 0;
}

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

#kc-social-providers li {
    margin: 0;
}

#kc-social-providers a,
.zocial {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem !important;
    border-radius: var(--ic-radius-sm) !important;
    background: var(--ic-input-bg) !important;
    border: 1px solid var(--ic-card-border) !important;
    color: var(--ic-text-primary) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all var(--ic-transition) !important;
    text-transform: none !important;
    width: 100%;
}

#kc-social-providers a:hover,
.zocial:hover {
    border-color: var(--ic-accent) !important;
    background: rgba(13, 189, 139, 0.06) !important;
}

/* ---------- Registration Link ---------- */
#kc-registration {
    margin-top: 1.5rem;
    text-align: center;
}

#kc-registration span {
    color: var(--ic-text-secondary);
    font-size: 0.875rem;
}

/* ---------- Info / Instructions ---------- */
#kc-info {
    margin-top: 1.5rem;
}

#kc-info-wrapper {
    text-align: center;
    font-size: 0.875rem;
    color: var(--ic-text-secondary);
}

.instruction {
    color: var(--ic-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* ---------- Try Another Way ---------- */
.kc-select-auth-list-item {
    background: var(--ic-input-bg);
    border: 1px solid var(--ic-card-border);
    border-radius: var(--ic-radius-sm);
    padding: 1rem;
    margin-bottom: 0.625rem;
    cursor: pointer;
    transition: all var(--ic-transition);
}

.kc-select-auth-list-item:hover {
    border-color: var(--ic-accent);
    background: rgba(13, 189, 139, 0.06);
}

/* Hide the default "try another way" link (we use the fingerprint button instead) */
#kc-select-try-another-way-form-default,
form[id="kc-select-try-another-way-form"] + .clearfix,
a[onclick*="tryAnotherWay"],
#try-another-way,
.try-another-way,
div[id*="try-another-way"],
#kc-form-buttons + div a,
#kc-form-login ~ form:not(#kc-select-try-another-way-form),
[id*="tryAnotherWay"]:not(input) {
    display: none !important;
}

/* ---------- Locale Dropdown ---------- */
#kc-locale {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

#kc-locale-dropdown > a {
    color: var(--ic-text-secondary) !important;
    font-size: 0.8125rem;
}

.kc-dropdown .dropdown-menu {
    background: var(--ic-card-bg);
    border: 1px solid var(--ic-card-border);
    border-radius: var(--ic-radius-sm);
    box-shadow: var(--ic-shadow);
}

.kc-dropdown .dropdown-menu a {
    color: var(--ic-text-primary) !important;
    padding: 0.5rem 1rem;
}

.kc-dropdown .dropdown-menu a:hover {
    background: var(--ic-input-bg) !important;
}

/* ---------- Miscellaneous Keycloak Overrides ---------- */
.login-pf-page .card-pf {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    max-width: none;
    margin: 0;
}

.login-pf-page {
    padding: 0;
}

.pf-c-login__main {
    background: var(--ic-card-bg);
    border-radius: var(--ic-radius);
    box-shadow: var(--ic-shadow);
}

.pf-c-form-control {
    background: var(--ic-input-bg) !important;
    border-color: var(--ic-input-border) !important;
    color: var(--ic-text-primary) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    #kc-form-wrapper,
    .card-pf {
        padding: 1.5rem;
        border-radius: var(--ic-radius-sm);
        margin: 0 0.5rem;
    }

    .ic-logo-wrapper img {
        max-width: 160px;
    }

    #kc-page-title {
        font-size: 1.25rem;
    }

    .ic-fingerprint-btn {
        width: 64px;
        height: 64px;
    }

    .ic-fingerprint-btn svg {
        width: 30px;
        height: 30px;
    }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--ic-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--ic-card-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ic-text-muted);
}

/* ---------- Selection ---------- */
::selection {
    background: rgba(13, 189, 139, 0.3);
    color: var(--ic-text-primary);
}

/* ---------- WebAuthn Waiting State ---------- */
.ic-webauthn-waiting {
    text-align: center;
    padding: 2rem 0;
}

.ic-webauthn-status {
    color: var(--ic-text-secondary);
    font-size: 0.9375rem;
    margin-top: 1.25rem;
}

.ic-retry-btn {
    margin-top: 1rem;
    background: transparent !important;
    color: var(--ic-accent) !important;
    border: 1px solid var(--ic-accent) !important;
    border-radius: var(--ic-radius-sm) !important;
    padding: 0.5rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all var(--ic-transition) !important;
    width: auto !important;
}

.ic-retry-btn:hover {
    background: rgba(13, 189, 139, 0.1) !important;
}

/* ---------- Select Authenticator Overrides ---------- */
.pf-v5-c-select-auth-list-item,
.kc-select-auth-list-item {
    background: var(--ic-input-bg) !important;
    border: 1px solid var(--ic-card-border) !important;
    border-radius: var(--ic-radius-sm) !important;
    color: var(--ic-text-primary) !important;
    padding: 1rem !important;
    margin-bottom: 0.625rem !important;
    cursor: pointer;
    transition: all var(--ic-transition);
}

.pf-v5-c-select-auth-list-item:hover,
.kc-select-auth-list-item:hover {
    border-color: var(--ic-accent) !important;
    background: rgba(13, 189, 139, 0.06) !important;
}

/* ---------- Autofill override for dark inputs ---------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ic-text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ic-input-bg) inset !important;
    border-color: var(--ic-input-border) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
   Passkey-forward login (login.ftl)
   ========================================================================== */

.ic-passkey-primary {
    margin-bottom: 0.5rem;
}

.ic-primary-passkey-btn {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(13, 189, 139, 0.18) 0%, rgba(13, 189, 139, 0.06) 100%);
    border: 1.5px solid var(--ic-accent);
    border-radius: var(--ic-radius-sm);
    color: var(--ic-text-primary);
    cursor: pointer;
    transition: all var(--ic-transition);
    text-align: left;
    font-family: 'Open Sans', sans-serif;
}

.ic-primary-passkey-btn:hover {
    background: linear-gradient(135deg, rgba(13, 189, 139, 0.28) 0%, rgba(13, 189, 139, 0.12) 100%);
    box-shadow: 0 0 24px var(--ic-accent-glow);
    transform: translateY(-1px);
}

.ic-primary-passkey-btn:active {
    transform: translateY(0);
}

.ic-primary-passkey-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ic-accent-glow);
}

.ic-primary-passkey-btn--loading,
.ic-primary-passkey-btn[disabled] {
    opacity: 0.6;
    cursor: progress;
    transform: none !important;
    box-shadow: none !important;
}

.ic-primary-passkey-btn__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(13, 189, 139, 0.18);
    color: var(--ic-accent);
}

.ic-primary-passkey-btn__icon svg {
    width: 22px;
    height: 22px;
    fill: var(--ic-accent);
}

.ic-primary-passkey-btn__label {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.ic-primary-passkey-btn__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ic-text-primary);
}

.ic-primary-passkey-btn__hint {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ic-text-secondary);
}

/* ==========================================================================
   Authenticator picker (select-authenticator.ftl)
   ========================================================================== */

.ic-auth-picker {
    width: 100%;
}

.ic-auth-picker__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ic-text-primary);
    margin: 0 0 0.25rem;
    text-align: center;
}

.ic-auth-picker__subtitle {
    font-size: 0.875rem;
    color: var(--ic-text-secondary);
    margin: 0 0 1.5rem;
    text-align: center;
}

.ic-auth-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* The card itself. PatternFly's kcSelectAuthListItemClass already gets
   our overrides via `.kc-select-auth-list-item` etc., but we want a
   higher-specificity rule for the new layout's flex alignment. */
.ic-auth-card,
button.ic-auth-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    width: 100% !important;
    padding: 1rem !important;
    background: var(--ic-input-bg) !important;
    border: 1px solid var(--ic-card-border) !important;
    border-radius: var(--ic-radius-sm) !important;
    color: var(--ic-text-primary) !important;
    cursor: pointer;
    transition: all var(--ic-transition);
    text-align: left !important;
    font-family: 'Open Sans', sans-serif;
}

button.ic-auth-card:hover,
.ic-auth-card:hover {
    border-color: var(--ic-accent) !important;
    background: rgba(13, 189, 139, 0.08) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

button.ic-auth-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ic-accent-glow);
}

.ic-auth-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(13, 189, 139, 0.12);
    color: var(--ic-accent);
}

.ic-auth-card__icon i {
    color: var(--ic-accent) !important;
    font-size: 1.125rem;
}

.ic-auth-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ic-auth-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ic-text-primary);
    line-height: 1.25;
}

.ic-auth-card__description {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ic-text-secondary);
    line-height: 1.35;
}

.ic-auth-card__chevron {
    flex-shrink: 0;
    color: var(--ic-text-muted);
    transition: color var(--ic-transition), transform var(--ic-transition);
}

.ic-auth-card:hover .ic-auth-card__chevron {
    color: var(--ic-accent);
    transform: translateX(2px);
}

/* ==========================================================================
   WebAuthn waiting/fallback (webauthn-authenticate.ftl)
   ========================================================================== */

/* Inline spinner — replaces the previous big pulsing fingerprint icon.
   The OS passkey dialog opens on top within a few hundred ms, so this
   stays small and unobtrusive rather than flashing a full-screen icon. */
.ic-spinner-row {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0.75rem;
}

.ic-spinner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--ic-card-border);
    border-top-color: var(--ic-accent);
    animation: ic-spin 0.8s linear infinite;
}

@keyframes ic-spin {
    to { transform: rotate(360deg); }
}

.ic-webauthn-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ic-different-method-link {
    color: var(--ic-text-secondary) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ic-radius-sm);
    transition: color var(--ic-transition);
}

.ic-different-method-link:hover {
    color: var(--ic-accent) !important;
    text-decoration: underline !important;
}