/* ===================================
   LIGHT MODE ENHANCEMENTS
   =================================== */

/* ===================================
   HEADER
   =================================== */
#page-header {
    background-color: #ffffff;
    border-bottom: 2px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Header brand text and links */
#page-header a,
#page-header span {
    color: #111827 !important;
}

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

#page-header .nav-link {
    color: #111827 !important;
    font-weight: 500;
}

#page-header .nav-link:hover,
#page-header .nav-link.active {
    color: #22c55e;
}

/* Language dropdown button text - ALWAYS BLACK IN LIGHT MODE */
#page-header #current-lang-text,
span#current-lang-text {
    color: #111827 !important;
    font-weight: 600;
}

/* Language dropdown button icon */
#page-header .dropdown button i {
    color: #111827 !important;
}

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

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

#page-header button:not(#login-btn) {
    color: #111827 !important;
    transition: all 0.3s ease;
}

#page-header button:not(#login-btn):hover {
    color: #22c55e;
}

/* ===================================
   LANGUAGE DROPDOWN
   =================================== */
#language-dropdown-menu {
    background-color: #ffffff;
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#language-dropdown-menu a {
    color: #111827 !important;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    font-weight: 500;
}

#language-dropdown-menu a {
    color: #111827 !important;
    font-weight: 500;
}

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

/* Ensure all language options in light mode */
#language-dropdown-menu a[data-lang] {
    color: #111827 !important;
}

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

/* ===================================
   FOOTER
   =================================== */
#public-footer {
    background-color: #f9fafb;
    border-top: 2px solid #e5e7eb;
}

#public-footer h3 {
    color: #1f2937;
    font-weight: 700;
}

#public-footer a {
    color: #6b7280;
    transition: color 0.3s ease;
}

#public-footer a:hover {
    color: #22c55e;
}

#public-footer p {
    color: #6b7280;
}

/* ===================================
   HERO SECTION
   =================================== */
.hero-bg {
    background-position: center;
    background-size: cover;
    position: relative;
}

.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.hero-bg > * {
    position: relative;
    z-index: 2;
}

/* ===================================
   FEATURE CARDS
   =================================== */
.feature-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.feature-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: #22c55e;
    transform: translateY(-4px);
}

.feature-card h3 {
    color: #1f2937;
    font-weight: 700;
}

.feature-card p {
    color: #6b7280;
    line-height: 1.6;
}

.feature-card .secondary-bg {
    background-color: #dcfce7;
}

/* ===================================
   GROUP CARDS (CAROUSEL & PAGE)
   =================================== */
.group-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.group-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: #22c55e;
    transform: translateY(-8px);
}

