/* ════════════════════════════════════════════════════════════════
   COMMERCIAL-INVENTORY — Estilos de las páginas de inventario
   ────────────────────────────────────────────────────────────────
   Estilos de página (no componente reutilizable) para las pantallas
   de Stock y Entrada de mercadería del módulo comercial. Reemplazan
   los `style=` inline que tenían los templates (regla del proyecto:
   nunca CSS inline).

   Se carga vía {% block enlaces_top %} en:
     - commercial/inventory/stock.html
     - commercial/inventory/entrada.html

   CLASES
     .stock-row            fila clicable del listado de stock (abre el
                           panel/drawer de detalle) → cursor pointer.
     .entrada-table        tabla de líneas de la entrada multi-producto.
       th anchos fijos por columna (cantidad, costo, caducidad, etc.)
       para que la grilla no "baile" al agregar filas.
   ════════════════════════════════════════════════════════════════ */

/* Listado de Stock: la fila completa abre el detalle. */
.stock-row {
    cursor: pointer;
}

/* Entrada de mercadería: anchos fijos de columna en la tabla de líneas. */
.entrada-table th.col-qty      { width: 110px; }
.entrada-table th.col-cost     { width: 140px; }
.entrada-table th.col-expiry   { width: 160px; }
.entrada-table th.col-subtotal { width: 120px; }
.entrada-table th.col-remove   { width: 44px; }

/* ── Mobile (<768px): la tabla de 6 columnas no cabe en pantalla angosta. ──
   En vez de scroll horizontal (que esconde el costo unitario y el resto de
   columnas), cada fila se apila como una "card": Producto a todo el ancho,
   Cantidad y Costo unit. lado a lado, Caducidad y Subtotal debajo, y el botón
   quitar anclado arriba a la derecha. El <thead> se oculta y cada celda muestra
   su etiqueta vía data-label. NO se usa el acordeón de table_stack.css: aquí
   TODOS los campos son editables y deben verse a la vez (no tiene sentido
   esconder el costo tras un expander). */
@media (max-width: 767px) {
  .entrada-table thead { display: none; }
  .entrada-table tbody,
  .entrada-table tr.entrada-line,
  .entrada-table td { display: block; }

  .entrada-table tr.entrada-line {
    position: relative;
    display: grid;
    /* Cantidad más angosta (2fr ≈ 40%) que Costo unit. (3fr ≈ 60%). */
    grid-template-columns: 2fr 3fr;
    gap: .55rem .75rem;
    padding: .9rem .85rem;
    margin-bottom: .75rem;
    border: 1px solid #e4ebf5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(30, 45, 64, .05);
  }

  .entrada-table td {
    padding: 0;
    border: none;
  }
  .entrada-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .2rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8fa0bb;
  }

  /* Producto, Caducidad y Subtotal ocupan la fila completa. */
  .entrada-table td.col-prod,
  .entrada-table td.col-expiry,
  .entrada-table td.col-subtotal { grid-column: 1 / -1; }

  /* Cantidad y Costo unit. comparten fila (2 columnas iguales). */
  .entrada-table td.col-qty  { grid-column: 1; }
  .entrada-table td.col-cost { grid-column: 2; }

  /* Inputs/selects a todo el ancho de su celda; números alineados a la izq. */
  .entrada-table td .form-control,
  .entrada-table td .form-select { width: 100%; }
  .entrada-table td .entrada-qty,
  .entrada-table td .entrada-cost { text-align: left; }

  /* Caducidad: ocultarla mientras el input está deshabilitado (no perecedero). */
  .entrada-table td.col-expiry:has(.entrada-exp:disabled) { display: none; }

  /* Subtotal: etiqueta a la izquierda, valor a la derecha, separador arriba. */
  .entrada-table td.col-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .15rem;
    padding-top: .55rem;
    border-top: 1px dashed #eef1f8;
  }
  .entrada-table td.col-subtotal::before { margin-bottom: 0; }

  /* Botón quitar: anclado a la esquina superior derecha de la card. */
  .entrada-table td.col-remove {
    position: absolute;
    top: .35rem;
    right: .5rem;
    width: auto;
  }
  .entrada-table td.col-remove::before { display: none; }
  .entrada-table td.col-remove .entrada-del { font-size: 1.05rem; }
}