/* Sign-in pages of the Finapivity B2B back office. Loaded after Bootstrap and the Metronic bundle. */

:root {
    --fin-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fin-ink: #0f172a;
    --fin-text: #334155;
    --fin-muted: #64748b;
    --fin-border: #e2e8f0;
    --fin-primary: #157f5c;
    --fin-primary-hover: #106a4c;
    --fin-primary-active: #0c5a40;
    --fin-primary-soft: #e8f7f0;
    --fin-primary-ring: rgba(21, 127, 92, 0.18);
}

html,
body.fin-auth {
    font-family: var(--fin-font);
    color: var(--fin-text);
    -webkit-font-smoothing: antialiased;
}

body.fin-auth {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(15, 159, 110, 0.14), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(29, 78, 216, 0.08), transparent 60%),
        #f4f6fa;
}

.fin-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    margin-bottom: 2rem;
}

    .fin-auth-brand img {
        height: 44px;
    }

.fin-auth-brand-name {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--fin-ink);
    letter-spacing: -0.01em;
}

body.fin-auth .bg-body.rounded {
    background: #ffffff !important;
    border: 1px solid var(--fin-border);
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 48px rgba(15, 23, 42, 0.10) !important;
}

body.fin-auth h1 {
    color: var(--fin-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.fin-auth .form-label {
    color: var(--fin-ink) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

body.fin-auth .form-control {
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
}

    body.fin-auth .form-control:focus {
        border-color: var(--fin-primary);
        background-color: #ffffff;
        box-shadow: 0 0 0 3px var(--fin-primary-ring);
    }

body.fin-auth .btn {
    border-radius: 10px;
    font-weight: 600;
}

body.fin-auth .btn-primary {
    background-color: var(--fin-primary) !important;
    border-color: var(--fin-primary) !important;
    color: #ffffff !important;
}

    /* Button states keep the theme green. Metronic colours them with its own bright green, with !important on selectors such as
       .btn.btn-primary:hover:not(.btn-active), which these repeat. A button focused by a click keeps its colour. */
    body.fin-auth .btn.btn-primary:focus:not(.btn-active) {
        background-color: var(--fin-primary) !important;
        border-color: var(--fin-primary) !important;
        color: #ffffff !important;
    }

    body.fin-auth .btn.btn-primary:hover:not(.btn-active),
    body.fin-auth .btn.btn-primary:focus-visible:not(.btn-active) {
        background-color: var(--fin-primary-hover) !important;
        border-color: var(--fin-primary-hover) !important;
        color: #ffffff !important;
    }

    body.fin-auth .btn.btn-primary:active:not(.btn-active),
    body.fin-auth .btn.btn-primary.active,
    body.fin-auth .btn.btn-primary.show {
        background-color: var(--fin-primary-active) !important;
        border-color: var(--fin-primary-active) !important;
        color: #ffffff !important;
    }

body.fin-auth .btn-secondary,
body.fin-auth .btn-light {
    background-color: #f1f5f9 !important;
    border-color: #f1f5f9 !important;
    color: var(--fin-text) !important;
}

body.fin-auth .link-primary,
body.fin-auth a.text-hover-primary:hover {
    color: var(--fin-primary) !important;
}

body.fin-auth .text-danger {
    display: block;
    margin-top: 0.35rem;
    color: #b91c1c !important;
    font-size: 0.85rem;
}

.fin-auth-alert {
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid #fecaca;
    border-left: 4px solid #b91c1c;
    border-radius: 10px;
    background: #fef2f2;
    color: #7f1d1d;
    text-align: left;
    font-size: 0.9rem;
}