/* Branded authentication layout
   ========================================================================== */

.branded-bg {
    background-image: url('../../metronic/media/images/2600x1600/1.png');
}

.dark .branded-bg {
    background-image: url('../../metronic/media/images/2600x1600/1-dark.png');
}

/* Auth page alerts — reuse canonical KTUI `kt-alert kt-alert-light`.
   See views/partials/auth/alert.tpl. No bespoke CSS needed. The floating
   top-right toast host (sh-toast.js) is suppressed on auth pages via
   $sh_suppress_flash_toasts, so the in-card alert is the single surface.
   ========================================================================== */

/* KTUI toggle-password icon visibility — cascade-layer fix
   ========================================================================== */

/* Keenicons' `.ki-filled { display: inline-flex }` lives in an UNLAYERED
   stylesheet (keenicons/styles.bundle.css). Unlayered declarations beat
   anything inside `@layer` — including Tailwind utilities. That means
   `.hidden { display: none }` and the generated
   `.kt-toggle-password-active\:hidden { display: none }` never actually
   hide a keenicon. Both eye + eye-slash icons end up stacked on each
   other inside the toggle button.
   This block re-asserts the expected visibility rules with a scope that
   only affects icons inside an initialized toggle-password component —
   no global `!important` on `.hidden`. Load order: this file is unlayered
   too, so it beats the layered Tailwind rules on a plain-selector tie. */
[data-kt-toggle-password-initialized] .kt-toggle-password-active\:block {
    display: none;
}
[data-kt-toggle-password-initialized].active .kt-toggle-password-active\:hidden {
    display: none;
}
[data-kt-toggle-password-initialized].active .kt-toggle-password-active\:block {
    display: inline-flex;
}

/* FormValidation → KTUI kt-form-message integration
   ========================================================================== */

/* @form-validation's Bootstrap5 plugin renders error messages inside
   .fv-plugins-message-container with Bootstrap's .invalid-feedback
   class. We don't ship Bootstrap CSS, so the class is unstyled and
   the message renders at default browser size (large, black) — see
   the reported inline-validation bug.

   Map its visual to KTUI's kt-form-message spec:
   font-size text-xs, destructive color, normal weight, small top
   margin. Keeps auth inline-validation consistent with the rest of
   the KTUI form vocabulary without restructuring every form into the
   full kt-form / kt-form-item / kt-form-control hierarchy. */

.fv-plugins-message-container {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--destructive);
    font-weight: var(--font-weight-normal, 400);
    margin-top: 0.375rem;
}

.fv-plugins-message-container > div[data-validator] {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-weight: inherit;
}

/* Red border + focus ring on the kt-input when FormValidation flags the
   field. `.fv-plugins-bootstrap5-row-invalid` is the class @form-validation
   sets on the form row when validation fails. Match KTUI's aria-invalid
   visual so the input itself signals the error, not just the message. */
.fv-plugins-bootstrap5-row-invalid .kt-input,
.fv-plugins-bootstrap5-row-invalid [data-kt-toggle-password] > .kt-input,
.fv-plugins-bootstrap5-row-invalid [data-kt-toggle-password] {
    border-color: var(--destructive);
}
.fv-plugins-bootstrap5-row-invalid .kt-input:focus,
.fv-plugins-bootstrap5-row-invalid .kt-input:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 15%, transparent);
}

/* Vendor module template compatibility
   Used when $formtpl includes Bootstrap 5-based vendor templates
   (Google Authenticator setup, SMS enable, Email enable)
   ========================================================================== */

.vendor-form-compat .wbox {
    background: transparent;
    border: none;
    box-shadow: none;
}

.vendor-form-compat .wbox_header {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding: 0;
    border: none;
    background: transparent;
}

.vendor-form-compat .wbox_content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
}

.vendor-form-compat .form-control {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    border: 1px solid var(--tw-border-color, hsl(var(--border)));
    border-radius: 6px;
    background: var(--tw-bg-color, hsl(var(--background)));
    color: var(--tw-text-color, hsl(var(--foreground)));
    width: 100%;
}

.vendor-form-compat .form-control:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

.vendor-form-compat .form-control.w-auto {
    width: auto;
}

.vendor-form-compat .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vendor-form-compat .form-group label {
    font-size: 0.8125rem;
    font-weight: 500;
}

.vendor-form-compat .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 34px;
    padding: 0 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 150ms ease;
    border: 1px solid transparent;
    text-decoration: none;
}

.vendor-form-compat .btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.vendor-form-compat .btn-primary:hover {
    opacity: 0.9;
}

.vendor-form-compat .btn-request {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.vendor-form-compat .alert {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.vendor-form-compat .alert-info {
    background-color: hsl(var(--info) / 0.1);
    border: 1px solid hsl(var(--info) / 0.2);
    color: hsl(var(--info));
}

.vendor-form-compat .alert-danger {
    background-color: hsl(var(--danger) / 0.1);
    border: 1px solid hsl(var(--danger) / 0.2);
    color: hsl(var(--danger));
}

/* QR code container for Google Authenticator setup */
.vendor-form-compat #imageQRCode {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid hsl(var(--border));
}

.vendor-form-compat .codeInput {
    font-family: monospace;
    letter-spacing: 0.1em;
}

/* Hide old-style card chrome */
.vendor-form-compat .card-header,
.vendor-form-compat .card-footer {
    background: transparent;
    border: none;
    padding: 0;
}

/* Vendor form buttons row */
.vendor-form-compat .d-flex {
    display: flex;
}

.vendor-form-compat .flex-row {
    flex-direction: row;
}

.vendor-form-compat .flex-column {
    flex-direction: column;
}

.vendor-form-compat .mb-2 {
    margin-bottom: 0.5rem;
}

.vendor-form-compat .mr-3 {
    margin-right: 0.75rem;
}

.vendor-form-compat .mt-2 {
    margin-top: 0.5rem;
}

.vendor-form-compat hr {
    border: none;
    border-top: 1px solid hsl(var(--border));
    margin: 0.5rem 0;
}

.vendor-form-compat ol {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.vendor-form-compat ol li {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
}

.vendor-form-compat ol li a {
    color: hsl(var(--primary));
    text-decoration: none;
}

.vendor-form-compat ol li a:hover {
    text-decoration: underline;
}