/**
 * Estilos para modo oscuro - Centro Social y Deportivo Juventud Unida
 */

/* Variables para modo oscuro */
[data-theme="dark"] {
    --club-bg-primary: #1a1a1a;
    --club-bg-secondary: #2d2d2d;
    --club-bg-tertiary: #3a3a3a;
    --club-text-primary: #ffffff;
    --club-text-secondary: #e0e0e0;
    --club-text-muted: #b0b0b0;
    --club-border: #404040;
    --club-card-bg: #2d2d2d;
    --club-input-bg: #2d2d2d;
    --club-input-border: #404040;
}

/* Aplicar modo oscuro al body */
[data-theme="dark"] body {
    background-color: var(--club-bg-primary);
    color: var(--club-text-primary);
}

/* Navbar en modo oscuro */
[data-theme="dark"] .navbar {
    background-color: var(--club-bg-secondary) !important;
    border-bottom: 1px solid var(--club-border);
}

[data-theme="dark"] .navbar-brand {
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .navbar .text-white {
    color: var(--club-text-primary) !important;
}

/* Logo en modo oscuro - mantener blanco pero con mejor contraste */
[data-theme="dark"] .navbar-logo {
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Cards en modo oscuro */
[data-theme="dark"] .card {
    background-color: var(--club-card-bg) !important;
    border-color: var(--club-border) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .card-header {
    background-color: var(--club-primary) !important;
    border-color: var(--club-border) !important;
    color: #fff !important;
}

[data-theme="dark"] .card-body {
    background-color: var(--club-card-bg) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .card-footer {
    background-color: var(--club-bg-tertiary) !important;
    border-color: var(--club-border) !important;
    color: var(--club-text-primary) !important;
}

/* Sidebar en modo oscuro */
[data-theme="dark"] .admin-sidebar {
    background-color: var(--club-bg-secondary);
    border-right: 3px solid var(--club-primary);
}

[data-theme="dark"] .admin-sidebar .card {
    background-color: var(--club-bg-secondary);
    border: none;
}

[data-theme="dark"] .admin-sidebar .card-header {
    background-color: var(--club-primary) !important;
}

/* List group items en modo oscuro */
[data-theme="dark"] .list-group-item {
    background-color: var(--club-card-bg) !important;
    border-color: var(--club-border) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--club-bg-tertiary) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .list-group-item.active {
    background-color: var(--club-primary) !important;
    color: #fff !important;
}

[data-theme="dark"] .admin-sidebar .list-group-item {
    background-color: var(--club-bg-secondary) !important;
    border-color: var(--club-border) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .admin-sidebar .list-group-item:hover {
    background-color: var(--club-bg-tertiary) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .admin-sidebar .list-group-item.active {
    background-color: var(--club-primary) !important;
    color: #fff !important;
}

[data-theme="dark"] .admin-sidebar .card-footer {
    background-color: var(--club-bg-tertiary) !important;
    border-color: var(--club-border) !important;
    color: var(--club-text-secondary) !important;
}

/* Tablas en modo oscuro */
[data-theme="dark"] .table {
    color: var(--club-text-primary);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--club-bg-tertiary);
    color: var(--club-text-primary);
}

[data-theme="dark"] .table thead th {
    border-color: var(--club-border);
    color: var(--club-text-primary) !important;
    background-color: var(--club-bg-tertiary) !important;
}

[data-theme="dark"] .table thead {
    background-color: var(--club-bg-tertiary) !important;
    color: var(--club-text-primary) !important;
}

/* Estilos específicos para encabezados de tabla en modo oscuro */
[data-theme="dark"] .table-header-custom,
[data-theme="dark"] .table-header-custom th,
[data-theme="dark"] table thead.table-header-custom th {
    background-color: var(--club-bg-tertiary) !important;
    color: var(--club-text-primary) !important;
    border-color: var(--club-border) !important;
    font-weight: 600 !important;
}

/* Asegurar que el texto sea visible incluso si hay conflictos */
[data-theme="dark"] .table-header-custom th,
[data-theme="dark"] table.table thead.table-header-custom th {
    color: #ffffff !important;
    background-color: #3a3a3a !important;
}

/* Estilos para modo claro también */
.table-header-custom {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

.table-header-custom th {
    background-color: #e9ecef !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

[data-theme="dark"] .table tbody td {
    border-color: var(--club-border);
}

/* Filas de tabla en modo oscuro - base - MÁXIMA PRIORIDAD */
[data-theme="dark"] .table tbody tr {
    background-color: var(--club-card-bg) !important;
    color: var(--club-text-primary) !important;
}

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

/* Forzar fondo oscuro en todas las celdas - sobrescribir cualquier estilo de Bootstrap */
[data-theme="dark"] table.table tbody tr td,
[data-theme="dark"] .table.table-hover tbody tr td,
[data-theme="dark"] .table tbody tr:not(.table-warning) td {
    background-color: var(--club-card-bg) !important;
    color: var(--club-text-primary) !important;
}

/* Sobrescribir específicamente table-light de Bootstrap */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light td,
[data-theme="dark"] tr.table-light,
[data-theme="dark"] tr.table-light td {
    background-color: var(--club-card-bg) !important;
    color: var(--club-text-primary) !important;
}

/* Filas con table-light en modo oscuro (pendientes normales) - sobrescribir Bootstrap completamente */
[data-theme="dark"] .table tbody tr.table-light,
[data-theme="dark"] table.table tbody tr.table-light,
[data-theme="dark"] .table.table-hover tbody tr.table-light {
    background-color: var(--club-card-bg) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .table tbody tr.table-light td,
[data-theme="dark"] table.table tbody tr.table-light td {
    background-color: var(--club-card-bg) !important;
    color: var(--club-text-primary) !important;
}

/* Filas con table-warning en modo oscuro (pendientes del mes actual) - tono amarillo sutil */
[data-theme="dark"] .table tbody tr.table-warning,
[data-theme="dark"] table.table tbody tr.table-warning,
[data-theme="dark"] .table.table-hover tbody tr.table-warning {
    background-color: rgba(255, 193, 7, 0.12) !important;
    color: var(--club-text-primary) !important;
    border-left: 3px solid rgba(255, 193, 7, 0.5) !important;
}

[data-theme="dark"] .table tbody tr.table-warning td,
[data-theme="dark"] table.table tbody tr.table-warning td {
    background-color: rgba(255, 193, 7, 0.12) !important;
    color: var(--club-text-primary) !important;
}

/* Filas hover en modo oscuro */
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--club-bg-tertiary) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover td {
    background-color: var(--club-bg-tertiary) !important;
    color: var(--club-text-primary) !important;
}

/* Sobrescribir clases de Bootstrap que fuerzan colores claros - máxima especificidad */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table .table-light,
[data-theme="dark"] table.table tbody tr.table-light {
    background-color: var(--club-card-bg) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .table-warning,
[data-theme="dark"] .table .table-warning,
[data-theme="dark"] table.table tbody tr.table-warning {
    background-color: rgba(255, 193, 7, 0.12) !important;
    color: var(--club-text-primary) !important;
}

/* Formularios en modo oscuro */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--club-input-bg);
    border-color: var(--club-input-border);
    color: var(--club-text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--club-input-bg);
    border-color: var(--club-primary);
    color: var(--club-text-primary);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--club-text-muted);
}

[data-theme="dark"] .form-label {
    color: var(--club-text-primary);
}

[data-theme="dark"] .text-muted {
    color: var(--club-text-muted) !important;
}

/* Alertas en modo oscuro */
[data-theme="dark"] .alert {
    border-color: var(--club-border);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(26, 93, 161, 0.2);
    border-color: var(--club-primary);
    color: var(--club-text-primary);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
    color: var(--club-text-primary);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    border-color: #28a745;
    color: var(--club-text-primary);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    color: var(--club-text-primary);
}

/* Botones en modo oscuro */
[data-theme="dark"] .btn-secondary {
    background-color: var(--club-bg-tertiary);
    border-color: var(--club-border);
    color: var(--club-text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--club-bg-primary);
    border-color: var(--club-border);
    color: var(--club-text-primary);
}

/* Botón de login - mismo color que el header en ambos modos */
.btn-login-header {
    background-color: var(--club-primary) !important;
    color: #fff !important;
    border-color: var(--club-primary) !important;
    font-weight: 500;
}

.btn-login-header:hover {
    background-color: var(--club-primary-dark) !important;
    border-color: var(--club-primary-dark) !important;
    color: #fff !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--club-border);
    color: var(--club-text-primary);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--club-bg-tertiary);
    border-color: var(--club-border);
    color: var(--club-text-primary);
}

/* Botones outline en modo oscuro - mejor contraste */
[data-theme="dark"] .btn-outline-danger {
    border-color: rgba(220, 53, 69, 0.6) !important;
    color: rgba(220, 53, 69, 0.9) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: rgba(220, 53, 69, 0.8) !important;
    color: rgba(255, 100, 120, 1) !important;
}

[data-theme="dark"] .btn-outline-info {
    border-color: rgba(13, 202, 240, 0.6) !important;
    color: rgba(13, 202, 240, 0.9) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-info:hover {
    background-color: rgba(13, 202, 240, 0.2) !important;
    border-color: rgba(13, 202, 240, 0.8) !important;
    color: rgba(100, 220, 255, 1) !important;
}

[data-theme="dark"] .btn-outline-success {
    border-color: rgba(25, 135, 84, 0.6) !important;
    color: rgba(25, 135, 84, 0.9) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: rgba(25, 135, 84, 0.2) !important;
    border-color: rgba(25, 135, 84, 0.8) !important;
    color: rgba(100, 255, 150, 1) !important;
}

[data-theme="dark"] .btn-outline-primary {
    border-color: rgba(13, 110, 253, 0.6) !important;
    color: rgba(13, 110, 253, 0.9) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: rgba(13, 110, 253, 0.2) !important;
    border-color: rgba(13, 110, 253, 0.8) !important;
    color: rgba(100, 180, 255, 1) !important;
}

/* Botones sólidos en modo oscuro - mejor contraste */
[data-theme="dark"] .btn-primary {
    background-color: rgba(13, 110, 253, 0.8) !important;
    border-color: rgba(13, 110, 253, 0.9) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: rgba(13, 110, 253, 1) !important;
    border-color: rgba(13, 110, 253, 1) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-success {
    background-color: rgba(25, 135, 84, 0.8) !important;
    border-color: rgba(25, 135, 84, 0.9) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-success:hover {
    background-color: rgba(25, 135, 84, 1) !important;
    border-color: rgba(25, 135, 84, 1) !important;
    color: #ffffff !important;
}

/* Badges en modo oscuro */
[data-theme="dark"] .badge {
    color: #fff;
}

/* Landing page en modo oscuro */
[data-theme="dark"] .landing-features {
    background-color: var(--club-bg-primary);
    color: var(--club-text-primary);
}

[data-theme="dark"] .landing-cta {
    background-color: var(--club-bg-secondary);
    color: var(--club-text-primary);
}

/* Contenedor principal */
[data-theme="dark"] .container {
    color: var(--club-text-primary);
}

/* Input groups */
[data-theme="dark"] .input-group-text {
    background-color: var(--club-bg-tertiary);
    border-color: var(--club-border);
    color: var(--club-text-primary);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--club-bg-secondary);
    border-color: var(--club-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--club-text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--club-bg-tertiary);
    color: var(--club-text-primary);
}

/* Modal en modo oscuro */
[data-theme="dark"] .modal-content {
    background-color: var(--club-bg-secondary);
    border-color: var(--club-border);
    color: var(--club-text-primary);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--club-border);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--club-border);
}

/* Footer en modo oscuro */
[data-theme="dark"] .footer {
    background-color: var(--club-bg-secondary) !important;
    border-top: 2px solid var(--club-primary) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .footer-title {
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .footer-subtitle {
    color: var(--club-text-muted) !important;
}

[data-theme="dark"] .footer-text {
    color: var(--club-text-secondary) !important;
}

[data-theme="dark"] .footer .text-muted {
    color: var(--club-text-muted) !important;
}

/* Toggle button styles - Solo icono */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

[data-theme="dark"] .theme-toggle-btn {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Elementos adicionales que pueden quedar en blanco */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: var(--club-bg-secondary) !important;
    color: var(--club-text-primary) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--club-text-primary) !important;
}

/* Pagination en modo oscuro */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--club-bg-secondary);
    border-color: var(--club-border);
    color: var(--club-text-primary);
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--club-bg-tertiary);
    border-color: var(--club-border);
    color: var(--club-text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--club-primary);
    border-color: var(--club-primary);
    color: #fff;
}

/* Breadcrumb en modo oscuro */
[data-theme="dark"] .breadcrumb {
    background-color: var(--club-bg-secondary);
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--club-text-primary);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--club-text-muted);
}

/* Progress bars en modo oscuro */
[data-theme="dark"] .progress {
    background-color: var(--club-bg-tertiary);
}

/* Spinner/loading en modo oscuro */
[data-theme="dark"] .spinner-border {
    border-color: var(--club-primary);
    border-right-color: transparent;
}

/* Accordion en modo oscuro */
[data-theme="dark"] .accordion-item {
    background-color: var(--club-card-bg);
    border-color: var(--club-border);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--club-bg-secondary);
    color: var(--club-text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--club-primary);
    color: #fff;
}

[data-theme="dark"] .accordion-body {
    background-color: var(--club-card-bg);
    color: var(--club-text-primary);
}