/* AI-Generated: 2026-01-12 - Estilos estándar para todas las tablas (basado en proveedores) */
/* Sistema unificado de tablas con header oscuro y filtros colapsables */

/* ============================================
   CONTENEDOR ESTÁNDAR DE TABLA
   ============================================ */
.standard-table-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: visible; /* Cambiar a visible para permitir scroll interno del table-responsive */
    margin-bottom: 20px;
    /* Usar más espacio del viewport */
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

/* ============================================
   HEADER INTEGRADO CON FILTROS
   ============================================ */
.table-header-with-filters {
    background: #495057;
    color: white;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 15px 15px 0 0;
}

.table-header-with-filters .btn-light {
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: white;
    transition: all 0.2s ease;
}

.table-header-with-filters .btn-light:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: white;
}

/* ============================================
   PANEL DE FILTROS COLAPSABLE (mismo color que header de tabla #495057)
   ============================================ */
.standard-table-container .collapse {
    border-top: 1px solid rgba(0,0,0,0.1);
    background: #495057;
    padding: 15px 20px;
    color: #fff;
}
.standard-table-container .collapse .form-label {
    color: #dee2e6;
}
.standard-table-container .collapse .form-control,
.standard-table-container .collapse .form-select {
    background-color: #6c757d;
    border-color: #adb5bd;
    color: #fff;
}
.standard-table-container .collapse .form-control::placeholder {
    color: #ced4da;
}
.standard-table-container .collapse .form-control:focus,
.standard-table-container .collapse .form-select:focus {
    background-color: #6c757d;
    border-color: #80bdff;
    color: #fff;
}
.standard-table-container .collapse .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* ============================================
   ESTILOS DE TABLA ESTÁNDAR
   ============================================ */
.standard-table-container .table {
    margin-bottom: 0;
}

/* ============================================
   GESTIÓN DE ALTURA Y SCROLL
   ============================================ */
/* El contenedor de la tabla debe crecer para usar el espacio disponible */
.standard-table-container .responsive-table-view,
.standard-table-container .table-responsive {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Permite que el flex funcione correctamente */
}

/* El table-responsive dentro debe hacer scroll */
.standard-table-container .table-responsive {
    overflow-y: auto;
    overflow-x: auto;
    /* Altura dinámica basada en viewport - mostrar 15-20 filas */
    max-height: calc(100vh - 180px);
    min-height: 700px; /* Mínimo para mostrar ~25 filas */
}

/* Asegurar que el header sticky funcione correctamente */
.standard-table-container .table-responsive table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Forzar estilo estándar en todas las tablas dentro del contenedor */
.standard-table-container .table thead th,
.standard-table-container table thead th,
.standard-table-container .table-responsive table thead th,
.standard-table-container .responsive-table-view table thead th,
.insumos-table-container .table thead th,
.suppliers-table .table thead th,
.transactions-table-container .table thead th,
.events-table-container .table thead th,
.products-table-container .table thead th,
.products-table-container .table-responsive table thead th {
    background: #495057 !important;
    color: white !important;
    border: none !important;
    padding: 15px 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    /* Sombra para que el header se destaque al hacer scroll */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Sobrescribir cualquier estilo inline o de Bootstrap */
.standard-table-container .table thead th[style],
.standard-table-container table thead th[style] {
    background: #495057 !important;
    color: white !important;
}

.standard-table-container .table thead th a {
    color: white !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.standard-table-container .table thead th a:hover {
    opacity: 0.8;
    text-decoration: none;
}

.standard-table-container .table thead th a .text-white-50 {
    opacity: 0.5;
}

.standard-table-container .table tbody tr {
    transition: all 0.2s ease;
}

.standard-table-container .table tbody tr:hover {
    background-color: #f8f9ff;
    transform: scale(1.01);
}

.standard-table-container .table td {
    padding: 12px;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

/* ============================================
   COMPATIBILIDAD CON CLASES EXISTENTES
   ============================================ */
/* Aplicar estilos estándar a tablas que usan clases específicas */
.suppliers-table,
.insumos-table-container,
.transactions-table-container,
.events-table-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Sobrescribir cualquier estilo de header oscuro, negro o claro */
table thead th.table-dark,
.table-dark thead th,
.table thead th.bg-dark,
table thead th[style*="background"][style*="212529"],
table thead th[style*="background"][style*="#212529"],
/* Sobrescribir table-light cuando está dentro de contenedor estándar */
.standard-table-container thead.table-light th,
.standard-table-container .table thead.table-light th,
.standard-table-container .table-responsive thead.table-light th,
.standard-table-container .responsive-table-view thead.table-light th,
.insumos-table-container thead.table-light th,
.suppliers-table thead.table-light th,
.transactions-table-container thead.table-light th,
.products-table-container thead.table-light th,
/* Sobrescribir table-striped que puede tener estilos propios */
.standard-table-container .table-striped thead th {
    background: #495057 !important;
    color: white !important;
    border: none !important;
}

/* ============================================
   REGLAS ULTRA ESPECÍFICAS PARA FORZAR ESTILO
   ============================================ */
/* Forzar estilo en cualquier tabla dentro de standard-table-container */
.standard-table-container table thead tr th,
.standard-table-container .table thead tr th,
.standard-table-container .table-responsive table thead tr th,
.standard-table-container .responsive-table-view .table-responsive table thead tr th {
    background-color: #495057 !important;
    background: #495057 !important;
    color: #ffffff !important;
    color: white !important;
}

/* ============================================
   ESTILOS PARA TABLAS EN COTIZADOR (dentro de cards)
   ============================================ */
/* Aplicar estilos estándar a tablas dentro de cards del cotizador */
/* Sobrescribir responsive-tables.css que aplica #212529 sin color */
.card .table thead th,
.card .table-responsive table thead th,
.card .table-responsive .table thead th,
.card-body .table thead th,
.card-body .table-responsive table thead th,
.card .table-responsive table thead th[style],
.card-body .table-responsive table thead th[style] {
    background: #495057 !important;
    background-color: #495057 !important;
    color: white !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Forzar estilo incluso si hay otros estilos inline o de responsive-tables */
.card .table thead th[style],
.card .table-responsive table thead th[style],
.card-body .table thead th[style],
.card-body .table-responsive table thead th[style] {
    background: #495057 !important;
    background-color: #495057 !important;
    color: white !important;
    color: #ffffff !important;
}

/* ============================================
   RESPONSIVE: No afectar mobile
   ============================================ */
@media (max-width: 768px) {
    /* En mobile, los estilos responsive-tables.css ya manejan la visualización */
    .standard-table-container .table thead th {
        position: relative; /* No sticky en mobile */
    }
    
    .table-header-with-filters .d-flex {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    /* Mantener el formulario de búsqueda en una sola fila (input + ícono al lado) */
    .table-header-with-filters #searchFormTransacciones,
    .table-header-with-filters form.search-form-inline {
        flex-direction: row !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100%;
        max-width: 100%;
    }
}