/* Custom styles to override or complement Bootstrap */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

body {
    font-family: 'Cairo', sans-serif;
    animation: fadeInAnimation ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

:root {
    --bs-primary: #ff7a00;
    --bs-primary-rgb: 255, 122, 0;
    --bs-dark: #1a5d1a;
    --bs-dark-rgb: 26, 93, 26;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #e66e00;
    --bs-btn-hover-border-color: #e66e00;
}

.navbar-dark {
    background-color: var(--bs-dark) !important;
}

.form-control:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.card-header {
    background-color: rgba(var(--bs-dark-rgb), 0.05);
}

/* Animations */
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
     }
}

/* Avatar Selection Styles */
.avatar-option {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.2s ease-in-out;
}

.avatar-option:hover {
    border-color: #ccc;
}

.avatar-option.selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 8px rgba(var(--bs-primary-rgb), 0.5);
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #4A4E54;
    color: #e0e0e0;
}

body.dark-mode .text-dark,
body.dark-mode .text-muted,
body.dark-mode p,
body.dark-mode span,
body.dark-mode strong,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode li {
    color: #e0e0e0 !important;
}

body.dark-mode .text-muted {
    color: #a0a0a0 !important;
}

body.dark-mode .card {
    background-color: #1e1e1e;
    border-color: #333;
}

body.dark-mode .card-header {
    background-color: #252525;
    border-bottom-color: #333;
}

body.dark-mode .form-control {
    background-color: #252525;
    color: #fff;
    border-color: #444;
}

body.dark-mode .form-control:focus {
    background-color: #252525;
    color: #fff;
    border-color: rgba(var(--bs-primary-rgb), 0.7);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35);
}

body.dark-mode .form-label,
body.dark-mode .form-check-label,
body.dark-mode .dropdown-menu {
    color: #e0e0e0;
}

body.dark-mode .dropdown-menu {
    background-color: #1e1e1e;
    border-color: #333;
}

body.dark-mode .dropdown-item {
    color: #e0e0e0;
}
body.dark-mode .dropdown-item:hover {
    background-color: #333;
}

body.dark-mode .border-end {
    border-color: #333 !important;
}

body.dark-mode hr {
    border-top-color: #333;
}
/* Sidebar Navigation Styles */
.nav-pills .nav-link {
    color: #333; /* Dark color for all links */
}

.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    color: #fff; /* White text for the active link */
    background-color: var(--bs-primary);
}

.nav-pills .nav-link:not(.active):hover {
    background-color: #f0f0f0; /* Light grey background on hover for non-active links */
}

.sidebar-logo-text, .user-dropdown-text {
    color: #333 !important; /* Ensure logo and user email are dark */
}

body.dark-mode .sidebar-logo-text,
body.dark-mode .user-dropdown-text {
    color: #fff !important; /* White text in dark mode */
}

body.dark-mode .nav-pills .nav-link:not(.active) {
    color: #f0f0f0; /* Lighter text for dark mode non-active links */
}

body.dark-mode .nav-pills .nav-link:not(.active):hover {
    background-color: #343a40; /* Darker hover for dark mode */
}

/* Toast Notification Styles */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1090; /* Higher than most elements */
}