/* ==========================================================================
 * phoenix-table.css
 * ==========================================================================
 * Overrides para que DataTables 2.x se vea como Phoenix nativo.
 * Se importa despues de los CSS de DataTables.
 * ========================================================================== */

/* Buscador con resaltado cuando hay texto */
.phoenix-search-active .search-input {
    border-color: var(--phoenix-primary, #2A7BE4);
    box-shadow: 0 0 0 0.15rem rgba(42, 123, 228, 0.15);
}
.phoenix-search-active .search-box-icon {
    color: var(--phoenix-primary, #2A7BE4);
}
[data-phoenix-table-search-clear]:hover {
    color: var(--phoenix-danger, #e63757) !important;
}

/* Wrapper general */
.phoenix-table-wrapper { position: relative; }

/* Botones de filtro: feedback visual cuando estan activos */
.phoenix-table .btn-phoenix-primary[data-phoenix-table-filter-button] {
    /* Cuando un filtro esta activo el boton pasa a btn-phoenix-primary */
    /* Phoenix lo pinta automaticamente con su variable de color primario */
}

/* Boton resetear filtros: warning suave estilo Phoenix */
.phoenix-table .btn-phoenix-warning {
    transition: all 0.2s ease;
}

/* Boton refrescar: hover con tinte primario */
[data-phoenix-table-refresh]:hover {
    color: var(--phoenix-primary, #2A7BE4) !important;
}

/* Animacion suave de la rotacion del icono refresh */
.fa-spin { animation: phoenix-spin 0.5s linear infinite; }
@keyframes phoenix-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Quitar el doble search/length que DataTables anade por defecto;
   nosotros usamos toolbar custom encima */
.phoenix-table .dataTables_filter,
.phoenix-table .dataTables_length { display: none; }

/* Tabla con look Phoenix */
table.phoenix-dt {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

table.phoenix-dt thead th {
    border-bottom: 1px solid var(--phoenix-border-color, #e3e6ed);
    color: var(--phoenix-body-tertiary-color);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.75rem 0.5rem;
}

/* Iconos de sort de DataTables */
table.phoenix-dt thead th.dt-orderable-asc,
table.phoenix-dt thead th.dt-orderable-desc {
    cursor: pointer;
}
table.phoenix-dt thead th.dt-ordering-asc::after,
table.phoenix-dt thead th.dt-ordering-desc::after {
    color: var(--phoenix-primary, #2A7BE4);
}

/* Hover suave en filas */
table.phoenix-dt tbody tr {
    transition: background-color 0.15s ease;
}
table.phoenix-dt tbody tr:hover {
    background-color: var(--phoenix-body-secondary-bg, #f5f7fa);
}

/* Celdas */
table.phoenix-dt tbody td {
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--phoenix-border-color-translucent, #eef0f5);
    vertical-align: middle;
}

/* Paginacion estilo Phoenix */
.dataTables_paginate {
    font-size: 0.85rem;
}
.dataTables_paginate .pagination .page-link {
    border-radius: 4px;
    margin: 0 2px;
}
.dataTables_paginate .pagination .page-item.active .page-link {
    background-color: var(--phoenix-primary, #2A7BE4);
    border-color: var(--phoenix-primary, #2A7BE4);
}

/* Info de paginacion */
.dataTables_info {
    color: var(--phoenix-body-tertiary-color);
    font-size: 0.8rem;
}

/* Length menu */
.dataTables_length select.form-select {
    width: auto;
    display: inline-block;
}

/* Loading spinner sutil */
.dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: var(--phoenix-body-bg, #fff) !important;
    padding: 1rem 2rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    color: var(--phoenix-primary) !important;
    font-weight: 600 !important;
    border: none !important;
}

/* Responsive details */
table.phoenix-dt.dt-responsive > tbody > tr.parent > td.dtr-control::before {
    background-color: var(--phoenix-primary, #2A7BE4);
}