/* =============================================================================
   fresh-auth.css — Fresh warm-maroon brand for the auth surface (sign in / register)
   Loaded LAST, AFTER dark.css. Non-destructive override, mirroring the approach of
   fresh-ui.css (admin) and fresh-marketing.css (public). To revert: remove the
   <link> from adm/view/access/signin.twig + app/view/access/register.twig.
   ============================================================================= */

/* dark.css drives much of the surface through these vars — re-point them warm. */
:root {
    --primary:             #8E2F44;
    --primary-hover:       #722539;
    --primary-dull:        #722539;
    --primary-btn-bg:      #8E2F44;
    --primary-btn-color:   #ffffff;
    --tertiary-text:       #8E2F44;
    --tertiary-text-hover: #722539;
    --text-body-color:     #44413B;
}

/* page surface: dark gradient → flat linen */
body.dark-gradient-container {
    background: #F7F5F1 !important;
    color: #44413B !important;
}

/* the auth card: dark slab (#202942 inline) → white card */
.fresh-auth-card {
    background-color: #FFFFFF !important;
    border: 1px solid #ECE9E2 !important;
    box-shadow: 0 16px 48px rgba(45, 43, 38, .12) !important;
    border-radius: 16px !important;   /* match the card radius token (was 22px) */
}

/* headings + copy */
.dark-gradient-container h1,
.dark-gradient-container h2,
.dark-gradient-container .display-4,
.dark-gradient-container .display-3 {
    color: #2D2B26 !important;
    font-weight: 700 !important;
}
.dark-gradient-container p,
.dark-gradient-container small,
.dark-gradient-container .card-footer-item {
    color: #76716A !important;
}

/* inputs */
.dark-gradient-container .form-control {
    background-color: #F7F5F1 !important;
    border: 1px solid #DBD6CB !important;
    color: #2D2B26 !important;
    border-radius: 12px !important;
}
.dark-gradient-container .form-control::placeholder { color: #A8A299 !important; }
.dark-gradient-container .form-control:focus {
    background-color: #ffffff !important;
    border: 1px solid #8E2F44 !important;
    box-shadow: 0 0 0 3px rgba(142, 47, 68, .14) !important;
}

/* password reveal: a subtle eye icon sitting INSIDE the field */
.dark-gradient-container .input-group { position: relative; }
.dark-gradient-container .input-group-append {
    position: absolute;
    top: 0; bottom: 0; right: 8px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    border: 0 !important;
    z-index: 3;
}
.dark-gradient-container #basic-addon2 {
    min-width: 0 !important;
    width: auto !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent !important;
    border: 0 !important;
    color: #B4ADA3 !important;
    transition: color .15s ease;
}
.dark-gradient-container #basic-addon2:hover { color: #76716A !important; background: transparent !important; }
.dark-gradient-container #basic-addon2 svg { width: 18px; height: 18px; }
/* leave room for the icon so text never runs under it */
.dark-gradient-container #inputPassword { padding-right: 2.75rem !important; }

/* primary button (dark.css hardcodes a blue gradient) → solid maroon */
.dark-gradient-container .btn-primary {
    background: #8E2F44 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    transition: background-color .18s ease, transform .18s ease, box-shadow .25s ease !important;
}
.dark-gradient-container .btn-primary:hover,
.dark-gradient-container .btn-primary:focus {
    background: #722539 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(142, 47, 68, .22) !important;
}

/* links + dividers */
.dark-gradient-container a { color: #8E2F44 !important; }
.dark-gradient-container a:hover { color: #722539 !important; }
.dark-gradient-container .border-top { border-color: #ECE9E2 !important; }

/* alerts stay readable on the light card */
.dark-gradient-container .alert-danger {
    background-color: #FCEBEB !important;
    border: 1px solid #F0C7C7 !important;
    color: #9E2B3E !important;
}
.dark-gradient-container .alert-success {
    background-color: #F6EDF0 !important;
    border: 1px solid #E3C8D0 !important;
    color: #8E2F44 !important;
}

@media (prefers-reduced-motion: reduce) {
    .dark-gradient-container .btn-primary,
    .dark-gradient-container .btn-primary:hover { transform: none !important; }
}