/**
 * WDW Lottery Entry List - Enhanced Styles
 * Liquid glass design matching theme system
 */

/* Use existing theme variables - inherits from main theme */

/* Container Styles - Liquid Glass Theme */
.wdw-entry-list-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: inherit;
    color: var(--theme-text);
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
    border: 1px solid rgba(106, 31, 255, 0.08);
    border-radius: 0.75rem;
    backdrop-filter: blur(6px);
}

/* Error State */
.wdw-entry-list-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-radius: 0.5rem;
    text-align: center;
    margin: 1rem 0;
    backdrop-filter: blur(10px);
}

.wdw-entry-list-error .error-icon {
    font-size: 1.5rem;
}

/* Competition Status - Liquid Glass */
.wdw-competition-status {
    margin-bottom: 2rem;
}

.status-card {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(106, 31, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-card.finished {
    border-left: 4px solid #22c55e;
}

.status-card .status-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.status-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text);
}

.status-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-top: 0.75rem;
    backdrop-filter: blur(5px);
}

.status-message.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-message.failed {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.winners-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.winner-badge {
    display: inline-block;
    background: linear-gradient(135deg, #6A1FFF 0%, #8B5CF6 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Instant Winners Section Removed */

/* Entry Statistics - Liquid Glass */
.wdw-entry-statistics {
    margin-bottom: 2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(106, 31, 255, 0.1);
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.stat-card:hover {
    border-color: #6A1FFF;
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(106, 31, 255, 0.15);
}

.stat-icon {
    font-size: 2rem;
    opacity: 0.8;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--theme-text);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
    margin-top: 0.25rem;
}

/* Table Wrapper - Liquid Glass */
.wdw-entry-table-wrapper {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.02) 0%, rgba(139, 92, 246, 0.02) 100%);
    border: 1px solid rgba(106, 31, 255, 0.08);
    border-radius: 0.75rem;
    backdrop-filter: blur(6px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(106, 31, 255, 0.1);
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #6A1FFF 0%, #8B5CF6 100%);
    color: white !important;
}

.table-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: white !important;
}

.table-title * {
    color: white !important;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
}

.refresh-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(5px);
}

.refresh-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white !important;
}

.refresh-btn * {
    color: white !important;
}

/* DataTables Container */
.wdw-entry-table-container {
    background: var(--theme-bg);
    color: var(--theme-text);
}

.wdw-entry-table {
    width: 100% !important;
    background: var(--theme-bg);
    color: var(--theme-text);
    border-collapse: collapse;
}

.wdw-entry-table thead th {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    color: var(--theme-text) !important;
    border-bottom: 2px solid rgba(106, 31, 255, 0.2) !important;
    padding: 0.75rem !important;
    font-weight: 600;
    text-align: left;
    position: relative;
    backdrop-filter: blur(5px);
    font-size: 0.875rem;
}

.wdw-entry-table thead th .column-icon {
    margin-right: 0.5rem;
    opacity: 0.7;
}

.wdw-entry-table tbody td {
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid var(--theme-border) !important;
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
    vertical-align: middle;
    font-size: 0.875rem;
}

.wdw-entry-table tbody tr:hover td {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%) !important;
}

/* Compact Date Column */
.entry-date-compact {
    font-size: 0.8rem;
    color: var(--theme-text);
    font-weight: 500;
    white-space: nowrap;
}

/* Simplified User Column */
.user-name-simple {
    font-weight: 500;
    color: var(--theme-text);
    font-size: 0.875rem;
}

/* Compact Ticket Column */
.ticket-badge-compact {
    display: inline-block;
    background: linear-gradient(135deg, #6A1FFF 0%, #8B5CF6 100%);
    color: white !important;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8rem;
    backdrop-filter: blur(5px);
}

.ticket-badge-compact * {
    color: white !important;
}

/* Answer Column Removed */

/* No Entries State */
.no-entries-row td {
    text-align: center !important;
    padding: 3rem 1rem !important;
}

.no-entries-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--theme-text-secondary);
}

