/* This file is reserved for overriding and extending the template styles. */
.icon-link {
    cursor: pointer;
    color: var(--primary);
}

.xSmall {
    font-size: small;
}

.fade-in { animation: fadeIn 1.7s; }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


.fade-out { animation: fadeOut 1.2s forwards;}

@keyframes fadeOut {
    0% { opacity: 1; visibility: inherit;}
    100% { opacity: 0; visibility: hidden;}
}

/* Fix para logos serem exibidas - adiciona background-size */
.logo .img,
.logo-default {
    background-size: contain !important;
    width: 260px !important;
    min-height: 90px !important;
}

/* Nova classe para logo da página de login */
.logo-login-page {
    width: 100%;
    max-width: 640px;
    min-height: 225px;
    object-position: left;
    object-fit: cover;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/logo/logo-evolune-loginpage.png);
}

/* Logo da página de login no tema escuro — usa versão com melhor contraste */
.logo-login-page.logo-login-page-dark {
    background-image: url(../img/logo/logo-loginpage-for-theme-dark.png);
}

/* Logo padrão (register) no tema escuro */
.logo-default.logo-default-dark {
    background-image: url(../img/logo/logo-loginpage-for-theme-dark.png) !important;
}

/* Ajuste responsivo para mobile */
@media (max-width: 576px) {
    .logo-login-page {
        min-height: 120px;
        background-position: center;
    }
}

/* Overlay escuro no left side das páginas fullpage para melhorar legibilidade do texto */
.fullpage-left-overlay {
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
}

.fullpage-left-overlay::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: 0;
}

.fullpage-left-overlay > * {
    position: relative;
    z-index: 1;
}

/* Garante que o painel direito fique acima do overlay */
.fullpage-right-panel {
    position: relative;
    z-index: 1;
}

/* Corrige textos hardcoded do Bootstrap dentro de cards no tema dark */
html[data-color=dark-blue] .card .text-dark,
html[data-color=dark-green] .card .text-dark,
html[data-color=dark-red] .card .text-dark,
html[data-color=dark-pink] .card .text-dark,
html[data-color=dark-purple] .card .text-dark,
html[data-color=dark-blue] .card .text-body,
html[data-color=dark-green] .card .text-body,
html[data-color=dark-red] .card .text-body,
html[data-color=dark-pink] .card .text-body,
html[data-color=dark-purple] .card .text-body {
    color: var(--body) !important;
}

html[data-color=dark-blue] .card .text-muted,
html[data-color=dark-green] .card .text-muted,
html[data-color=dark-red] .card .text-muted,
html[data-color=dark-pink] .card .text-muted,
html[data-color=dark-purple] .card .text-muted {
    color: var(--muted) !important;
}

/* Logo alternativa para temas escuros */
html[data-color=dark-blue] .logo .img,
html[data-color=dark-green] .logo .img,
html[data-color=dark-red] .logo .img,
html[data-color=dark-pink] .logo .img,
html[data-color=dark-purple] .logo .img {
    background-image: url(../img/logo/logo-for-theme-dark.png) !important;
}

/* =============================================
   Fix react-select visibilidade no tema dark
   ============================================= */
html[data-color^=dark-] .react-select__input,
html[data-color^=dark-] .react-select__input input,
html[data-color^=dark-] .react-select__input-container,
html[data-color^=dark-] .react-select__input-container input {
    color: var(--body) !important;
}

html[data-color^=dark-] .react-select__single-value {
    color: var(--body) !important;
}

html[data-color^=dark-] .react-select__placeholder {
    color: var(--alternate) !important;
}

html[data-color^=dark-] .react-select__menu {
    background-color: var(--foreground) !important;
    border-color: var(--separator) !important;
}

html[data-color^=dark-] .react-select__option {
    color: var(--body) !important;
    background-color: var(--foreground) !important;
}

html[data-color^=dark-] .react-select__option--is-focused {
    background-color: var(--separator-light) !important;
}

html[data-color^=dark-] .react-select__option--is-selected {
    background-color: var(--primary) !important;
    color: #fff !important;
}

html[data-color^=dark-] .react-select__multi-value {
    background-color: var(--separator-light) !important;
}

html[data-color^=dark-] .react-select__multi-value__label {
    color: var(--body) !important;
}

html[data-color^=dark-] .react-select__multi-value__remove:hover {
    background-color: var(--separator) !important;
    color: var(--body) !important;
}


/* =============================================
   Fix form controls disabled no tema dark
   ============================================= */
html[data-color^=dark-] .form-select:disabled,
html[data-color^=dark-] .form-control:disabled {
    background-color: var(--background-light) !important;
    color: var(--alternate) !important;
    border-color: var(--separator) !important;
    opacity: 0.7;
}

/* =============================================
   react-select disabled state (igual ao Bootstrap)
   ============================================= */
.react-select--is-disabled .react-select__control {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    opacity: 0.65;
}

.react-select--is-disabled .react-select__single-value,
.react-select--is-disabled .react-select__placeholder {
    color: #6c757d !important;
}

.react-select--is-disabled .react-select__multi-value {
    background-color: #dee2e6 !important;
}

.react-select--is-disabled .react-select__multi-value__label {
    color: #6c757d !important;
}

/* Dark theme override for disabled react-select */
html[data-color^=dark-] .react-select--is-disabled .react-select__control {
    background-color: var(--background-light) !important;
    border-color: var(--separator) !important;
    opacity: 0.7;
}

html[data-color^=dark-] .react-select--is-disabled .react-select__single-value,
html[data-color^=dark-] .react-select--is-disabled .react-select__placeholder {
    color: var(--alternate) !important;
}

html[data-color^=dark-] .react-select--is-disabled .react-select__multi-value {
    background-color: var(--separator) !important;
}

html[data-color^=dark-] .react-select--is-disabled .react-select__multi-value__label {
    color: var(--alternate) !important;
}