/* User dropdown hover style in dark mode to match language dropdown */
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item:hover,
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item-text:hover,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item:hover,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item-text:hover {
  background: var(--color-darkblue) !important;
  color: var(--color-cyan) !important;
}
/* Language dropdown hover style in dark mode to match user dropdown */
body.dark-mode #langDropdownWrapper .dropdown-menu .dropdown-item:hover,
body.dark-mode #langDropdownMobile .dropdown-menu .dropdown-item:hover {
  background: var(--color-darkblue) !important;
  color: var(--color-cyan) !important;
}

/* Force white color for Dashboard and SignOut in user dropdown in dark mode (default state) */
body.dark-mode #userDropdownWrapper .dropdown-menu a[href*="Dashboard"],
body.dark-mode #userDropdownWrapper .dropdown-menu #navbarLogoutBtn,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu a[href*="Dashboard"],
body.dark-mode #userDropdownWrapperMobile .dropdown-menu #navbarLogoutBtnMobile {
  color: #fff !important;
}

/* Force black color for Dashboard and SignOut in user dropdown in light mode (default state) */
#userDropdownWrapper .dropdown-menu a[href*="Dashboard"],
#userDropdownWrapper .dropdown-menu #navbarLogoutBtn,
#userDropdownWrapperMobile .dropdown-menu a[href*="Dashboard"],
#userDropdownWrapperMobile .dropdown-menu #navbarLogoutBtnMobile {
  color: #000 !important;
}


/* Dashboard: black in light mode */
#userDropdownWrapper .dropdown-menu a[href*="Dashboard"],
#userDropdownWrapper .dropdown-menu a[href*="Dashboard"] *,
#userDropdownWrapperMobile .dropdown-menu a[href*="Dashboard"],
#userDropdownWrapperMobile .dropdown-menu a[href*="Dashboard"] * {
  color: #000 !important;
}

/* Sign out: red in light mode */
#userDropdownWrapper .dropdown-menu #navbarLogoutBtn,
#userDropdownWrapper .dropdown-menu #navbarLogoutBtn *,
#userDropdownWrapperMobile .dropdown-menu #navbarLogoutBtnMobile,
#userDropdownWrapperMobile .dropdown-menu #navbarLogoutBtnMobile * {
  color: #dc3545 !important;
}

/* User dropdown text color fix for dark mode */
body.dark-mode #userDropdownWrapper .dropdown-menu,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu {
  color: #fff !important;
}
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item,
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item-text,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item-text {
  color: #fff !important;
}

/* User dropdown text color fix for light mode */
#userDropdownWrapper .dropdown-menu,
#userDropdownWrapperMobile .dropdown-menu {
  color: #000 !important;
}
#userDropdownWrapper .dropdown-menu .dropdown-item,
#userDropdownWrapper .dropdown-menu .dropdown-item-text,
#userDropdownWrapperMobile .dropdown-menu .dropdown-item,
#userDropdownWrapperMobile .dropdown-menu .dropdown-item-text {
  color: #000 !important;
}

/* User dropdown hover style in dark mode to match language dropdown */
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item:hover,
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item-text:hover,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item:hover,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item-text:hover {
  background: var(--color-darkblue) !important;
  color: var(--color-cyan) !important;
}

/* User dropdown hover style in light mode to match language dropdown */
#userDropdownWrapper .dropdown-menu .dropdown-item:hover,
#userDropdownWrapper .dropdown-menu .dropdown-item-text:hover,
#userDropdownWrapperMobile .dropdown-menu .dropdown-item:hover,
#userDropdownWrapperMobile .dropdown-menu .dropdown-item-text:hover {
  background: var(--color-darkblue) !important;
  color: var(--color-cyan) !important;
}
:root {
    --color-cyan: #00c9ef;
    --color-orange: #ff9a5a;
    --color-darkblue: #184d78;
    --color-blue: #0976ce;
}

/* Admin statistics cards */
.stat-card .stat-icon {
    font-size: 1.8rem;
    margin-bottom: 4px;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
}
footer {
    margin-top: auto;
}

.navbar {
    background: #fff;
    border-bottom: 2px solid var(--color-cyan);
}
.navbar .navbar-brand span {
    color: var(--color-darkblue);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover {
    color: var(--color-cyan) !important;
    font-weight: bold;
}
.btn-primary {
    background: var(--color-blue);
    border-color: var(--color-blue);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--color-darkblue);
    border-color: var(--color-darkblue);
}
.btn-outline-primary {
    color: var(--color-blue);
    border-color: var(--color-blue);
}
.btn-outline-primary:hover {
    background: var(--color-blue);
    color: #fff;
}
.btn-outline-secondary {
    color: var(--color-orange);
    border-color: var(--color-orange);
}
.btn-outline-secondary:hover {
    background: var(--color-orange);
    color: #fff;
}
.lang-flag img {
    border-radius: 3px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
    border-top: 3px solid var(--color-cyan);
}
.card-title {
    color: var(--color-darkblue);
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    border-top: 3px solid var(--color-orange);
}
.bg-light {
    background-color: #f8f9fa !important;
}
footer {
    background: var(--color-darkblue) !important;
}
footer h5, footer h6, footer .text-white {
    color: #fff !important;
}
footer a {
    color: var(--color-cyan) !important;
}
footer a:hover {
    color: var(--color-orange) !important;
}



