/* Dark Mode Styles */

/* ===================================
   BASE COLORS & BACKGROUNDS
   =================================== */
.dark .bg-white {
    background-color: #1f2937;
}

.dark .text-gray-800 {
    color: #f9fafb;
}

.dark .text-gray-700 {
    color: #d1d5db;
}

.dark .text-gray-600 {
    color: #9ca3af;
}

.dark .text-gray-500 {
    color: #6b7280;
}

.dark .text-gray-900 {
    color: #f9fafb;
}

.dark .border-gray-200 {
    border-color: #374151;
}

.dark .border-gray-100 {
    border-color: #374151;
}

.dark .bg-gray-50 {
    background-color: #374151;
}

.dark .bg-gray-100 {
    background-color: #1f2937;
}

.dark .bg-gray-200 {
    background-color: #374151;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #374151;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #4b5563;
}

.dark .shadow-soft {
    box-shadow: none;
    border: 1px solid #374151;
}

/* ===================================
   HEADER COMPONENTS
   =================================== */
.dark #page-header {
    background-color: #1f2937;
    border-bottom: 2px solid #374151;
}

/* Brand and Header Text */
.dark #page-header a,
.dark #page-header span {
    color: #ffffff !important;
}

.dark #page-header #brand-name,
.dark #page-header #brand-logo {
    color: #ffffff !important;
    font-weight: 700;
}

/* Navigation Links */
.dark .nav-link {
    color: #ffffff !important;
}

.dark .nav-link:hover {
    color: #22c55e;
}

.dark .nav-link.active {
    color: #ffffff;
}

/* Language dropdown button */
.dark #page-header .dropdown button {
    color: #ffffff !important;
}

/* Language text in dark mode - ALWAYS WHITE */
.dark #current-lang-text {
    color: #ffffff !important;
    font-weight: 600;
}

.dark span#current-lang-text {
    color: #ffffff !important;
    font-weight: 600;
}

.dark .dark\:text-white#current-lang-text {
    color: #ffffff !important;
}

/* Language dropdown icons */
.dark #page-header .dropdown button i {
    color: #ffffff !important;
}

/* Dark mode toggle button */
.dark #page-header #dark-mode-toggle {
    color: #ffffff !important;
}

/* Dark mode toggle icons */
.dark #page-header #dark-mode-toggle i {
    color: #ffffff !important;
}

/* Mobile Menu */
.dark #mobile-menu {
    background-color: #1f2937;
    border-top: 1px solid #374151;
}

/* ===================================
   LANGUAGE DROPDOWN
   =================================== */
.dark #language-dropdown-menu {
    background-color: #374151;
    border: 2px solid #4b5563;
}

.dark #language-dropdown-menu a {
    color: #ffffff !important;
    font-weight: 500;
    background-color: transparent;
}

.dark #language-dropdown-menu a:hover {
    background-color: #4b5563 !important;
    color: #22c55e !important;
    font-weight: 600;
}

/* Ensure all language options are white in dark mode */
.dark #language-dropdown-menu a[data-lang] {
    color: #ffffff !important;
}

.dark #language-dropdown-menu a[data-lang]:hover {
    color: #22c55e !important;
}

.dark .dropdown button {
    color: #ffffff !important;
    font-weight: 600;
}

.dark .dropdown button:hover {
    background-color: #374151;
    color: #22c55e !important;
}

/* ===================================
   FOOTER
   =================================== */
.dark #public-footer {
    background-color: #1f2937;
    border-top: 1px solid #374151;
    color: #d1d5db;
}

.dark #public-footer h3 {
    color: #f9fafb;
}

.dark #public-footer a {
    color: #9ca3af;
}

.dark #public-footer a:hover {
    color: #f9fafb;
}

.dark #public-footer .text-gray-400 {
    color: #9ca3af !important;
}

.dark #public-footer .text-gray-500 {
    color: #6b7280 !important;
}

.dark #public-footer .border-gray-700 {
    border-color: #374151 !important;
}

