/* ==========================================================================
   Kavana Admin — Auth screens (login / forgot password / reset password)
   These pages are standalone documents; they do not extend layouts.master,
   so they need their own stylesheet. Palette matches the panel's dark chrome.
   ========================================================================== */

:root {
    --a-dark: #1f262d;         /* same base as the sidebar */
    --a-dark-2: #262f38;
    --a-dark-3: #313b45;
    --a-text: #e6eaee;
    --a-muted: #93a1af;
    --a-gold: #d4a129;         /* KAVANA wordmark */
    --a-primary: #696cff;
    --a-primary-hover: #5f61e6;
    --a-radius: 0.625rem;
    --a-font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    font-family: var(--a-font);
    background: var(--a-dark);
}

/* Page backdrop — subtle depth instead of a flat fill. */
.auth-wrapper {
    background:
        radial-gradient(900px 500px at 12% -10%, rgba(212, 161, 41, 0.10), transparent 60%),
        radial-gradient(800px 500px at 100% 110%, rgba(105, 108, 255, 0.14), transparent 55%),
        var(--a-dark);
    min-height: 100vh;
    padding: 1.5rem;
}

/* Widen the card past the markup's .col-md-3, which is too narrow to breathe. */
.auth-wrapper > [class*="col-md"] {
    width: 100%;
    max-width: 420px;
    flex: 0 0 auto;
}

.auth-wrapper .card {
    background: var(--a-dark-2) !important;
    border: 1px solid var(--a-dark-3);
    border-radius: 14px !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.auth-wrapper .card-header {
    background: transparent;
    border-bottom: 1px solid var(--a-dark-3);
    padding: 0.5rem 1.5rem;
}
.auth-wrapper .card-header img { width: 150px !important; height: auto; }

.auth-wrapper .card-body { padding: 1.75rem 1.5rem; }

/* --- Inputs -------------------------------------------------------------- */
/* The markup wraps each field in .input-group with a coloured icon chip.
   Flatten that into one bordered control with a muted leading icon. */
.auth-wrapper .input-group {
    border: 1px solid var(--a-dark-3);
    border-radius: var(--a-radius);
    background: var(--a-dark);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-wrapper .input-group:focus-within {
    border-color: var(--a-primary);
    box-shadow: 0 0 0 0.18rem rgba(105, 108, 255, 0.22);
}

/* Neutralise the bg-success / bg-warning / bg-white chips from the markup. */
.auth-wrapper .input-group .input-group-text {
    background: transparent !important;
    border: 0;
    color: var(--a-muted) !important;
    padding: 0 0.35rem 0 0.85rem;
}
.auth-wrapper .input-group .input-group-text i { font-size: 1.15rem; }

.auth-wrapper .form-control,
.auth-wrapper .form-control-lg {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--a-text) !important;
    font-size: 0.95rem;
    padding: 0.75rem 0.85rem;
    min-height: 48px;
}
.auth-wrapper .form-control::placeholder { color: #7c8894 !important; }

/* Chrome/Edge paint autofilled fields with an opaque pale-blue background and
   black text, which is unreadable on the dark card. The background cannot be
   overridden directly — the UA style wins — so cover it with a large inset
   box-shadow and recolour the glyphs via -webkit-text-fill-color.
   `background-clip: text` keeps Chrome from repainting over the shadow.
   All states are listed because Chrome re-applies the wash on each of them. */
.auth-wrapper input:-webkit-autofill,
.auth-wrapper input:-webkit-autofill:hover,
.auth-wrapper input:-webkit-autofill:focus,
.auth-wrapper input:-webkit-autofill:active,
.auth-wrapper input:-internal-autofill-selected {
    -webkit-text-fill-color: var(--a-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--a-dark) inset !important;
            box-shadow: 0 0 0 1000px var(--a-dark) inset !important;
    background-color: var(--a-dark) !important;
    background-image: none !important;
    caret-color: var(--a-text) !important;
    border-radius: 0;
    /* Chrome ignores the shadow while transitioning; a long delay parks it. */
    transition: background-color 5000s ease-in-out 0s;
}

/* Firefox uses its own autofill treatment. */
.auth-wrapper input:autofill {
    background-color: var(--a-dark) !important;
    color: var(--a-text) !important;
    filter: none;
}

/* Password reveal toggle */
.auth-wrapper .input-group-append .input-group-text { cursor: pointer; padding: 0 0.85rem 0 0.35rem; }
.auth-wrapper .input-group-append .input-group-text:hover { color: var(--a-text) !important; }

/* --- Buttons ------------------------------------------------------------- */
.auth-wrapper .btn {
    border-radius: var(--a-radius);
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.6rem 1.25rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.auth-wrapper .btn:active { transform: translateY(1px); }

/* Primary action — the markup uses .btn-success for submit. */
.auth-wrapper .btn-success {
    background: var(--a-primary) !important;
    border-color: var(--a-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(105, 108, 255, 0.35);
}
.auth-wrapper .btn-success:hover {
    background: var(--a-primary-hover) !important;
    border-color: var(--a-primary-hover) !important;
}

/* Secondary action — .btn-info is the "Forgot password" link. */
.auth-wrapper .btn-info {
    background: transparent !important;
    border: 1px solid var(--a-dark-3) !important;
    color: var(--a-muted) !important;
    box-shadow: none;
}
.auth-wrapper .btn-info:hover {
    background: var(--a-dark-3) !important;
    color: var(--a-text) !important;
}

.auth-wrapper .btn-primary {
    background: var(--a-primary) !important;
    border-color: var(--a-primary) !important;
    color: #fff !important;
}
.auth-wrapper .btn-primary:hover { background: var(--a-primary-hover) !important; }

/* --- Misc ---------------------------------------------------------------- */
.auth-wrapper .border-top { border-top-color: var(--a-dark-3) !important; }
.auth-wrapper .border-secondary { border-color: var(--a-dark-3) !important; }
.auth-wrapper label { color: var(--a-text); font-size: 0.85rem; font-weight: 500; margin-bottom: 0.4rem; }
.auth-wrapper a { color: var(--a-primary); text-decoration: none; }
.auth-wrapper a:hover { color: var(--a-primary-hover); }
.auth-wrapper .text-muted { color: var(--a-muted) !important; }
.auth-wrapper h1, .auth-wrapper h2, .auth-wrapper h3,
.auth-wrapper h4, .auth-wrapper h5 { color: var(--a-text); font-weight: 500; }
.auth-wrapper .text-danger, .auth-wrapper .invalid-feedback { color: #ff6b5a !important; font-size: 0.8rem; }

.preloader { background: var(--a-dark); }

@media (max-width: 575.98px) {
    .auth-wrapper { padding: 1rem; }
    .auth-wrapper .card-body { padding: 1.25rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-wrapper .btn, .auth-wrapper .input-group { transition: none; }
}