/* WhatsApp Button */
.whatsapp-float {
    position: fixed;
    left: 32px;
    bottom: 32px;
    z-index: 9999;
    background: #25D366 !important;
    color: #fff !important;
    border-radius: 50%;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    /* Smaller, consistent size */
   width: 48px;  
    height: 48px; 
   padding: 6px;         
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s, transform 0.2s;
    border: 2px solid #fff;
}
.whatsapp-float:hover {
    box-shadow: 0 10px 32px rgba(37,211,102,0.28);
    transform: scale(1.12) rotate(-4deg);
    background: #25D366 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .whatsapp-float {
        left: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        padding: 6px;
    }
}

/* Dark Mode Support */
body.dark-mode {
    background: #181c22 !important;
    color: #f6f6f6 !important;
}
body.dark-mode .navbar {
    background: #23272f !important;
    border-bottom: 2px solid var(--color-blue);
}
body.dark-mode .navbar .navbar-brand span {
    color: var(--color-cyan);
}
body.dark-mode .navbar-nav .nav-link,
body.dark-mode .navbar-nav .nav-link.active {
    color: #f6f6f6 !important;
}
body.dark-mode .navbar-nav .nav-link.active,
body.dark-mode .navbar-nav .nav-link:hover {
    color: var(--color-orange) !important;
}
body.dark-mode .dropdown-menu {
    background: #23272f;
    color: #fff;
    border: 1px solid #333;
}
body.dark-mode .dropdown-item {
    color: #fff;
}
body.dark-mode .dropdown-item:hover {
    background: var(--color-darkblue);
    color: var(--color-cyan);
}
body.dark-mode .btn-primary {
    background: var(--color-cyan);
    border-color: var(--color-cyan);
    color: #23272f;
}
body.dark-mode .btn-primary:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #fff;
}
body.dark-mode .btn-outline-dark {
    color: #fff;
    border-color: #fff;
}
body.dark-mode .btn-outline-dark:hover {
    background: #fff;
    color: #23272f;
}
body.dark-mode .card {
    background: #23272f;
    color: #fff;
    border-top: 3px solid var(--color-blue);
}
body.dark-mode .card-title {
    color: var(--color-cyan);
}
body.dark-mode .card:hover {
    border-top: 3px solid var(--color-orange);
}
body.dark-mode .bg-light,
body.dark-mode section.bg-light {
    background-color: #23272f !important;
}
body.dark-mode footer {
    background: #15181d !important;
    color: #fff !important;
}
body.dark-mode footer h5, body.dark-mode footer h6, body.dark-mode footer .text-white {
    color: #fff !important;
}
body.dark-mode footer a {
    color: var(--color-cyan) !important;
}
body.dark-mode footer a:hover {
    color: var(--color-orange) !important;
}

@media (max-width: 768px) {
    .navbar-brand span {
        display: none;
    }
    
    .navbar-nav {
        margin-top: 10px;
    }
    
    .hero-section .display-5 {
        font-size: 2rem;
    }
    
    .hero-section .lead {
        font-size: 1rem;
    }
    
    .card {
        margin-bottom: 20px;
    }
    
    .whatsapp-float {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 576px) {
    .hero-section .btn-lg {
        width: 100%;
    }
    
    .navbar .container {
        padding: 0 15px;
    }
}

/* Override Bootstrap default dropdown item colors for navbar */
#userDropdownWrapper .dropdown-menu .dropdown-item,
#userDropdownWrapperMobile .dropdown-menu .dropdown-item {
  color: #000 !important;
}

/* Override Bootstrap default dropdown item colors for navbar in dark mode */
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item {
  color: #fff !important;
}

/* Ensure all text elements in navbar dropdown are black */
#userDropdownWrapper .dropdown-menu .dropdown-item i,
#userDropdownWrapper .dropdown-menu .dropdown-item span,
#userDropdownWrapper .dropdown-menu .dropdown-item a,
#userDropdownWrapperMobile .dropdown-menu .dropdown-item i,
#userDropdownWrapperMobile .dropdown-menu .dropdown-item span,
#userDropdownWrapperMobile .dropdown-menu .dropdown-item a {
  color: #000 !important;
}

/* Ensure all text elements in navbar dropdown are white in dark mode */
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item i,
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item span,
body.dark-mode #userDropdownWrapper .dropdown-menu .dropdown-item a,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item i,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item span,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .dropdown-item a {
  color: #fff !important;
}



/* Specific override for text-danger class in navbar dropdown */
#userDropdownWrapper .dropdown-menu .text-danger,
#userDropdownWrapperMobile .dropdown-menu .text-danger {
  color: #dc3545 !important;
}

body.dark-mode #userDropdownWrapper .dropdown-menu .text-danger,
body.dark-mode #userDropdownWrapperMobile .dropdown-menu .text-danger {
  color: #fff !important;
}