/* ===================================
   GROUPS CAROUSEL
   =================================== */
/* Carousel Background */
.dark .from-white {
    --tw-gradient-from: #111827;
}

.dark .to-gray-50 {
    --tw-gradient-to: #1f2937;
}

/* Carousel Navigation Buttons */
.dark .carousel-nav {
    background-color: #374151 !important;
    border: 2px solid #4b5563 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.dark .carousel-nav:hover {
    background-color: #4b5563 !important;
    border-color: #22c55e !important;
    box-shadow: 0 8px 16px rgba(34, 197, 94, 0.3) !important;
}

.dark .carousel-nav:active {
    transform: scale(0.95) !important;
}

.dark .carousel-nav i {
    color: #d1d5db;
    transition: color 0.3s ease;
}

.dark .carousel-nav:hover i {
    color: #22c55e;
}

/* Group Cards - DARK MODE */
.dark .group-card {
    background-color: #1f2937 !important;
    border: 2px solid #374151 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.dark .group-card:hover {
    border-color: #22c55e !important;
    box-shadow: 0 12px 24px rgba(34, 197, 94, 0.2) !important;
}

.dark .group-card h3 {
    color: #ffffff !important;
}

.dark .group-card p {
    color: #d1d5db !important;
}

.dark .group-card .card-header h3,
.dark .group-card .card-header p {
    color: #ffffff;
}

.dark .group-card .text-gray-700 {
    color: #d1d5db !important;
}

.dark .group-card .text-gray-600 {
    color: #9ca3af !important;
}

.dark .group-card .text-gray-400 {
    color: #6b7280;
}

.dark .group-card strong {
    color: #f9fafb !important;
}

.dark .group-card .bg-gray-50 {
    background-color: #111827;
}

.dark .group-card .bg-gray-200 {
    background-color: #374151;
}

/* ===================================
   CAROUSEL CARD TITLE - DARK MODE
   =================================== */
.dark .text-2xl.font-bold.text-center.drop-shadow-md {
    color: #ffffff !important;
}

.dark .text-2xl.font-bold.text-center.drop-shadow-md.text-white {
    color: #ffffff !important;
}

/* ===================================
   FEATURE CARDS
   =================================== */
.dark .feature-card {
    background-color: #1f2937;
    border: 1px solid #374151;
}

.dark .feature-card h3 {
    color: #f9fafb;
}

.dark .feature-card p {
    color: #9ca3af;
}

/* ===================================
   EVENT CARDS
   =================================== */
.dark .bg-white.rounded-2xl {
    background-color: #1f2937;
    border: 1px solid #374151;
}

/* ===================================
   CONTENT SECTIONS
   =================================== */
/* Background gradients for sections */
.dark .bg-gradient-to-b.from-white.to-gray-50 {
    background: linear-gradient(to bottom, #111827, #1f2937);
}

/* Text headings in dark mode */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #f9fafb;
}

.dark p {
    color: #d1d5db;
}

/* ===================================
   FORMS & INPUTS
   =================================== */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="tel"],
.dark input[type="password"],
.dark textarea,
.dark select {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #6b7280;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: var(--primary-color);
    background-color: #374151;
}

/* ===================================
   BUTTONS
   =================================== */
.dark button:not(.primary-bg):not(.bg-white):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]) {
    background-color: #374151;
    color: #d1d5db;
}

.dark button:not(.primary-bg):not(.bg-white):not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-blue"]):hover {
    background-color: #4b5563;
    color: #f9fafb;
}

/* ===================================
   MODALS
   =================================== */
.dark #generic-modal-content {
    background-color: #1f2937;
    border: 1px solid #374151;
}

.dark .modal-header {
    border-bottom-color: #374151;
}

/* ===================================
   TABLES
   =================================== */
.dark table {
    background-color: #1f2937;
}

.dark thead {
    background-color: #374151;
    color: #f9fafb;
}

