/*
 * 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: #6b5d4d"] {
    background: #6b5d4d !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: #6b5d4d !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: #6b5d4d !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 - Earth Theme */
table.django-tables2,
.django-tables2-container table,
.table-responsive table {
    width: 100%;
    margin: 0;
    background: #f5f2ed;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

/* Table headers - Earth Theme */
table.django-tables2 thead th,
.django-tables2-container thead th,
.table-responsive table thead th {
    background: #6b5d4d;
    color: #f0ece7;
    border: 1px solid #d4cdc4;
    padding: 12px 16px;
    font-weight: 600;
    text-align: left;
}

/* Sortable column headers - Earth Theme */
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: #3d3529 !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: #5b4734 !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: #3d3529 !important;
}

/* Table body styling - Earth Theme */
table.django-tables2 tbody td,
.django-tables2-container tbody td,
.table-responsive table tbody td {
    background: #f5f2ed;
    border: 1px solid #d4cdc4;
    padding: 10px 16px;
    color: #3d3529;
}

/* Alternating row colors - Earth Theme */
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: #ebe7e1;
}

/* Hover effect - Earth Theme */
table.django-tables2 tbody tr:hover td,
.django-tables2-container tbody tr:hover td,
.table-responsive table tbody tr:hover td {
    background-color: #ddd8d0;
    color: #3d3529;
}

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: #c17f59;
}

/* 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 - Legacy Retro Light Wrapper
   DISABLED: earth-theme.css now handles all dark mode styling.
   This block was forcing black text (#000000) on white backgrounds in dark mode,
   which conflicts with the earth-theme dark mode (light text on dark brown).
   body always has class="earth-theme" so this is effectively dead code.
   Kept commented out for reference in case retro theme is ever re-enabled.
   ============================================================================= */

/*
@media (prefers-color-scheme: dark) {
    ... legacy retro dark mode removed - see git history ...
}
*/