/* ===== DATATABLE DE INVENTARIO =====
   Tema propio sobre Tabulator, usando las variables de styles.css para que
   funcione igual en modo oscuro y claro. */

/* ---------- Barra de acciones de Artículos ---------- */
.articles-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--card-bg);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-light);
    transition: padding .25s ease, margin .25s ease;
}

.articles-toolbar-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: opacity .2s ease, max-width .25s ease;
}

.articles-toolbar-title i {
    color: var(--primary-color);
}

.articles-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.articles-toolbar-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 0.95rem;
    border-radius: 10px;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Estado compacto: se activa al abrir una sección, para devolverle el espacio
   vertical a la tabla. Se achica todo pero se conservan los textos: ocultarlos
   dejaba una barra ancha y vacía. */
.articles-toolbar.is-compact {
    padding: 0.35rem 0.9rem;
    margin-bottom: 0.6rem;
    border-radius: 11px;
}

.articles-toolbar.is-compact .articles-toolbar-title {
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.articles-toolbar.is-compact .articles-toolbar-actions .btn {
    height: 31px;
    padding: 0 0.75rem;
    font-size: 0.82rem;
    border-radius: 8px;
}

/* ---------- Toolbar ---------- */
.inv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.inv-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 220px;
}

.inv-search .form-control {
    padding-left: 2.4rem;
    padding-right: 2.2rem;
    height: 40px;
    border-radius: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.inv-search .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
    background: var(--glass-bg);
    color: var(--text-primary);
}

.inv-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 0.95rem;
}

.inv-search-clear {
    display: none;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}

.inv-search-clear:hover {
    background: var(--table-row-hover);
    color: var(--text-primary);
}

.inv-filter {
    width: auto;
    min-width: 160px;
    height: 40px;
    border-radius: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.inv-filter:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}

.inv-toolbar-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.inv-toolbar-actions .btn {
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ---------- Selector de columnas ---------- */
.inv-columns-menu {
    padding: 0.5rem;
    min-width: 220px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--card-bg);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-heavy);
}

.inv-column-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.88rem;
    user-select: none;
}

.inv-column-item:hover {
    background: var(--table-row-hover);
}

.inv-column-item input {
    accent-color: var(--primary-color);
    cursor: pointer;
}

.inv-columns-reset {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.45rem;
    border: 0;
    border-top: 1px solid var(--border-color);
    background: transparent;
    color: var(--primary-light);
    font-size: 0.82rem;
    cursor: pointer;
    border-radius: 0 0 8px 8px;
}

.inv-columns-reset:hover {
    background: var(--table-row-hover);
}

/* ---------- Barra de estado ---------- */
.inv-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ---------- Tabulator ---------- */
#inventory-table {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--table-bg);
}

#inventory-table.tabulator {
    background: transparent;
    border: 0;
    font-size: 0.88rem;
}

#inventory-table .tabulator-header {
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--table-header-text);
    font-weight: 600;
}

#inventory-table .tabulator-col {
    background: transparent;
    border-right: 1px solid var(--border-color);
}

#inventory-table .tabulator-col-title {
    color: var(--table-header-text);
    font-weight: 600;
    letter-spacing: 0.01em;
}

#inventory-table .tabulator-row {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    color: var(--table-text);
    min-height: 42px;
}

#inventory-table .tabulator-row.tabulator-row-even {
    background: var(--table-row-alternate);
}

#inventory-table .tabulator-row:hover {
    background: var(--table-row-hover);
}

/* Tabulator maqueta la fila en flujo inline: la celda tiene que seguir siendo
   inline-flex. Con display:flex cada celda pasa a bloque y se apilan en vertical. */
#inventory-table .tabulator-cell {
    border-right: 1px solid transparent;
    padding: 0.5rem 0.7rem;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Celda editable: se insinúa al pasar el mouse, sin ruido visual permanente */
#inventory-table .tabulator-cell.tabulator-editable:hover {
    background: rgba(var(--primary-rgb), 0.10);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.35);
    border-radius: 6px;
    cursor: text;
}

#inventory-table .tabulator-cell.tabulator-editing {
    box-shadow: inset 0 0 0 2px var(--primary-color);
    border-radius: 6px;
    padding: 0;
}

#inventory-table .tabulator-cell.tabulator-editing input,
#inventory-table .tabulator-cell.tabulator-editing select {
    background: var(--dark-bg);
    color: var(--text-primary);
    border: 0;
    padding: 0.5rem 0.7rem;
    height: 100%;
    width: 100%;
}

