/* Auth pages (login / signup) dark-mode polish when html.dark-style is set */
html.dark-style body,
html[data-theme="dark"] body {
    background-color: #232333 !important;
}

html.dark-style .layout-wrapper,
html.dark-style .layout-container,
html.dark-style .layout-page,
html.dark-style .content-wrapper,
html[data-theme="dark"] .layout-wrapper,
html[data-theme="dark"] .layout-container,
html[data-theme="dark"] .layout-page,
html[data-theme="dark"] .content-wrapper {
    background-color: #232333 !important;
}

html.dark-style .authentication-cover,
html.dark-style .authentication-wrapper,
html.dark-style .authentication-inner,
html[data-theme="dark"] .authentication-cover,
html[data-theme="dark"] .authentication-wrapper,
html[data-theme="dark"] .authentication-inner {
    background-color: #232333 !important;
}

html.dark-style .authentication-bg,
html[data-theme="dark"] .authentication-bg {
    background-color: #2b2c40 !important;
}

html.dark-style .signup-form-panel,
html.dark-style .signup-visual-panel,
html[data-theme="dark"] .signup-form-panel,
html[data-theme="dark"] .signup-visual-panel {
    background-color: #2b2c40 !important;
    color: #cfd3ec !important;
}

html.dark-style .signup-title,
html.dark-style h4,
html.dark-style .card-title,
html[data-theme="dark"] .signup-title,
html[data-theme="dark"] h4 {
    color: #e7e7ff !important;
}

html.dark-style .signup-subtitle,
html.dark-style p,
html.dark-style label,
html.dark-style .form-label,
html[data-theme="dark"] .signup-subtitle,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label {
    color: #a3a4cc !important;
}

html.dark-style .form-control,
html.dark-style .form-select,
html.dark-style input[type="text"],
html.dark-style input[type="email"],
html.dark-style input[type="password"],
html.dark-style input[type="number"],
html.dark-style textarea,
html.dark-style .captcha-container input[type="text"],
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] .captcha-container input[type="text"] {
    background-color: #232333 !important;
    color: #e7e7ff !important;
    border-color: #696cff !important;
}

html.dark-style .form-control::placeholder,
html.dark-style input::placeholder,
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder {
    color: #8592a3 !important;
}

html.dark-style .form-password-toggle .js-password-toggle,
html[data-theme="dark"] .form-password-toggle .js-password-toggle {
    background-color: #232333 !important;
    color: #cfd3ec !important;
}

html.dark-style .custom-option,
html.dark-style .custom-option-basic,
html.dark-style .form-check.custom-option,
html.dark-style .card,
html[data-theme="dark"] .custom-option,
html[data-theme="dark"] .custom-option-basic,
html[data-theme="dark"] .form-check.custom-option,
html[data-theme="dark"] .card {
    background-color: #32334d !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cfd3ec !important;
}

html.dark-style .custom-option.checked,
html.dark-style .custom-option:hover,
html[data-theme="dark"] .custom-option.checked,
html[data-theme="dark"] .custom-option:hover {
    border-color: #696cff !important;
    background-color: rgba(105, 108, 255, 0.16) !important;
}

html.dark-style .btn-light,
html.dark-style .signup-oauth-btn,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .signup-oauth-btn {
    background-color: #32334d !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e7e7ff !important;
}

html.dark-style .captcha-container img,
html[data-theme="dark"] .captcha-container img {
    background: #32334d !important;
    filter: brightness(0.95);
}

html.dark-style .form-password-toggle .input-group-text,
html.dark-style .form-password-toggle .js-password-toggle,
html[data-theme="dark"] .form-password-toggle .input-group-text,
html[data-theme="dark"] .form-password-toggle .js-password-toggle {
    background-color: #232333 !important;
    color: #cfd3ec !important;
    border-color: #696cff !important;
}

html.dark-style .captcha-container input[type="text"],
html[data-theme="dark"] .captcha-container input[type="text"] {
    background: #232333 !important;
    background-color: #232333 !important;
    color: #e7e7ff !important;
}

html.dark-style .signup-visual-col,
html.dark-style .signup-visual-panel,
html.dark-style .signup-shell,
html[data-theme="dark"] .signup-visual-col,
html[data-theme="dark"] .signup-visual-panel,
html[data-theme="dark"] .signup-shell {
    background-color: #232333 !important;
}

html.dark-style .custom-option-content,
html.dark-style .custom-option-body,
html.dark-style .custom-option-title,
html[data-theme="dark"] .custom-option-content,
html[data-theme="dark"] .custom-option-body,
html[data-theme="dark"] .custom-option-title {
    color: #cfd3ec !important;
}

html.dark-style .role-option-card,
html[data-theme="dark"] .role-option-card {
    background: linear-gradient(180deg, #32334d 0%, #2b2c40 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cfd3ec !important;
}

html.dark-style .role-option-card.is-active,
html[data-theme="dark"] .role-option-card.is-active {
    background: linear-gradient(180deg, rgba(105, 108, 255, 0.28) 0%, rgba(105, 108, 255, 0.12) 100%) !important;
    border-color: #696cff !important;
}

html.dark-style .role-option-card .role-option-title,
html.dark-style .role-option-card span,
html[data-theme="dark"] .role-option-card .role-option-title,
html[data-theme="dark"] .role-option-card span {
    color: #e7e7ff !important;
}

html.dark-style .signup-form-panel,
html[data-theme="dark"] .signup-form-panel {
    background: #2b2c40 !important;
    box-shadow: none !important;
}