/* Estilos específicos para el frontend de proyectos */

/* Filtro de estados de proyectos */
.zpm-project-status-filter-container {
    display: inline-block !important;
    margin-left: 15px !important;
    position: relative !important;
    z-index: 100 !important;
}

#zpm-projects__view-options {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-bottom: 15px !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 99 !important;
}

.zpm-project-filter-select {
    background: #0073aa !important;
    color: white !important;
    border: none !important;
    padding: 10px 25px 10px 12px !important;
    border-radius: 4px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 115, 170, 0.2) !important;
    transition: all 0.3s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="white" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 8px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    height: 36px !important;
    line-height: 16px !important;
    position: relative !important;
    z-index: 101 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
}

.zpm-project-filter-select:hover {
    background: #005a87 !important;
    box-shadow: 0 4px 8px rgba(0, 115, 170, 0.3) !important;
    transform: translateY(-1px) !important;
}

.zpm-project-filter-select:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.3) !important;
}

.zpm-project-filter-select option {
    background: white !important;
    color: #000000 !important;
    padding: 8px 12px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

/* Mejorar el contraste del select */
.zpm-project-filter-select {
    color: white !important;
    font-weight: 700 !important;
}

/* Asegurar que el dropdown sea visible en diferentes navegadores */
.zpm-project-filter-select {
    -webkit-text-fill-color: white !important;
    text-fill-color: white !important;
}

/* Estilos específicos para las opciones del dropdown */
.zpm-project-filter-select option {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

.zpm-project-filter-select option:hover,
.zpm-project-filter-select option:focus {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
}

.zpm-project-filter-select option:checked {
    background-color: #0073aa !important;
    color: #ffffff !important;
}

/* Debug: Hacer el filtro más visible temporalmente */
.zpm-project-filter-select {
    border: 2px solid #ff0000 !important; /* Borde rojo temporal para debugging */
}

/* Pills de estado con alta especificidad */
.zpm_project_grid_cell .zpm-status-pill--active,
.zpm_project_grid_row .zpm-status-pill--active,
.zpm-status-pill.zpm-status-pill--active,
body .zpm-status-pill--active,
#zpm-project-list .zpm-status-pill--active {
    background: #dc3545 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3) !important;
    border: 1px solid rgba(220, 53, 69, 0.5) !important;
    font-weight: 700 !important;
    padding: 3px 6px 4px !important;
    border-radius: 25px !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: none !important;
}

.zpm_project_grid_cell .zpm-status-pill--completed,
.zpm_project_grid_row .zpm-status-pill--completed,
.zpm-status-pill.zpm-status-pill--completed,
body .zpm-status-pill--completed,
#zpm-project-list .zpm-status-pill--completed {
    background: #198754 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3) !important;
    border: 1px solid rgba(25, 135, 84, 0.5) !important;
    font-weight: 700 !important;
    padding: 3px 6px 4px !important;
    border-radius: 25px !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: none !important;
}

/* Mejorar la animación de fade para el filtro */
.zpm_project_grid_cell,
.zpm_project_grid_row {
    transition: opacity 0.3s ease !important;
}

.zpm_project_grid_cell[style*="display: none"],
.zpm_project_grid_row[style*="display: none"] {
    opacity: 0 !important;
}

/* Mensaje de no hay proyectos */
.zpm-no-projects-filter-message {
    margin: 20px 0 !important;
    padding: 15px !important;
    background: #f8f9fa !important;
    border-left: 4px solid #6c757d !important;
    border-radius: 4px !important;
    font-style: italic !important;
    color: #6c757d !important;
}

/* REGLAS DE MÁXIMA PRIORIDAD PARA EL DROPDOWN - DEBEN IR AL FINAL */
/* Usar múltiples selectores específicos para garantizar precedencia */
html body #zpm-project-status-filter,
html body select#zpm-project-status-filter,
html body .zpm-project-filter-select,
html body select.zpm-project-filter-select {
    color: white !important;
    background-color: #0073aa !important;
    -webkit-text-fill-color: white !important;
    text-fill-color: white !important;
    font-weight: 700 !important;
}

/* Opciones del dropdown con máxima especificidad */
html body #zpm-project-status-filter option,
html body select#zpm-project-status-filter option,
html body .zpm-project-filter-select option,
html body select.zpm-project-filter-select option {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    text-shadow: none !important;
    border: none !important;
    -webkit-text-fill-color: #000000 !important;
    text-fill-color: #000000 !important;
    -webkit-appearance: menulist-text !important;
}

/* Estados de las opciones */
html body #zpm-project-status-filter option:hover,
html body #zpm-project-status-filter option:focus,
html body select#zpm-project-status-filter option:hover,
html body select#zpm-project-status-filter option:focus {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

html body #zpm-project-status-filter option:checked,
html body #zpm-project-status-filter option:selected,
html body select#zpm-project-status-filter option:checked,
html body select#zpm-project-status-filter option:selected {
    background-color: #0073aa !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}