.group-card .card-header {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

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

.group-card .bg-gray-50 {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
}

.group-card .text-gray-700,
.group-card .text-gray-600 {
    color: #4b5563;
}

.group-card .text-gray-400 {
    color: #9ca3af;
}

/* ===================================
   CAROUSEL NAVIGATION
   =================================== */
.carousel-nav {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.carousel-nav:hover {
    background-color: #22c55e;
    color: #ffffff;
    border-color: #22c55e;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* ===================================
   EVENT CARDS
   =================================== */
.bg-white.rounded-2xl {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bg-white.rounded-2xl:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: #22c55e;
}

/* ===================================
   BUTTONS
   =================================== */
button:not(.dark) {
    transition: all 0.3s ease;
}

.primary-bg {
    background-color: #22c55e;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

.primary-bg:hover {
    background-color: #16a34a;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    transform: translateY(-2px);
}

.register-btn,
.learn-more-btn {
    transition: all 0.3s ease;
}

/* ===================================
   FILTERS & FORMS
   =================================== */
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    transition: all 0.3s ease;
}

select:hover,
input:hover,
textarea:hover {
    border-color: #d1d5db;
}

select:focus,
input:focus,
textarea:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    outline: none;
}

select option {
    background-color: #ffffff;
    color: #1f2937;
}

/* ===================================
   MAIN CONTENT AREAS
   =================================== */
#public-content {
    background-color: #ffffff;
}

/* ===================================
   SECTION BACKGROUNDS
   =================================== */
.py-20.px-6,
.py-20.px-4 {
    background-color: #ffffff;
}

/* ===================================
   TEXT CONTENT
   =================================== */
.text-gray-800 {
    color: #1f2937;
}

.text-gray-700 {
    color: #374151;
}

.text-gray-600 {
    color: #4b5563;
}

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

/* ===================================
   BORDERS & DIVIDERS
   =================================== */
.border-gray-200,
.border-gray-100 {
    border-color: #e5e7eb;
}

.border-gray-700 {
    border-color: #d1d5db;
}

hr {
    border-color: #e5e7eb;
}

/* ===================================
   BADGES & STATUS
   =================================== */
.bg-red-100 {
    background-color: #fee2e2;
    color: #dc2626;
}

.bg-green-100 {
    background-color: #dcfce7;
    color: #16a34a;
}

.bg-yellow-100 {
    background-color: #fef3c7;
    color: #d97706;
}

.text-red-800 {
    color: #991b1b;
}

.text-green-800 {
    color: #15803d;
}

/* ===================================
   ACTIVITY CARDS
   =================================== */
.flex.flex-col.md\\:flex-row.items-center.gap-8 {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.flex.flex-col.md\\:flex-row.items-center.gap-8:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: #22c55e;
}

/* ===================================
   PROGRESS BARS
   =================================== */
.bg-gray-200 {
    background-color: #e5e7eb;
}

.bg-red-500 {
    background-color: #ef4444;
}

.bg-yellow-500 {
    background-color: #eab308;
}

.bg-green-500 {
    background-color: #22c55e;
}

/* ===================================
   ICONS & VISUAL ELEMENTS
   =================================== */
.primary-text {
    color: #22c55e;
}

.secondary-bg {
    background-color: #dcfce7;
}

.shadow-soft {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ===================================
   TRANSITIONS & ANIMATIONS
   =================================== */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

button,
a {
    transition: all 0.3s ease;
}

/* ===================================
   HOVER STATES
   =================================== */
button:hover:not(:disabled):not(.primary-bg) {
    background-color: #f3f4f6;
    border-color: #22c55e;
}

/* ===================================
   MOBILE MENU
   =================================== */
#mobile-menu {
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
}

/* ===================================
   TABLES
   =================================== */
table {
    background-color: #ffffff;
    border-collapse: collapse;
}

thead {
    background-color: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

thead th {
    color: #1f2937;
    font-weight: 700;
}

tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

tbody tr:hover {
    background-color: #f9fafb;
}

tbody td {
    color: #4b5563;
}

/* ===================================
   MODALS
   =================================== */
#generic-modal-content {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

/* ===================================
   EVENT CARDS (LIGHT MODE ADAPTIVE)
   =================================== */
.event-card {
    background-color: #ffffff;
    border: 2px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}

.event-card:hover {
    border-color: #22c55e !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-4px) !important;
}

/* Ensure text is visible on white cards in light mode */
.event-card .text-red-500 {
    color: #dc2626;
}

.event-card .text-gray-900 {
    color: #111827;
}

.event-card .text-gray-700 {
    color: #374151;
}

/* General white card styling for light mode */
.bg-white.rounded-2xl.shadow-soft {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

/* ===================================
   CAROUSEL NAVIGATION BUTTONS (LIGHT MODE)
   =================================== */
.carousel-nav {
    background-color: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.carousel-nav:hover {
    background-color: #f0fdf4 !important;
    border-color: #22c55e !important;
    box-shadow: 0 8px 16px rgba(34, 197, 94, 0.2) !important;
    transform: scale(1.1) !important;
}

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

/* Icon colors within carousel nav */
.carousel-nav i {
    color: #4b5563;
    transition: color 0.3s ease;
}

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

/* ===================================
   PROGRESS BAR - LIGHT MODE
   =================================== */
.bg-white.dark\:bg-gray-700.rounded-full.h-2.overflow-hidden.border-2.border-gray-300 {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

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

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

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

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

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

/* ===================================
   VIEW ALL GROUPS BUTTON
   =================================== */
button[data-page="groups"] {
    color: #22c55e !important;
    border-color: #22c55e !important;
}

button[data-page="groups"]:hover {
    background-color: #f0fdf4;
    border-color: #22c55e !important;
}

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

/* ===================================
   GROUP CARDS - LIGHT MODE
   =================================== */
.group-card {
    background-color: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
}

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

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

.group-card p {
    color: #4b5563 !important;
}

.group-card .text-gray-600 {
    color: #4b5563 !important;
}

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

.group-card strong {
    color: #1f2937 !important;
}

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

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

/* ===================================
   GROUPS PAGE TITLE - LIGHT MODE
   =================================== */
.text-4xl.font-bold.text-black {
    color: #000000 !important;
}

/* ===================================
   FILTER LABEL TITLES - LIGHT MODE
   =================================== */
.block.text-sm.font-medium.text-black {
    color: #000000 !important;
}

/* ===================================
   FILTER SELECT INPUTS - LIGHT MODE
   =================================== */
select.w-full.p-2.border.border-gray-300.rounded-xl.bg-white {
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

select.w-full.p-2.border.border-gray-300.rounded-xl.bg-white option {
    color: #000000;
    background-color: #ffffff;
}

/* ===================================
   PAGINATION BUTTONS - LIGHT MODE
   =================================== */
.pagination-btn {
    color: #ffffff !important;
}

.pagination-btn.bg-gray-300 {
    background-color: #d1d5db !important;
    color: #111827 !important;
    border: 1px solid #9ca3af;
}

.pagination-btn.bg-gray-300:hover {
    background-color: #9ca3af !important;
    color: #ffffff !important;
}

.pagination-btn.bg-gray-300:disabled {
    background-color: #d1d5db !important;
    color: #111827 !important;
    cursor: not-allowed;
}

/* ===================================
   FULL GROUP CARDS - LIGHT MODE
   =================================== */
.group-card.border-red-600 {
    border-color: #dc2626 !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

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