/* Register PWA - Background Color Uniform */

:root {
    --form-bg-light: #ffffff;
    --form-bg-dark: #2d2d2d;
    --wrapper-bg-light: #f8f9fa;
    --wrapper-bg-dark: #1a1a1a;
}

/* Light Mode - Default */
body {
    background-color: var(--wrapper-bg-light);
}

.login-wrapper {
    background-color: var(--wrapper-bg-light);
    min-height: 100vh;
}

.register-form {
    background-color: var(--form-bg-light);
    border: 1px solid #e9ecef !important;
}

/* Dark Mode */
[data-theme="dark"] body {
    background-color: var(--wrapper-bg-dark);
}

[data-theme="dark"] .login-wrapper {
    background-color: var(--wrapper-bg-dark);
}

[data-theme="dark"] .register-form {
    background-color: var(--form-bg-dark);
    border-color: #404040 !important;
}

/* Uniform Background - All same color */
.login-wrapper.uniform-bg {
    background-color: var(--form-bg-light);
}

[data-theme="dark"] .login-wrapper.uniform-bg {
    background-color: var(--form-bg-dark);
}

/* Password Toggle Button Styling */
.input-group .btn-outline-secondary {
    border-color: #dee2e6;
    color: #6c757d;
}

.input-group .btn-outline-secondary:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

.input-group .btn-outline-secondary:focus,
.input-group .btn-outline-secondary:active {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

/* Dark Mode - Button */
[data-theme="dark"] .input-group .btn-outline-secondary {
    border-color: #495057;
    color: #adb5bd;
}

[data-theme="dark"] .input-group .btn-outline-secondary:hover {
    background-color: #343a40;
    border-color: #495057;
    color: #dee2e6;
}

/* Icon transition smooth */
.input-group .btn-outline-secondary i {
    transition: opacity 0.2s ease-in-out;
}

/* Remove focus outline if needed */
.input-group .btn-outline-secondary:focus {
    box-shadow: none;
    outline: none;
}