/* Portal custom styles - preserving original look and feel */

/* Fade-in Animation - from original template */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Dark Mode Styles - from original template */
.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

.dark-mode .card {
    background-color: #1e1e1e;
    color: #ffffff;
}

.dark-mode .form-control {
    background-color: #2d2d2d;
    color: #ffffff;
}

.dark-mode .form-control:focus {
    background-color: #3d3d3d;
    color: #ffffff;
}

/* Additional enhancements that don't break original styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.form-floating > label {
    color: #6c757d;
}

/* Enhanced dark mode for form selects */
.dark-mode .form-select {
    background-color: #2d2d2d;
    color: #ffffff;
    border-color: #444;
}

.dark-mode .form-select:focus {
    background-color: #3d3d3d;
    color: #ffffff;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.dark-mode .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.dark-mode .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}