.dark tbody tr {
    border-bottom-color: #374151;
}

.dark tbody tr:hover {
    background-color: #374151;
}

.dark td,
.dark th {
    color: #d1d5db;
}

/* ===================================
   CARDS & CONTAINERS
   =================================== */
.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

/* ===================================
   STYLE PREVIEWS
   =================================== */
.dark .style-preview {
    background: #374151;
    border-color: #4b5563;
}

/* ===================================
   HERO SECTION
   =================================== */
.dark .hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://source.unsplash.com/1600x900/?education,library');
}

/* ===================================
   DIVIDERS
   =================================== */
.dark hr,
.dark .border-t,
.dark .border-b {
    border-color: #374151;
}

/* ===================================
   BADGE & TAGS
   =================================== */
.dark .badge,
.dark .tag {
    background-color: #374151;
    color: #d1d5db;
}

/* ===================================
   ALERTS & NOTIFICATIONS
   =================================== */
.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1);
}

.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1);
}

.dark .bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.1);
}

.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1);
}

.dark .text-blue-800 {
    color: #93c5fd;
}

.dark .text-red-800 {
    color: #fca5a5;
}

.dark .text-yellow-800 {
    color: #fcd34d;
}

.dark .text-green-800 {
    color: #86efac;
}

.dark .border-blue-200 {
    border-color: rgba(59, 130, 246, 0.2);
}

.dark .border-red-200 {
    border-color: rgba(239, 68, 68, 0.2);
}

.dark .border-yellow-200 {
    border-color: rgba(245, 158, 11, 0.2);
}

.dark .border-green-200 {
    border-color: rgba(34, 197, 94, 0.2);
}

/* ===================================
   SCROLLBAR (WEBKIT BROWSERS)
   =================================== */
.dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 5px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ===================================
   LOGIN BUTTON (ADMIN LOGIN) - DARK MODE
   =================================== */
.dark #login-btn {
    background-color: #22c55e !important;
    color: #ffffff !important;
    border: none;
}

.dark #login-btn span {
    color: #ffffff !important;
}

.dark #login-btn i {
    color: #ffffff !important;
}

.dark #login-btn:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

.dark #login-btn:hover span,
.dark #login-btn:hover i {
    color: #ffffff !important;
}

/* ===================================
   VIEW ALL GROUPS BUTTON - DARK MODE
   =================================== */
.dark button[data-page="groups"] {
    color: #ffffff !important;
    border-color: #22c55e !important;
    background-color: transparent;
}

.dark button[data-page="groups"]:hover {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: #22c55e !important;
}

.dark button[data-page="groups"] span,
.dark button[data-page="groups"] i {
    color: #ffffff !important;
}

.dark button[data-page="groups"]:hover span,
.dark button[data-page="groups"]:hover i {
    color: #22c55e !important;
}

/* ===================================
   SECONDARY BACKGROUND
   =================================== */
.dark .secondary-bg {
    background-color: rgba(34, 197, 94, 0.15);
}

/* ===================================
   PAGE PADDING & BACKGROUNDS
   =================================== */
.dark #public-content {
    background-color: transparent;
}

/* ===================================
   DISABLED STATES
   =================================== */
.dark button:disabled,
.dark button[disabled] {
    background-color: #4b5563;
    color: #6b7280;
    cursor: not-allowed;
}

/* ===================================
   IMAGES & MEDIA
   =================================== */
.dark img {
    opacity: 0.9;
}

.dark img:hover {
    opacity: 1;
}

/* ===================================
   FULL GROUP CARDS - DARK MODE
   =================================== */
.dark .group-card.border-red-600 {
    border-color: #dc2626 !important;
    background-color: rgba(127, 29, 29, 0.3) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.dark .group-card.border-red-600:hover {
    border-color: #dc2626 !important;
    background-color: rgba(127, 29, 29, 0.4) !important;
    box-shadow: 0 8px 16px rgba(220, 38, 38, 0.4) !important;
}