/* Padding horizontal unificado para filtros y tabla */
:root{ --section-pad:14px; }

/*──────────────────────────────────────────────────────────
  CONTENEDOR PRINCIPAL
──────────────────────────────────────────────────────────*/
.inventory-table-container{
    margin:0 auto;
    max-width:1300px;
    padding:32px var(--section-pad) 0; /* ← usa el mismo padding que filtros/tabla */
    box-sizing:border-box;
}

/*──────────────────────────────────────────────────────────
  HEADER (título a la izquierda, botón a la derecha)
──────────────────────────────────────────────────────────*/
.inventory-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.2rem;
}
.inventory-title{
    margin:0;
    font-weight:800;
    font-size:1.6rem;
    color:#e7eefc;
    letter-spacing:.01em;
}
.inventory-actions{
    display:flex;
    align-items:center;
    gap:.75rem;
}
.upload-error-inline{ margin-right:.25rem; }

/* Botón “Agregar producto” */
.add-product-button{
    background:linear-gradient(90deg,#406aff 0%,#6be8fd 100%);
    color:#fff;font-size:1rem;font-weight:bold;
    padding:12px 30px;border:none;border-radius:1.7rem;
    box-shadow:0 3px 18px #23294615;margin-bottom:0;
    cursor:pointer;transition:background .18s,transform .14s}
.add-product-button:hover{
    background:linear-gradient(90deg,#2954c6 0%,#4fd2e7 100%);
    transform:translateY(-2px) scale(1.04)}

/*──────────────────────────────────────────────────────────
  FILTROS (encajonados como card)
──────────────────────────────────────────────────────────*/
.inventory-filters-card{
    background:#f6f8fb;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:var(--section-pad);
    box-shadow:0 3px 16px #23294612;
    margin:4px 0 16px;
}

/* Grid/toolbar */
.inventory-toolbar{
    display:grid;
    gap:12px;
    align-items:end;
    margin-bottom:0;
    width:100%;
    box-sizing:border-box;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    overflow:visible;
}
.inventory-toolbar .toolbar-group{ min-width:0; }
.inventory-toolbar .toolbar-inline{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
/* La barra de búsqueda ocupa toda la fila y respeta el padding del card */
.inventory-toolbar .toolbar-search{
    grid-column:1 / -1;
    min-width:0;
    padding-right:var(--section-pad);
    box-sizing:border-box;
}

/* Etiquetas legibles sobre fondo claro */
.inventory-filters-card .toolbar-group label,
.inventory-filters-card label{
    color:#4b68a7;
    font-weight:700;
}

/* Inputs base */
.inventory-toolbar .search-input,
.inventory-toolbar select{
    width:100%;
    padding:10px 12px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    -webkit-appearance:none;
    appearance:none;
    display:block;
    background:#fff;
    color:#232946;
}
.inventory-filters-card .search-input::placeholder{ color:#8a94a6; }

/* Reset y pager */
.reset-filters-btn{ padding:10px 14px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.pager-btn{
    margin:0 2px; padding:8px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
}
.pager-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.error-text{ color:#e94560; font-weight:700; margin-left:.5rem; }
.th-sortable:hover{ background:#f7f7fb; }

/*──────────────────────────────────────────────────────────
  TABLA (Inventario + Preview)
──────────────────────────────────────────────────────────*/
/* Contenedor de la tabla: ahora actúa como "card" (igual que history) */
.inventory-preview-table-container{
    width:100%;
    max-height:calc(75vh - 48px);
    overflow:auto; /* X + Y */
    margin-bottom:48px;
    padding:0 var(--section-pad) 0;
    box-sizing:border-box;

    /* apariencia de card (mismo estilo que history-table-container) */
    background:#f6f8fb;
    border:1px solid #e5e7eb;
    border-radius:16px;
    box-shadow:0 3px 16px #23294612;

    /* scrollbars (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: #b6c2d6 transparent;
}
/* scrollbars (WebKit) */
.inventory-preview-table-container::-webkit-scrollbar{
    height:10px; width:10px;
}
.inventory-preview-table-container::-webkit-scrollbar-thumb{
    border-radius:10px; background:#b6c2d6;
}
.inventory-preview-table-container::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

/* La tabla crece horizontal si hace falta, sin radius propio (lo tiene el contenedor) */
.inventory-preview-table{
    width:max-content;   /* crece en X si las columnas lo requieren */
    min-width:100%;      /* pero nunca menos que el contenedor */
    border-collapse:separate;
    border-spacing:0;
    background:transparent;   /* ← el fondo está en el contenedor */
    border-radius:0;          /* ← el radius está en el contenedor */
    overflow:visible;         /* ← no recortar dentro, deja que el contenedor lo haga */
    box-shadow:none;          /* ← la sombra también está en el contenedor */
    color:#232946;
    font-size:1rem;
}

/* Un poco más de aire en la última columna para evitar roce con el scroll */
.inventory-preview-table th:last-child,
.inventory-preview-table td:last-child{
    padding-right:20px;
}

/* Celdas/filas */
.inventory-preview-table th,
.inventory-preview-table td{
    padding:16px 12px;text-align:left;white-space:nowrap}
.inventory-preview-table th{
    background:#eaf3ff;color:#4b68a7;font-size:1.05rem;
    font-weight:600;border-bottom:2px solid #e1eaf2;letter-spacing:.02em}
.inventory-preview-table tr:nth-child(even){background:#f4f6fa}
.inventory-preview-table tr:nth-child(odd){background:#f6f8fb}
.inventory-preview-table tr:hover{background:#f1f5f9}
.inventory-preview-table td{
    border-bottom:1px solid #e1eaf2;font-size:.98rem}
.inventory-preview-table td:last-child{white-space:nowrap}

/*──────────────────────────────────────────────────────────
  RESPONSIVE
──────────────────────────────────────────────────────────*/
/* Breakpoints: no vuelvas a ocultar el scroll horizontal */
@media(max-width:1100px){
    .inventory-preview-table{ min-width:950px; }
}
@media(max-width:900px){
    .inventory-toolbar{ grid-template-columns:1fr; }
    .inventory-preview-table{ min-width:800px; }
}
@media(max-width:700px){
    :root{ --section-pad:12px; }
    .inventory-preview-table-container{
        margin-bottom:40px; max-height:calc(75vh - 40px);
    }
    .inventory-table-container{ padding:12px var(--section-pad) 0; }
    .inventory-preview-table th,
    .inventory-preview-table td{ padding:9px 7px; font-size:.98rem; }
    .add-product-button{ font-size:.96rem; padding:10px 16px; }
    .inventory-preview-table{ min-width:650px; font-size:.94rem; }
}
@media(max-width:550px){
    .inventory-preview-table{ min-width:550px; font-size:.92rem; }
}

/*──────────────────────────────────────────────────────────
  MODAL
──────────────────────────────────────────────────────────*/
.modal-backdrop{
    position:fixed;inset:0;z-index:199;
    background:rgba(35,41,70,.24);backdrop-filter:blur(4.5px) brightness(.97)}
.modal-content.modal-elevated{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    background:#fff;z-index:200;border-radius:24px;
    padding:2.3rem 1.2rem 2rem;max-width:95vw;width:auto;min-width:650px;
    max-height:88vh;overflow-y:auto;display:flex;flex-direction:column;align-items:center;
}
@media(max-width:1100px){
    .modal-content.modal-elevated{ width:98vw;max-width:98vw;min-width:unset; }
}
@media(max-width:700px){
    .modal-content.modal-elevated{ padding:1.1rem .2rem 1.2rem;width:99vw;max-width:99vw;border-radius:16px; }
}

/*──────────────────────────────────────────────────────────
  OTROS
──────────────────────────────────────────────────────────*/
.withdraw-btn:hover { filter:brightness(0.92); transform:scale(1.04); }

/*──────────────────────────────────────────────────────────
  CHECKBOX BONITO (tabla de inventario)
  - No requiere clases nuevas en Kotlin
  - Compatible con hover / focus / disabled
──────────────────────────────────────────────────────────*/

/* Tamaño y reset de estilo nativo */
.inventory-preview-table-container input[type="checkbox"]{
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #9db3d8;               /* borde base */
    border-radius: 6px;                       /* esquinas suaves */
    background: #ffffff;
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 0 rgba(0,0,0,.03);
    transition: background .18s, border-color .18s, box-shadow .18s, transform .06s;
    cursor: pointer;
    position: relative;                       /* ← necesario para ::after en indeterminate */
}

/* Hover sutil */
.inventory-preview-table-container input[type="checkbox"]:hover{
    border-color: #6a8fc7;
    box-shadow: 0 1px 6px rgba(59,113,202,.18);
}

/* Focus visible (teclado) */
.inventory-preview-table-container input[type="checkbox"]:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,113,202,.22);
    border-color: #3b71ca;
}

/* Estado checked con icono SVG de “tick” en máscara */
.inventory-preview-table-container input[type="checkbox"]:checked{
    background: #3b71ca;
    border-color: #3b71ca;
    box-shadow: 0 2px 10px rgba(59,113,202,.36);
}

/* Check nítido usando máscara SVG */
.inventory-preview-table-container input[type="checkbox"]:checked::after{
    content: "";
    display: block;
    width: 100%; height: 100%;
    background: #ffffff;
    -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
    <path fill='black' d='M7.6 14.2L3.8 10.5l-1.6 1.6 5.4 5.4L18 6.9 16.4 5.3 7.6 14.2z'/>\
  </svg>") center/14px 14px no-repeat;
    mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
    <path fill='black' d='M7.6 14.2L3.8 10.5l-1.6 1.6 5.4 5.4L18 6.9 16.4 5.3 7.6 14.2z'/>\
  </svg>") center/14px 14px no-repeat;
}

/* Estado indeterminado (rayita blanca centrada, sin masks) */
.inventory-preview-table-container input[type="checkbox"]:indeterminate{
    background:#3b71ca;
    border-color:#3b71ca;
}
.inventory-preview-table-container input[type="checkbox"]:indeterminate::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:12px; height:2px;
    background:#ffffff;
    border-radius:1px;
    transform:translate(-50%, -50%);
}

/* Disabled */
.inventory-preview-table-container input[type="checkbox"]:disabled{
    opacity:.5; cursor:not-allowed; box-shadow:none;
}

/* Fila marcada: refuerza el fondo de la celda fija izquierda */
.inventory-preview-table tr[aria-selected="true"] td:first-child{
    background: inherit; /* antes: #e6f0ff */
}