/* Columnas congeladas (Código a la izquierda, Acciones a la derecha).
   El tema es translúcido, así que sin un fondo opaco las columnas que scrollean
   por debajo se ven a través. Se compone: color de página opaco de base +
   el tinte de fila encima como background-image, para conservar el zebrado. */
#inventory-table .tabulator-cell.tabulator-frozen {
    background-color: var(--dark-bg);
}

#inventory-table .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen {
    background-image: linear-gradient(var(--table-row-alternate), var(--table-row-alternate));
}

#inventory-table .tabulator-row:hover .tabulator-cell.tabulator-frozen {
    background-image: linear-gradient(var(--table-row-hover), var(--table-row-hover));
}

#inventory-table .tabulator-col.tabulator-frozen {
    background-color: var(--dark-bg);
    background-image: linear-gradient(var(--table-header-bg), var(--table-header-bg));
}

/* Sombra que separa la columna congelada del contenido que pasa por debajo */
#inventory-table .tabulator-frozen-left {
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.14);
}

#inventory-table .tabulator-frozen-right {
    box-shadow: -3px 0 8px rgba(0, 0, 0, 0.14);
}

/* Columnas de solo lectura (costos y valores que calcula el sistema de fórmulas) */
#inventory-table .inv-readonly-cell {
    color: var(--text-secondary);
}

#inventory-table .inv-calculated {
    font-variant-numeric: tabular-nums;
}

/* La marca de "valor calculado" va solo en el encabezado, no en cada celda
   (Tabulator aplica cssClass tanto a la columna como a las celdas) */
#inventory-table .tabulator-col.inv-calculated .tabulator-col-title::after {
    content: ' ƒ';
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Estados de guardado de la edición en celda */
@keyframes inv-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

#inventory-table .inv-cell-saving {
    animation: inv-pulse 0.9s ease-in-out infinite;
}

#inventory-table .inv-cell-saved {
    box-shadow: inset 0 0 0 2px var(--success-color);
    border-radius: 6px;
    transition: box-shadow .4s ease;
}

/* Celda calculada que acaba de recalcularse por una fórmula */
#inventory-table .inv-cell-recalculated {
    box-shadow: inset 0 0 0 2px var(--info-color);
    border-radius: 6px;
    transition: box-shadow .5s ease;
}

#inventory-table .inv-cell-error {
    box-shadow: inset 0 0 0 2px var(--danger-color);
    border-radius: 6px;
}

/* Paginación y placeholder */
#inventory-table .tabulator-footer {
    background: var(--table-header-bg);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

#inventory-table .tabulator-placeholder {
    color: var(--text-secondary);
}

/* ---------- Contenido de celdas ---------- */
.inv-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.inv-desc {
    color: var(--text-primary);
}

.inv-empty {
    color: var(--text-secondary);
    opacity: 0.6;
    font-style: italic;
}

.inv-chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-light);
    font-size: 0.78rem;
    white-space: nowrap;
}

.inv-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}

.inv-badge-warn {
    background: rgba(var(--warning-rgb), 0.18);
    color: var(--warning-color);
}

.inv-stock-high {
    background: rgba(var(--success-rgb), 0.16);
    color: var(--success-color);
}

.inv-stock-low {
    background: rgba(var(--warning-rgb), 0.16);
    color: var(--warning-color);
}

.inv-stock-empty {
    background: rgba(var(--danger-rgb), 0.16);
    color: var(--danger-color);
}

.inv-action {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    width: 30px;
    height: 28px;
    margin: 0 1px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s ease;
}

.inv-action:hover {
    border-color: var(--primary-color);
    color: var(--primary-light);
    background: rgba(var(--primary-rgb), 0.12);
}

/* ---------- Acción y confirmación de borrado ---------- */
.inv-action-danger:hover {
    border-color: var(--danger-color);
    color: var(--danger-color);
    background: rgba(var(--danger-rgb), 0.12);
}

.inv-delete-target {
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background: rgba(var(--danger-rgb), 0.08);
    border: 1px solid rgba(var(--danger-rgb), 0.25);
}

.inv-delete-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.inv-delete-desc {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.15rem 0 0.3rem;
}

.inv-delete-meta {
    font-size: 0.83rem;
    color: var(--text-secondary);
}

/* ---------- Popup de fórmulas obligatorias ---------- */
.inv-varchip {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.10);
    border: 1px solid var(--border-color);
    font-size: 0.82rem;
}

.inv-varchip span {
    color: var(--text-secondary);
}

.inv-varchip strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .inv-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }

    .inv-filter {
        flex: 1 1 140px;
        min-width: 0;
    }
}

@media (max-width: 576px) {
    .inv-search {
        flex: 1 1 100%;
    }

    #inventory-table.tabulator {
        font-size: 0.82rem;
    }
}