.no-entries-icon {
    font-size: 3rem;
    opacity: 0.5;
}

/* DataTables UI Overrides - Liquid Glass Theme */
.dataTables_wrapper {
    font-family: inherit !important;
    color: var(--theme-text) !important;
}

.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%) !important;
    padding: 1rem !important;
    margin: 0 !important;
    border-top: 1px solid rgba(106, 31, 255, 0.08) !important;
    color: var(--theme-text) !important;
    backdrop-filter: blur(5px) !important;
}

.dataTables_length label,
.dataTables_filter label {
    color: var(--theme-text) !important;
    font-weight: 500;
}

.dataTables_length select,
.dataTables_filter input {
    background: var(--theme-input-bg) !important;
    border: 1px solid var(--theme-input-border) !important;
    color: var(--theme-text) !important;
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
    margin: 0 0.5rem !important;
    backdrop-filter: blur(5px) !important;
}

.dataTables_paginate .paginate_button {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
    border: 1px solid rgba(106, 31, 255, 0.1) !important;
    color: var(--theme-text) !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 0.25rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(5px) !important;
}

.dataTables_paginate .paginate_button:hover {
    background: linear-gradient(135deg, #6A1FFF 0%, #8B5CF6 100%) !important;
    border-color: #6A1FFF !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #6A1FFF 0%, #8B5CF6 100%) !important;
    border-color: #6A1FFF !important;
    color: white !important;
}

/* Rules & FAQ body copy
 *
 * The site sets Orbitron as its base face and drops only <p> to the neutral
 * stack, because Orbitron's squared letterforms are hard to read at paragraph
 * length. The rules bullets are bare text in <li> and so kept the display face,
 * while the notice paragraph two blocks below them picked up the body face -
 * the section disagreed with itself and with the rest of the page.
 *
 * Headings keep the inherited display face; only running copy is remapped, so
 * the stack below must stay in step with the theme's fontFamily.body.
 *
 * Written out literally rather than via a custom property on the two block
 * containers: there is only one consumer, and scoping the property to those
 * containers would make every selector here depend on staying nested inside
 * them. An unset custom property is invalid at computed-value time, so the
 * failure mode would be a silent fall back to the display face - the exact bug
 * this rule exists to fix.
 */
.rules-list li,
.rules-notice p,
.faq-subtitle,
.faq-answer,
.contact-section p {
    font-family: 'Helvetica Neue', Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
}

/* Rules Styles - Liquid Glass Theme */
.wdw-competition-rules {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.02) 0%, rgba(139, 92, 246, 0.02) 100%);
    border: 1px solid rgba(106, 31, 255, 0.08);
    border-radius: 0.75rem;
    color: var(--theme-text);
    backdrop-filter: blur(6px);
}

.rules-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(106, 31, 255, 0.1);
}

.rules-header .header-icon {
    font-size: 2rem;
    color: #6A1FFF;
}

.rules-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-text);
}

.rules-section {
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%);
    border: 1px solid rgba(106, 31, 255, 0.1);
    border-radius: 0.5rem;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.section-header .section-icon {
    font-size: 1.25rem;
    color: #6A1FFF;
}

.section-header h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text);
}

.rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rules-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--theme-text-secondary);
    line-height: 1.6;
}

.rules-list .bullet {
    color: #6A1FFF;
    font-weight: bold;
    margin-top: 0.125rem;
}

.rules-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    backdrop-filter: blur(5px);
}

.rules-notice .notice-icon {
    font-size: 1.25rem;
    color: #3B82F6;
}

/* FAQ Styles - Liquid Glass Theme */
.wdw-competition-faq {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.02) 0%, rgba(139, 92, 246, 0.02) 100%);
    border: 1px solid rgba(106, 31, 255, 0.08);
    border-radius: 0.75rem;
    color: var(--theme-text);
    backdrop-filter: blur(6px);
}

