/* A professional, modern dark theme - with user-specific overrides */
:root {
    --tw-dark-bg: #111827; /* A deep, cool navy */
    --tw-dark-card: #1f2937; /* A slightly lighter, softer navy */
    --tw-dark-text: #d1d5db; /* A soft, readable off-white */
    --tw-dark-text-light: #9ca3af; /* A muted gray for secondary text */
    --tw-dark-text-heavy: #f9fafb; /* A brighter white for headings */
    --tw-dark-border: #374151; /* A subtle border color */
    --tw-dark-primary: #3b82f6; /* A vibrant, accessible blue */
    --tw-dark-primary-hover: #60a5fa; /* A lighter blue for hover states */
    --tw-dark-accent: #f59e0b; /* A warm, energetic amber */
    --tw-dark-accent-hover: #fbbf24; /* A brighter amber for hover */
    --tw-dark-success: #10b981; /* A clear, positive green */
    --tw-dark-danger: #ef4444; /* A strong, clear red */
    --tw-dark-warning: #f97316; /* A noticeable orange */
}

.dark body {
    background-color: var(--tw-dark-bg);
    color: var(--tw-dark-text);
}

.dark .bg-white,
.dark .card,
.dark .auth-card,
.dark .modal-content,
.dark .table-container,
.dark .stat-card,
.dark .event-details-card,
.dark .organizer-card,
.dark .bg-gray-50,
.dark .bg-gray-100 {
    background-color: var(--tw-dark-card) !important;
    border-color: var(--tw-dark-border) !important;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .text-gray-900,
.dark .text-gray-800,
.dark .font-bold {
    color: var(--tw-dark-text-heavy) !important;
}

.dark p, .dark span, .dark div:not([class]),
.dark .text-gray-600,
.dark .text-gray-700,
.dark .section-sub {
    color: var(--tw-dark-text) !important;
}

.dark .text-gray-500 {
    color: var(--tw-dark-text-light) !important;
}

.dark a:not(.btn) {
    color: var(--tw-dark-primary);
}

.dark a:not(.btn):hover {
    color: var(--tw-dark-primary-hover);
}

.dark .btn-primary {
    background-color: var(--tw-dark-primary) !important;
    border-color: var(--tw-dark-primary) !important;
    color: var(--tw-dark-text-heavy) !important;
}

.dark .btn-primary:hover {
    background-color: var(--tw-dark-primary-hover) !important;
    border-color: var(--tw-dark-primary-hover) !important;
}

.dark .btn-accent {
    background-color: var(--tw-dark-accent) !important;
    border-color: var(--tw-dark-accent) !important;
    color: var(--tw-dark-bg) !important;
}

.dark .btn-accent:hover {
    background-color: var(--tw-dark-accent-hover) !important;
    border-color: var(--tw-dark-accent-hover) !important;
}

.dark .border,
.dark td,
.dark th {
    border-color: var(--tw-dark-border) !important;
}

.dark thead {
    background-color: #1f2937 !important; /* Same as card for consistency */
}

.dark tbody tr:hover {
    background-color: #374151 !important; /* A bit lighter than card for hover effect */
}

.dark .form-control,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark textarea,
.dark select {
    background-color: var(--tw-dark-bg) !important;
    color: var(--tw-dark-text) !important;
    border-color: var(--tw-dark-border) !important;
}

.dark .form-control:focus,
.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: var(--tw-dark-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dark .badge-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: var(--tw-dark-success) !important;
}

.dark .btn-danger {
    background-color: var(--tw-dark-danger) !important;
    color: var(--tw-dark-text-heavy) !important;
}

.dark .btn-danger:hover {
    background-color: #c53030 !important; /* A darker red for hover */
}

.dark .badge-warning {
    background-color: rgba(249, 115, 22, 0.2) !important;
    color: var(--tw-dark-warning) !important;
}

.dark .badge-archived {
    background-color: rgba(156, 163, 175, 0.2) !important;
    color: var(--tw-dark-text-light) !important;
}

.dark .navbar {
    background-color: var(--tw-dark-card) !important;
    border-bottom: 1px solid var(--tw-dark-border);
}

.dark .footer {
    background-color: var(--tw-dark-card) !important;
    border-top: 1px solid var(--tw-dark-border);
}

/* User-specific overrides - as requested */

/*
  NOTE: The following styles were implemented based on a direct user request.
  Some of these color combinations (e.g., black text on a dark background)
  will result in poor readability and are not recommended from an accessibility
  or user experience perspective.
*/

/* Home Page & About Page: Buttons */
.dark .home-hero-button,
.dark .about-cta .btn-primary,
.dark .about-cta .btn-accent {
    background-color: white !important;
    border-color: white !important;
    color: #111827 !important; /* Black text for contrast on white button */
}

.dark .home-hero-button:hover,
.dark .about-cta .btn-primary:hover,
.dark .about-cta .btn-accent:hover {
    background-color: #f9fafb !important; /* Slightly off-white for hover */
    border-color: #f9fafb !important;
}

/* Home Page: Section Titles */
.dark .section-header {
    color: white !important;
}

/* Panel Pages: Titles */
.dark .panel-title {
    color: white !important;
}

/* Event Titles (Home & Events Page) - Black Text */
.dark .event-card h3 {
    color: black !important;
}

/* About Page: Info Card Text - Black Text */
.dark .card p {
    color: black !important;
}

.dark .home-search-button {
    background-color: var(--tw-dark-accent) !important;
    color: var(--tw-dark-bg) !important;
}

.dark .search-input-home {
    background-color: transparent !important;
}