/* =======================================================
   MODERN AUTH PAGES (login / recover password / reset password)
   Shared by index.php, recover-pw.php, reset-password.php
   ======================================================= */

body {
    background: #f5f5f9;
    min-height: 100vh;
}

.authentication-wrapper.authentication-basic {
    min-height: 100vh;
    align-items: center;
}

.authentication-inner {
    width: 100%;
    max-width: 420px;
}

/* ===== CARD ===== */
.authentication-inner .card {
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.authentication-inner .card-body {
    padding: 2.5rem 2.25rem;
}

.authentication-inner .app-brand {
    margin-bottom: 0.5rem;
}

/* ===== ROUNDED FIELDS ===== */
.authentication-inner .form-control,
.authentication-inner .form-select {
    border-radius: 50rem;
    border: 1.5px solid #e9ecef;
    padding: 0.65rem 1.25rem;
    background: #f8f9fa;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
}

.authentication-inner .form-control:focus,
.authentication-inner .form-select:focus {
    border-color: #6f42c1;
    background: #fff;
    outline: none;
    box-shadow: none;
}

.authentication-inner .form-control[readonly] {
    background: #f1f1f4;
    color: #6c757d;
}

/* Pill-shaped input groups (icon + field, or field + toggle button).
   The focus glow is applied to the whole pill via :focus-within instead of
   to the individual icon/input pieces, otherwise each piece's own box-shadow
   gets clipped at the icon/input seam and leaves a visible hairline there. */
.authentication-inner .input-group-merge {
    border-radius: 50rem;
    overflow: hidden;
    transition: box-shadow 0.15s ease-in-out;
}

.authentication-inner .input-group-merge:focus-within {
    box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.15);
}

.authentication-inner .input-group-merge .form-control,
.authentication-inner .input-group-merge .input-group-text {
    border-radius: 0;
}

.authentication-inner .input-group-text {
    border: 1.5px solid #e9ecef;
    background: #f8f9fa;
    color: #6f42c1;
}

.authentication-inner .input-group:focus-within .input-group-text,
.authentication-inner .input-group:focus-within .form-control {
    border-color: #6f42c1;
    background: #fff;
}

/* ===== BUTTON ===== */
.authentication-inner .btn {
    border-radius: 50rem;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
}

.authentication-inner .btn-outline-primary {
    border-color: #6f42c1;
    color: #6f42c1;
}

.authentication-inner .btn-outline-primary:hover,
.authentication-inner .btn-outline-primary:active {
    background: linear-gradient(135deg, #6f42c1, #0d6efd);
    border-color: transparent;
    color: #fff;
}