/*
 * Contrast and Readability Fixes
 * Addresses color contrast issues across forum, events, contacts, and templates pages
 */

/* =============================================================================
   FORUM FIXES - Gray text on gray backgrounds
   ============================================================================= */

/* Forum topic content - better contrast */
.topic-window p.retro-text-small {
    color: #202020 !important; /* Much darker gray for better readability */
}

/* Forum metadata text */
.topic-window div[style*="color: #404040"] {
    color: #202020 !important; /* Darker gray for better contrast */
}

/* Forum category badges on gray background */
.retro-window-content .retro-btn[style*="background: #000080"] {
    background: #000080 !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

/* =============================================================================
   EVENTS FIXES - Blue backgrounds with dark text
   ============================================================================= */

/* Upcoming events with blue background - ensure white text */
.retro-event-upcoming {
    background-color: rgba(0, 80, 160, 0.15) !important; /* Slightly darker blue bg */
    border: 1px solid rgba(0, 80, 160, 0.4) !important;
    color: #000000 !important; /* Black text for contrast */
}

/* Today events with green background */
.retro-event-today {
    background-color: rgba(0, 100, 0, 0.15) !important; /* Slightly darker green */
    border: 1px solid rgba(0, 100, 0, 0.4) !important;
    color: #000000 !important; /* Black text */
}

/* Past events - better contrast */
.retro-event-past {
    background-color: #e0e0e0 !important; /* Light gray instead of dark */
    border: 1px solid #999999 !important;
    opacity: 0.9 !important; /* Less transparency */
    color: #404040 !important; /* Dark gray text */
}

/* Event descriptions and location text */
.retro-event-upcoming div[style*="color: var(--retro-dark-gray)"],
.retro-event-upcoming small[style*="color: var(--retro-dark-gray)"],
.retro-event-today div[style*="color: var(--retro-dark-gray)"],
.retro-event-today small[style*="color: var(--retro-dark-gray)"] {
    color: #202020 !important; /* Much darker for readability */
}

/* Calendar event links */
.retro-calendar-event {
    background: var(--retro-blue) !important;
    color: #ffffff !important; /* Ensure white text on blue */
    font-weight: bold !important;
}

.retro-calendar-event:hover {
    background: #000050 !important; /* Darker blue on hover */
    color: #ffffff !important;
}

/* =============================================================================
   GENERAL CONTRAST IMPROVEMENTS
   ============================================================================= */

/* Ensure all gray text on gray backgrounds has better contrast */
.retro-window-content p[style*="color: var(--retro-dark-gray)"],
.retro-window-content div[style*="color: var(--retro-dark-gray)"],
.retro-window-content small[style*="color: var(--retro-dark-gray)"] {
    color: #303030 !important; /* Darker gray for better readability */
}

/* Active list items - ensure contrast */
.retro-list-item.active {
    background: var(--retro-blue) !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Disabled pagination links */
.retro-page-link.disabled {
    color: #808080 !important; /* Medium gray instead of light */
    background: #f0f0f0 !important;
}

/* Alert boxes - ensure readable text */
.retro-alert-info {
    background: #e8f0ff !important; /* Light blue background */
    color: #000000 !important; /* Black text */
    border: 2px solid #0066cc !important;
}

/* Table row hover states with proper contrast */
.event-upcoming {
    background-color: #e8f0ff !important;
    color: #000000 !important;
}

.event-today {
    background-color: #e8ffe8 !important;
    color: #000000 !important;
}

.event-past {
    background-color: #f5f5f5 !important;
    color: #404040 !important;
}

/* Ensure links in blue areas are visible */
.retro-event-upcoming a,
.retro-event-today a {
    color: #000080 !important; /* Dark blue links */
    text-decoration: underline !important;
}

.retro-event-upcoming a:hover,
.retro-event-today a:hover {
    color: #0000cc !important; /* Brighter blue on hover */
}

/* Fix breadcrumb contrast */
.retro-breadcrumb {
    background: #f0f0f0 !important;
    padding: 8px !important;
    border-radius: 2px !important;
}

.retro-breadcrumb a {
    color: #000080 !important;
    font-weight: bold !important;
}

/* Fix form field labels on gray backgrounds */
.retro-window-content label {
    color: #000000 !important; /* Black text for labels */
    font-weight: bold !important;
}

/* Input fields in retro windows */
.retro-window-content input[type="text"],
.retro-window-content input[type="email"],
.retro-window-content textarea,
.retro-window-content select {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px inset #808080 !important;
}

/* Placeholder text contrast */
.retro-window-content input::placeholder,
.retro-window-content textarea::placeholder {
    color: #606060 !important; /* Darker placeholder text */
}

/* =============================================================================
   TEMPLATES PAGE FIXES
   ============================================================================= */

/* Template cards with colored headers */
.template-card .card-header.bg-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

.template-card .card-header.bg-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Template card text readability */
.template-card .card-body {
    background: #ffffff !important;
    color: #000000 !important;
}

.template-card .template-description {
    color: #333333 !important; /* Darker text for descriptions */
}

.template-card .text-muted {
    color: #505050 !important; /* Darker muted text */
}

/* Badge contrast improvements */
.badge.bg-info {
    background-color: #0066cc !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000000 !important; /* Black text on yellow */
    font-weight: bold !important;
}

/* =============================================================================
   CONTACTS PAGE SPECIFIC FIXES
   ============================================================================= */

/* Contact table rows */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f8f8 !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* Table text contrast */
.table td, .table th {
    color: #000000 !important;
}

.table .text-muted {
    color: #404040 !important;
}

/* =============================================================================
   ADDITIONAL GLOBAL FIXES
   ============================================================================= */

/* Fix any remaining low contrast text */
.text-secondary {
    color: #505050 !important; /* Darker secondary text */
}

/* Ensure all links are readable */
a {
    color: #0052cc !important; /* Darker blue for links */
}

a:hover {
    color: #0066ff !important; /* Brighter blue on hover */
}

/* Fix card backgrounds that might have contrast issues */
.card {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
}

.card-header {
    border-bottom: 1px solid #cccccc !important;
}

.card-footer {
    background-color: #f8f8f8 !important;
    border-top: 1px solid #cccccc !important;
}

/* =============================================================================
   DJANGO TABLES2 RETRO STYLING
   ============================================================================= */

/* Django tables2 specific styling for retro look */
.django-tables2-container,
.table-responsive {
    background: #ffffff;
    border: 2px solid #808080;
    box-shadow: inset -1px -1px #404040, inset 1px 1px #dfdfdf;
    padding: 0;
    overflow: auto;
    margin-bottom: 20px;
}

/* Django tables2 table styling */
table.django-tables2,
.django-tables2-container table,
.table-responsive table {
    width: 100%;
    margin: 0;
    background: #ffffff;
    border-collapse: collapse;
}

/* Table headers with Windows 95 style */
table.django-tables2 thead th,
.django-tables2-container thead th,
.table-responsive table thead th {
    background: #000080;
    color: #ffffff;
    border: 1px solid #000080;
    padding: 8px 12px;
    font-weight: bold;
    text-align: left;
}

/* Sortable column headers - force white text on blue headers */
table.django-tables2 thead th a,
.django-tables2-container thead th a,
.retro-table-wrapper table thead th a,
.retro-table-wrapper table.table thead th a,
.retro-table-container table thead th a,
.retro-table-container table.table thead th a,
.table thead th a,
thead th a {
    color: #ffffff !important;
    text-decoration: none !important;
}

table.django-tables2 thead th a:hover,
.django-tables2-container thead th a:hover,
.retro-table-wrapper table thead th a:hover,
.retro-table-wrapper table.table thead th a:hover,
.retro-table-container table thead th a:hover,
.retro-table-container table.table thead th a:hover,
.table thead th a:hover,
thead th a:hover {
    text-decoration: underline !important;
    color: #ffffff !important;
}

/* Also fix non-sortable headers that might have text */
table.django-tables2 thead th,
.django-tables2-container thead th,
.retro-table-wrapper table thead th,
.retro-table-wrapper table.table thead th,
.retro-table-container table thead th,
.retro-table-container table.table thead th,
.table thead th,
thead th {
    color: #ffffff !important;
}

/* Table body styling */
table.django-tables2 tbody td,
.django-tables2-container tbody td,
.table-responsive table tbody td {
    background: #ffffff;
    border: 1px solid #c0c0c0;
    padding: 6px 12px;
    color: #000000;
}

/* Alternating row colors */
table.django-tables2 tbody tr:nth-child(odd) td,
.django-tables2-container tbody tr:nth-child(odd) td,
.table-responsive table tbody tr:nth-child(odd) td {
    background-color: #f0f0f0;
}

/* Hover effect */
table.django-tables2 tbody tr:hover td,
.django-tables2-container tbody tr:hover td,
.table-responsive table tbody tr:hover td {
    background-color: #000080;
    color: #ffffff;
}

table.django-tables2 tbody tr:hover td a,
.django-tables2-container tbody tr:hover td a,
.table-responsive table tbody tr:hover td a {
    color: #ffffff;
}

/* Buttons in tables */
table.django-tables2 .btn,
.django-tables2-container .btn,
.table-responsive table .btn {
    padding: 2px 8px;
    font-size: 12px;
}

/* Pagination styling */
.django-tables2-container + .pagination,
.table-responsive + .pagination {
    margin-top: 10px;
}

/* =============================================================================
   DARK MODE SUPPORT - Forum-Style Light Wrapper
   ============================================================================= */

@media (prefers-color-scheme: dark) {
    /* Create a light wrapper for all content like the forum has */
    main {
        background-color: #c0c0c0 !important; /* Light gray wrapper */
        min-height: 100vh !important;
        padding: 20px !important;
    }
    
    /* Body remains dark for overall theme */
    body {
        background-color: #1a1a1a !important;
    }
    
    /* All content containers get white backgrounds */
    main > div:not(.modal):not(.drawer):not(.dropdown),
    main > section,
    main > article,
    main > form,
    .card,
    .table-responsive,
    .django-tables2-container {
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 20px !important;
        border-radius: 4px !important;
        margin-bottom: 20px !important;
        border: 2px solid #808080 !important;
        box-shadow: inset -1px -1px #404040, inset 1px 1px #dfdfdf !important;
    }
    
    /* Retro panels and windows maintain light theme */
    .retro-panel,
    .retro-window {
        background-color: #c0c0c0 !important;
        color: #000000 !important;
    }
    
    .retro-window-content {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    
    /* Tables maintain light theme */
    .table,
    table {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    
    .table th,
    .table td,
    table th,
    table td {
        color: #000000 !important;
        border-color: #cccccc !important;
    }
    
    /* Text in main content is black */
    main h1, main h2, main h3, main h4, main h5, main h6,
    main p, main span, main div, main strong, main em,
    main label, main small {
        color: #000000 !important;
    }
    
    /* Links remain blue */
    main a {
        color: #0052cc !important;
    }
    
    main a:hover {
        color: #0066ff !important;
    }
    
    /* Muted text */
    main .text-muted {
        color: #666666 !important;
    }
    
    /* Sidebar remains dark */
    .sidebar,
    .col-md-3.col-lg-2.sidebar,
    .col-md-3.col-lg-2.bg-light.sidebar {
        background-color: #2a2a2a !important;
        color: #e0e0e0 !important;
        border-right: 1px solid #404040 !important;
    }
    
    .sidebar a,
    .sidebar .nav-link {
        color: #e0e0e0 !important;
    }
    
    .sidebar a:hover,
    .sidebar .nav-link:hover,
    .sidebar .nav-link.active {
        color: #ffffff !important;
        background-color: #3a3a3a !important;
    }
    
    /* Top navigation bar remains dark */
    .navbar {
        background-color: #2a2a2a !important;
        color: #e0e0e0 !important;
    }
    
    /* Modals remain dark themed */
    .modal-content {
        background-color: #2a2a2a !important;
        color: #e0e0e0 !important;
        border-color: #404040 !important;
    }
    
    .modal-header,
    .modal-footer {
        background-color: #353535 !important;
        border-color: #404040 !important;
    }
    
    /* Dropdowns remain dark themed */
    .dropdown-menu {
        background-color: #2a2a2a !important;
        border-color: #404040 !important;
    }
    
    .dropdown-item {
        color: #e0e0e0 !important;
    }
    
    .dropdown-item:hover {
        background-color: #3a3a3a !important;
        color: #ffffff !important;
    }
    
    /* Form inputs in main content */
    main input[type="text"],
    main input[type="email"],
    main input[type="password"],
    main textarea,
    main select,
    main .form-control,
    main .form-select {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 2px inset #808080 !important;
    }
    
    /* Buttons maintain their normal styling */
    .btn-primary {
        background-color: #0052cc !important;
        color: #ffffff !important;
    }
    
    .btn-secondary {
        background-color: #6c757d !important;
        color: #ffffff !important;
    }
    
    .btn-success {
        background-color: #28a745 !important;
        color: #ffffff !important;
    }
    
    .btn-danger {
        background-color: #dc3545 !important;
        color: #ffffff !important;
    }
    
    /* Command input area at top */
    #header-command-input {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 2px inset #808080 !important;
    }
    
    /* =============================================================================
       DJANGO TABLES2 DARK MODE OVERRIDES
       ============================================================================= */
    
    /* Force retro window titles to be visible */
    .retro-window-title {
        background: #000080 !important;
        color: #ffffff !important;
        border-bottom: 2px solid #000080 !important;
        padding: 8px !important;
        font-weight: bold !important;
    }
    
    /* Ensure Django tables2 containers stay light */
    .django-tables2-container,
    .table-responsive,
    .retro-table-wrapper {
        background: #ffffff !important;
        border: 2px solid #808080 !important;
        box-shadow: inset -1px -1px #404040, inset 1px 1px #dfdfdf !important;
    }
    
    /* Django tables2 tables stay light themed */
    table.django-tables2,
    .django-tables2-container table,
    .table-responsive table,
    table.table {
        background: #ffffff !important;
    }
    
    /* Headers stay blue with white text */
    table.django-tables2 thead th,
    .django-tables2-container thead th,
    .table-responsive table thead th,
    table.table thead th {
        background: #000080 !important;
        color: #ffffff !important;
        border-color: #000080 !important;
    }
    
    /* All table cells have black text on white background */
    table.django-tables2 tbody td,
    .django-tables2-container tbody td,
    .table-responsive table tbody td,
    table.table tbody td,
    .retro-table-wrapper table tbody td,
    .retro-table-wrapper table.table tbody tr td {
        background: #ffffff !important;
        color: #000000 !important;
        border-color: #c0c0c0 !important;
    }
    
    /* Force all text elements in tables to be black */
    table.django-tables2 tbody td *,
    .django-tables2-container tbody td *,
    .table-responsive table tbody td *,
    table.table tbody td *,
    .retro-table-wrapper table tbody td *,
    .retro-table-wrapper table.table tbody tr td * {
        color: #000000 !important;
    }
    
    /* Alternating rows */
    table.django-tables2 tbody tr:nth-child(odd) td,
    .django-tables2-container tbody tr:nth-child(odd) td,
    .table-responsive table tbody tr:nth-child(odd) td,
    table.table tbody tr:nth-child(odd) td,
    .retro-table-wrapper table.table tbody tr:nth-child(odd) td {
        background-color: #f0f0f0 !important;
        color: #000000 !important;
    }
    
    /* Hover state */
    table.django-tables2 tbody tr:hover td,
    .django-tables2-container tbody tr:hover td,
    .table-responsive table tbody tr:hover td,
    table.table tbody tr:hover td {
        background-color: #000080 !important;
        color: #ffffff !important;
    }
    
    /* Links in tables */
    table.django-tables2 td a,
    .django-tables2-container td a,
    .table-responsive table td a,
    table.table td a {
        color: #0052cc !important;
    }
    
    table.django-tables2 tbody tr:hover td a,
    .django-tables2-container tbody tr:hover td a,
    .table-responsive table tbody tr:hover td a,
    table.table tbody tr:hover td a {
        color: #ffffff !important;
    }
    
    /* Badges in tables */
    table.django-tables2 .badge,
    .django-tables2-container .badge,
    .table-responsive table .badge,
    table.table .badge {
        /* Badges keep their colors */
    }
    
    /* Fix Bootstrap table classes */
    .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: #f0f0f0 !important;
        color: #000000 !important;
    }
    
    .table-striped > tbody > tr:nth-of-type(even) > * {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    
    /* Fix button colors in dark mode */
    .btn-primary,
    .retro-btn-primary {
        background-color: #0052cc !important;
        color: #ffffff !important;
        border-color: #0052cc !important;
    }
    
    .btn-danger {
        background-color: #dc3545 !important;
        color: #ffffff !important;
        border-color: #dc3545 !important;
    }
    
    .btn-secondary {
        background-color: #6c757d !important;
        color: #ffffff !important;
        border-color: #6c757d !important;
    }
    
    /* Fix retro buttons specifically */
    .retro-btn {
        background: #c0c0c0 !important;
        color: #000000 !important;
        border: 2px solid !important;
        border-color: #dfdfdf #404040 #404040 #dfdfdf !important;
    }
    
    .retro-btn.retro-btn-primary {
        background: #000080 !important;
        color: #ffffff !important;
        border-color: #8080ff #000040 #000040 #8080ff !important;
    }
    
    .retro-btn.retro-btn-danger {
        background: #dc3545 !important;
        color: #ffffff !important;
        border-color: #dc3545 !important;
    }
    
    /* Ensure table wrapper has white background */
    .retro-table-wrapper {
        background: #ffffff !important;
    }
    
    /* Force table bodies to have white background */
    .retro-table-wrapper table,
    .retro-table-wrapper table tbody,
    .retro-table-wrapper table.table,
    .retro-table-wrapper table.table tbody {
        background: #ffffff !important;
    }
    
    /* Fix alert-info boxes in dark mode */
    .alert-info,
    .alert.alert-info {
        background-color: #e8f0ff !important;
        color: #000000 !important;
        border-color: #0066cc !important;
    }
    
    .alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4, .alert-info h5, .alert-info h6,
    .alert-info p, .alert-info span, .alert-info div, .alert-info strong, .alert-info em,
    .alert-info label, .alert-info small,
    .alert.alert-info h1, .alert.alert-info h2, .alert.alert-info h3, .alert.alert-info h4, .alert.alert-info h5, .alert.alert-info h6,
    .alert.alert-info p, .alert.alert-info span, .alert.alert-info div, .alert.alert-info strong, .alert.alert-info em,
    .alert.alert-info label, .alert.alert-info small {
        color: #000000 !important;
    }
    
    .alert-info a,
    .alert.alert-info a {
        color: #0052cc !important;
        text-decoration: underline !important;
    }
    
    /* Fix retro-empty-state visibility in dark mode */
    .retro-empty-state {
        background: #f0f0f0 !important;
        color: #000000 !important;
    }
    
    .retro-empty-state-icon,
    .retro-empty-state-title,
    .retro-empty-state-message,
    .retro-empty-state h1, .retro-empty-state h2, .retro-empty-state h3, 
    .retro-empty-state h4, .retro-empty-state h5, .retro-empty-state h6,
    .retro-empty-state p, .retro-empty-state span, .retro-empty-state div {
        color: #000000 !important;
        opacity: 1 !important;
    }
    
    .retro-empty-state .retro-btn {
        background: #0052cc !important;
        color: #ffffff !important;
        border-color: #0052cc !important;
    }
    
    /* Fix Django messages in dark mode */
    .alert-success,
    .alert.alert-success {
        background-color: #e8ffe8 !important;
        color: #000000 !important;
        border-color: #4caf50 !important;
    }
    
    .alert-warning,
    .alert.alert-warning {
        background-color: #fff8e1 !important;
        color: #000000 !important;
        border-color: #ff9800 !important;
    }
    
    .alert-danger,
    .alert.alert-danger,
    .alert-error,
    .alert.alert-error {
        background-color: #ffebee !important;
        color: #000000 !important;
        border-color: #f44336 !important;
    }
    
    /* Ensure all text in alerts is black */
    .alert-success h1, .alert-success h2, .alert-success h3, .alert-success h4, .alert-success h5, .alert-success h6,
    .alert-success p, .alert-success span, .alert-success div, .alert-success strong, .alert-success em,
    .alert-success label, .alert-success small,
    .alert.alert-success h1, .alert.alert-success h2, .alert.alert-success h3, .alert.alert-success h4, .alert.alert-success h5, .alert.alert-success h6,
    .alert.alert-success p, .alert.alert-success span, .alert.alert-success div, .alert.alert-success strong, .alert.alert-success em,
    .alert.alert-success label, .alert.alert-success small,
    .alert-warning h1, .alert-warning h2, .alert-warning h3, .alert-warning h4, .alert-warning h5, .alert-warning h6,
    .alert-warning p, .alert-warning span, .alert-warning div, .alert-warning strong, .alert-warning em,
    .alert-warning label, .alert-warning small,
    .alert.alert-warning h1, .alert.alert-warning h2, .alert.alert-warning h3, .alert.alert-warning h4, .alert.alert-warning h5, .alert.alert-warning h6,
    .alert.alert-warning p, .alert.alert-warning span, .alert.alert-warning div, .alert.alert-warning strong, .alert.alert-warning em,
    .alert.alert-warning label, .alert.alert-warning small,
    .alert-danger h1, .alert-danger h2, .alert-danger h3, .alert-danger h4, .alert-danger h5, .alert-danger h6,
    .alert-danger p, .alert-danger span, .alert-danger div, .alert-danger strong, .alert-danger em,
    .alert-danger label, .alert-danger small,
    .alert.alert-danger h1, .alert.alert-danger h2, .alert.alert-danger h3, .alert.alert-danger h4, .alert.alert-danger h5, .alert.alert-danger h6,
    .alert.alert-danger p, .alert.alert-danger span, .alert.alert-danger div, .alert.alert-danger strong, .alert.alert-danger em,
    .alert.alert-danger label, .alert.alert-danger small,
    .alert-error h1, .alert-error h2, .alert-error h3, .alert-error h4, .alert-error h5, .alert-error h6,
    .alert-error p, .alert-error span, .alert-error div, .alert-error strong, .alert-error em,
    .alert-error label, .alert-error small,
    .alert.alert-error h1, .alert.alert-error h2, .alert.alert-error h3, .alert.alert-error h4, .alert.alert-error h5, .alert.alert-error h6,
    .alert.alert-error p, .alert.alert-error span, .alert.alert-error div, .alert.alert-error strong, .alert.alert-error em,
    .alert.alert-error label, .alert.alert-error small {
        color: #000000 !important;
    }
    
    /* Links in alerts */
    .alert-success a,
    .alert.alert-success a,
    .alert-warning a,
    .alert.alert-warning a,
    .alert-danger a,
    .alert.alert-danger a,
    .alert-error a,
    .alert.alert-error a {
        color: #0052cc !important;
        text-decoration: underline !important;
    }
    
    /* Ensure all table rows and cells are white */
    .retro-table-wrapper table tbody tr,
    .retro-table-wrapper table.table tbody tr {
        background: #ffffff !important;
    }
    
    /* Table headers should have high contrast */
    .retro-table-wrapper table thead th,
    .retro-table-wrapper table.table thead th {
        background: #000080 !important;
        color: #ffffff !important;
        opacity: 1 !important;
    }
    
    /* Table header links */
    .retro-table-wrapper table thead th a,
    .retro-table-wrapper table.table thead th a {
        color: #ffffff !important;
        text-decoration: underline !important;
        opacity: 1 !important;
    }
}