.faq-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(106, 31, 255, 0.1);
}

.faq-header .header-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.faq-header h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--theme-text);
}

.faq-subtitle {
    color: var(--theme-text-secondary);
    margin: 0;
}

.faq-item {
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%);
    border: 1px solid rgba(106, 31, 255, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.faq-item.active {
    border-color: #6A1FFF;
    box-shadow: 0 0 0 1px rgba(106, 31, 255, 0.1);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.faq-question:hover {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
}

.faq-question .question-icon {
    font-size: 1.25rem;
    color: #6A1FFF;
}

.faq-question h4 {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text);
}

.faq-question .toggle-icon {
    color: var(--theme-text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.875rem;
}

.faq-answer {
    display: none;
    padding: 0 1.25rem 1.25rem 3rem;
    color: var(--theme-text-secondary);
    line-height: 1.6;
}

.faq-footer {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%);
    border: 1px solid rgba(106, 31, 255, 0.1);
    border-radius: 0.5rem;
    text-align: center;
    backdrop-filter: blur(8px);
}

.contact-section h4 {
    margin: 0 0 0.5rem 0;
    color: var(--theme-text);
}

.contact-section p {
    margin: 0;
    color: var(--theme-text-secondary);
}

/* Full Entry List Page */
.wdw-full-entry-list {
    padding: 2rem;
    background: var(--theme-bg);
    min-height: 100vh;
}

.page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.entry-list-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--theme-text);
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, #6A1FFF, #fcd34d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.entry-list-product-title {
    font-size: 1.5rem;
    color: var(--theme-text-secondary);
    margin: 0;
    font-weight: 400;
}

/* Purple background elements should ALWAYS have white text */
.table-header,
.table-title,
.refresh-btn,
.ticket-badge-compact {
    color: white !important;
}

.table-header *,
.table-title *,
.refresh-btn *,
.ticket-badge-compact * {
    color: white !important;
}

/* Light mode specific overrides to force white text on purple */
[data-theme="light"] .table-header,
[data-theme="light"] .table-title,
[data-theme="light"] .refresh-btn,
[data-theme="light"] .ticket-badge-compact {
    color: white !important;
}

[data-theme="light"] .table-header *,
[data-theme="light"] .table-title *,
[data-theme="light"] .refresh-btn *,
[data-theme="light"] .ticket-badge-compact * {
    color: white !important;
}

/* Dark mode specific overrides */
[data-theme="dark"] .wdw-entry-list-container,
[data-theme="dark"] .wdw-competition-rules,
[data-theme="dark"] .wdw-competition-faq {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
    border-color: rgba(106, 31, 255, 0.08);
    color: var(--theme-text);
}

[data-theme="dark"] .wdw-entry-table thead th {
    background: linear-gradient(135deg, rgba(106, 31, 255, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] .wdw-entry-table tbody td {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

/* Ensure purple backgrounds always have white text regardless of theme */
[data-theme="dark"] .table-header,
[data-theme="dark"] .table-title,
[data-theme="dark"] .refresh-btn,
[data-theme="dark"] .ticket-badge-compact {
    color: white !important;
}

[data-theme="dark"] .table-header *,
[data-theme="dark"] .table-title *,
[data-theme="dark"] .refresh-btn *,
[data-theme="dark"] .ticket-badge-compact * {
    color: white !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wdw-entry-list-container,
    .wdw-competition-rules,
    .wdw-competition-faq {
        padding: 1rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .table-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .user-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .date-wrapper {
        font-size: 0.875rem;
    }

    .wdw-entry-table thead th,
    .wdw-entry-table tbody td {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.8rem;
    }

    .entry-date-compact {
        font-size: 0.75rem;
    }

    .ticket-badge-compact {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }

    .faq-answer {
        padding-left: 2rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .winners-list {
        flex-direction: column;
    }

    .faq-question {
        padding: 1rem;
    }

    .faq-answer {
        padding-left: 1rem;
    }
}